feat(action, action-bar, action-group, action-menu, action-pad): add component tokens #10058

alisonailea · 2024-08-13T23:26:11Z

Related Issue: #7180

Summary

Action

--calcite-action-indicator-color: Specifies the component's indicator color.
--calcite-action-background-color: Specifies the component's background color.
--calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.
--calcite-action-background-color-pressed: Specifies the component's background color when active.
--calcite-action-text-color: Specifies the text color of the component.
--calcite-action-text-color-pressed: Specifies the component's text color when hovered.

Action Bar

--calcite-action-bar-expanded-max-width: Use When layout is "vertical", specifies the expanded max width of the component.

Action Group

--calcite-action-group-border-color: Specifies the component's border color when used in a calcite-action-bar or calcite-action-menu.
--calcite-action-group-columns: Specifies the component's grid-template-columns when the layout property is "grid".
--calcite-action-group-gap: Specifies the component's gap (gutters) between rows and columns and padding around the component, when the layout property is "grid".
--calcite-action-group-padding: [Deprecated] Use --calcite-action-group-gap. Sets the padding when the layout property is "grid".

Action Pad

--calcite-action-pad-corner-radius: Specifies the component's border radius.
--calcite-action-pad-expanded-max-width: Specifies the component's maximum width when expanded and the layout is "vertical".

…ive/7180-action

…active/7180-action

…openPR/7180-action # Conflicts: # packages/calcite-components/src/demos/_assets/demo-theme.ts # packages/calcite-components/src/tests/utils/cssTokenValues.ts

…texd action-group styles

jcfranco · 2024-08-27T17:06:12Z

packages/calcite-components/src/custom-theme.stories.ts

