[WIP] migrating Primer::LabelComponent to Primer::Beta::Label (#1530)

.changeset/tasty-needles-deliver.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+migrating Primer::LabelComponent to Primer::Beta::Label

app/components/primer/alpha/action_list/item.rb

@@ -61,7 +61,7 @@ class Item < Primer::Component
         #
         # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>.
         #
-        # To render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by <%= link_to_component(Primer::LabelComponent) %>.
+        # To render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Label) %>.
         #
         # To render a counter, call the `with_leading_visual_counter` method, which accepts the arguments accepted by <%= link_to_component(Primer::CounterComponent) %>.
         #
@@ -71,7 +71,7 @@ class Item < Primer::Component
         # ```
         renders_one :trailing_visual, types: {
           icon: Primer::OcticonComponent,
-          label: Primer::LabelComponent,
+          label: Primer::Beta::Label,
           counter: Primer::CounterComponent,
           text: ->(text) { text }
         }

app/components/primer/beta/auto_complete/item.rb

@@ -22,10 +22,10 @@ class Item < Primer::Component
 
         # The trailing visual rendered after the link.
         #
-        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::LabelComponent) %>, or <%= link_to_component(Primer::Beta::Counter) %>
+        # @param kwargs [Hash] The arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>, <%= link_to_component(Primer::Beta::Label) %>, or <%= link_to_component(Primer::Beta::Counter) %>
         renders_one :trailing_visual, types: {
           icon: Primer::OcticonComponent,
-          label: Primer::LabelComponent,
+          label: Primer::Beta::Label,
           counter: Primer::Beta::Counter
         }
 

app/components/primer/beta/button.rb

@@ -57,7 +57,7 @@ class Button < Primer::Component
       # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
       renders_one :trailing_visual, types: {
         icon: Primer::OcticonComponent,
-        label: Primer::LabelComponent,
+        label: Primer::Beta::Label,
         counter: Primer::CounterComponent
       }
 

