Remove large size options from SegmentedControl (primer#2551)

Author: jonrohan

.changeset/red-parrots-tap.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Remove large size options from SegmentedControl

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/full_width_large/default.png

@@ -50,22 +50,6 @@
   }
 }
 
-.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 {

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/full_width_large/focused.png

@@ -17,7 +17,6 @@ class SegmentedControl < Primer::Component
       SIZE_MAPPINGS = {
         :small => "SegmentedControl--small",
         :medium => "SegmentedControl--medium",
-        :large => "SegmentedControl--large",
         DEFAULT_SIZE => "SegmentedControl--medium"
       }.freeze
       SIZE_OPTIONS = SIZE_MAPPINGS.keys

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/icon_only_large/default.png

@@ -11,7 +11,7 @@ class SegmentedControlPreview < ViewComponent::Preview
       # @param full_width [Boolean] toggle
       # @param hide_labels [Boolean] toggle
       # @param icon [Symbol] octicon
-      # @param size select [small, medium, large]
+      # @param size select [small, medium]
       def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
         if icon == :none
           icon = hide_labels ? :zap : nil
@@ -55,17 +55,6 @@ def full_width_medium(hide_labels: false)
           component.with_item(label: "Blame")
         end
       end
-
-      # @label Size large
-      # @param hide_labels [Boolean] toggle
-      # @snapshot
-      def full_width_large(hide_labels: false)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
-          component.with_item(label: "Preview", selected: true)
-          component.with_item(label: "Raw")
-          component.with_item(label: "Blame")
-        end
-      end
       # @!endgroup
 
       # @!group Icons and text
@@ -88,16 +77,6 @@ def icons_and_text_medium
           component.with_item(label: "Blame", icon: :people)
         end
       end
-
-      # @label Size large
-      # @snapshot
-      def icons_and_text_large
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
-          component.with_item(label: "Preview", icon: :eye, selected: true)
-          component.with_item(label: "Raw", icon: :"file-code")
-          component.with_item(label: "Blame", icon: :people)
-        end
-      end
       # @!endgroup
 
       # @!group Trailing Label
@@ -122,17 +101,6 @@ def trailing_label_width_medium
           end
         end
       end
-
-      # @label Size large
-      # @snapshot
-      def trailing_label_width_large
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
-          component.with_item(label: "Monthly")
-          component.with_item(label: "Yearly", selected: true) do |button|
-            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
-          end
-        end
-      end
       # @!endgroup
 
       # @!group Icons only
@@ -156,16 +124,6 @@ def icon_only_medium
         end
       end
 
-      # @label Size large
-      # @snapshot
-      def icon_only_large
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
-          component.with_item(label: "Preview", icon: :eye, selected: true)
-          component.with_item(label: "Raw", icon: :"file-code")
-          component.with_item(label: "Blame", icon: :people)
-        end
-      end
-
       # @label Full width, size small
       def icon_only_full_width_small
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
@@ -183,15 +141,6 @@ def icon_only_full_width_medium
           component.with_item(label: "Blame", icon: :people)
         end
       end
-
-      # @label Full width, size large
-      def icon_only_full_width_large
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
-          component.with_item(label: "Preview", icon: :eye, selected: true)
-          component.with_item(label: "Raw", icon: :"file-code")
-          component.with_item(label: "Blame", icon: :people)
-        end
-      end
       # @!endgroup
 
       # NOTE: this preview uses a group to force it's display below the other groups

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/icon_only_large/focused.png

@@ -468,9 +468,6 @@
   "SegmentedControl--iconOnly": [
     "Primer::Alpha::SegmentedControl"
   ],
-  "SegmentedControl--large": [
-    "Primer::Alpha::SegmentedControl"
-  ],
   "SegmentedControl--medium": [
     "Primer::Alpha::SegmentedControl"
   ],

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/icons_and_text_large/default.png

@@ -565,8 +565,7 @@
     "Item": "Primer::Alpha::SegmentedControl::Item",
     "SIZE_MAPPINGS": {
       "small": "SegmentedControl--small",
-      "medium": "SegmentedControl--medium",
-      "large": "SegmentedControl--large"
+      "medium": "SegmentedControl--medium"
     },
     "SIZE_OPTIONS": [
       "small",