Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Update segmented control visual design #3289

Open
wants to merge 37 commits into
base: main
Choose a base branch
from
+170 −117
Open

chore: Update segmented control visual design #3289

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
b835054
apply new styles
at-susie Feb 12, 2025
2611f0f
Merge branch 'main' into update-segment-control
at-susie Feb 12, 2025
759eb2b
update design-token snapshot
at-susie Feb 12, 2025
e12a63b
Merge branch 'main' into update-segment-control
at-susie Feb 12, 2025
e74b688
chore: Update themes snapshots
georgylobko Feb 12, 2025
c94a89f
update hover text color to be consistent with button
at-susie Feb 12, 2025
5aba8d1
Update snapshots
gethinwebster Feb 13, 2025
14752aa
Merge branch 'main' into update-segment-control
at-susie Feb 13, 2025
2dedcea
restructure the use of variables
at-susie Feb 13, 2025
442c10c
Merge branch 'main' into update-segment-control
at-susie Feb 13, 2025
c99b364
Merge branch 'main' into update-segment-control
at-susie Feb 13, 2025
2db9e9b
update hover text color to be consistent with button
at-susie Feb 13, 2025
d0d235a
apply new styles
at-susie Feb 12, 2025
869c8b1
update design-token snapshot
at-susie Feb 12, 2025
8a3629a
chore: Update themes snapshots
georgylobko Feb 12, 2025
d16c91a
update hover text color to be consistent with button
at-susie Feb 12, 2025
5002614
Update snapshots
gethinwebster Feb 13, 2025
87b451f
restructure the use of variables
at-susie Feb 13, 2025
4e45ac5
update hover text color to be consistent with button
at-susie Feb 13, 2025
386a088
Merge branch 'update-segment-control' of https://github.com/cloudscap…
at-susie Feb 14, 2025
d12c633
improve the variable structure
at-susie Feb 14, 2025
bdc1763
Merge branch 'main' into update-segment-control
at-susie Feb 14, 2025
8d3ef29
clean up css
at-susie Feb 14, 2025
a812fae
update snapshots
at-susie Feb 14, 2025
892d574
Merge branch 'main' into update-segment-control
at-susie Feb 14, 2025
1e34a83
Merge branch 'main' into update-segment-control
at-susie Feb 17, 2025
b1be279
Merge branch 'main' into update-segment-control
at-susie Feb 18, 2025
e8616ec
Apply the refinements to classic as well
at-susie Feb 19, 2025
e654075
Merge branch 'main' into update-segment-control
at-susie Feb 19, 2025
35f0b26
clean up css
at-susie Feb 19, 2025
2342607
Merge branch 'update-segment-control' of https://github.com/cloudscap…
at-susie Feb 19, 2025
1ed6be9
Update snapshot test
at-susie Feb 19, 2025
7740f71
Update snapshot test
at-susie Feb 19, 2025
aeae8f9
Update unit test snapshot
at-susie Feb 19, 2025
09eea70
Adjust space for classic
at-susie Feb 19, 2025
1e3e06d
Fix divider height issue in compact
at-susie Feb 20, 2025
3deea6a
Update theme snapshot test
at-susie Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions src/__integ__/__snapshots__/themes.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
"color-text-pagination-page-number-default": "#545b64",
"color-text-segment-active": "#ffffff",
"color-text-segment-default": "#545b64",
"color-text-segment-hover": "#0073bb",
"color-text-segment-hover": "#16191f",
"color-text-small": "#687078",
"color-text-status-error": "#d13212",
"color-text-status-inactive": "#687078",
Expand Down Expand Up @@ -1101,7 +1101,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
"color-text-pagination-page-number-default": "#d5dbdb",
"color-text-segment-active": "#1a2029",
"color-text-segment-default": "#d5dbdb",
"color-text-segment-hover": "#00a1c9",
"color-text-segment-hover": "#fafafa",
"color-text-small": "#95a5a6",
"color-text-status-error": "#ff5d64",
"color-text-status-inactive": "#95a5a6",
Expand Down Expand Up @@ -1760,7 +1760,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
"color-text-pagination-page-number-default": "#545b64",
"color-text-segment-active": "#ffffff",
"color-text-segment-default": "#545b64",
"color-text-segment-hover": "#0073bb",
"color-text-segment-hover": "#16191f",
"color-text-small": "#687078",
"color-text-status-error": "#d13212",
"color-text-status-inactive": "#687078",
Expand Down Expand Up @@ -2419,7 +2419,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
"color-text-pagination-page-number-default": "#545b64",
"color-text-segment-active": "#ffffff",
"color-text-segment-default": "#545b64",
"color-text-segment-hover": "#0073bb",
"color-text-segment-hover": "#16191f",
"color-text-small": "#687078",
"color-text-status-error": "#d13212",
"color-text-status-inactive": "#687078",
Expand Down Expand Up @@ -2749,7 +2749,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-background-segment-active": "#006ce0",
"color-background-segment-default": "#ffffff",
"color-background-segment-disabled": "#ffffff",
"color-background-segment-hover": "#ffffff",
"color-background-segment-hover": "#f0fbff",
"color-background-slider-error-pressed": "#700000",
"color-background-slider-handle-active": "#004a9e",
"color-background-slider-handle-default": "#006ce0",
Expand Down Expand Up @@ -3078,7 +3078,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-text-pagination-page-number-default": "#424650",
"color-text-segment-active": "#ffffff",
"color-text-segment-default": "#424650",
"color-text-segment-hover": "#006ce0",
"color-text-segment-hover": "#002b66",
"color-text-small": "#656871",
"color-text-status-error": "#db0000",
"color-text-status-inactive": "#656871",
Expand Down Expand Up @@ -3265,7 +3265,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"space-scaled-xxs": "4px",
"space-scaled-xxxl": "40px",
"space-scaled-xxxs": "2px",
"space-segmented-control-focus-outline-gutter": "4px",
"space-segmented-control-focus-outline-gutter": "5px",
"space-static-l": "20px",
"space-static-m": "16px",
"space-static-s": "12px",
Expand Down Expand Up @@ -3408,7 +3408,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-background-segment-active": "#006ce0",
"color-background-segment-default": "#ffffff",
"color-background-segment-disabled": "#ffffff",
"color-background-segment-hover": "#ffffff",
"color-background-segment-hover": "#f0fbff",
"color-background-slider-error-pressed": "#700000",
"color-background-slider-handle-active": "#004a9e",
"color-background-slider-handle-default": "#006ce0",
Expand Down Expand Up @@ -3737,7 +3737,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-pagination-page-number-default": "#424650",
"color-text-segment-active": "#ffffff",
"color-text-segment-default": "#424650",
"color-text-segment-hover": "#006ce0",
"color-text-segment-hover": "#002b66",
"color-text-small": "#656871",
"color-text-status-error": "#db0000",
"color-text-status-inactive": "#656871",
Expand Down Expand Up @@ -3924,7 +3924,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"space-scaled-xxs": "2px",
"space-scaled-xxxl": "32px",
"space-scaled-xxxs": "0px",
"space-segmented-control-focus-outline-gutter": "4px",
"space-segmented-control-focus-outline-gutter": "5px",
"space-static-l": "20px",
"space-static-m": "16px",
"space-static-s": "12px",
Expand Down Expand Up @@ -4067,7 +4067,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-background-segment-active": "#42b4ff",
"color-background-segment-default": "#0f141a",
"color-background-segment-disabled": "#0f141a",
"color-background-segment-hover": "#0f141a",
"color-background-segment-hover": "#1b232d",
"color-background-slider-error-pressed": "#ff7a7a",
"color-background-slider-handle-active": "#75cfff",
"color-background-slider-handle-default": "#42b4ff",
Expand Down Expand Up @@ -4396,7 +4396,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-pagination-page-number-default": "#b4b4bb",
"color-text-segment-active": "#0f141a",
"color-text-segment-default": "#dedee3",
"color-text-segment-hover": "#42b4ff",
"color-text-segment-hover": "#75cfff",
"color-text-small": "#a4a4ad",
"color-text-status-error": "#ff7a7a",
"color-text-status-inactive": "#a4a4ad",
Expand Down Expand Up @@ -4583,7 +4583,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"space-scaled-xxs": "4px",
"space-scaled-xxxl": "40px",
"space-scaled-xxxs": "2px",
"space-segmented-control-focus-outline-gutter": "4px",
"space-segmented-control-focus-outline-gutter": "5px",
"space-static-l": "20px",
"space-static-m": "16px",
"space-static-s": "12px",
Expand Down Expand Up @@ -4726,7 +4726,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-background-segment-active": "#42b4ff",
"color-background-segment-default": "#161d26",
"color-background-segment-disabled": "#161d26",
"color-background-segment-hover": "#161d26",
"color-background-segment-hover": "#1b232d",
"color-background-slider-error-pressed": "#ff7a7a",
"color-background-slider-handle-active": "#75cfff",
"color-background-slider-handle-default": "#42b4ff",
Expand Down Expand Up @@ -5055,7 +5055,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-pagination-page-number-default": "#b4b4bb",
"color-text-segment-active": "#0f141a",
"color-text-segment-default": "#dedee3",
"color-text-segment-hover": "#42b4ff",
"color-text-segment-hover": "#75cfff",
"color-text-small": "#a4a4ad",
"color-text-status-error": "#ff7a7a",
"color-text-status-inactive": "#a4a4ad",
Expand Down Expand Up @@ -5242,7 +5242,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"space-scaled-xxs": "4px",
"space-scaled-xxxl": "40px",
"space-scaled-xxxs": "2px",
"space-segmented-control-focus-outline-gutter": "4px",
"space-segmented-control-focus-outline-gutter": "5px",
"space-static-l": "20px",
"space-static-m": "16px",
"space-static-s": "12px",
Expand Down
92 changes: 46 additions & 46 deletions src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2132,8 +2132,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#00a1c9",
"light": "#0073bb",
"dark": "#fafafa",
"light": "#16191f",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -4657,8 +4657,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#00a1c9",
"light": "#0073bb",
"dark": "#fafafa",
"light": "#16191f",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -7182,8 +7182,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#00a1c9",
"light": "#0073bb",
"dark": "#fafafa",
"light": "#16191f",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -9707,8 +9707,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#00a1c9",
"light": "#0073bb",
"dark": "#fafafa",
"light": "#16191f",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -12232,8 +12232,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#00a1c9",
"light": "#0073bb",
"dark": "#fafafa",
"light": "#16191f",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -14757,8 +14757,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#00a1c9",
"light": "#00a1c9",
"dark": "#fafafa",
"light": "#fafafa",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -17282,8 +17282,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#00a1c9",
"light": "#0073bb",
"dark": "#fafafa",
"light": "#16191f",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -18097,8 +18097,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "transparent",
"light": "transparent",
"dark": "rgba(255, 255, 255, 0.1)",
"light": "rgba(0, 7, 22, 0.05)",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -19812,8 +19812,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#006ce0",
"dark": "#ffffff",
"light": "#0f141a",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -20622,8 +20622,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "transparent",
"light": "transparent",
"dark": "rgba(255, 255, 255, 0.1)",
"light": "rgba(255, 255, 255, 0.1)",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -22337,8 +22337,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#42b4ff",
"dark": "#ffffff",
"light": "#ffffff",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -23147,8 +23147,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#161d26",
"light": "#ffffff",
"dark": "#1b232d",
"light": "#f0fbff",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -24862,8 +24862,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#006ce0",
"dark": "#75cfff",
"light": "#002b66",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -25672,8 +25672,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "transparent",
"light": "transparent",
"dark": "rgba(0, 7, 22, 0.15)",
"light": "rgba(0, 7, 22, 0.15)",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -27387,8 +27387,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#006ce0",
"dark": "#ffffff",
"light": "#ffffff",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -28197,8 +28197,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "transparent",
"light": "transparent",
"dark": "rgba(0, 7, 22, 0.05)",
"light": "rgba(0, 7, 22, 0.05)",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -29912,8 +29912,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#006ce0",
"dark": "#0f141a",
"light": "#0f141a",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -30722,8 +30722,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#0f141a",
"light": "#0f141a",
"dark": "#1b232d",
"light": "#1b232d",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -32437,8 +32437,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#42b4ff",
"dark": "#75cfff",
"light": "#75cfff",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -33247,8 +33247,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#161d26",
"light": "#161d26",
"dark": "#1b232d",
"light": "#1b232d",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -34962,8 +34962,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#42b4ff",
"dark": "#75cfff",
"light": "#75cfff",
},
},
"color-text-status-error": {
Expand Down Expand Up @@ -35772,8 +35772,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-background-segment-hover": {
"$description": "The background color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#161d26",
"light": "#ffffff",
"dark": "#1b232d",
"light": "#f0fbff",
},
},
"color-background-status-error": {
Expand Down Expand Up @@ -37487,8 +37487,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"color-text-segment-hover": {
"$description": "The text color of inactive segments in a segmented control on hover.",
"$value": {
"dark": "#42b4ff",
"light": "#006ce0",
"dark": "#75cfff",
"light": "#002b66",
},
},
"color-text-status-error": {
Expand Down
Loading
Loading