primer_view_components 0.0.60 → 0.0.64

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb6606f92936041aed71037f2590bdd1ea29778b963a5396f19dcf8d57b70dc5
-  data.tar.gz: 2f0525e24ddb1e5fa304220caaec413b52e4543c81196e2401a33ca4fb13fdbc
+  metadata.gz: 293526832927614dca06b1e03788d2db4f94fef8a5572a20304bd85e5498bd53
+  data.tar.gz: 419cd1ea3365120b4a3bb4429a1b9da105b2dc3c8474015a661b6e44d319f359
 SHA512:
-  metadata.gz: 525f0e51074bc3490763836ce5060180d6222048333b53a768ae4cb287e6cff234ef69a5b570b760328fc4a26da165bf586694b3a0ecdf8287d750426c258541
-  data.tar.gz: ba7fd3fbb1ab40e214fa6be6ceda52b84875d48c49f7aa75c790d3d594049b0a183e4a94959f36a82ccafa47acdc4ee9c1e0d065f33659ceb710adabbd50e933
+  metadata.gz: 2da4816e43ed7a7b7a13436d83d767bb5d6ee100748c7058f8a2f201e41132f34a17df862bf0f798b216f4b2b2cb6249b2bd61a3d620fbc401ce6fa06a16ce43
+  data.tar.gz: ca7bbc94ecdc2a39b57892f881b9be545b4af17456ac14094880a5154ebd6a2d6e69fe1e1b219f9ec1bbddac607a4c25b6f12c7117a32dd06366c3125f521f1b

data/CHANGELOG.md

@@ -30,6 +30,160 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.64
+
+### New
+
+* Add `raise_on_invalid_aria` config option to silence `aria-label` errors.
+
+    *Manuel Puyol*
+
+### Bug Fixes
+
+* Add missing `border: 0`, `font_size: 0` and responsive `flex` system arguments.
+
+    *Manuel Puyol*
+
+## 0.0.63
+
+### Breaking Changes
+
+* Rename `caret` argument to `dropdown` in `ButtonComponent`.
+
+    *Manuel Puyol*
+
+* Remove `:large` variant from `ButtonComponent`.
+
+    *Manuel Puyol*
+
+* Update `Spinner` to add system arguments to outermost element
+
+    *Charlotte Dann*
+
+### Deprecations
+
+* Deprecate `icon` and `counter` slots in `ButtonComponent` in favor of `leading_visual` and `trailing_visual`.
+
+    *Manuel Puyol*
+
+### Bug Fixes
+
+* Fix `PopoverComponent`, allowing to reset `left` and `right` positioning.
+
+    *Manuel Puyol*
+
+## 0.0.62
+
+### New
+
+* Add linter for tracking deprecated `LayoutComponent` callsites
+
+    *Josh Klina*
+
+### Updates
+
+* Update `Button` to add `8px` spacing between icon, text and counter.
+
+    *Manuel Puyol*
+
+* Update `BlankslateApiMigration` linter to support interpolations.
+
+    *Manuel Puyol*
+
+* Change spacing in `Blankslate`:
+  * Between `description` and `primary_action` to `32px`.
+  * Between `primary_action` and `secondary_action` to `16px`.
+
+    *Manuel Puyol*
+
+* Improve performance of `Classify#call`.
+
+    *Cameron Dutro*
+
+### Breaking Changes
+
+* Add a warning to users if they try to use `tag:` parameters on a component where the tag is fixed.
+
+    *Owen Niblock*
+
+* Updating to @primer/css@19.0.0 and @primer/primitives@7.1.0. Which removes support for deprecated system color arguments.
+
+    *Jon Rohan*
+
+* Prevent `aria-label` to be used with `:div, :span, :p` tags without an explicit `role`.
+
+    *Manuel Puyol*
+
+## 0.0.61
+
+### New
+
+* Adding new Alpha component: `Layout` with `main` and `sidebar` slots
+
+    *Cameron Dutro*
+
+* Add a two-column layout linter.
+
+    *Cameron Dutro*
+
+* Add the `HellipButton` component
+
+    *Amélia Chavot*, *Owen Niblock*
+
+### Updates
+
+* Bump Storybook version to include Skip to Content links for keyboard auditors.
+
+    *Katie Foster @inkblotty*
+
+* Update the `HiddenTextExpander` component to use the `HellipButton`.
+
+    *Amélia Chavot*, *Owen Niblock*
+
+### Misc
+
+* Fix components not rendering in Storybook because of kebab case arguments.
+
+    *Amélia Chavot*, *Manuel Puyol*, *Owen Niblock*
+
+* Fix a typo on a command on the contribution page.
+
+    *Amélia Chavot*, *Owen Niblock*
+
+### Bug Fixes
+
+* Fix issue where tags were not self-closing when they are void elements.
+
+    *Owen Niblock*
+
+### Deprecations
+
+* Deprecate `Primer::BlankslateComponent` in favor of `Primer::Beta::Blankslate`.
+
+    *Manuel Puyol*
+
+### Breaking Changes
+
+* Require an `aria-label` to be provided for the `HiddenTextExpander` component.
+
+    *Amélia Chavot*, *Owen Niblock*
+
+* Rename `force_system_arguments` to `raise_on_invalid_options` to better reflect its functionality
+
+    *Owen Niblock*
+
+* Renamed `Blankslate` `title` slot to `heading`.
+
+    *Manuel Puyol*
+
+* Removed `Blankslate` `large` variant.
+
+    *Manuel Puyol*
+
+* Renamed `Blankslate` `graphic` slot to `visual`.
+
+    *Manuel Puyol*
+
 ## 0.0.60
 
 ### Updates
