primer_view_components 0.0.114 → 0.0.115

data/app/components/primer/beta/octicon.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+require "octicons"
+
+module Primer
+  module Beta
+    # `Octicon` renders an <%= link_to_octicons %> with <%= link_to_system_arguments_docs %>.
+    # `Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.
+    class Octicon < Primer::Component
+      status :beta
+
+      SIZE_XSMALL = :xsmall
+      SIZE_DEFAULT = :small
+      SIZE_MEDIUM = :medium
+
+      SIZE_MAPPINGS = {
+        SIZE_XSMALL => 12,
+        SIZE_DEFAULT => 16,
+        SIZE_MEDIUM => 24
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      # @example Default
+      #   <%= render(Primer::Beta::Octicon.new(:check)) %>
+      #   <%= render(Primer::Beta::Octicon.new(icon: :check)) %>
+      #
+      # @example Medium
+      #   <%= render(Primer::Beta::Octicon.new(:people, size: :medium)) %>
+      #
+      # @example Helper
+      #   <%= primer_octicon(:check) %>
+      #
+      # @param icon_name [Symbol, String] Name of <%= link_to_octicons %> to use.
+      # @param icon [Symbol, String] Name of <%= link_to_octicons %> to use.
+      # @param size [Symbol] <%= one_of(Primer::Beta::Octicon::SIZE_MAPPINGS, sort: false) %>
+      # @param use_symbol [Boolean] EXPERIMENTAL (May change or be removed) - Set to true when using with <%= link_to_component(Primer::Alpha::OcticonSymbols) %>.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, use_symbol: false, **system_arguments)
+        icon_key = icon_name || icon
+
+        # Don't allow sizes under 16px
+        if system_arguments[:height].present? && system_arguments[:height].to_i < 16 || system_arguments[:width].present? && system_arguments[:width].to_i < 16
+          system_arguments.delete(:height)
+          system_arguments.delete(:width)
+        end
+
+        cache_key = Primer::Octicon::Cache.get_key(
+          symbol: icon_key,
+          size: size,
+          height: system_arguments[:height],
+          width: system_arguments[:width]
+        )
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :svg
+        @system_arguments[:aria] ||= {}
+        @use_symbol = use_symbol
+
+        if @system_arguments[:aria][:label] || @system_arguments[:"aria-label"]
+          @system_arguments[:role] = "img"
+        else
+          @system_arguments[:aria][:hidden] = true
+        end
+
+        if (cache_icon = Primer::Octicon::Cache.read(cache_key))
+          @icon = cache_icon
+        else
+          # Filter out classify options to prevent them from becoming invalid html attributes.
+          # Note height and width are both classify options and valid html attributes.
+          octicon_options = {
+            height: @system_arguments[:height] || SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+            width: @system_arguments[:width]
+          }
+          octicon_options.compact!
+
+          @icon = Octicons::Octicon.new(icon_key, octicon_options)
+          Primer::Octicon::Cache.set(cache_key, @icon)
+        end
+
+        @system_arguments[:classes] = class_names(
+          @icon.options[:class],
+          @system_arguments[:classes]
+        )
+        @system_arguments.merge!(@icon.options.except(:class, :'aria-hidden'))
+      end
+    end
+  end
+end

data/app/components/primer/beta/relative_time.rb

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
     class RelativeTime < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       TENSE_DEFAULT = :auto
@@ -101,7 +102,7 @@ module Primer
       # @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
       # @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
       # @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
-      # @param threshold [string] The threshold at which relative time displays become absolute.
+      # @param threshold [string] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
       # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
       # @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
       # @param lang [string] The language to use.

data/app/components/primer/beta/spinner.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Spinner` to let users know that content is being loaded.
+    class Spinner < Primer::Component
+      warn_on_deprecated_slot_setter
+      status :beta
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => 16,
+        DEFAULT_SIZE => 32,
+        :large => 64
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+      # Setting `box-sizing: content-box` allows consumers to add padding
+      # to the spinner without shrinking the icon
+      DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
+
+      #
+      # @example Default
+      #   <%= render(Primer::Beta::Spinner.new) %>
+      #
+      # @example Small
+      #   <%= render(Primer::Beta::Spinner.new(size: :small)) %>
+      #
+      # @example Large
+      #   <%= render(Primer::Beta::Spinner.new(size: :large)) %>
+      #
+      # @param size [Symbol] <%= one_of(Primer::Beta::Spinner::SIZE_MAPPINGS) %>
+      # @param style [String] Custom element styles.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :svg
+        @system_arguments[:style] ||= style
+        @system_arguments[:animation] = :rotate
+        @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+        @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+        @system_arguments[:viewBox] = "0 0 16 16"
+        @system_arguments[:fill] = :none
+      end
+    end
+  end
+end

data/app/components/primer/beta/text.rb

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # `Text` is a wrapper component that will apply typography styles to the text inside.
     class Text < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_TAG = :span

data/app/components/primer/blankslate_component.rb

@@ -10,10 +10,10 @@ module Primer
 
     # Optional Spinner.
     #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Spinner) %>.
     renders_one :spinner, lambda { |**system_arguments|
       system_arguments[:mb] ||= 3
-      Primer::SpinnerComponent.new(**system_arguments)
+      Primer::Beta::Spinner.new(**system_arguments)
     }
 
     #
@@ -95,7 +95,7 @@ module Primer
     # @param title [String] Text that appears in a larger bold font.
     # @param title_tag [Symbol] HTML tag to use for title.
     # @param icon [Symbol] Octicon icon to use at top of component.
-    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>
+    # @param icon_size [Symbol] <%= one_of(Primer::Beta::Octicon::SIZE_MAPPINGS, sort: false) %>
     # @param image_src [String] Image to display.
     # @param image_alt [String] Alt text for image.
     # @param description [String] Text that appears below the title. Typically a whole sentence.

data/app/components/primer/box.rb

@@ -3,6 +3,7 @@
 module Primer
   # `Box` is a basic wrapper component for most layout related needs.
   class Box < Primer::Component
+    warn_on_deprecated_slot_setter
     status :stable
 
     # @example Default

data/app/components/primer/button_component.rb

@@ -28,14 +28,14 @@ module Primer
     #
     # Use:
     #
-    # - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+    # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
     #
-    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
     renders_one :leading_visual, types: {
       icon: lambda { |**system_arguments|
         system_arguments[:mr] = 2
 
-        Primer::OcticonComponent.new(**system_arguments)
+        Primer::Beta::Octicon.new(**system_arguments)
       }
     }
     alias icon leading_visual_icon # remove alias when all buttons are migrated to new slot names

data/app/components/primer/conditional_wrapper.rb

@@ -22,6 +22,8 @@ module Primer
   # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
   # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
   class ConditionalWrapper < Primer::Component
+    warn_on_deprecated_slot_setter
+
     def initialize(condition:, **base_component_arguments)
       @condition = condition
       @base_component_arguments = base_component_arguments

data/app/components/primer/hellip_button.rb

@@ -8,6 +8,8 @@ module Primer
   #   * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.
   #   * Set the attribute `aria-label` on the system arguments. E.g. `Primer::HellipButton.new("aria-label": "Expand next part")`
   class HellipButton < Primer::Component
+    warn_on_deprecated_slot_setter
+
     # @example Default
     #   <%= render(Primer::HellipButton.new("aria-label": "No effect")) %>
     #

data/app/components/primer/icon_button.html.erb

@@ -1,12 +1,12 @@
 <% if render_tooltip? %>
   <%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
     <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
-      <%= render Primer::OcticonComponent.new(icon: @icon) %>
+      <%= render Primer::Beta::Octicon.new(icon: @icon) %>
     <% end -%>
     <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
   <% end %>
 <% else %>
   <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
-    <%= render Primer::OcticonComponent.new(icon: @icon) %>
+    <%= render Primer::Beta::Octicon.new(icon: @icon) %>
   <% end -%>
 <% end %>

data/app/components/primer/icon_button.rb

@@ -12,6 +12,7 @@ module Primer
   #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
   #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
   class IconButton < Primer::Component
+    warn_on_deprecated_slot_setter
     status :deprecated
 
     DEFAULT_SCHEME = :default

data/app/components/primer/layout_component.rb

@@ -3,6 +3,8 @@
 module Primer
   # Use `Layout` to build a main/sidebar layout.
   class LayoutComponent < Primer::Component
+    warn_on_deprecated_slot_setter
+
     # The main content
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

data/app/components/primer/local_time.rb

@@ -3,6 +3,9 @@
 module Primer
   # Use `LocalTime` to format a date and time in the user's preferred locale format. This component requires JavaScript.
   class LocalTime < Primer::Component
+    warn_on_deprecated_slot_setter
+    status :deprecated
+
     DEFAULT_DIGIT_TYPE = :numeric
     DIGIT_TYPE_OPTIONS = [DEFAULT_DIGIT_TYPE, :"2-digit"].freeze
 

data/app/components/primer/menu_component.rb

@@ -1,74 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Menu` to create vertical lists of navigational links.
-  class MenuComponent < Primer::Component
-    HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
-    HEADING_TAG_FALLBACK = :h2
-
-    # Optional menu heading
-    #
-    # @param tag [Symbol] <%= one_of(Primer::MenuComponent::HEADING_TAG_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :heading, lambda { |tag:, **system_arguments|
-      system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
-      system_arguments[:classes] = class_names(
-        "menu-heading",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Required list of navigational links
-    #
-    # @param href [String] URL to be used for the Link
-    # @param selected [Boolean] Whether the item is the current selection
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :items, lambda { |href:, selected: false, **system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :a
-      system_arguments[:href] = href
-      system_arguments[:"aria-current"] = :page if selected
-      system_arguments[:classes] = class_names(
-        "menu-item",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #   <%= render(Primer::MenuComponent.new) do |c| %>
-    #     <% c.with_heading(tag: :h2) do %>
-    #       Heading
-    #     <% end %>
-    #     <% c.with_item(selected: true, href: "#url") do %>
-    #       Item 1
-    #     <% end %>
-    #     <% c.with_item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new("check")) %>
-    #       With Icon
-    #     <% end %>
-    #     <% c.with_item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new("check")) %>
-    #       With Icon and Counter
-    #       <%= render(Primer::Beta::Counter.new(count: 25)) %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :nav
-      @system_arguments[:classes] = class_names(
-        "menu",
-        @system_arguments[:classes]
-      )
-    end
-
-    def render?
-      items.any?
-    end
+  class MenuComponent < Primer::Alpha::Menu
+    status :deprecated
   end
 end

data/app/components/primer/navigation/tab_component.rb

@@ -41,13 +41,13 @@ module Primer
 
       # Icon to be rendered in the Tab left.
       #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
       renders_one :icon, lambda { |icon = nil, **system_arguments|
         system_arguments[:classes] = class_names(
           @icon_classes,
           system_arguments[:classes]
         )
-        Primer::OcticonComponent.new(icon, **system_arguments)
+        Primer::Beta::Octicon.new(icon, **system_arguments)
       }
 
       # The Tab's text.

data/app/components/primer/octicon_component.rb

@@ -1,86 +1,8 @@
 # frozen_string_literal: true
 
-require "octicons"
-
 module Primer
-  # `Octicon` renders an <%= link_to_octicons %> with <%= link_to_system_arguments_docs %>.
-  # `Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.
-  class OcticonComponent < Primer::Component
-    status :beta
-
-    SIZE_XSMALL = :xsmall
-    SIZE_DEFAULT = :small
-    SIZE_MEDIUM = :medium
-
-    SIZE_MAPPINGS = {
-      SIZE_XSMALL => 12,
-      SIZE_DEFAULT => 16,
-      SIZE_MEDIUM => 24
-    }.freeze
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-
-    # @example Default
-    #   <%= render(Primer::OcticonComponent.new(:check)) %>
-    #   <%= render(Primer::OcticonComponent.new(icon: :check)) %>
-    #
-    # @example Medium
-    #   <%= render(Primer::OcticonComponent.new(:people, size: :medium)) %>
-    #
-    # @example Helper
-    #   <%= primer_octicon(:check) %>
-    #
-    # @param icon_name [Symbol, String] Name of <%= link_to_octicons %> to use.
-    # @param icon [Symbol, String] Name of <%= link_to_octicons %> to use.
-    # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>
-    # @param use_symbol [Boolean] EXPERIMENTAL (May change or be removed) - Set to true when using with <%= link_to_component(Primer::OcticonSymbolsComponent) %>.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, use_symbol: false, **system_arguments)
-      icon_key = icon_name || icon
-
-      # Don't allow sizes under 16px
-      if system_arguments[:height].present? && system_arguments[:height].to_i < 16 || system_arguments[:width].present? && system_arguments[:width].to_i < 16
-        system_arguments.delete(:height)
-        system_arguments.delete(:width)
-      end
-
-      cache_key = Primer::Octicon::Cache.get_key(
-        symbol: icon_key,
-        size: size,
-        height: system_arguments[:height],
-        width: system_arguments[:width]
-      )
-
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = :svg
-      @system_arguments[:aria] ||= {}
-      @use_symbol = use_symbol
-
-      if @system_arguments[:aria][:label] || @system_arguments[:"aria-label"]
-        @system_arguments[:role] = "img"
-      else
-        @system_arguments[:aria][:hidden] = true
-      end
-
-      if (cache_icon = Primer::Octicon::Cache.read(cache_key))
-        @icon = cache_icon
-      else
-        # Filter out classify options to prevent them from becoming invalid html attributes.
-        # Note height and width are both classify options and valid html attributes.
-        octicon_options = {
-          height: @system_arguments[:height] || SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
-          width: @system_arguments[:width]
-        }
-        octicon_options.compact!
-
-        @icon = Octicons::Octicon.new(icon_key, octicon_options)
-        Primer::Octicon::Cache.set(cache_key, @icon)
-      end
-
-      @system_arguments[:classes] = class_names(
-        @icon.options[:class],
-        @system_arguments[:classes]
-      )
-      @system_arguments.merge!(@icon.options.except(:class, :'aria-hidden'))
-    end
+  class OcticonComponent < Primer::Beta::Octicon
+    warn_on_deprecated_slot_setter
+    status :deprecated
   end
 end

data/app/components/primer/octicon_symbols_component.rb

@@ -1,57 +1,7 @@
 # frozen_string_literal: true
 
-require "octicons"
-
 module Primer
-  # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
-  class OcticonSymbolsComponent < Primer::Component
-    # @example Symbol dictionary
-    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :success)) %>
-    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :danger)) %>
-    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, size: :medium)) %>
-    #   <%= render(Primer::OcticonSymbolsComponent.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
-    #
-    # @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
-    def initialize(icons: [])
-      @icons = {}
-      icons.each do |icon|
-        symbol = icon[:symbol]
-        size = Primer::OcticonComponent::SIZE_MAPPINGS[
-          fetch_or_fallback(Primer::OcticonComponent::SIZE_OPTIONS, icon[:size] || Primer::OcticonComponent::SIZE_DEFAULT, Primer::OcticonComponent::SIZE_DEFAULT)
-        ]
-
-        cache_key = Primer::Octicon::Cache.get_key(symbol: symbol, size: size)
-
-        if (cache_icon = Primer::Octicon::Cache.read(cache_key))
-          icon_instance = cache_icon
-        else
-          icon_instance = Octicons::Octicon.new(symbol, height: size)
-
-          Primer::Octicon::Cache.set(cache_key, icon_instance)
-        end
-
-        # Don't put the same icon twice
-        @icons[[symbol, icon_instance.height]] = icon_instance if @icons[[symbol, icon_instance.height]].nil?
-      end
-    end
-
-    def render?
-      @icons.any?
-    end
-
-    def symbol_tags
-      safe_join(
-        @icons.values.map do |icon|
-          content_tag(
-            :symbol,
-            icon.path.html_safe, # rubocop:disable Rails/OutputSafety
-            id: "octicon_#{icon.symbol}_#{icon.height}",
-            viewBox: icon.options[:viewBox],
-            width: icon.width,
-            height: icon.height
-          )
-        end
-      )
-    end
+  class OcticonSymbolsComponent < Primer::Alpha::OcticonSymbols
+    status :deprecated
   end
 end

