primer_view_components 0.0.41 → 0.0.46

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

@@ -1,3 +1,4 @@
+<%= label %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= input %>
   <%= icon %>

data/app/components/primer/avatar_stack_component.rb

@@ -10,6 +10,9 @@ module Primer
 
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+    DEFAULT_BODY_TAG = :div
+    BODY_TAG_OPTIONS = TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
     # Required list of stacked avatars.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
@@ -40,6 +43,8 @@ module Primer
     # @param align [Symbol] <%= one_of(Primer::AvatarStackComponent::ALIGN_OPTIONS) %>
     # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
     # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
+    #   The default tag is <%= pretty_value(Primer::AvatarStackComponent::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
+    #   to <%= one_of(Primer::AvatarStackComponent::BODY_TAG_OPTIONS, lower: true) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
@@ -47,7 +52,8 @@ module Primer
       @tooltipped = tooltipped
       @body_arguments = body_arguments
 
-      @body_arguments[:tag] ||= :div
+      body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
+      @body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
       @body_arguments[:classes] = class_names(
         "AvatarStack-body",
         @body_arguments[:classes]

data/app/components/primer/base_component.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "primer/classify"
+
 module Primer
   # All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).
   #
@@ -43,7 +45,7 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
+    # | `animation` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:animation)) %> |
     #
     # ## Border
     #
@@ -61,7 +63,7 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS, lower: true) %> |
+    # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBackgroundColors::OPTIONS, lower: true) %> |
     # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
     # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
     #
@@ -83,26 +85,28 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `col` | Integer | Number of columns. |
+    # | `clearfix` | Boolean | Wether to assign the `clearfix` class. |
+    # | `col` | Integer | Number of columns. <%= one_of(Primer::Classify::Grid::COL_VALUES) %> |
+    # | `container` | Symbol | Size of the container. <%= one_of(Primer::Classify::Grid::CONTAINER_VALUES) %> |
     #
     # ## Layout
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :inline_flex, :table, :table_cell]) %> |
+    # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
     # | `height` | Symbol | <%= one_of([:fit]) %> |
-    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
-    # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
-    # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
+    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
+    # | `visibility` | Symbol | Visibility. <%= one_of(Primer::Classify::Utilities.mappings(:visibility)) %> |
+    # | `vertical_align` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:vertical_align)) %> |
     #
     # ## Position
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
-    # | `float` | Symbol | <%= one_of([:left, :right]) %> |
+    # | `float` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:float)) %> |
     # | `left` | Boolean | If `false`, sets `left: 0`. |
-    # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
+    # | `position` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:position)) %> |
     # | `right` | Boolean | If `false`, sets `right: 0`. |
     # | `top` | Boolean | If `false`, sets `top: 0`. |
     #
@@ -110,30 +114,33 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
-    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
-    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
-    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
-    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
-    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
-    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
-    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
-    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
-    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
-    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
-    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
-    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
-    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
+    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Utilities.mappings(:m)) %> |
+    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Utilities.mappings(:mb)) %> |
+    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Utilities.mappings(:ml)) %> |
+    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Utilities.mappings(:mr)) %> |
+    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Utilities.mappings(:mt)) %> |
+    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Utilities.mappings(:mx)) %> |
+    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Utilities.mappings(:my)) %> |
+    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Utilities.mappings(:p)) %> |
+    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Utilities.mappings(:pb)) %> |
+    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Utilities.mappings(:pl)) %> |
+    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Utilities.mappings(:pr)) %> |
+    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Utilities.mappings(:pt)) %> |
+    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Utilities.mappings(:px)) %> |
+    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Utilities.mappings(:py)) %> |
     #
     # ## Typography
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
-    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
+    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
+    # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
+    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
+    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
+    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
-    # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
+    # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Primer::Classify::Utilities.mappings(:word_break)) %> |
     #
     # ## Other
     #
@@ -145,6 +152,35 @@ module Primer
       @tag = tag
       @system_arguments = system_arguments
 