@@ -535,7 +689,7 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
     *Manuel Puyol*
 
-* Added a changelog authoring guide to `CHANGELOG.md`.
+* Add a changelog authoring guide to `CHANGELOG.md`.
 
     *Amélia Chavot*
 

data/app/components/primer/alpha/border_box/header.rb

@@ -3,8 +3,7 @@
 module Primer
   module Alpha
     module BorderBox
-      # BorderBox::Header: used inside the BorderBoxComponent to render its header slot
-      # Optional title slot
+      # `BorderBox::Header` is used inside `BorderBox` to render its header slot.
       #
       # @accessibility When using `header.title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
       class Header < Primer::Component

data/app/components/primer/alpha/button_marketing.rb

@@ -7,9 +7,9 @@ module Primer
       DEFAULT_SCHEME = :default
       SCHEME_MAPPINGS = {
         DEFAULT_SCHEME => "",
-        :primary => "btn-primary-mktg",
-        :outline => "btn-outline-mktg",
-        :transparent => "btn-transparent"
+        :primary => "btn-signup-mktg",
+        :outline => "btn-muted-mktg",
+        :transparent => "btn-subtle-mktg"
       }.freeze
       SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
@@ -30,7 +30,7 @@ module Primer
       #   <%= render(Primer::Alpha::ButtonMarketing.new(mr: 2)) { "Default" } %>
       #   <%= render(Primer::Alpha::ButtonMarketing.new(scheme: :primary, mr: 2)) { "Primary" } %>
       #   <%= render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" } %>
-      #   <div class="color-bg-canvas-inverse">
+      #   <div class="color-bg-emphasis">
       #     <%= render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" } %>
       #   </div>
       #

data/app/components/primer/alpha/layout.html.erb

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if @first_in_source == :main %><%= main %><% end %>
+  <%= sidebar %>
+  <% if @first_in_source == :sidebar %><%= main %><% end %>
+<% end %>

data/app/components/primer/alpha/layout.rb

