primer_view_components 0.0.88 → 0.0.91

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

@@ -2,82 +2,101 @@
 
 module Primer
   module Alpha
-    # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text.
-    # Use tooltips sparingly and as a last resort.
-    #
-    # When using a tooltip, follow the provided guidelines to avoid accessibility issues.
-    #
-    # - Tooltip text should be brief and to the point. The tooltip content must be a string.
-    # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never
-    #  use tooltips to convey critical information.
+    # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.
+    # Use tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).
     #
+    # When using a tooltip, follow the provided guidelines to avoid accessibility issues:
+    # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
+    # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::LinkComponent)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
     # @accessibility
-    #   - **Never set tooltips on static elements.** Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
-    #   and screen reader users.
-    #   - Place `Tooltip` adjacent after its trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
+    #   - Tooltip text must be brief and concise whether it is a label or a description.
+    #   - Tooltip can only hold string content.
+    #   - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
+    #   and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::LinkComponent) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
+    #   - If you must use `Tooltip` as a standalone component, place it adjacent after the trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
     #   content.
-    #   ### Which `type` should I set?
-    #   Setting `:description` establishes an `aria-describedby` relationship, while `:label` establishes an `aria-labelledby` relationship between the trigger element and the tooltip,
-    #
-    #   The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
-    #   - When there is already a visible label text on the trigger element, the tooltip is likely intended to supplement the existing text, so set `type: :description`.
+    #   ### Which type should I set?
+    #   Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
+    #   `aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
+    #   - When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.
     #   The majority of tooltips will fall under this category.
     #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
-    #   This type is usually only appropriate for an icon-only control.
+    #   `label` type is usually only appropriate for an icon-only control.
     class Tooltip < Primer::Component
       DIRECTION_DEFAULT = :s
       DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
 
       TYPE_FALLBACK = :description
       TYPE_OPTIONS = [:label, :description].freeze
-      # @example As a description for an icon-only button
+      # @example As a supplementary description for a button
       #   @description
-      #     If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
-      #     The trigger element should also have a _concise_ accessible label via `aria-label`.
+      #     In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
+      #     A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
       #   @code
-      #     <%= render(Primer::IconButton.new(id: "bold-button-0", icon: :bold, "aria-label": "Bold")) %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :ne)) %>
-      # @example As a label for an icon-only button
+      #     <%= render(Primer::ButtonComponent.new(id: "save-button")) do |c| %>
+      #       <% c.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
+      #       Save
+      #     <% end %>
+      # @example As a label for an `IconButton`
       #   @description
-      #     If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
+      #     An `IconButton` of `tag: :button` and `tag: :a` will render a tooltip using the `aria-label` content by default. While tooltips should generally be avoided, a tooltip on an `IconButton`
+      #     has usability benefits because it provides a textual label for sighted users.
+      #     A screen reader user who encounters the following button will hear the accessible name, "Bold".
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "like-button")) { "👍" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "like-button", type: :label, text: "Like", direction: :n)) %>
-      #
-      # @example As a description for a button with visible label
+      #     <%= render(Primer::IconButton.new(id: "bold-button-0", icon: :bold, "aria-label": "Bold")) %>
+      # @example As a supplementary description for an `IconButton`
       #   @description
-      #     If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
+      #     If you want to provide a description for the `IconButton`, set both `aria-label` and `aria-description` text. The tooltip will use the `aria-description` text.
+      #     A screen reader user who encounters the following button will hear the accessible name "Search", followed by the accessible description "Use keywords like 'repo:' and 'org:' in your query".
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "save-button", scheme: :primary)) { "Save" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :ne)) %>
+      #     <%= render(Primer::IconButton.new(id: "search-button", icon: :search, "aria-label": "Search", "aria-description": "Use keywords like 'repo:' and 'org:' in your query")) %>
+      #
       # @example With direction
       #   @description
       #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) { "North" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :n)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) { "South" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :s)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) { "East" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :e)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) { "West" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "West", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :w)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) { "Northeast" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Northeast", type: :description, text: "This is a Northeast-facing tooltip and is responsive.", direction: :ne)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) { "Southeast" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Southeast", type: :description, text: "This is a Southeast-facing tooltip and is responsive.", direction: :se)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) { "Northwest" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Northwest", type: :description, text: "This is a Northwest-facing tooltip and is responsive.", direction: :nw)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) { "Southwest" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Southwest", type: :description, text: "This is a Southwest-facing tooltip and is responsive.", direction: :sw)) %>
