Rename SegmentedControl--iconOnly-whenNarrow to SegmentedControl-butt…

…on--iconOnly-whenNarrow and place on button (#2202) * Rename whenNarrow so it's a class on the button * Create silent-crews-pay.md
primer · Aug 15, 2022 · b74e78b · b74e78b
1 parent 2c0fec7
commit b74e78b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/.changeset/silent-crews-pay.md b/.changeset/silent-crews-pay.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Rename SegmentedControl--iconOnly-whenNarrow to SegmentedControl-button--iconOnly-whenNarrow and place on button
diff --git a/src/segmented-control/segmented-control.scss b/src/segmented-control/segmented-control.scss
@@ -135,10 +135,8 @@
 
 // Icon only when narrow
 @media (max-width: $width-md) {
-  .SegmentedControl--iconOnly-whenNarrow {
-    .SegmentedControl-button {
-      width: var(--primer-control-medium-size, 32px);
-    }
+  .SegmentedControl-button--iconOnly-whenNarrow {
+    width: var(--primer-control-medium-size, 32px);
 
     .SegmentedControl-content {
       padding: 0;
@@ -163,7 +161,7 @@
 
   // reset for icon-only buttons
   .SegmentedControl-button--iconOnly,
-  .SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button {
+  .SegmentedControl-button--iconOnly-whenNarrow {
     min-width: unset;
   }
 }