SegmentedControl alignment fixes

.changeset/chilly-elephants-roll.md

@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+fix SegmentedControl alignment issues
+
+<!-- Changed components: SegmentedControl -->

app/components/primer/alpha/segmented_control.pcss

@@ -1,19 +1,87 @@
 /* SegmentedControl */
 
 .SegmentedControl {
+  --segmentedControl-item-padding: var(--control-small-paddingBlock);
+
   display: inline-flex;
   list-style: none;
   background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
   border-radius: var(--borderRadius-medium);
 }
 
+.SegmentedControl--iconOnly {
+  & .Button--iconOnly.Button--small,
+  & .Button--iconOnly.Button--medium,
+  & .Button--iconOnly.Button--large {
+    width: 100%;
+    padding-inline: 0 !important;
+  }
+}
+
+/* sizes */
+
+.SegmentedControl--small {
+  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);
+
+  & .SegmentedControl-item {
+    height: var(--control-small-size);
+
+    & .Button {
+      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
+    }
+  }
+
+  &.SegmentedControl--iconOnly {
+    & .SegmentedControl-item {
+      width: var(--control-small-size);
+    }
+  }
+}
+
+.SegmentedControl--medium {
+  & .SegmentedControl-item {
+    height: var(--control-medium-size);
+  }
+
+  &.SegmentedControl--iconOnly {
+    & .SegmentedControl-item {
+      width: var(--control-medium-size);
+    }
+  }
+}
+
+.SegmentedControl--large {
+  & .SegmentedControl-item {
+    height: var(--control-large-size);
+
+    & .Button {
+      padding-inline: calc(var(--control-large-paddingInline-normal) - var(--segmentedControl-item-padding));
+    }
+  }
+
+  &.SegmentedControl--iconOnly {
+    & .SegmentedControl-item {
+      width: var(--control-large-size);
+    }
+  }
+}
+
+/* item */
+
 .SegmentedControl-item {
   position: relative;
   display: inline-flex;
+  justify-content: center;
   border: var(--borderWidth-thin) solid transparent;
   border-radius: var(--borderRadius-medium);
-  padding: var(--control-xsmall-paddingInline-condensed);
+  height: var(--control-medium-size);
+  padding: var(--segmentedControl-item-padding);
+
+  & .Button-withTooltip {
+    width: 100%;
+  }
 
+  /* button color overrides */
   & .Button--invisible {
     &:hover:not(:disabled) {
       background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
@@ -69,72 +137,19 @@
 
   /* Button ----------------------------------------- */
   & .Button {
+    height: 100%;
+    width: 100%;
     border: 0;
     font-weight: var(--base-text-weight-normal);
-    transition: none;
-    color: var(--button-default-fgColor-rest);
+    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
+    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
 
     &:focus-visible {
-      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));
-      border-radius: calc(var(--borderRadius-medium) - 5px);
-    }
-  }
-
-  & .Button--small {
-    height: calc(
-      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-    );
-    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));
-
-    &.Button--iconOnly {
-      width: calc(
-        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-      );
-
-      &::before {
-        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
-      }
+      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
+      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
     }
   }
 
-  & .Button--medium {
-    height: calc(
-      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-    );
-    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));
-
-    &.Button--iconOnly {
-      width: calc(
-        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-      );
-
-      &::before {
-        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
-      }
-    }
-  }
-
-  & .Button--large {
-    height: calc(
-      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-    );
-    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));
-
-    &.Button--iconOnly {
-      width: calc(
-        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
-      );
-
-      &::before {
-        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);
-      }
-    }
-  }
-
-  & .Button--iconOnly {
-    padding: initial;
-  }
-
   & .Button--invisible.Button--invisible-noVisuals .Button-label {
     color: var(--button-default-fgColor-rest);
   }
@@ -148,12 +163,4 @@
     flex: 1;
     justify-content: center;
   }
-
-  /* is .Button-withTooltip used anywhere? can't find use of it */
-  & .Button--iconOnly,
-  & .Button-withTooltip {
-    width: 100% !important;
-    display: flex;
-    justify-content: center;
-  }
 }

app/components/primer/alpha/segmented_control.rb

@@ -13,6 +13,15 @@ class SegmentedControl < Primer::Component
       FULL_WIDTH_DEFAULT = false
       HIDE_LABELS_DEFAULT = false
 
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "SegmentedControl--small",
+        :medium => "SegmentedControl--medium",
+        :large => "SegmentedControl--large",
+        DEFAULT_SIZE => "SegmentedControl--medium"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
       # Use to render an item in the segmented control
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -42,6 +51,7 @@ def initialize(hide_labels: HIDE_LABELS_DEFAULT, full_width: FULL_WIDTH_DEFAULT,
         @system_arguments[:role] = "list"
         @system_arguments[:classes] = class_names(
           system_arguments[:classes],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
           "SegmentedControl",
           "SegmentedControl--iconOnly": hide_labels,
           "SegmentedControl--fullWidth": full_width

static/classes.json

@@ -477,6 +477,18 @@
   "SegmentedControl--fullWidth": [
     "Primer::Alpha::SegmentedControl"
   ],
+  "SegmentedControl--iconOnly": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--large": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--medium": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--small": [
+    "Primer::Alpha::SegmentedControl"
+  ],
   "SegmentedControl-item": [
     "Primer::Alpha::SegmentedControl"
   ],