@@ -0,0 +1,276 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # `Layout` provides foundational patterns for responsive pages.
+    # `Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.
+    #  On smaller screens, `Layout` uses vertically stacked rows to display content.
+    #
+    # `Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);
+    # or it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).
+    # `Layout` should always work in any screen size.
+    #
+    # @accessibility
+    #   Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
+    #   `main` or `sidebar` comes first in code. The code order won’t affect the visual position.
+    class Layout < Primer::Component
+      FIRST_IN_SOURCE_DEFAULT = :sidebar
+      FIRST_IN_SOURCE_OPTIONS = [FIRST_IN_SOURCE_DEFAULT, :main].freeze
+
+      SIDEBAR_COL_PLACEMENT_DEFAULT = :start
+      SIDEBAR_COL_PLACEMENT_OPTIONS = [SIDEBAR_COL_PLACEMENT_DEFAULT, :end].freeze
+
+      GUTTER_DEFAULT = :default
+      GUTTER_MAPPINGS = {
+        :none => "Layout--gutter-none",
+        :condensed => "Layout--gutter-condensed",
+        :spacious => "Layout--gutter-spacious",
+        GUTTER_DEFAULT => ""
+      }.freeze
+      GUTTER_OPTIONS = GUTTER_MAPPINGS.keys.freeze
+
+      STACKING_BREAKPOINT_DEFAULT = :md
+      STACKING_BREAKPOINT_MAPPINGS = {
+        :sm => "",
+        STACKING_BREAKPOINT_DEFAULT => "Layout--flowRow-until-md",
+        :lg => "Layout--flowRow-until-lg"
+      }.freeze
+      STACKING_BREAKPOINT_OPTIONS = STACKING_BREAKPOINT_MAPPINGS.keys.freeze
+
+      SIDEBAR_ROW_PLACEMENT_DEFAULT = :start
+      SIDEBAR_ROW_PLACEMENT_OPTIONS = [SIDEBAR_ROW_PLACEMENT_DEFAULT, :end, :none].freeze
+
+      SIDEBAR_WIDTH_DEFAULT = :default
+      SIDEBAR_WIDTH_MAPPINGS = {
+        SIDEBAR_WIDTH_DEFAULT => "",
+        :narrow => "Layout--sidebar-narrow",
+        :wide => "Layout--sidebar-wide"
+      }.freeze
+      SIDEBAR_WIDTH_OPTIONS = SIDEBAR_WIDTH_MAPPINGS.keys.freeze
+
+      # The layout's main content.
+      #
+      # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::Main::WIDTH_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :main, "Primer::Alpha::Layout::Main"
+
+      # The layout's sidebar.
+      #
+      # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::SIDEBAR_WIDTH_OPTIONS) %>
+      # @param col_placement [Symbol] Sidebar placement when `Layout` is in column modes. <%= one_of(Primer::Alpha::Layout::SIDEBAR_COL_PLACEMENT_OPTIONS) %>
+      # @param row_placement [Symbol] Sidebar placement when `Layout` is in row mode. <%= one_of(Primer::Alpha::Layout::SIDEBAR_ROW_PLACEMENT_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :sidebar, lambda { |
+        width: SIDEBAR_WIDTH_DEFAULT,
+        col_placement: SIDEBAR_COL_PLACEMENT_DEFAULT,
+        row_placement: SIDEBAR_ROW_PLACEMENT_DEFAULT,
+        **system_arguments
+      |
+        # These classes have to be set in the parent `Layout` element, so we modify its system arguments.
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Layout--sidebarPosition-#{fetch_or_fallback(SIDEBAR_COL_PLACEMENT_OPTIONS, col_placement, SIDEBAR_COL_PLACEMENT_DEFAULT)}",
+          "Layout--sidebarPosition-flowRow-#{fetch_or_fallback(SIDEBAR_ROW_PLACEMENT_OPTIONS, row_placement, SIDEBAR_ROW_PLACEMENT_DEFAULT)}",
+          SIDEBAR_WIDTH_MAPPINGS[fetch_or_fallback(SIDEBAR_WIDTH_OPTIONS, width, SIDEBAR_WIDTH_DEFAULT)]
+        )
+
+        Primer::Alpha::Layout::Sidebar.new(**system_arguments)
+      }
+
+      # @example Default
+      #
+      #   <%= render(Primer::Alpha::Layout.new) do |c| %>
+      #     <% c.main(border: true) { "Main" } %>
+      #     <% c.sidebar(border: true) { "Sidebar" } %>
+      #   <% end %>
+      #
+      # @example Main widths
+      #
+      #   @description
+      #     When `full`, the main column will stretch to cover all the available width.
+      #     Otherwise, the main column will try to be centered in the screen; it may appear aligned to the left when there isn't enough space.
+      #
+      #     Use smaller maximum widths in the main column to facilitate interface scanning and reading.
+      #
+      #     When flowing as a row, `Main` takes the full width.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
+      #       <% c.main(width: :full, border: true) { "Main" } %>
+      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
+      #       <% c.main(width: :md, border: true) { "Main" } %>
+      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
+      #       <% c.main(width: :lg, border: true) { "Main" } %>
+      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
+      #       <% c.main(width: :xl, border: true) { "Main" } %>
+      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Sidebar widths
+      #
+      #   @description
+      #     Sets the sidebar width. The width is predetermined according to the breakpoint instead of it being percentage-based.
+      #
+      #     - `default`: [md: 256px, lg: 296px, xl: 320px]
+      #     - `narrow`: [md: 240px, lg: 256px, xl: 296px]
+      #     - `wide`: [md: 296px, lg: 320px, xl: 344px]
+      #
+      #     When flowing as a row, `Sidebar` takes the full width.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(width: :default, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(width: :narrow, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(width: :wide, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Sidebar placement
+      #
+      #   @description
+      #     Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(col_placement: :start, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new( mt: 5)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(col_placement: :end, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Sidebar placement as row
+      #
+      #   @description
+      #     When flowing as a row, whether the sidebar is rendered first or last in the layout, or, if it's entirely hidden from the user.
+      #
+      #     When `hidden`, make sure the experience is not degraded on smaller screens, and the user can still access the sidebar content somehow.
+      #     For instance, the user may not see a Settings navigation sidebar when drilled down on a page, but they can still navigate to the Settings
+      #     landing page to interact with the local navigation.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(row_placement: :start, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(row_placement: :end, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(row_placement: :none, border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @example Changing when to render `Layout` as columns
+      #
+      #   @description
+      #     You can specify when the `Layout` should change from rows into columns.
+      #     Any screen size before this breakpoint will render the `Layout` in stacked rows.
+      #
+      #   @code
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #     <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |c| %>
+      #       <% c.main(border: true) { "Main" } %>
+      #       <% c.sidebar(border: true) { "Sidebar" } %>
+      #     <% end %>
+      #
+      # @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>
+      # @param first_in_source [Symbol] Which element to render first in the HTML. This will change the keyboard navigation order. <%= one_of(Primer::Alpha::Layout::FIRST_IN_SOURCE_OPTIONS) %>
+      # @param gutter [Symbol] The amount of space between the main section and the sidebar. <%= one_of(Primer::Alpha::Layout::GUTTER_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(stacking_breakpoint: STACKING_BREAKPOINT_DEFAULT, first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default, **system_arguments)
+        @first_in_source = fetch_or_fallback(FIRST_IN_SOURCE_OPTIONS, first_in_source, FIRST_IN_SOURCE_OPTIONS)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "Layout",
+          STACKING_BREAKPOINT_MAPPINGS[fetch_or_fallback(STACKING_BREAKPOINT_OPTIONS, stacking_breakpoint, STACKING_BREAKPOINT_DEFAULT)],
+          GUTTER_MAPPINGS[fetch_or_fallback(GUTTER_OPTIONS, gutter, GUTTER_DEFAULT)],
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        main.present? && sidebar.present?
+      end
+
+      # The layout's main content.
+      class Main < Primer::Component
+        WIDTH_DEFAULT = :full
+        WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze
+
+        TAG_DEFAULT = :div
+        TAG_OPTIONS = [TAG_DEFAULT, :main].freeze
+
+        # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::Main::WIDTH_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments)
+          @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT)
+
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+          @system_arguments[:classes] = class_names(
+            "Layout-main",
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            if @width == :full
+              content
+            else
+              render(Primer::BaseComponent.new(tag: :div, classes: "Layout-main-centered-#{@width}")) do
+                render(Primer::BaseComponent.new(tag: :div, container: @width)) do
+                  content
+                end
+              end
+            end
+          end
+        end
+      end
+
+      # The layout's sidebar content.
+      class Sidebar < Primer::Component
+        TAG_DEFAULT = :div
+        TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze
+
+        def initialize(tag: TAG_DEFAULT, **system_arguments)
+          @system_arguments = system_arguments
+
+          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+          @system_arguments[:classes] = class_names(
+            "Layout-sidebar",
+            @system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tab_nav.rb

@@ -101,7 +101,7 @@ module Primer
       #   <% end %>
       #
       # @example Customizing the body
-      #   <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
       #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
       #     <% c.tab(href: "#") { "Tab 2" } %>
       #     <% c.tab(href: "#") { "Tab 3" } %>

data/app/components/primer/alpha/tab_panels.rb

@@ -66,11 +66,11 @@ module Primer
         @align = EXTRA_ALIGN_DEFAULT
         @wrapper_arguments = wrapper_arguments
 
-        @system_arguments = system_arguments
+        @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
         @system_arguments[:classes] = tab_nav_classes(@system_arguments[:classes])
 
-        @body_arguments = body_arguments
+        @body_arguments = deny_tag_argument(**body_arguments)
         @body_arguments[:tag] = :ul
         @body_arguments[:classes] = tab_nav_body_classes(@body_arguments[:classes])
 

data/app/components/primer/alpha/underline_nav.rb

@@ -5,6 +5,7 @@ module Primer
     # Use `UnderlineNav` to style navigation links with a minimal
     # underlined selected state, typically placed at the top
     # of the page.
+    #
     # For panel navigation, use <%= link_to_component(Primer::Alpha::UnderlinePanels) %> instead.
     #
     # @accessibility
@@ -102,7 +103,7 @@ module Primer
       #   <% end %>
       #
       # @example Customizing the body
-      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
       #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
       #     <% c.tab(href: "#") { "Tab 2" } %>
       #     <% c.tab(href: "#") { "Tab 3" } %>

data/app/components/primer/alpha/underline_panels.rb

@@ -64,11 +64,11 @@ module Primer
         @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
         @wrapper_arguments = wrapper_arguments
 
-        @system_arguments = system_arguments
+        @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
         @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
 
-        @body_arguments = body_arguments
+        @body_arguments = deny_tag_argument(**body_arguments)
         @body_arguments[:tag] = :ul
         @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
 

data/app/components/primer/base_button.rb

@@ -28,11 +28,7 @@ module Primer
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
 
-      if @system_arguments[:tag] == :button
-        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
-      else
-        @system_arguments[:role] = :button
-      end
+      @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) if @system_arguments[:tag] == :button
 
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],

