feat(segmented-control-item): enhance component's interactivity states by aPreciado88 · Pull Request #11477 · Esri/calcite-design-system

aPreciado88 · 2025-02-06T22:09:58Z

Related Issue: #10013

Summary

Update focus ring z-index to sit on top of border container.

Elijbet

🛠️🎯 LGTM

jcfranco · 2025-02-14T22:55:56Z

 :host(:focus) {
  @apply focus-inset;
  outline-offset: -1px;
+  z-index: 1;


@aPreciado88 Can you use the --calcite-z-index token here? We want to make sure all z-indices use our predefined layers.

@jcfranco I'll update this, can I re use #10013 or should I create a new issue?

You can reference #10013 since this would be a follow-up refactor.

* 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) ...

#11477) **Related Issue:** [#10013](#10013) ## Summary Update focus ring `z-index` to sit on top of border container.

🤖 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>

feat(segmented-control-item): enhance component's interactivity states

4222df1

github-actions Bot assigned aPreciado88 Feb 6, 2025

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

aPreciado88 added this to the 2025-02-25 - Feb Milestone milestone Feb 6, 2025

Elijbet approved these changes Feb 13, 2025

View reviewed changes

aPreciado88 added pr ready for visual snapshots Adding this label will run visual snapshot testing. skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Feb 13, 2025

aPreciado88 merged commit 438d6e5 into dev Feb 13, 2025

aPreciado88 deleted the aPreciado88/10013-segmented-control-item-enhance-component-interactivity-states branch February 13, 2025 18:44

jcfranco reviewed Feb 14, 2025

View reviewed changes

benelan pushed a commit that referenced this pull request Mar 26, 2025

feat(segmented-control-item): enhance component's interactivity states (

f025330

#11477) **Related Issue:** [#10013](#10013) ## Summary Update focus ring `z-index` to sit on top of border container.

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

feat(segmented-control-item): enhance component's interactivity states#11477

feat(segmented-control-item): enhance component's interactivity states#11477
aPreciado88 merged 1 commit intodevfrom
aPreciado88/10013-segmented-control-item-enhance-component-interactivity-states

aPreciado88 commented Feb 6, 2025

Uh oh!

Elijbet left a comment •

edited

Loading

Uh oh!

jcfranco Feb 14, 2025

Uh oh!

aPreciado88 Feb 14, 2025

Uh oh!

jcfranco Feb 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

aPreciado88 commented Feb 6, 2025

Summary

Uh oh!

Elijbet left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcfranco Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

aPreciado88 Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

jcfranco Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Elijbet left a comment •

edited

Loading