From 9aa58017ff5e7aa7709bb17739a4e2ee091368d5 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 27 Nov 2024 06:49:00 +0000 Subject: [PATCH 1/3] chore(react): update segmented control style use token v2 --- .../src/components/SegmentedControl/index.css | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css index 528ec49f8..23cece400 100644 --- a/packages/react/src/components/SegmentedControl/index.css +++ b/packages/react/src/components/SegmentedControl/index.css @@ -22,11 +22,11 @@ line-height: 22px; } -.charcoal-segmented-control-radio__label[aria-disabled]:not( - [aria-disabled='false'] - ) { - cursor: default; - opacity: 0.32; +.charcoal-segmented-control-radio__label:hover { + background-color: var(--charcoal-color-container-hover-a); +} +.charcoal-segmented-control-radio__label:active { + background-color: var(--charcoal-color-container-press-a); } .charcoal-segmented-control-radio__label[data-checked='true'] { @@ -34,6 +34,20 @@ color: var(--charcoal-color-text-on-primary-default); } +.charcoal-segmented-control-radio__label[data-checked='true']:hover { + background-color: var(--charcoal-color-container-primary-hover); +} +.charcoal-segmented-control-radio__label[data-checked='true']:active { + background-color: var(--charcoal-color-container-primary-press); +} + +.charcoal-segmented-control-radio__label[aria-disabled]:not( + [aria-disabled='false'] + ) { + cursor: default; + opacity: 0.32; +} + .charcoal-segmented-control-radio__input { position: absolute; From c60fbb0b07b889273f70120821e9ea1d2b934d4c Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Tue, 24 Dec 2024 20:21:51 +0000 Subject: [PATCH 2/3] chore(react): not disabled --- .../react/src/components/SegmentedControl/index.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css index 23cece400..45eb35d17 100644 --- a/packages/react/src/components/SegmentedControl/index.css +++ b/packages/react/src/components/SegmentedControl/index.css @@ -22,10 +22,10 @@ line-height: 22px; } -.charcoal-segmented-control-radio__label:hover { +.charcoal-segmented-control-radio__label:not([aria-disabled='true']):hover { background-color: var(--charcoal-color-container-hover-a); } -.charcoal-segmented-control-radio__label:active { +.charcoal-segmented-control-radio__label:not([aria-disabled='true']):active { background-color: var(--charcoal-color-container-press-a); } @@ -34,10 +34,14 @@ color: var(--charcoal-color-text-on-primary-default); } -.charcoal-segmented-control-radio__label[data-checked='true']:hover { +.charcoal-segmented-control-radio__label:not( + [aria-disabled='true'] + )[data-checked='true']:hover { background-color: var(--charcoal-color-container-primary-hover); } -.charcoal-segmented-control-radio__label[data-checked='true']:active { +.charcoal-segmented-control-radio__label:not( + [aria-disabled='true'] + )[data-checked='true']:active { background-color: var(--charcoal-color-container-primary-press); } From 21296cab2f1c7dc40324dcf893a80a24800ee442 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 25 Dec 2024 08:00:06 +0000 Subject: [PATCH 3/3] fix(react): prevent style changes on hover and press when active --- .../react/src/components/SegmentedControl/index.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css index 45eb35d17..ebaea5569 100644 --- a/packages/react/src/components/SegmentedControl/index.css +++ b/packages/react/src/components/SegmentedControl/index.css @@ -34,17 +34,6 @@ color: var(--charcoal-color-text-on-primary-default); } -.charcoal-segmented-control-radio__label:not( - [aria-disabled='true'] - )[data-checked='true']:hover { - background-color: var(--charcoal-color-container-primary-hover); -} -.charcoal-segmented-control-radio__label:not( - [aria-disabled='true'] - )[data-checked='true']:active { - background-color: var(--charcoal-color-container-primary-press); -} - .charcoal-segmented-control-radio__label[aria-disabled]:not( [aria-disabled='false'] ) {