-      # @example With relative parent
+      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
+      #       North
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
+      #       South
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
+      #       East
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
+      #       West
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
+      #       Northwest
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
+      #       Southwest
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
+      #       Northeast
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
+      #       Southeast
+      #     <% end %>
+      # @example Directly using `Tooltip`
       #   @description
-      #     When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
+      #     When you have a valid tooltip usecase for an interactive element that is not one of the supported components, you may need to use the `Tooltip` component directly.
+      #     The tooltip should be placed directly adjacent after the element you are associating it with.
+      #     The tooltip is absolutely positioned so ensure there is a wrapper with `position: relative` to avoid positioning issues.
       #   @code
-      #     <span style="position: relative;">
-      #       <%= render(Primer::ButtonComponent.new(id: "test-button", scheme: :primary)) { "Test" } %>
+      #     <div style="position: relative;">
+      #       <button type="button" id="test-button">Test</button>
       #       <%= render(Primer::Alpha::Tooltip.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
-      #     </span>
+      #     </div>
       # @param for_id [String] The ID of the element that the tooltip should be attached to.
       # @param type [Symbol] <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
       # @param direction [Symbol] <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
@@ -88,8 +107,8 @@ module Primer
 
         @text = text
         @system_arguments = system_arguments
+        @system_arguments[:hidden] = true
         @system_arguments[:tag] = :"tool-tip"
-        @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "visibility: hidden")
         @system_arguments[:for] = for_id
         @system_arguments[:position] = :absolute
         @system_arguments[:"data-direction"] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s

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

@@ -53,60 +53,60 @@ module Primer
       #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
       #   @code
       #     <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
-      #       <% component.tab(href: "#", selected: true) { "Item 1" } %>
-      #       <% component.tab(href: "#") { "Item 2" } %>
-      #       <% component.actions do %>
+      #       <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
+      #       <% component.with_tab(href: "#") { "Item 2" } %>
+      #       <% component.with_actions do %>
       #         <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #       <% end %>
       #     <% end %>
       #
       # @example With `<div>`
       #   <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
-      #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
-      #     <% component.tab(href: "#") { "Item 2" } %>
-      #     <% component.actions do %>
+      #     <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
+      #     <% component.with_tab(href: "#") { "Item 2" } %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
-      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #     <% component.with_tab(href: "#", selected: true) do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 1" } %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.icon(icon: :star) %>
       #       <% t.text { "Item 2" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.text { "Item 3" } %>
       #       <% t.counter(count: 10) %>
       #     <% end %>
-      #     <% component.actions do %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Align right
       #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
-      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #     <% component.with_tab(href: "#", selected: true) do |t| %>
       #       <% t.text { "Item 1" } %>
       #     <% end %>
-      #     <% component.tab(href: "#") do |t| %>
+      #     <% component.with_tab(href: "#") do |t| %>
       #       <% t.text { "Item 2" } %>
       #     <% end %>
-      #     <% component.actions do %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>
       #
       # @example Customizing the body
       #   <%= 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" } %>
+      #     <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.with_tab(href: "#") { "Tab 2" } %>
+      #     <% c.with_tab(href: "#") { "Tab 3" } %>
       #   <% end %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>

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