data/app/components/primer/primer.d.ts

@@ -11,3 +11,5 @@ import './beta/clipboard_copy';
 import './local_time';
 import './tab_container_component';
 import './time_ago_component';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';

data/app/components/primer/primer.js

@@ -11,3 +11,5 @@ import './beta/clipboard_copy';
 import './local_time';
 import './tab_container_component';
 import './time_ago_component';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';

data/app/components/primer/primer.pcss

@@ -6,12 +6,14 @@
 @import "./alpha/banner.pcss";
 @import "./alpha/dialog.pcss";
 @import "./alpha/dropdown.pcss";
+@import "./alpha/layout.pcss";
 @import "./alpha/tab_nav.pcss";
 @import "./alpha/text_field.pcss";
 @import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
 @import "./alpha/segmented_control.pcss";
+@import "./alpha/menu.pcss";
 
 /* beta */
 @import "./beta/avatar.pcss";
@@ -29,7 +31,6 @@
 @import "./beta/truncate.pcss";
 
 /* to be renamed */
-@import "./menu_component.pcss";
 @import "./state_component.pcss";
 @import "./subhead_component.pcss";
 @import "./timeline_item_component.pcss";

data/app/components/primer/primer.ts

@@ -11,3 +11,5 @@ import './beta/clipboard_copy'
 import './local_time'
 import './tab_container_component'
 import './time_ago_component'
