feat(segmented-control-item): enhance component's interactivity states #11477
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aPreciado88
added
pr ready for visual snapshots
aPreciado88
deleted the
aPreciado88/10013-segmented-control-item-enhance-component-interactivity-states
branch
jcfranco
reviewed
Feb 14, 2025
| @@ -45,6 +45,7 @@ | |||
| :host(:focus) { | |||
| @apply focus-inset; | |||
| outline-offset: -1px; | |||
| z-index: 1; | |||
There was a problem hiding this comment.
@aPreciado88 Can you use the --calcite-z-index token here? We want to make sure all z-indices use our predefined layers.
There was a problem hiding this comment.
You can reference #10013 since this would be a follow-up refactor.
benelan
added a commit
that referenced
this pull request
Feb 17, 2025
* origin/dev: (171 commits) chore(tip-manager): drop empty spec test (#11568) chore: release next feat(chip): enhance component's interactivity states (#11538) chore: release next fix(tooltip): close tooltips on prevented pointer move events (#11557) chore: release main (#11561) chore: release next revert: build(deps): update arcgis to ^4.33.0-next.13 (#11539) (#11559) fix(dialog, modal, popover, sheet): fixes an issue that caused extra containers to be lost after internal trap updates (#11556) chore: release main (#11551) build(deps): update arcgis to ^4.33.0-next.13 (#11539) chore: release next fix(input-date-picker): allow navigating between months using chevron actions in Safari (#11547) chore: release next fix(dialog, modal, sheet): preserve focus-trap extra containers across internal trap updates (#11548) chore: release next feat(segmented-control-item): enhance component's interactivity states (#11477) chore: release next refactor: drop deprecated loadable component utilities (#11479) docs: link to package readmes from root readme (#11531) ...
Merged
benelan
added a commit
that referenced
this pull request
Mar 26, 2025
🤖 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]>
benelan
added a commit
that referenced
this pull request
Mar 26, 2025
🤖 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]>
benelan
added a commit
that referenced
this pull request
Mar 26, 2025
🤖 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>
benelan
added a commit
that referenced
this pull request
May 14, 2025
🤖 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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #10013
Summary
Update focus ring
z-indexto sit on top of border container.