primer_view_components 0.0.114 → 0.0.116

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

@@ -0,0 +1,89 @@
+# 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
+      warn_on_deprecated_slot_setter
+      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/popover.rb

@@ -6,6 +6,7 @@ module Primer
     #
     # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
     class Popover < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       CARET_DEFAULT = :top

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

@@ -32,24 +32,24 @@ module Primer
       SIZE_OPTIONS = SIZE_MAPPINGS.keys
       # @example Default
       #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
-      #     <% component.item(percentage: 25) %>
+      #     <% component.with_item(percentage: 25) %>
       #   <% end %>
       #
       # @example Small
       #   <%= render(Primer::Beta::ProgressBar.new(size: :small)) do |component| %>
-      #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 50) %>
       #   <% end %>
       #
       # @example Large
       #   <%= render(Primer::Beta::ProgressBar.new(size: :large)) do |component| %>
-      #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 75) %>
       #   <% end %>
       #
       # @example Multiple items
       #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
-      #     <% component.item(percentage: 10) %>
-      #     <% component.item(bg: :accent_emphasis, percentage: 20) %>
-      #     <% component.item(bg: :danger_emphasis, percentage: 30) %>
+      #     <% component.with_item(percentage: 10) %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 20) %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 30) %>
       #   <% end %>
       #
       # @param size [Symbol] <%= one_of(Primer::Beta::ProgressBar::SIZE_OPTIONS) %> Increases height.
@@ -65,7 +65,7 @@ module Primer
       end
 
       def render?
-        items.any?
+        items?
       end
     end
   end

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

@@ -101,7 +101,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,45 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Spinner` to let users know that content is being loaded.
+    class Spinner < 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::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/truncate.rb

@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Truncate` to shorten overflowing text with an ellipsis.
     class Truncate < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       # Text slot used for the truncated text.
@@ -77,11 +78,11 @@ module Primer
       def before_render
         return unless content.present? && items.empty?
 
-        item { content }
+        with_item { content }
       end
 
       def render?
-        items.any?
+        items?
       end
 
       # This component is part of `Primer::Beta::Truncate` and should not be

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/button_component.rb

@@ -28,17 +28,17 @@ 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
+    alias icon with_leading_visual_icon # remove alias when all buttons are migrated to new slot names
 
     # Trailing visuals appear to the right of the button text.
     #
@@ -54,7 +54,7 @@ module Primer
         Primer::Beta::Counter.new(**system_arguments)
       }
     }
-    alias counter trailing_visual_counter # remove alias when all buttons are migrated to new slot names
+    alias counter with_trailing_visual_counter # remove alias when all buttons are migrated to new slot names
 
     # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
     # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.

data/app/components/primer/component.rb

@@ -6,6 +6,7 @@ module Primer
   # @private
   # :nocov:
   class Component < ViewComponent::Base
+    warn_on_deprecated_slot_setter
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ViewComponent::PolymorphicSlots unless ViewComponent::Base < ViewComponent::PolymorphicSlots
     include ClassNameHelper

data/app/components/primer/dropdown_menu_component.rb

@@ -18,12 +18,12 @@ module Primer
 
     # @example With a header
     #   <div>
-    #     <%= render(Primer::Beta::Details.new(overlay: :default, reset: true, position: :relative)) do |c| %>
-    #       <% c.summary do %>
+    #     <%= render(Primer::Beta::Details.new(overlay: :default, reset: true, position: :relative)) do |component| %>
+    #       <% component.with_summary do %>
     #         Dropdown
     #       <% end %>
     #
-    #       <% c.body do %>
+    #       <% component.with_body do %>
     #         <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
     #           <ul>
     #             <li><a class="dropdown-item" href="#url">Dropdown item</a></li>

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/local_time.rb

@@ -3,6 +3,8 @@
 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
+    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,7 @@
 # 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
+    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