app/components/primer/beta/label.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Label` to add contextual metadata to a design.
+    #
+    # @accessibility
+    #   Use `aria-label` if the `Label` or the context around it don't explain the label.
+    class Label < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+      TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Label--primary",
+        :secondary => "Label--secondary",
+        :accent => "Label--accent",
+        :success => "Label--success",
+        :attention => "Label--attention",
+        :danger => "Label--danger",
+        :severe => "Label--severe",
+        :done => "Label--done",
+        :sponsors => "Label--sponsors",
+        # deprecated
+        :info => "Label--info",
+        :warning => "Label--warning",
+        :orange => "Label--orange",
+        :purple => "Label--purple"
+      }.freeze
+      DEPRECATED_SCHEME_OPTIONS = [:info, :warning, :orange, :purple].freeze
+      SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        DEFAULT_SIZE => nil,
+        :large => "Label--large"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_VARIANT = :none
+      VARIANT_OPTIONS = [DEFAULT_VARIANT].freeze
+      DEPRECATED_VARIANT_OPTIONS = [:large, :inline].freeze
+
+      INLINE_CLASS = "Label--inline"
+
+      # @example Schemes
+      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :success)) { "Success" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :done)) { "Done" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" } %>
+      #
+      # @example Sizes
+      #   <%= render(Primer::Beta::Label.new) { "Medium" } %>
+      #   <%= render(Primer::Beta::Label.new(size: :large)) { "Large" } %>
+      #
+      # @example Inline
+      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Label.new(inline: true)) { "Inline" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::Label::TAG_OPTIONS) %>
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Label::SCHEME_MAPPINGS.keys) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Label::SIZE_OPTIONS) %>
+      # @param inline [Boolean] Whether or not to render this label inline.
+      # @param variant [Symbol] <%= one_of(Primer::Beta::Label::VARIANT_OPTIONS + Primer::Beta::Label::DEPRECATED_VARIANT_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+
+      def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, inline: false, variant: DEFAULT_VARIANT, **system_arguments)
+        @system_arguments = system_arguments
+
+        @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, nil, deprecated_values: DEPRECATED_VARIANT_OPTIONS)
+        @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)
+        @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+        @size = :large if @variant == :large
+        @inline = inline || @variant == :inline
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:classes] = class_names(
+          "Label",
+          system_arguments[:classes],
+          SCHEME_MAPPINGS[@scheme],
+          SIZE_MAPPINGS[@size],
+          @inline ? INLINE_CLASS : nil
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

app/components/primer/label_component.rb

@@ -1,98 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Label` to add contextual metadata to a design.
-  #
-  # @accessibility
-  #   Use `aria-label` if the `Label` or the context around it don't explain the label.
-  class LabelComponent < Primer::Component
-    status :beta
-
-    DEFAULT_TAG = :span
-    TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
-
-    DEFAULT_SCHEME = :default
-    SCHEME_MAPPINGS = {
-      DEFAULT_SCHEME => "",
-      :primary => "Label--primary",
-      :secondary => "Label--secondary",
-      :accent => "Label--accent",
-      :success => "Label--success",
-      :attention => "Label--attention",
-      :danger => "Label--danger",
-      :severe => "Label--severe",
-      :done => "Label--done",
-      :sponsors => "Label--sponsors",
-      # deprecated
-      :info => "Label--info",
-      :warning => "Label--warning",
-      :orange => "Label--orange",
-      :purple => "Label--purple"
-    }.freeze
-    DEPRECATED_SCHEME_OPTIONS = [:info, :warning, :orange, :purple].freeze
-    SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
-
-    DEFAULT_SIZE = :medium
-    SIZE_MAPPINGS = {
-      DEFAULT_SIZE => nil,
-      :large => "Label--large"
-    }.freeze
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-
-    DEFAULT_VARIANT = :none
-    VARIANT_OPTIONS = [DEFAULT_VARIANT].freeze
-    DEPRECATED_VARIANT_OPTIONS = [:large, :inline].freeze
-
-    INLINE_CLASS = "Label--inline"
-
-    # @example Schemes
-    #   <%= render(Primer::LabelComponent.new) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :primary)) { "Primary" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :secondary)) { "Secondary" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :accent)) { "Accent" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :success)) { "Success" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :attention)) { "Attention" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :severe)) { "Severe" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :done)) { "Done" } %>
-    #   <%= render(Primer::LabelComponent.new(scheme: :sponsors)) { "Sponsors" } %>
-    #
-    # @example Sizes
-    #   <%= render(Primer::LabelComponent.new) { "Medium" } %>
-    #   <%= render(Primer::LabelComponent.new(size: :large)) { "Large" } %>
-    #
-    # @example Inline
-    #   <%= render(Primer::LabelComponent.new) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(inline: true)) { "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 inline [Boolean] Whether or not to render this label inline.
-    # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS + Primer::LabelComponent::DEPRECATED_VARIANT_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-
-    def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, inline: false, variant: DEFAULT_VARIANT, **system_arguments)
-      @system_arguments = system_arguments
-
-      @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, nil, deprecated_values: DEPRECATED_VARIANT_OPTIONS)
-      @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)
-      @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
-      @size = :large if @variant == :large
-      @inline = inline || @variant == :inline
-
-      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
-      @system_arguments[:classes] = class_names(
-        "Label",
-        system_arguments[:classes],
-        SCHEME_MAPPINGS[@scheme],
-        SIZE_MAPPINGS[@size],
-        @inline ? INLINE_CLASS : nil
-      )
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
+  class LabelComponent < Primer::Beta::Label
+    status :deprecated
   end
 end

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -64,7 +64,7 @@
   - title: ImageCrop
     url: "/components/alpha/imagecrop"
   - title: Label
-    url: "/components/label"
+    url: "/components/beta/label"
   - title: Layout
     url: "/components/alpha/layout"
   - title: Link

lib/primer/deprecations.rb