+      raise ArgumentError, "`class` is an invalid argument. Use `classes` instead." if system_arguments.key?(:class) && !Rails.env.production?
+
+      if (denylist = system_arguments[:system_arguments_denylist])
+        if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
+          # Convert denylist from:
+          # { [:p, :pt] => "message" } to:
+          # { p: "message", pt: "message" }
+          unpacked_denylist =
+            denylist.each_with_object({}) do |(keys, value), memo|
+              keys.each { |key| memo[key] = value }
+            end
+
+          violations = unpacked_denylist.keys & @system_arguments.keys
+
+          if violations.any?
+            message = "Found #{violations.count} #{'violation'.pluralize(violations)}:"
+            violations.each do |violation|
+              message += "\n The #{violation} system argument is not allowed here. #{unpacked_denylist[violation]}"
+            end
+
+            raise(ArgumentError, message)
+          end
+        end
+
+        # Remove :system_arguments_denylist key and any denied keys from system arguments
+        @system_arguments.except!(:system_arguments_denylist)
+        @system_arguments.except!(*denylist.keys.flatten)
+      end
+
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
       @system_arguments[:"data-view-component"] = true

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Text` is a wrapper component that will apply typography styles to the text inside.
+    class Text < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+
+      # @example Default
+      #   <%= render(Primer::Beta::Text.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
+      #   <%= render(Primer::Beta::Text.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
+      #
+      # @param tag [Symbol]
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = tag
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -1,3 +1,4 @@
+<%# erblint:counter ButtonComponentMigrationCounter 1 %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if spinner.present? %>
     <%= spinner %>

data/app/components/primer/blankslate_component.rb

@@ -23,61 +23,79 @@ module Primer
     #     description: "Description",
     #   ) %>
     #
-    # @example Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :globe,
-    #     title: "Title",
-    #     description: "Description",
-    #   ) %>
+    # @example Icon
+    #   @description
+    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :globe,
+    #       title: "Title",
+    #       description: "Description",
+    #     ) %>
     #
-    # @example Loading|Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #     description: "Description",
-    #   ) do |component| %>
-    #     <% component.spinner(size: :large) %>
-    #   <% end %>
+    # @example Loading
+    #   @description
+    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #       description: "Description",
+    #     ) do |component| %>
+    #       <% component.spinner(size: :large) %>
+    #     <% end %>
     #
-    # @example Custom content|Pass custom content as a block in place of `description`.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #   ) do %>
-    #     <em>Your custom content here</em>
-    #   <% end %>
+    # @example Custom content
+    #   @description
+    #     Pass custom content as a block in place of `description`.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #     ) do %>
+    #       <em>Your custom content here</em>
+    #     <% end %>
     #
-    # @example Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :book,
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    # @example Action button
+    #   @description
+    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
     #
-    #     button_text: "Create the first page",
-    #     button_url: "https://github.com/monalisa/mona/wiki/_new",
-    #   ) %>
+    #       button_text: "Create the first page",
+    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #     ) %>
     #
-    # @example Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :book,
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     link_text: "Learn more about wikis",
-    #     link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-    #   ) %>
+    # @example Link
+    #   @description
+    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       link_text: "Learn more about wikis",
+    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #     ) %>
     #
-    # @example Variations|There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :book,
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     narrow: true,
-    #     large: true,
-    #     spacious: true,
-    #   ) %>
+    # @example Variations
+    #   @description
+    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       narrow: true,
+    #       large: true,
+    #       spacious: true,
+    #     ) %>
     #
     # @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) %>
+    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::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.
@@ -89,6 +107,7 @@ module Primer
     # @param narrow [Boolean] Adds a maximum width.
     # @param large [Boolean] Increases the font size.
     # @param spacious [Boolean] Adds extra padding.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       title: "",
       title_tag: :h3,

data/app/components/primer/border_box_component.rb

@@ -11,6 +11,7 @@ module Primer
       :condensed => "Box--condensed",
       :spacious => "Box--spacious"
     }.freeze
+    PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
 
     # Optional Header.
     #
@@ -111,6 +112,8 @@ module Primer
         PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
         system_arguments[:classes]
       )
+
+      @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
     end
 
     def render?

data/app/components/primer/button_component.rb

@@ -78,11 +78,12 @@ module Primer
     #
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
-    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param tag [Symbol] (Primer::BaseButton::DEFAULT_TAG) <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Primer::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
     # @param block [Boolean] Whether button is full-width with `display: block`.
     # @param caret [Boolean] Whether or not to render a caret.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,

data/app/components/primer/button_group.rb

@@ -22,7 +22,7 @@ module Primer
     #     <% component.button(scheme: :primary) { "Primary" } %>
     #     <% component.button(scheme: :danger) { "Danger" } %>
     #     <% component.button(scheme: :outline) { "Outline" } %>
-    #     <% component.button(classes: "my-class") { "Custom class" } %>
+    #     <% component.button(classes: "custom-class") { "Custom class" } %>
     #   <% end %>
     #
     # @example Variants

data/app/components/primer/clipboard_copy.rb

@@ -2,25 +2,43 @@
 
 module Primer
   # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
+  #
+  # @accessibility
+  #   Always set an accessible label to help the user interact with the component.
   class ClipboardCopy < Primer::Component
     status :alpha
 
     # @example Default
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
     #
     # @example With text instead of icons
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) do %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) do %>
     #     Click to copy!
     #   <% end %>
     #
-    # @param label [String] String that will be read to screenreaders when the component is focused
-    # @param value [String] Text to copy into the users clipboard when they click the component
+    # @example Copying from an element
+    #   <%= render(Primer::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
+    #   <div id="blob-path">src/index.js</div>
+    #
+    # @param aria-label [String] String that will be read to screenreaders when the component is focused
+    # @param value [String] Text to copy into the users clipboard when they click the component.
+    # @param for [String] Element id from where to get the copied value.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, value:, **system_arguments)
+    def initialize(value: nil, **system_arguments)
       @system_arguments = system_arguments
+      @value = value
+
+      validate!
+
       @system_arguments[:tag] = "clipboard-copy"
-      @system_arguments[:value] = value
-      @system_arguments[:"aria-label"] = label
+      @system_arguments[:value] = value if value.present?
+    end
+
+    private
+
+    def validate!
+      validate_aria_label
+      raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
     end
   end
 end

data/app/components/primer/component.rb

@@ -5,7 +5,7 @@ require "view_component/version"
 module Primer
   # @private
   class Component < ViewComponent::Base
-    include ViewComponent::SlotableV2 unless ViewComponent::VERSION::STRING.to_f >= 2.28
+    include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper
@@ -15,6 +15,10 @@ module Primer
 
     private
 
+    def force_system_arguments?
+      Rails.application.config.primer_view_components.force_system_arguments
+    end
+
     def deprecated_component_warning(new_class: nil, version: nil)
       return if Rails.env.production? || silence_deprecations?