feat(button): enhance component's interactivity states#11590
feat(button): enhance component's interactivity states#11590aPreciado88 merged 6 commits intodevfrom
Conversation
…ciado88/9246-button-enhance-component-interactivity-states
jcfranco
left a comment
There was a problem hiding this comment.
Looking good, @aPreciado88! One more pass and I think this will be good to land.
| @apply border-solid; | ||
| border-width: var(--calcite-button-border-size, 1px); | ||
| &:hover { | ||
| @apply bg-foreground-2; |
There was a problem hiding this comment.
Can you use our custom CSS props here (maps to --calcite-color-foreground-2 and --calcite-color-foreground-3 respectively)? We're moving away from Tailwind utils, so new code can use CSS vars directly.
| button, | ||
| a { | ||
| &:hover { | ||
| background-color: var(--calcite-color-border-3); |
There was a problem hiding this comment.
Can you set the internal button CSS props? Some props are already set up to use them to help simplify styles.
Applies to other background-color, and possibly border-color, assignments.
|
|
||
| &:hover { | ||
| --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3); | ||
| stroke: var(--calcite-color-border-input); |
There was a problem hiding this comment.
Should this be border-color? stroke is an SVG prop. If so, can you set the internal border color CSS prop for consistency?
|
|
||
| it("should allow the CSS custom property to be overridden", async () => { | ||
| const overrideStyle = "rgba(255, 255, 0, 0.9)"; | ||
| const overrideStyle = "rgba(0, 0, 0, 0)"; |
There was a problem hiding this comment.
Some of these tests and assertions might no longer be valid. For example, this test checks if an override to --calcite-color-transparent-hover is applied to the focus state, which was removed. Can you double-check and restore the previous input test values after updating the tests?
There was a problem hiding this comment.
I removed the focus tests since they aren't needed anymore. Thank you for pointing that out!
…ciado88/9246-button-enhance-component-interactivity-states
**Related Issue:** [#9246](#9246) ## Summary - Remove `hover` styling from all `focus` states. - Update `button` demos page `outline-fill` section to use `appearance="outline-fill"` instead of `appearance="outline"`. - `kind="neutral" appearance="solid"`: - Update `hover` `background-color` to `--calcite-color-border-3`. - Update `active` `background-color` to `--calcite-color-border-2`. - `kind="neutral" appearance="outline-fill | outline"`: - Update all `hover` stroke colors to `--calcite-color-border-input`. - Update all `active` stroke colors to `--calcite-color-text-3`. - `appearance="outline-fill"`: - Update `hover` to a `--calcite-color-foreground-2` `background` change instead of a stroke width change. - Update `active` to a `--calcite-color-foreground-3` `background` change instead of a stroke width change. - `appearance="outline"`: - Update `hover` to a `--calcite-color-transparent-hover` `background` change instead of a stroke width change. - Update `active` to a `--calcite-color-transparent-press` `background` change instead of a stroke width change.
🤖 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/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (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/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (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/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (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/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (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/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (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 <no-reply@benelan.dev>
🤖 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/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (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/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (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/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (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/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (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/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (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 <no-reply@benelan.dev>
🤖 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/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (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/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (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/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (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/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (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/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (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 <no-reply@benelan.dev> Co-authored-by: Calcite Admin <calcite-admin@esri.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🤖 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/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (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/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (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/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (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/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (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/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (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 <no-reply@benelan.dev> Co-authored-by: Calcite Admin <calcite-admin@esri.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🤖 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/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (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/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (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/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (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/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (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/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (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 <no-reply@benelan.dev> Co-authored-by: Calcite Admin <calcite-admin@esri.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Related Issue: #9246
Summary
Remove
hoverstyling from allfocusstates.Update
buttondemos pageoutline-fillsection to useappearance="outline-fill"instead ofappearance="outline".kind="neutral" appearance="solid":hoverbackground-colorto--calcite-color-border-3.activebackground-colorto--calcite-color-border-2.kind="neutral" appearance="outline-fill | outline":hoverstroke colors to--calcite-color-border-input.activestroke colors to--calcite-color-text-3.appearance="outline-fill":hoverto a--calcite-color-foreground-2backgroundchange instead of a stroke width change.activeto a--calcite-color-foreground-3backgroundchange instead of a stroke width change.appearance="outline":hoverto a--calcite-color-transparent-hoverbackgroundchange instead of a stroke width change.activeto a--calcite-color-transparent-pressbackgroundchange instead of a stroke width change.