Extract size from variant Label argument

To standardise the API for labels we want to create a consistent size
arg. The inline variant effects more CSS than the display property so
I've left is as a variant, with intention to either deprecate or
isolate the display functionality and rename it.

app/components/primer/label_component.rb

@@ -25,8 +25,13 @@ class LabelComponent < Primer::Component
     DEPRECATED_SCHEME_OPTIONS = [:orange, :purple].freeze
     SCHEME_OPTIONS = ([*SCHEME_MAPPINGS.keys, nil] - DEPRECATED_SCHEME_OPTIONS).freeze
 
+    SIZE_MAPPINGS = {
+      medium: "",
+      large: "Label--large"
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
     VARIANT_MAPPINGS = {
-      large: "Label--large",
       inline: "Label--inline"
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
@@ -40,21 +45,27 @@ class LabelComponent < Primer::Component
     #   <%= render(Primer::LabelComponent.new(scheme: :warning)) { "Warning" } %>
     #   <%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>
     #
+    # @example Sizes
+    #   <%= render(Primer::LabelComponent.new) { "Medium" } %>
+    #   <%= render(Primer::LabelComponent.new(size: :large)) { "Large" } %>
+    #
     # @example Variants
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(variant: :large)) { "Large" } %>
+    #   <%= render(Primer::LabelComponent.new(variant: :inline)) { "Inline" } %>
     #
     # @param tag [Symbol] <%= one_of(Primer::LabelComponent::TAG_OPTIONS) %>
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
+    # @param size [Symbol] <%= one_of(Primer::LabelComponent::SIZE_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, scheme: nil, variant: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, scheme: nil, size: :medium, variant: nil, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:classes] = class_names(
         "Label",
         system_arguments[:classes],
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, deprecated_values: DEPRECATED_SCHEME_OPTIONS)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant)]
       )
     end

docs/content/components/label.md

@@ -22,7 +22,8 @@ Use `aria-label` if the `Label` or the context around it don't explain the label
 | :- | :- | :- | :- |
 | `tag` | `Symbol` | `:span` | One of `:a`, `:div`, `:span`, or `:summary`. |
 | `scheme` | `Symbol` | `nil` | One of `:danger`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`, `:success`, or `:warning`. |
-| `variant` | `Symbol` | `nil` | One of `nil`, `:inline`, or `:large`. |
+| `size` | `Symbol` | `:medium` | One of `:large` and `:medium`. |
+| `variant` | `Symbol` | `nil` | One of `nil` and `:inline`. |
 | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) |
 
 ## Examples
@@ -41,11 +42,20 @@ Use `aria-label` if the `Label` or the context around it don't explain the label
 <%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>
 ```
 
+### Sizes
+
+<Example src="<span data-view-component='true' class='Label'>Medium</span><span data-view-component='true' class='Label Label--large'>Large</span>" />
+
+```erb
+<%= render(Primer::LabelComponent.new) { "Medium" } %>
+<%= render(Primer::LabelComponent.new(size: :large)) { "Large" } %>
+```
+
 ### Variants
 
-<Example src="<span data-view-component='true' class='Label'>Default</span><span data-view-component='true' class='Label Label--large'>Large</span>" />
+<Example src="<span data-view-component='true' class='Label'>Default</span><span data-view-component='true' class='Label Label--inline'>Inline</span>" />
 
 ```erb
 <%= render(Primer::LabelComponent.new) { "Default" } %>
-<%= render(Primer::LabelComponent.new(variant: :large)) { "Large" } %>
+<%= render(Primer::LabelComponent.new(variant: :inline)) { "Inline" } %>
 ```

lib/primer/view_components/linters/argument_mappers/label.rb

@@ -13,6 +13,12 @@ class Label < Base
           symbolize: true
         ).freeze
 
