Rename SegmentedControl--iconOnly-whenNarrow to SegmentedControl-button--iconOnly-whenNarrow and place on button (#2202)

* Rename whenNarrow so it's a class on the button

* Create silent-crews-pay.md

Author: jonrohan

.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

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;
   }
 }