From 63ec9877ae75e7e4abe87e1c0978950952b9ef96 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 9 Aug 2022 21:56:34 +0000 Subject: [PATCH 1/4] Updatging SegmentedControl to a role="list" --- .../SegmentedControl.stories.jsx | 8 ++--- .../SegmentedControlButton.stories.jsx | 34 ++++++++++--------- src/segmented-control/segmented-control.scss | 11 ++++-- 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/docs/src/stories/components/SegmentedControl/SegmentedControl.stories.jsx b/docs/src/stories/components/SegmentedControl/SegmentedControl.stories.jsx index 969f6b7284..7dd45c1028 100644 --- a/docs/src/stories/components/SegmentedControl/SegmentedControl.stories.jsx +++ b/docs/src/stories/components/SegmentedControl/SegmentedControl.stories.jsx @@ -74,14 +74,14 @@ IconsAndText.args = { } export const IconsOnlyTemplate = ({fullWidth, ariaLabel, iconOnlyWhenNarrow}) => ( - <> - + +
    - - +
+ ) export const IconsOnly = IconsOnlyTemplate.bind({}) diff --git a/docs/src/stories/components/SegmentedControl/SegmentedControlButton.stories.jsx b/docs/src/stories/components/SegmentedControl/SegmentedControlButton.stories.jsx index 1959b0bc38..e44028cedd 100644 --- a/docs/src/stories/components/SegmentedControl/SegmentedControlButton.stories.jsx +++ b/docs/src/stories/components/SegmentedControl/SegmentedControlButton.stories.jsx @@ -33,23 +33,25 @@ export default { // build every component case here in the template (private api) export const SegmentedControlButtonTemplate = ({selected, text, leadingVisual, iconOnly }) => ( <> - + aria-current={selected} + aria-label={iconOnly && text} + > +
+ {leadingVisual && ( + + )} + + {text} + )} +
+ + ) diff --git a/src/segmented-control/segmented-control.scss b/src/segmented-control/segmented-control.scss index eb8e9608d2..0a98c4c0a5 100644 --- a/src/segmented-control/segmented-control.scss +++ b/src/segmented-control/segmented-control.scss @@ -1,13 +1,19 @@ // SegmentedControl +// stylelint-disable selector-max-type .SegmentedControl { - position: relative; display: inline-flex; + list-style: none; background-color: var(--color-segmented-control-bg); // stylelint-disable-next-line primer/borders border-radius: var(--primer-borderRadius-medium, $border-radius); // stylelint-disable-next-line primer/box-shadow box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default); + + li { + position: relative; + display: inline-flex; + } } // Button ----------------------------------------- @@ -110,7 +116,8 @@ .SegmentedControl--fullWidth { display: flex; - .SegmentedControl-button { + .SegmentedControl-button, + li { flex: 1; justify-content: center; } From 34e2e9ed413947cf0b4244ce7ef60af49307c107 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 9 Aug 2022 22:05:44 +0000 Subject: [PATCH 2/4] Remove SegmentedControl-button--selected class --- src/segmented-control/segmented-control.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/segmented-control/segmented-control.scss b/src/segmented-control/segmented-control.scss index 0a98c4c0a5..575bcf9924 100644 --- a/src/segmented-control/segmented-control.scss +++ b/src/segmented-control/segmented-control.scss @@ -33,19 +33,19 @@ // stylelint-disable-next-line primer/borders border-radius: var(--primer-borderRadius-medium, $border-radius); - &:not(.SegmentedControl-button--selected):hover .SegmentedControl-content { + &[aria-current="false"]:hover .SegmentedControl-content { background-color: var(--color-segmented-control-button-hover-bg); transition-duration: var(--primer-duration-fast, 80ms); } - &:not(.SegmentedControl-button--selected):active .SegmentedControl-content { + &[aria-current="false"]:active .SegmentedControl-content { background-color: var(--color-segmented-control-button-active-bg); transition-duration: 0; } // Selected - &.SegmentedControl-button--selected { + &[aria-current="true"] { // stylelint-disable-next-line primer/typography font-weight: var(--base-text-weight-semibold, $font-weight-bold); background-color: var(--color-btn-bg); @@ -67,8 +67,8 @@ transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1); } - &.SegmentedControl-button--selected::before, - &.SegmentedControl-button--selected + .SegmentedControl-button::before { + &[aria-current="true"]::before, + &[aria-current="true"] + .SegmentedControl-button::before { border-color: transparent; } } From 47e184e98eb79306e2dcd5d751831f5a66faea63 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Tue, 9 Aug 2022 22:13:25 +0000 Subject: [PATCH 3/4] Stylelint auto-fixes --- src/segmented-control/segmented-control.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/segmented-control/segmented-control.scss b/src/segmented-control/segmented-control.scss index 575bcf9924..fba58f8674 100644 --- a/src/segmented-control/segmented-control.scss +++ b/src/segmented-control/segmented-control.scss @@ -33,19 +33,19 @@ // stylelint-disable-next-line primer/borders border-radius: var(--primer-borderRadius-medium, $border-radius); - &[aria-current="false"]:hover .SegmentedControl-content { + &[aria-current='false']:hover .SegmentedControl-content { background-color: var(--color-segmented-control-button-hover-bg); transition-duration: var(--primer-duration-fast, 80ms); } - &[aria-current="false"]:active .SegmentedControl-content { + &[aria-current='false']:active .SegmentedControl-content { background-color: var(--color-segmented-control-button-active-bg); transition-duration: 0; } // Selected - &[aria-current="true"] { + &[aria-current='true'] { // stylelint-disable-next-line primer/typography font-weight: var(--base-text-weight-semibold, $font-weight-bold); background-color: var(--color-btn-bg); @@ -67,8 +67,8 @@ transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1); } - &[aria-current="true"]::before, - &[aria-current="true"] + .SegmentedControl-button::before { + &[aria-current='true']::before, + &[aria-current='true'] + .SegmentedControl-button::before { border-color: transparent; } } From 9406d8a5a6b9354c9f76057b0169d2152216204c Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 9 Aug 2022 19:39:26 -0700 Subject: [PATCH 4/4] Create two-gifts-yawn.md --- .changeset/two-gifts-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/two-gifts-yawn.md diff --git a/.changeset/two-gifts-yawn.md b/.changeset/two-gifts-yawn.md new file mode 100644 index 0000000000..6757853e83 --- /dev/null +++ b/.changeset/two-gifts-yawn.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Updating the SegmentedControl component to role=list and use `ul`.