@@ -38,19 +38,19 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
-      #     <% component.tab(id: "tab-1", selected: true) do |t| %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |t| %>
       #       <% t.text { "Tab 1" } %>
       #       <% t.panel do %>
       #         Panel 1
       #       <% end %>
       #     <% end %>
-      #     <% component.tab(id: "tab-2") do |t| %>
+      #     <% component.with_tab(id: "tab-2") do |t| %>
       #       <% t.text { "Tab 2" } %>
       #       <% t.panel do %>
       #         Panel 2
       #       <% end %>
       #     <% end %>
-      #     <% component.actions do %>
+      #     <% component.with_actions do %>
       #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
       #     <% end %>
       #   <% end %>

data/app/components/primer/base_component.rb

@@ -14,7 +14,7 @@ module Primer
   # For example:
   #
   # ```erb
-  # <%= render Primer::HeadingComponent.new(mt: [0, nil, nil, 4, 2]) do %>
+  # <%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>
   #   Hello world
   # <% end %>
   # ```

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

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

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

@@ -138,12 +138,12 @@ module Primer
       #
       # @example With custom classes for the input
       #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
-      #     <% c.input(classes: "custom-class") %>
+      #     <% c.with_input(classes: "custom-class") %>
       #   <% end %>
       #
       # @example With custom classes for the results
       #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
-      #     <% c.results(classes: "custom-class") %>
+      #     <% c.with_results(classes: "custom-class") %>
       #   <% end %>
       #
       # @param label_text [String] The label of the input.

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

@@ -21,23 +21,23 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Beta::AvatarStack.new) do |c| %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example Align right
       #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example With tooltip
       #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>

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

@@ -46,14 +46,14 @@ module Primer
 
       # Required heading.
       #
-      # @param tag [String]  <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
+      # @param tag [String]  <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :heading, lambda { |tag:, **system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = tag
         system_arguments[:classes] = class_names("blankslate-heading", system_arguments[:classes])
 
-        Primer::HeadingComponent.new(**system_arguments)
+        Primer::Beta::Heading.new(**system_arguments)
       }
 
       # Optional description.

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

@@ -5,8 +5,10 @@ module Primer
     class BorderBox
       # `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 %>
