[Dropdown Item Group] update design for 4.0

[geospatialem]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Provide consistent design styling updates to improve the component's UI/UX and consistency across the design system.

Acceptance Criteria

• Change group-title color to --calcite-color-text-1
• Change padding-block of group-title at each scale
• Use a single divider between groups. padding-inline of divider matches that of Dropdown Item at each scale.
• Add padding-block to divider to provide space between it and adjacent Dropdown Items.

See Figma file for full specs. Medium scale screenshot below.

Relevant Info

Part of 4.0's Phase III

Which Component

dropdown-item-group

Example Use Case

No response

Priority impact

impact - p3 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

monday.com sync: #9367154651