@@ -5,6 +5,7 @@ module Primer
   module Deprecations
     # If there is no alternative to suggest, set the value to nil
     DEPRECATED_COMPONENTS = {
+      "Primer::LabelComponent" => "Primer::Beta::Label",
       "Primer::ImageCrop" => "Primer::Alpha::ImageCrop",
       "Primer::Image" => "Primer::Alpha::Image",
       "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",

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

@@ -8,24 +8,24 @@ module ArgumentMappers
       # Maps classes in a label element to arguments for the Label component.
       class Label < Base
         SCHEME_MAPPINGS = Primer::ViewComponents::Constants.get(
-          component: "Primer::LabelComponent",
+          component: "Primer::Beta::Label",
           constant: "SCHEME_MAPPINGS",
           symbolize: true
         ).freeze
 
         SIZE_MAPPINGS = Primer::ViewComponents::Constants.get(
-          component: "Primer::LabelComponent",
+          component: "Primer::Beta::Label",
           constant: "SIZE_MAPPINGS",
           symbolize: true
         ).freeze
 
         DEFAULT_TAG = Primer::ViewComponents::Constants.get(
-          component: "Primer::LabelComponent",
+          component: "Primer::Beta::Label",
           constant: "DEFAULT_TAG"
         ).freeze
 
         INLINE_CLASS = Primer::ViewComponents::Constants.get(
-          component: "Primer::LabelComponent",
+          component: "Primer::Beta::Label",
           constant: "INLINE_CLASS"
         ).freeze
 

lib/primer/view_components/linters/label_component_migration_counter.rb

@@ -11,14 +11,14 @@ class LabelComponentMigrationCounter < BaseLinter
       include Autocorrectable
 
       TAGS = Primer::ViewComponents::Constants.get(
-        component: "Primer::LabelComponent",
+        component: "Primer::Beta::Label",
         constant: "TAG_OPTIONS"
       ).freeze
 
       CLASSES = %w[Label].freeze
-      MESSAGE = "We are migrating labels to use [Primer::LabelComponent](https://primer.style/view-components/components/label), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating labels to use [Primer::Beta::Label](https://primer.style/view-components/components/label), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::Label
-      COMPONENT = "Primer::LabelComponent"
+      COMPONENT = "Primer::Beta::Label"
     end
   end
 end

lib/rubocop/cop/primer/deprecated_label_schemes.rb

@@ -9,10 +9,10 @@ module Primer
       # This cop ensures that components don't use deprecated `Label` schemes.
       #
       # bad
-      # Primer::LabelComponent.new(scheme: :info)
+      # Primer::Beta::Label.new(scheme: :info)
       #
       # good
-      # Primer::LabelComponent.new(scheme: :accent)
+      # Primer::Beta::Label.new(scheme: :accent)
       class DeprecatedLabelSchemes < BaseCop
         INVALID_MESSAGE = <<~STR
           Avoid using deprecated schemes: https://primer.style/view-components/deprecated#labelcomponent.
@@ -60,7 +60,7 @@ def autocorrect(node)
         def label_node?(node)
           return if node.nil?
 
-          node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::LabelComponent"
+          node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::Beta::Label"
         end
       end
     end

lib/rubocop/cop/primer/deprecated_label_variants.rb

@@ -9,16 +9,16 @@ module Primer
       # This cop ensures that `LabelComponent`s don't use the old `variant` argument.
       #
       # bad
-      # Primer::LabelComponent.new(variant: :large)
+      # Primer::Beta::Label.new(variant: :large)
       #
       # good
-      # Primer::LabelComponent.new(size: :large)
+      # Primer::Beta::Label.new(size: :large)
       #
       # bad
-      # Primer::LabelComponent.new(variant: :inline)
+      # Primer::Beta::Label.new(variant: :inline)
       #
       # good
-      # Primer::LabelComponent.new(inline: true)
+      # Primer::Beta::Label.new(inline: true)
       class DeprecatedLabelVariants < BaseCop
         def on_send(node)
           return unless label_node?(node)
@@ -63,7 +63,7 @@ def autocorrect(node)
         def label_node?(node)
           return if node.nil?
 
-          node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::LabelComponent"
+          node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::Beta::Label"
         end
       end
     end

lib/tasks/docs.rake

@@ -62,7 +62,7 @@ namespace :docs do
       Primer::Beta::Flash,
       Primer::Beta::Heading,
       Primer::Alpha::HiddenTextExpander,
-      Primer::LabelComponent,
+      Primer::Beta::Label,
       Primer::LayoutComponent,
       Primer::LinkComponent,
       Primer::Markdown,

previews/primer/beta/label_preview.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Label
+    class LabelPreview < ViewComponent::Preview
+      # @label Default Options
+      #
+      # @param size [Symbol] select [medium, large]
+      # @param tag [Symbol] select [span, summary, a, div]
+      # @param inline [Boolean] toggle
+      def default(size: :medium, tag: :span, inline: false)
+        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      end
+
+      # @label Playground
+      #
+      # @param size [Symbol] select [medium, large]
+      # @param tag [Symbol] select [span, summary, a, div]
+      # @param inline [Boolean] toggle
+      def playground(size: :medium, tag: :span, inline: false)
+        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      end
+    end
+  end
+end