feat(dropdown): add component tokens #11465

alisonailea · 2025-02-05T23:04:47Z

Related Issue: #7180

Summary

Add Component Tokens

Dropdown

--calcite-dropdown-background-color

Dropdown Group

--calcite-dropdown-group-border-color: Specifies the color of the dropdown's border.
--calcite-dropdown-group-title-text-color: Specifies the color of the dropdown's title.

Dropdown Item

--calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered.
--calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active.
--calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered.
--calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active.
--calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active.
--calcite-dropdown-item-text-color: Specifies the color of the dropdown item text.

…okens

packages/calcite-components/src/components/dropdown/dropdown.scss

macandcheese · 2025-02-05T23:18:59Z

packages/calcite-components/src/components/dropdown-item/dropdown-item.scss

+ *
+ * @prop --calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered.
+ * @prop --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active.
+ * @prop --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. 


Nitpick: It does seem like having a "base" for text-color but not icon-color here is a bit unexpected if there is a hover state for icon-color. These would be the icon-start/end right?

There could be a need to have those be distinct and independent from other overrides like the selection icon color, but we can add as requested!

I agree but I think we should wait for our customers to tell us.

While testing the CSS variables/tokens I'm also observing the same. This seems odd, and when I read the CSS variable I assumed it was related to the icon-start and icon-end props. We do this for other components, such as tab-title, maybe we need to also accommodate for dropdown-item for consistency.

macandcheese

Looks good, just some small comments!

macandcheese · 2025-02-05T23:19:48Z

packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx

@@ -135,13 +136,13 @@ export class DropdownGroup extends LitElement {

  override render(): JsxNode {
    const groupTitle = this.groupTitle ? (
-      <span ariaHidden="true" class="dropdown-title">
+      <span ariaHidden="true" class={CSS.title}>


…mp/dropdown # Conflicts: # packages/calcite-components/src/components/dropdown/dropdown.e2e.ts # packages/calcite-components/src/custom-theme.stories.ts

driskull

👍 💯

geospatialem · 2025-02-12T20:00:19Z

packages/calcite-components/src/components/dropdown-item/dropdown-item.scss

+ * @prop --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active.
+ * @prop --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. 
+ * @prop --calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active.
+ * @prop --calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active.


@alisonailea It seems this also pertains to on hover, is that expected?

…11465) **Related Issue:** #7180 ## Summary Add Component Tokens ### Dropdown --calcite-dropdown-background-color ### Dropdown Group --calcite-dropdown-group-border-color: Specifies the color of the dropdown's border. --calcite-dropdown-group-title-text-color: Specifies the color of the dropdown's title. ### Dropdown Item --calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered. --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active. --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. --calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active. --calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active. --calcite-dropdown-item-text-color: Specifies the color of the dropdown item text.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.0.1</summary> ## [3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) ### Bug Fixes * Allow global focus color token to inherit fallback value ([#11711](#11711)) ([a732c8d](a732c8d)) </details> <details><summary>@esri/calcite-ui-icons: 4.1.0</summary> ## [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) ### Features * Add browser join and browser plus ([#11779](#11779)) ([8f69b2d](8f69b2d)) * Update check ([#11799](#11799)) ([5058939](5058939)) * Add language-2 ([#11739](#11739)) ([989df67](989df67)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.1</summary> ## [2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) **Note:** Version bump only for package @esri/eslint-plugin-calcite-components </details> <details><summary>@esri/calcite-components: 3.1.0</summary> ## [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) ### Features * **accordion:** Add new component tokens and deprecate old tokens ([#11390](#11390)) ([fdf3e61](fdf3e61)) * **action:** Enhance component's interactivity states ([#11478](#11478)) ([aad98df](aad98df)) * **block, block-section:** Add `expanded` property and deprecate `open` property ([#11582](#11582)) ([999f532](999f532)) * **button:** Enhance component's interactivity states ([#11590](#11590)) ([23a62ca](23a62ca)) * **chip:** Deprecate `pressed` in favor of `press` ([#11389](#11389)) ([c905f9f](c905f9f)) * **chip:** Enhance component's interactivity states ([#11538](#11538)) ([8db5697](8db5697)) * **combobox-item:** Add component tokens ([#11645](#11645)) ([9cbd155](9cbd155)) * **combobox-item:** Update idle icons ([#11801](#11801)) ([034f430](034f430)) * **combobox-item:** Update interactive state ([#11647](#11647)) ([19d7c43](19d7c43)) * **combobox-item:** Update selection icons ([#11726](#11726)) ([723fd22](723fd22)) * **combobox, combobox-item-group:** Add component tokens ([#11623](#11623)) ([8215314](8215314)) * **dropdown, dropdown-item, dropdown-group:** Add component tokens ([#11465](#11465)) ([85f9378](85f9378)) * **dropdown:** Add `offsetDistance` and `offsetSkidding` properties ([#11614](#11614)) ([3381040](3381040)) * **fab:** Add component tokens ([#11723](#11723)) ([d436514](d436514)) * **flow-item:** Expose `FlowItemLike` type ([#11791](#11791)) ([28c7522](28c7522)) * **list-item, list:** Add `expanded` property and deprecate `open` property ([#11003](#11003)) ([c80c44c](c80c44c)) * **rating:** Enhance component's interactivity states ([#11469](#11469)) ([11d83f6](11d83f6)) * **segmented-control-item:** Enhance component's interactivity states ([#11477](#11477)) ([f025330](f025330)) * **split-button:** Make downloadable and linkable ([#11520](#11520)) ([fb3e1dc](fb3e1dc)) * **tab-title:** Enhance component's interactivity states ([#11493](#11493)) ([88a5260](88a5260)) ### Bug Fixes * **card-group:** Restore default gap spacing ([#11638](#11638)) ([a554598](a554598)) * **dropdown-group:** Fix error caused by early removal ([#11612](#11612)) ([2dcef25](2dcef25)) * **panel:** Apply custom styles correctly to header actions ([#11495](#11495)) ([5e84892](5e84892)) * Set floating-ui elements max size set to the view ([#11577](#11577)) ([b3ffd7f](b3ffd7f)) * **tabs:** Redisplay close button when more than one tab is closable ([#11492](#11492)) ([ae8064e](ae8064e)) * **text-area:** Fix error caused by internal measuring on disconnect ([#11751](#11751)) ([810f79e](810f79e)) * **tooltip:** Close tooltip when hovering out of an iframe ([#11600](#11600)) ([93a5692](93a5692)) * **tooltip:** Do not open after the pointer has moved off of the reference element ([#11599](#11599)) ([33cadc8](33cadc8)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to 2.0.1 </details> <details><summary>@esri/calcite-components-react: 3.1.0</summary> ## [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.1.0-next.31 to 3.1.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <[email protected]>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.0.1</summary> [3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * Allow global focus color token to inherit fallback value ([#11711](#11711)) ([a732c8d](a732c8d)) </details> <details><summary>@esri/calcite-ui-icons: 4.1.0</summary> [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * Add browser join and browser plus ([#11779](#11779)) ([8f69b2d](8f69b2d)) * Update check ([#11799](#11799)) ([5058939](5058939)) * Add language-2 ([#11739](#11739)) ([989df67](989df67)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.1</summary> [2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) **Note:** Version bump only for package @esri/eslint-plugin-calcite-components </details> <details><summary>@esri/calcite-components: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * **accordion:** Add new component tokens and deprecate old tokens ([#11390](#11390)) ([fdf3e61](fdf3e61)) * **action:** Enhance component's interactivity states ([#11478](#11478)) ([aad98df](aad98df)) * **block, block-section:** Add `expanded` property and deprecate `open` property ([#11582](#11582)) ([999f532](999f532)) * **button:** Enhance component's interactivity states ([#11590](#11590)) ([23a62ca](23a62ca)) * **chip:** Deprecate `pressed` in favor of `press` ([#11389](#11389)) ([c905f9f](c905f9f)) * **chip:** Enhance component's interactivity states ([#11538](#11538)) ([8db5697](8db5697)) * **combobox-item:** Add component tokens ([#11645](#11645)) ([9cbd155](9cbd155)) * **combobox-item:** Update idle icons ([#11801](#11801)) ([034f430](034f430)) * **combobox-item:** Update interactive state ([#11647](#11647)) ([19d7c43](19d7c43)) * **combobox-item:** Update selection icons ([#11726](#11726)) ([723fd22](723fd22)) * **combobox, combobox-item-group:** Add component tokens ([#11623](#11623)) ([8215314](8215314)) * **dropdown, dropdown-item, dropdown-group:** Add component tokens ([#11465](#11465)) ([85f9378](85f9378)) * **dropdown:** Add `offsetDistance` and `offsetSkidding` properties ([#11614](#11614)) ([3381040](3381040)) * **fab:** Add component tokens ([#11723](#11723)) ([d436514](d436514)) * **flow-item:** Expose `FlowItemLike` type ([#11791](#11791)) ([28c7522](28c7522)) * **list-item, list:** Add `expanded` property and deprecate `open` property ([#11003](#11003)) ([c80c44c](c80c44c)) * **rating:** Enhance component's interactivity states ([#11469](#11469)) ([11d83f6](11d83f6)) * **segmented-control-item:** Enhance component's interactivity states ([#11477](#11477)) ([f025330](f025330)) * **split-button:** Make downloadable and linkable ([#11520](#11520)) ([fb3e1dc](fb3e1dc)) * **tab-title:** Enhance component's interactivity states ([#11493](#11493)) ([88a5260](88a5260)) * **card-group:** Restore default gap spacing ([#11638](#11638)) ([a554598](a554598)) * **dropdown-group:** Fix error caused by early removal ([#11612](#11612)) ([2dcef25](2dcef25)) * **panel:** Apply custom styles correctly to header actions ([#11495](#11495)) ([5e84892](5e84892)) * Set floating-ui elements max size set to the view ([#11577](#11577)) ([b3ffd7f](b3ffd7f)) * **tabs:** Redisplay close button when more than one tab is closable ([#11492](#11492)) ([ae8064e](ae8064e)) * **text-area:** Fix error caused by internal measuring on disconnect ([#11751](#11751)) ([810f79e](810f79e)) * **tooltip:** Close tooltip when hovering out of an iframe ([#11600](#11600)) ([93a5692](93a5692)) * **tooltip:** Do not open after the pointer has moved off of the reference element ([#11599](#11599)) ([33cadc8](33cadc8)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to 2.0.1 </details> <details><summary>@esri/calcite-components-react: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.1.0-next.31 to 3.1.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <[email protected]>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.0.1</summary> [3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * Allow global focus color token to inherit fallback value ([#11711](#11711)) ([a732c8d](a732c8d)) </details> <details><summary>@esri/calcite-ui-icons: 4.1.0</summary> [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * Add browser join and browser plus ([#11779](#11779)) ([8f69b2d](8f69b2d)) * Update check ([#11799](#11799)) ([5058939](5058939)) * Add language-2 ([#11739](#11739)) ([989df67](989df67)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.1</summary> [2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) **Note:** Version bump only for package @esri/eslint-plugin-calcite-components </details> <details><summary>@esri/calcite-components: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * **accordion:** Add new component tokens and deprecate old tokens ([#11390](#11390)) ([fdf3e61](fdf3e61)) * **action:** Enhance component's interactivity states ([#11478](#11478)) ([aad98df](aad98df)) * **block, block-section:** Add `expanded` property and deprecate `open` property ([#11582](#11582)) ([999f532](999f532)) * **button:** Enhance component's interactivity states ([#11590](#11590)) ([23a62ca](23a62ca)) * **chip:** Deprecate `pressed` in favor of `press` ([#11389](#11389)) ([c905f9f](c905f9f)) * **chip:** Enhance component's interactivity states ([#11538](#11538)) ([8db5697](8db5697)) * **combobox-item:** Add component tokens ([#11645](#11645)) ([9cbd155](9cbd155)) * **combobox-item:** Update idle icons ([#11801](#11801)) ([034f430](034f430)) * **combobox-item:** Update interactive state ([#11647](#11647)) ([19d7c43](19d7c43)) * **combobox-item:** Update selection icons ([#11726](#11726)) ([723fd22](723fd22)) * **combobox, combobox-item-group:** Add component tokens ([#11623](#11623)) ([8215314](8215314)) * **dropdown, dropdown-item, dropdown-group:** Add component tokens ([#11465](#11465)) ([85f9378](85f9378)) * **dropdown:** Add `offsetDistance` and `offsetSkidding` properties ([#11614](#11614)) ([3381040](3381040)) * **fab:** Add component tokens ([#11723](#11723)) ([d436514](d436514)) * **flow-item:** Expose `FlowItemLike` type ([#11791](#11791)) ([28c7522](28c7522)) * **list-item, list:** Add `expanded` property and deprecate `open` property ([#11003](#11003)) ([c80c44c](c80c44c)) * **rating:** Enhance component's interactivity states ([#11469](#11469)) ([11d83f6](11d83f6)) * **segmented-control-item:** Enhance component's interactivity states ([#11477](#11477)) ([f025330](f025330)) * **split-button:** Make downloadable and linkable ([#11520](#11520)) ([fb3e1dc](fb3e1dc)) * **tab-title:** Enhance component's interactivity states ([#11493](#11493)) ([88a5260](88a5260)) * **card-group:** Restore default gap spacing ([#11638](#11638)) ([a554598](a554598)) * **dropdown-group:** Fix error caused by early removal ([#11612](#11612)) ([2dcef25](2dcef25)) * **panel:** Apply custom styles correctly to header actions ([#11495](#11495)) ([5e84892](5e84892)) * Set floating-ui elements max size set to the view ([#11577](#11577)) ([b3ffd7f](b3ffd7f)) * **tabs:** Redisplay close button when more than one tab is closable ([#11492](#11492)) ([ae8064e](ae8064e)) * **text-area:** Fix error caused by internal measuring on disconnect ([#11751](#11751)) ([810f79e](810f79e)) * **tooltip:** Close tooltip when hovering out of an iframe ([#11600](#11600)) ([93a5692](93a5692)) * **tooltip:** Do not open after the pointer has moved off of the reference element ([#11599](#11599)) ([33cadc8](33cadc8)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to 2.0.1 </details> <details><summary>@esri/calcite-components-react: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2025-03-26) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.1.0-next.31 to 3.1.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <[email protected]> Co-authored-by: Calcite Admin <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

alisonailea added 4 commits February 3, 2025 10:57

feat(dropdown, dropdown-item, dropdown-group): add component tokens

b8f3693

test(dropdown, dropdown-group, dropdown-item): add themed component t…

ba0cdf8

…okens

test(dropdown): add custom theme story and tokens

e3cf95f

docs(dropdown): fix token docs

0f12334

github-actions bot assigned alisonailea Feb 5, 2025

github-actions bot added the enhancement Issues tied to a new feature or request. label Feb 5, 2025

alisonailea requested review from jcfranco, driskull and macandcheese February 5, 2025 23:05

macandcheese reviewed Feb 5, 2025

View reviewed changes

packages/calcite-components/src/components/dropdown/dropdown.scss Outdated Show resolved Hide resolved

macandcheese reviewed Feb 5, 2025

View reviewed changes

macandcheese approved these changes Feb 5, 2025

View reviewed changes

macandcheese reviewed Feb 5, 2025

View reviewed changes

alisonailea mentioned this pull request Feb 6, 2025

Design token phase II - Integration across components #7180

Open

Merge branch 'dev' of github.com:Esri/calcite-design-system into astu…

f40a89a

…mp/dropdown # Conflicts: # packages/calcite-components/src/components/dropdown/dropdown.e2e.ts # packages/calcite-components/src/custom-theme.stories.ts

alisonailea added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 10, 2025

fix(dropdown): extra resource name

9fb51de

alisonailea added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Feb 12, 2025

driskull approved these changes Feb 12, 2025

View reviewed changes

alisonailea merged commit e6d405b into dev Feb 12, 2025
14 checks passed

alisonailea deleted the astump/7180-dropdown branch February 12, 2025 17:34

github-actions bot added this to the 2025-02-25 - Feb Milestone milestone Feb 12, 2025

geospatialem reviewed Feb 12, 2025

View reviewed changes

calcite-admin mentioned this pull request Mar 26, 2025

chore: release main #11809

Merged

benelan mentioned this pull request Mar 26, 2025

chore: cherry pick release commit from main #11813

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(dropdown): add component tokens #11465

feat(dropdown): add component tokens #11465

Uh oh!

alisonailea commented Feb 5, 2025

Uh oh!

Uh oh!

macandcheese Feb 5, 2025

Uh oh!

alisonailea Feb 12, 2025

Uh oh!

geospatialem Feb 12, 2025

Uh oh!

macandcheese left a comment

Uh oh!

macandcheese Feb 5, 2025

Uh oh!

driskull left a comment

Uh oh!

Uh oh!

geospatialem Feb 12, 2025

Uh oh!

Uh oh!

feat(dropdown): add component tokens #11465

feat(dropdown): add component tokens #11465

Uh oh!

Conversation

alisonailea commented Feb 5, 2025

Summary

Dropdown

Dropdown Group

Dropdown Item

Uh oh!

Uh oh!

macandcheese Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

alisonailea Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

geospatialem Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

macandcheese left a comment

Choose a reason for hiding this comment

Uh oh!

macandcheese Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

driskull left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

geospatialem Feb 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!