data/app/components/primer/base_component.rb

@@ -27,6 +27,7 @@ module Primer
   class BaseComponent < Primer::Component
     status :beta
 
+    SELF_CLOSING_TAGS = [:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
     # ## HTML attributes
     #
     # System arguments include most HTML attributes. For example:
@@ -71,14 +72,14 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `align_items` | Symbol | <%= one_of(Primer::Classify::Flex::ALIGN_ITEMS_VALUES) %> |
-    # | `align_self` | Symbol | <%= one_of(Primer::Classify::Flex::ALIGN_SELF_VALUES) %> |
-    # | `direction` | Symbol | <%= one_of(Primer::Classify::Flex::DIRECTION_VALUES) %> |
-    # | `flex` | Integer, Symbol | <%= one_of(Primer::Classify::Flex::FLEX_VALUES) %> |
+    # | `align_items` | Symbol | <%= one_of(Primer::Classify::FLEX_ALIGN_ITEMS_VALUES) %> |
+    # | `align_self` | Symbol | <%= one_of(Primer::Classify::FLEX_ALIGN_SELF_VALUES) %> |
+    # | `direction` | Symbol | <%= one_of(Primer::Classify::FLEX_DIRECTION_VALUES) %> |
+    # | `flex` | Integer, Symbol | <%= one_of(Primer::Classify::FLEX_VALUES) %> |
     # | `flex_grow` | Integer | To enable, set to `0`. |
     # | `flex_shrink` | Integer | To enable, set to `0`. |
-    # | `flex_wrap` | Symbol | <%= one_of(Primer::Classify::Flex::WRAP_MAPPINGS.keys) %> |
-    # | `justify_content` | Symbol | <%= one_of(Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES) %> |
+    # | `flex_wrap` | Symbol | <%= one_of(Primer::Classify::FLEX_WRAP_MAPPINGS.keys) %> |
+    # | `justify_content` | Symbol | <%= one_of(Primer::Classify::FLEX_JUSTIFY_CONTENT_VALUES) %> |
     #
     # ## Grid
     #
@@ -150,46 +151,22 @@ module Primer
     # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: nil, **system_arguments)
       @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
+      @system_arguments = validate_arguments(tag: tag, **system_arguments)
 
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
       @system_arguments[:"data-view-component"] = true
       # Filter out Primer keys so they don't get assigned as HTML attributes
-      @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::VALID_KEYS)
+      @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::Utilities::UTILITIES.keys)
     end
 
     def call
-      content_tag(@tag, content, @content_tag_args.merge(@result))
+      if SELF_CLOSING_TAGS.include?(@tag)
+        tag(@tag, @content_tag_args.merge(@result))
+      else
+        content_tag(@tag, content, @content_tag_args.merge(@result))
+      end
     end
   end
 end

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

@@ -20,7 +20,7 @@ module Primer
         # @param disabled [Boolean] Whether the item is disabled.
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(value:, selected: false, disabled: false, **system_arguments)
-          @system_arguments = system_arguments
+          @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :li
           @system_arguments[:role] = :option
           @system_arguments[:"data-autocomplete-value"] = value