+      # @accessibility When using `header.with_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
+        status :beta
+
         TITLE_TAG_FALLBACK = :h2
         TITLE_TAG_OPTIONS = [:h1, TITLE_TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
 
@@ -32,7 +34,7 @@ module Primer
         #
         # @example with title
         #   <%= render(Primer::Beta::BorderBox::Header.new) do |h| %>
-        #     <% h.title(tag: :h3) do %>I am a title<% end %>
+        #     <% h.with_title(tag: :h3) do %>I am a title<% end %>
         #   <% end %>
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

@@ -72,55 +72,55 @@ module Primer
 
       # @example Header with title, body, rows, and footer
       #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-      #     <% component.header do |h| %>
+      #     <% component.with_header do |h| %>
       #       <% h.title(tag: :h2) do %>
       #         Header
       #       <% end %>
       #     <% end %>
-      #     <% component.body do %>
+      #     <% component.with_body do %>
       #       Body
       #     <% end %>
-      #     <% component.row do %>
+      #     <% component.with_row do %>
       #       <% if true %>
       #         Row one
       #       <% end %>
       #     <% end %>
-      #     <% component.row do %>
+      #     <% component.with_row do %>
       #       Row two
       #     <% end %>
-      #     <% component.footer do %>
+      #     <% component.with_footer do %>
       #       Footer
       #     <% end %>
       #   <% end %>
       #
       # @example Padding density
       #   <%= render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| %>
-      #     <% component.header do %>
+      #     <% component.with_header do %>
       #       Header
       #     <% end %>
-      #     <% component.body do %>
+      #     <% component.with_body do %>
       #       Body
       #     <% end %>
-      #     <% component.row do %>
+      #     <% component.with_row do %>
       #       Row two
       #     <% end %>
-      #     <% component.footer do %>
+      #     <% component.with_footer do %>
       #       Footer
       #     <% end %>
       #   <% end %>
       #
       # @example Row colors
       #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-      #     <% component.row do %>
+      #     <% component.with_row do %>
       #       Default
       #     <% end %>
-      #     <% component.row(scheme: :neutral) do %>
+      #     <% component.with_row(scheme: :neutral) do %>
       #       Neutral
       #     <% end %>
-      #     <% component.row(scheme: :info) do %>
+      #     <% component.with_row(scheme: :info) do %>
       #       Info
       #     <% end %>
-      #     <% component.row(scheme: :warning) do %>
+      #     <% component.with_row(scheme: :warning) do %>
       #       Warning
       #     <% end %>
       #   <% end %>

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

@@ -33,9 +33,9 @@ module Primer
 
       # @example Basic
       #   <%= render(Primer::Beta::Breadcrumbs.new) do |component| %>
-      #     <% component.item(href: "/") do %>Home<% end %>
-      #     <% component.item(href: "/about") do %>About<% end %>
-      #     <% component.item(href: "/about/team") do %>Team<% end %>
+      #     <% component.with_item(href: "/") do %>Home<% end %>
+      #     <% component.with_item(href: "/about") do %>About<% end %>
+      #     <% component.with_item(href: "/about/team") do %>Team<% end %>
       #   <% end %>
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

@@ -19,20 +19,20 @@ module Primer
       # @example Default
       #
       #   <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
-      #     <% component.button { "Default" } %>
-      #     <% component.button(scheme: :primary) { "Primary" } %>
-      #     <% component.button(scheme: :danger) { "Danger" } %>
-      #     <% component.button(scheme: :outline) { "Outline" } %>
-      #     <% component.button(classes: "custom-class") { "Custom class" } %>
+      #     <% component.with_button { "Default" } %>
+      #     <% component.with_button(scheme: :primary) { "Primary" } %>
+      #     <% component.with_button(scheme: :danger) { "Danger" } %>
+      #     <% component.with_button(scheme: :outline) { "Outline" } %>
+      #     <% component.with_button(classes: "custom-class") { "Custom class" } %>
       #   <% end %>
       #
       # @example Sizes
       #
       #   <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
-      #     <% component.button { "Default" } %>
-      #     <% component.button(scheme: :primary) { "Primary" } %>
-      #     <% component.button(scheme: :danger) { "Danger" } %>
-      #     <% component.button(scheme: :outline) { "Outline" } %>
+      #     <% component.with_button { "Default" } %>
+      #     <% component.with_button(scheme: :primary) { "Primary" } %>
+      #     <% component.with_button(scheme: :danger) { "Danger" } %>
+      #     <% component.with_button(scheme: :outline) { "Outline" } %>
       #   <% end %>
       #
       # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `CloseButton` to render an `×` without default button styles.
+    #
+    # @accessibility
+    #   `CloseButton` has a default `aria-label` of "Close" to provides assistive technologies with an accessible label.
+    #   You may choose to override this label with something more descriptive via [system_arguments][0].
+    # [0]: https://primer.style/view-components/system-arguments#html-attributes
+    class CloseButton < Primer::Component
+      status :beta
+
+      DEFAULT_TYPE = :button
+      TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::CloseButton.new) %>
+      #
+      # @param type [Symbol] <%= one_of(Primer::Beta::CloseButton::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(type: DEFAULT_TYPE, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :button
+        @system_arguments[:block] = false
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+        @system_arguments[:classes] = class_names(
+          "close-button",
+          system_arguments[:classes]
+        )
+        @system_arguments[:"aria-label"] ||= "Close"
+      end
+
+      def call
+        render(Primer::Beta::BaseButton.new(**@system_arguments)) do
+          render(Primer::OcticonComponent.new("x"))
+        end
+      end
+    end
+  end
+end