+        SIZE_MAPPINGS = Primer::ViewComponents::Constants.get(
+          component: "Primer::LabelComponent",
+          constant: "SIZE_MAPPINGS",
+          symbolize: true
+        ).freeze
+
         VARIANT_MAPPINGS = Primer::ViewComponents::Constants.get(
           component: "Primer::LabelComponent",
           constant: "VARIANT_MAPPINGS",
@@ -36,6 +42,8 @@ def classes_to_args(classes)
 
             if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?
               acc[:scheme] = SCHEME_MAPPINGS[class_name]
+            elsif SIZE_MAPPINGS[class_name] && acc[:size].nil?
+              acc[:size] = SIZE_MAPPINGS[class_name]
             elsif VARIANT_MAPPINGS[class_name] && acc[:variant].nil?
               acc[:variant] = VARIANT_MAPPINGS[class_name]
             else

static/arguments.yml

@@ -658,10 +658,14 @@
     default: "`nil`"
     description: One of `:danger`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`,
       `:success`, or `:warning`.
+  - name: size
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:large` and `:medium`.
   - name: variant
     type: Symbol
     default: "`nil`"
-    description: One of `nil`, `:inline`, or `:large`.
+    description: One of `nil` and `:inline`.
   - name: system_arguments
     type: Hash
     default: N/A

static/classes.yml

@@ -22,6 +22,7 @@
 - ".Label"
 - ".Label--danger"
 - ".Label--info"
+- ".Label--inline"
 - ".Label--large"
 - ".Label--primary"
 - ".Label--secondary"

static/constants.json

@@ -528,18 +528,24 @@
       "danger",
       null
     ],
+    "SIZE_MAPPINGS": {
+      "medium": "",
+      "large": "Label--large"
+    },
+    "SIZE_OPTIONS": [
+      "medium",
+      "large"
+    ],
     "TAG_OPTIONS": [
       "span",
       "summary",
       "a",
       "div"
     ],
     "VARIANT_MAPPINGS": {
-      "large": "Label--large",
       "inline": "Label--inline"
     },
     "VARIANT_OPTIONS": [
-      "large",
       "inline",
       null
     ]

stories/primer/label_component_stories.rb

@@ -6,7 +6,8 @@ class Primer::LabelComponentStories < ViewComponent::Storybook::Stories
   story(:label) do
     controls do
       select(:scheme, Primer::LabelComponent::SCHEME_MAPPINGS.keys, :success)
-      select(:variant, Primer::LabelComponent::VARIANT_MAPPINGS.keys, :large)
+      select(:size, Primer::LabelComponent::SIZE_MAPPINGS.keys, :medium)
+      select(:variant, Primer::LabelComponent::VARIANT_MAPPINGS.keys, nil)
     end
 
     content do

test/components/label_component_test.rb

@@ -38,15 +38,29 @@ def test_falls_back_when_scheme_isn_t_valid
     assert_text("content")
   end
 
+  def test_supports_sizes
+    render_inline(Primer::LabelComponent.new(size: :large)) { "private" }
+
+    assert_selector(".Label--large")
+  end
+
+  def test_falls_back_when_size_isn_t_valid
+    without_fetch_or_fallback_raises do
+      render_inline(Primer::LabelComponent.new(size: :small)) { "content" }
+    end
+
+    assert_text("content")
+  end
+
   def test_renders_with_the_css_class_variant_mapping_to_the_provided_variant
-    render_inline(Primer::LabelComponent.new(variant: :large)) { "private" }
+    render_inline(Primer::LabelComponent.new(variant: :inline)) { "private" }
 
-    assert_selector(".Label.Label--large")
+    assert_selector(".Label.Label--inline")
   end
 
   def test_falls_back_when_variant_isn_t_valid
     without_fetch_or_fallback_raises do
-      render_inline(Primer::LabelComponent.new(variant: :xxl)) { "content" }
+      render_inline(Primer::LabelComponent.new(variant: :special)) { "content" }
     end
 
     assert_text("content")

test/linters/argument_mappers/label_test.rb

@@ -71,7 +71,7 @@ def test_complex_case
 
     assert_equal({
                    scheme: ":primary",
-                   variant: ":large",
+                   size: ":large",
                    title: '"some title"',
                    mr: 1,
                    p: 3,

test/linters/label_component_migration_counter_test.rb

@@ -10,7 +10,7 @@ def test_suggests_how_to_use_the_component_with_arguments
     @file = "<span class=\"Label Label--large Label--primary\">Label</span>"
     @linter.run(processed_source)
 
-    assert_includes(offenses.first.message, "render Primer::LabelComponent.new(variant: :large, scheme: :primary)")
+    assert_includes(offenses.first.message, "render Primer::LabelComponent.new(size: :large, scheme: :primary)")
   end
 
   def test_suggest_title_argument
@@ -63,7 +63,7 @@ def test_autocorrects
           <%= render Primer::LabelComponent.new(scheme: :info) do %>
             Label 3
             <a>not a Label</a>
-            <%= render Primer::LabelComponent.new(tag: :summary, variant: :large) do %>
+            <%= render Primer::LabelComponent.new(tag: :summary, size: :large) do %>
               summary
               <%= render Primer::LabelComponent.new(tag: :div, test_selector: "test selector") do %>
                 div