Segmented control list (#2195)

* Updatging SegmentedControl to a role="list" * Remove SegmentedControl-button--selected class * Stylelint auto-fixes * Create two-gifts-yawn.md Co-authored-by: Actions Auto Build <actions@github.com>
primer · Aug 11, 2022 · f9e5db5 · f9e5db5
1 parent 6899cba
commit f9e5db5
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 27 deletions.
diff --git a/.changeset/two-gifts-yawn.md b/.changeset/two-gifts-yawn.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Updating the SegmentedControl component to role=list and use `ul`.
diff --git 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}) => (
-  <>
-    <segmented-control role="toolbar" aria-label={ariaLabel} class={classNames(fullWidth, iconOnlyWhenNarrow)}>
+  <segmented-control>
+    <ul aria-label={ariaLabel} class={classNames(fullWidth, iconOnlyWhenNarrow)}>
       <SegmentedControlButtonTemplate text="Outline" leadingVisual iconOnly />
       <SegmentedControlButtonTemplate text="Write" leadingVisual iconOnly />
       <SegmentedControlButtonTemplate text="Preview" leadingVisual iconOnly />
       <SegmentedControlButtonTemplate text="Publish" leadingVisual iconOnly selected />
-    </segmented-control>
-  </>
+    </ul>
+  </segmented-control>
 )
 
 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
@@ -33,23 +33,25 @@ export default {
 // build every component case here in the template (private api)
 export const SegmentedControlButtonTemplate = ({selected, text, leadingVisual, iconOnly }) => (
   <>
-    <button className={clsx(
-        'SegmentedControl-button',
-        iconOnly && `SegmentedControl-button--iconOnly`,
-        selected && `SegmentedControl-button--selected`,
-      )}
-      aria-current={selected}
-      aria-label={iconOnly && text}
-    >
-      <div class="SegmentedControl-content">
-        {leadingVisual && (
-          <svg class="SegmentedControl-leadingVisual octicon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
+    <li>
+      <button className={clsx(
+          'SegmentedControl-button',
+          iconOnly && `SegmentedControl-button--iconOnly`,
+          selected && `SegmentedControl-button--selected`,
         )}
-        {!iconOnly && (
-          <span class="SegmentedControl-text" data-content={text}>{text}</span>
-        )}
-      </div>
-    </button>
+        aria-current={selected}
+        aria-label={iconOnly && text}
+      >
+        <div class="SegmentedControl-content">
+          {leadingVisual && (
+            <svg class="SegmentedControl-leadingVisual octicon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
+          )}
+
+            <span class="SegmentedControl-text" data-content={text}>{text}</span>
+          )}
+        </div>
+      </button>
+    </li>
   </>
 )
 

diff --git 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 -----------------------------------------
@@ -27,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);
@@ -61,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;
   }
 }
@@ -110,7 +116,8 @@
 .SegmentedControl--fullWidth {
   display: flex;
 
-  .SegmentedControl-button {
+  .SegmentedControl-button,
+  li {
     flex: 1;
     justify-content: center;
   }