+  return kitchenSink(args);
+};
+
+export const theming_TestOnly = (): string => {


Late to the party, but new screenshot tests don't need the _TestOnly suffix anymore.

I'd like to somehow distinguish between the story that is designed to allow the user to change the variables vs variables that are set to a new color theme for testing purposes already.

That's fine, but we're no longer using that specific suffix (see #9085 for context). Calling this out shouldn't be necessary since most stories are primarily used for screenshot tests.

I think the name for the interactive story already conveys the separation well, and we could consider adopting this approach for other interactive stories too.

packages/calcite-components/src/components/action-group/action-group.stories.ts

…oating-point-issue * origin/dev: chore: release next feat(icon): add component tokens (#10062) refactor: fix `FunctionalComponent` return types (#10164) chore: release next fix(input-date-picker): prevent console error when using a lang (#10162) feat(action, action-bar, action-group, action-menu, action-pad): add component tokens (#10058) refactor(stylelint): refactor to and enforce kebab-casing for Sass utilities (#10147) chore: release next test(popover): unskip focusable test (#10138) fix(filter): fix setFocus method (#10149)

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.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>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.31.0</summary> ## [3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0) (2024-08-28) ### Features * Add close-caption, transcript, flag, and flag-slash ([#10039](#10039)) ([85c7d69](85c7d69)) * Add layer-connection ([#10067](#10067)) ([46dd2ee](46dd2ee)) ### Bug Fixes * Update close-caption, and transcript ([#10077](#10077)) ([2e86904](2e86904)) </details> <details><summary>@esri/calcite-components: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0) (2024-08-28) ### Features * **accordion, accordion-item:** Add component tokens ([#9861](#9861)) ([48f7f08](48f7f08)) * **action, action-bar, action-group, action-menu, action-pad:** Add component tokens ([#10058](#10058)) ([de96c24](de96c24)) * **alert:** Add 'queue' property to prioritize the ordering of alerts when opened ([#10029](#10029)) ([3aa47a4](3aa47a4)) * **combobox-item:** Add `heading` property (deprecates `textLabel`) and add `label` property ([#9987](#9987)) ([90920a0](90920a0)) * **dialog:** Add CSS variables to offset the position ([#9904](#9904)) ([660f0c5](660f0c5)) * **dialog:** Add escapeDisabled property ([#10081](#10081)) ([1ca8fba](1ca8fba)) * **dialog:** Add outsideCloseDisabled property ([#9978](#9978)) ([f1d89b9](f1d89b9)) * **dialog:** Add resizable and dragEnabled properties ([#9804](#9804)) ([e3e499e](e3e499e)) * **icon:** Add component tokens ([#10062](#10062)) ([34d5689](34d5689)) * **input-time-zone:** Display selected time zone country in region mode selection ([#9988](#9988)) ([1575729](1575729)) * **loader:** Add `determinate-value` type ([#9957](#9957)) ([7f21726](7f21726)) * **panel:** Add '--calcite-panel-content-space' style ([#10117](#10117)) ([0e3ebcb](0e3ebcb)) * **table:** Update multiple selection iconography ([#10125](#10125)) ([f2b2016](f2b2016)) * **tooltip:** Allow focusing and clicking on interactive elements within a tooltip ([#9914](#9914)) ([a3c144c](a3c144c)) ### Bug Fixes * **accordion-item:** Align focus styles across browsers ([#9944](#9944)) ([2e29b42](2e29b42)) * **alert:** Properly form a queue of alerts ([#10032](#10032)) ([b24d6ac](b24d6ac)) * **color-picker:** Prevent text selection when using color sliders/field ([#10043](#10043)) ([ab33e4d](ab33e4d)) * **combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area:** Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging ([#10079](#10079)) ([78bc096](78bc096)) * **combobox:** Update placeholder-icon color ([#9956](#9956)) ([d916ca4](d916ca4)) * **dialog, flow-item:** Slotted closable panels should not close the component ([#10130](#10130)) ([ce2513d](ce2513d)) * **dialog:** Allow shell to be slotted inside ([#10118](#10118)) ([ea3a6de](ea3a6de)) * **dialog:** Fix escapeDisabled when the escape key is pressed on the panel ([#10097](#10097)) ([9a5f1f1](9a5f1f1)) * Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit properly ([#9958](#9958)) ([7e2764f](7e2764f)) * **filter:** Fix setFocus method ([#10149](#10149)) ([f4a959a](f4a959a)) * **input-date-picker:** Fix selection for the "bs" and "it-CH" locales ([#9976](#9976)) ([368d9e2](368d9e2)) * **input-date-picker:** Prevent console error when using a lang ([#10162](#10162)) ([e7bf604](e7bf604)) * **input-time-zone:** Translate region names ([#9940](#9940)) ([f975adb](f975adb)) * **input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area:** Provide clear field error messaging for AT ([#9880](#9880)) ([46ad7d2](46ad7d2)) * **input, input-number, input-text:** No longer set focus when a validation message is clicked ([#10008](#10008)) ([529bb5a](529bb5a)) * **label:** Prevent focusing and toggling elements slotted within a label when a text selection occurs ([#9990](#9990)) ([49d6ae1](49d6ae1)) * **list-item:** Prevent scrolling when item is focused. ([#9948](#9948)) ([eab1e06](eab1e06)) * **panel:** Define heading and description line height ([#10085](#10085)) ([5478eb9](5478eb9)) * **slider:** Prevent text selection when using the slider ([#10073](#10073)) ([04bf325](04bf325)) * **slider:** Resolve step & snap floating point precision ([#10148](#10148)) ([613bc47](613bc47)) * **stepper-item:** Update component to take full width when parent's layout is "vertical" ([#10009](#10009)) ([03a5a30](03a5a30)) * **tree,tree-item:** Replace checkbox with div and a11y attributes ([#9849](#9849)) ([b1ac951](b1ac951)) ### Performance Improvements * **input-time-zone:** Improve memory footprint by leveraging browser cache and releasing utils after their use ([#9945](#9945)) ([a3d2141](a3d2141)) ### Reverts * "build(deps): remove unused cheerio package ([#10049](#10049))" ([#10057](#10057)) ([d271ab1](d271ab1)) * Add stories ([#10131](#10131)) ([e3a6590](e3a6590)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0 </details> <details><summary>@esri/calcite-components-angular: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0 </details> <details><summary>@esri/calcite-components-react: 2.12.0</summary> ## [2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0) (2024-08-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.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> **Related Issue:** # ## Summary Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

**Related Issue:** #7180 ## Summary Remove dangling HTML snippet found here #10058 (comment)

**Related Issue:** #7180 ## Summary Provide consistency and alignment in our docs across the design system for component design tokens, also in alignment with our [component token example PR](#10058). 📚

driskull · 2024-12-04T17:16:29Z

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

+
+:host([active]) {
+  .button {
+    &,


@alisonailea we may have a bug here. Issue incoming.

#10982 cc @alisonailea

macandcheese · 2024-12-04T18:05:01Z

packages/calcite-components/src/components/action-bar/action-bar.scss

@@ -3,59 +3,53 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
- * @prop --calcite-action-bar-expanded-max-width: When `layout` is `"vertical"`, specifies the expanded max width of the component.
+ * @prop --calcite-action-bar-expanded-max-width: Specifies the maximum width of the component when it's `layout` is `"vertical"`.
+ * @prop --calcite-action-bar-items-space: Specifies the space between slotted components in the component.


Do we need this prop? From a design standpoint, not sure what the reasoning for having this capability is? cc @ashetland @SkyeSeitz

Agreed not needed imo

**Related Issue:** #7180 ## Summary Provide consistency and alignment in our docs across the design system for component design tokens, also in alignment with our #10058 and #10430. 📚 Also of note, there was an extra `*` in the `navigation logo` [internal doc](https://next-preview.sites.afd.arcgis.com/calcite-design-system/components/navigation-logo/#styles).

alisonailea added 17 commits July 26, 2024 18:31

feat(action): add component tokens

89ce9f6

chore(action-bar): merge with dev

defca00

Merge branch 'dev' of github.com:Esri/calcite-components into ali-act…

e69d328

…ive/7180-action

Merge branch 'dev' of github.com:Esri/calcite-components into ali-act…

4d3f0d1

…ive/7180-action

Merge branch 'dev' of github.com:Esri/calcite-components into ali-act…

fb6dbe9

…ive/7180-action

fix(action-bar): tokens tests and vrt

16cd0de

fix(action-group): tokens tests and vrt

e74166c

fix(action-menu): tokens tests and chromatic

ddf88ca

fix(action-pad): tokens tests and chromatic

a5c7a27

fix(action): tokens tests, demos and chromatic

556d63c

chore(demo-theme, cssTokenValues): add token options

eca3c74

Merge branch 'dev' of github.com:Esri/calcite-components into ali-act…

a9a4e71

…ive/7180-action

fix(action): text color pressed

a528521

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

af92dac

…active/7180-action

fix(action): update text color pressed name

63c6a60

chore(cssTokenValues): add width & height default tests

f631bfa

fix(action-menu, action-group, action-bar): simplify tokens

fa60346

alisonailea self-assigned this Aug 13, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Aug 13, 2024

alisonailea requested review from jcfranco, driskull, macandcheese and a team August 13, 2024 23:29

alisonailea added 4 commits August 13, 2024 18:36

fix(action-group): cleanup styles and tests

3e7dc42

test(themed): update helpers

16fb5ae

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

f59b82b

…openPR/7180-action # Conflicts: # packages/calcite-components/src/demos/_assets/demo-theme.ts # packages/calcite-components/src/tests/utils/cssTokenValues.ts

test(action-pad, action-menu): fix e2e tests

3e16871

alisonailea added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 14, 2024

alisonailea added 2 commits August 14, 2024 16:10

test(action-pad): remove extranious token from tests

7f42e09

fix(action-group): provide token default/fallback

7c3aca4

fix(combobox): give variable a default

6ab08e0

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 Aug 24, 2024

fix(action-pad, action-menu, action-group, action-bar): simplify slot…

4ef2fbe

…texd action-group styles

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 Aug 26, 2024

alisonailea merged commit de96c24 into dev Aug 26, 2024
13 checks passed

alisonailea deleted the astump/7180-action branch August 26, 2024 15:07

github-actions bot added this to the 2024-08-27 - Aug Release milestone Aug 26, 2024

jcfranco reviewed Aug 27, 2024

View reviewed changes

alisonailea mentioned this pull request Aug 27, 2024

test(action-group): remove extraneous template #10167

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main #10171

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10172

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main (#10171) #10173

Closed

alisonailea added a commit that referenced this pull request Aug 28, 2024

test(action-group): remove extraneous template (#10167)

e1428c6

**Related Issue:** #7180 ## Summary Remove dangling HTML snippet found here #10058 (comment)

jcfranco mentioned this pull request Sep 12, 2024

feat(checkbox): add component tokens #10221

Merged

geospatialem mentioned this pull request Sep 13, 2024

[Action Pad] Horizontal action groups do not align #10307

Closed

6 tasks

geospatialem mentioned this pull request Sep 27, 2024

docs: component token description consistency #10430

Merged

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

driskull reviewed Dec 4, 2024

View reviewed changes

macandcheese reviewed Dec 4, 2024

View reviewed changes

geospatialem mentioned this pull request Dec 4, 2024

[Action] - Active syles are not present on actions with transparent appearance #10982

Closed

6 tasks

geospatialem mentioned this pull request Dec 16, 2024

docs: update component token description for consistency #11062

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(action, action-bar, action-group, action-menu, action-pad): add component tokens #10058

feat(action, action-bar, action-group, action-menu, action-pad): add component tokens #10058

alisonailea commented Aug 13, 2024 •

edited

Loading

jcfranco Aug 27, 2024

alisonailea Aug 27, 2024

jcfranco Aug 27, 2024

driskull Dec 4, 2024

geospatialem Dec 4, 2024

macandcheese Dec 4, 2024

SkyeSeitz Dec 4, 2024

feat(action, action-bar, action-group, action-menu, action-pad): add component tokens #10058

feat(action, action-bar, action-group, action-menu, action-pad): add component tokens #10058

Conversation

alisonailea commented Aug 13, 2024 • edited Loading

Summary

Action

Action Bar

Action Group

Action Pad

jcfranco Aug 27, 2024

Choose a reason for hiding this comment

alisonailea Aug 27, 2024

Choose a reason for hiding this comment

jcfranco Aug 27, 2024

Choose a reason for hiding this comment

driskull Dec 4, 2024

Choose a reason for hiding this comment

geospatialem Dec 4, 2024

Choose a reason for hiding this comment

macandcheese Dec 4, 2024

Choose a reason for hiding this comment

SkyeSeitz Dec 4, 2024

Choose a reason for hiding this comment

alisonailea commented Aug 13, 2024 •

edited

Loading