+import '../../../lib/primer/forms/primer_multi_input'
+import '../../../lib/primer/forms/primer_text_field'

data/app/components/primer/spinner_component.rb

@@ -1,43 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Spinner` to let users know that content is being loaded.
-  class SpinnerComponent < Primer::Component
-    status :beta
-
-    DEFAULT_SIZE = :medium
-    SIZE_MAPPINGS = {
-      :small => 16,
-      DEFAULT_SIZE => 32,
-      :large => 64
-    }.freeze
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # Setting `box-sizing: content-box` allows consumers to add padding
-    # to the spinner without shrinking the icon
-    DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
-
-    #
-    # @example Default
-    #   <%= render(Primer::SpinnerComponent.new) %>
-    #
-    # @example Small
-    #   <%= render(Primer::SpinnerComponent.new(size: :small)) %>
-    #
-    # @example Large
-    #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
-    #
-    # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
-    # @param style [String] Custom element styles.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :svg
-      @system_arguments[:style] ||= style
-      @system_arguments[:animation] = :rotate
-      @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
-      @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
-      @system_arguments[:viewBox] = "0 0 16 16"
-      @system_arguments[:fill] = :none
-    end
+  class SpinnerComponent < Primer::Beta::Spinner
+    status :deprecated
   end
 end

data/app/components/primer/state_component.rb

@@ -3,6 +3,7 @@
 module Primer
   # Use `State` for rendering the status of an item.
   class StateComponent < Primer::Component
+    warn_on_deprecated_slot_setter
     status :beta
 
     SCHEME_DEFAULT = :default

data/app/components/primer/subhead_component.rb

@@ -11,6 +11,8 @@ module Primer
   #   The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.
   #   <%= link_to_heading_practices %>
   class SubheadComponent < Primer::Component
+    warn_on_deprecated_slot_setter
+
     status :beta
 
     DEFAULT_HEADING_TAG = :div

data/app/components/primer/tab_container_component.rb

@@ -6,6 +6,8 @@ module Primer
   #
   # This component requires javascript.
   class TabContainerComponent < Primer::Component
+    warn_on_deprecated_slot_setter
+
     # @example Default
     #   <%= render(Primer::TabContainerComponent.new)  do %>
     #     <div role="tablist">

data/app/components/primer/time_ago_component.rb

@@ -3,7 +3,8 @@
 module Primer
   # Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
   class TimeAgoComponent < Primer::Component
-    status :beta
+    warn_on_deprecated_slot_setter
+    status :deprecated
 
     # @example Default
     #   <%= render(Primer::TimeAgoComponent.new(time: Time.at(628232400))) %>