From 8103ec36c27bf31fdb073010a02556f9e57d7838 Mon Sep 17 00:00:00 2001
From: Joel Hawksley <joel@hawksley.org>
Date: Tue, 13 Dec 2022 11:21:06 -0700
Subject: [PATCH] Beta components use new Slots API (#1703)

---
 .changeset/thick-numbers-beam.md              |  5 ++
 app/components/primer/alpha/dropdown.html.erb |  6 +-
 app/components/primer/alpha/dropdown/menu.rb  |  2 +
 app/components/primer/beta/auto_complete.rb   |  6 +-
 .../primer/beta/auto_complete/item.rb         |  1 +
 app/components/primer/beta/avatar_stack.rb    |  2 +
 app/components/primer/beta/blankslate.rb      | 85 ++++++++++---------
 app/components/primer/beta/border_box.rb      |  2 +
 .../primer/beta/border_box/header.rb          |  2 +
 app/components/primer/beta/breadcrumbs.rb     |  1 +
 app/components/primer/beta/button.rb          |  1 +
 app/components/primer/beta/button_group.rb    |  3 +
 app/components/primer/beta/details.rb         |  9 +-
 app/components/primer/beta/flash.rb           |  1 +
 app/components/primer/beta/link.rb            |  1 +
 app/components/primer/beta/octicon.rb         |  1 +
 app/components/primer/beta/popover.rb         |  1 +
 app/components/primer/beta/truncate.rb        |  5 +-
 .../primer/dropdown_menu_component.rb         |  6 +-
 previews/primer/beta/details_preview.rb       | 12 +--
 .../primer/local_time_component_preview.rb    |  3 +
 previews/primer/time_ago_component_preview.rb |  3 +
 previews/primer/url_helpers.rb                |  3 +-
 .../beta/auto_complete/item_test.rb           | 10 +--
 test/components/beta/auto_complete_test.rb    | 12 +--
 test/components/beta/avatar_stack_test.rb     | 42 ++++-----
 test/components/beta/blankslate_test.rb       | 60 ++++++-------
 .../components/beta/border_box/header_test.rb |  4 +-
 test/components/beta/border_box_test.rb       | 24 +++---
 test/components/beta/button_group_test.rb     | 22 ++---
 test/components/beta/details_test.rb          | 36 ++++----
 test/components/beta/flash_test.rb            |  2 +-
 test/components/beta/link_test.rb             |  4 +-
 test/components/beta/popover_test.rb          | 20 ++---
 test/components/beta/truncate_test.rb         | 16 ++--
 test/components/breadcrumbs_test.rb           | 20 ++---
 test/components/component_test.rb             | 18 ++--
 37 files changed, 243 insertions(+), 208 deletions(-)
 create mode 100644 .changeset/thick-numbers-beam.md

diff --git a/.changeset/thick-numbers-beam.md b/.changeset/thick-numbers-beam.md
new file mode 100644
index 0000000000..c118857680
--- /dev/null
+++ b/.changeset/thick-numbers-beam.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Beta components use new `with_*` Slots API.
diff --git a/app/components/primer/alpha/dropdown.html.erb b/app/components/primer/alpha/dropdown.html.erb
index 7e5eada0a1..633d398338 100644
--- a/app/components/primer/alpha/dropdown.html.erb
+++ b/app/components/primer/alpha/dropdown.html.erb
@@ -1,9 +1,9 @@
-<%= render(Primer::Beta::Details.new(**@system_arguments)) do |c| %>
-  <% c.summary(**@button_arguments) do %>
+<%= render(Primer::Beta::Details.new(**@system_arguments)) do |component| %>
+  <% component.with_summary(**@button_arguments) do %>
     <%= button %>
   <% end %>
 
-  <% c.body do %>
+  <% component.with_body do %>
     <%= menu %>
   <% end %>
 <% end %>
diff --git a/app/components/primer/alpha/dropdown/menu.rb b/app/components/primer/alpha/dropdown/menu.rb
index b6bb0bcf09..45c4538f8f 100644
--- a/app/components/primer/alpha/dropdown/menu.rb
+++ b/app/components/primer/alpha/dropdown/menu.rb
@@ -80,7 +80,9 @@ def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
 
           def call
             component = if BUTTON_TAGS.include?(@system_arguments[:tag])
+                          # rubocop:disable Primer/ComponentNameMigration
                           Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
+                          # rubocop:enable Primer/ComponentNameMigration
                         else
                           Primer::BaseComponent.new(**@system_arguments)
                         end
diff --git a/app/components/primer/beta/auto_complete.rb b/app/components/primer/beta/auto_complete.rb
index b82a26873e..523467e23e 100644
--- a/app/components/primer/beta/auto_complete.rb
+++ b/app/components/primer/beta/auto_complete.rb
@@ -12,6 +12,8 @@ module Beta
     #   However, please note that a visible label should almost always
     #   be used unless there is compelling reason not to. A placeholder is not a label.
     class AutoComplete < Primer::Component
+      warn_on_deprecated_slot_setter
+
       status :beta
 
       DEFAULT_SIZE = :medium
@@ -192,8 +194,8 @@ def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placehol
 
       # add `input` and `results` without needing to explicitly call them in the view
       def before_render
-        results(classes: "") unless results
-        input(classes: "") unless input
+        with_results(classes: "") unless results?
+        with_input(classes: "") unless input?
       end
     end
   end
diff --git a/app/components/primer/beta/auto_complete/item.rb b/app/components/primer/beta/auto_complete/item.rb
index f4d55186e3..364b47c87e 100644
--- a/app/components/primer/beta/auto_complete/item.rb
+++ b/app/components/primer/beta/auto_complete/item.rb
@@ -6,6 +6,7 @@ module Beta
     class AutoComplete
       # Use `AutoCompleteItem` to list results of an auto-completed search.
       class Item < Primer::Component
+        warn_on_deprecated_slot_setter
         status :beta
 
         ALLOWED_DESCRIPTION_VARIANTS = [:inline, :block].freeze
diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb
index 3cbf6bf90d..eeff01e001 100644
--- a/app/components/primer/beta/avatar_stack.rb
+++ b/app/components/primer/beta/avatar_stack.rb
@@ -4,6 +4,8 @@ module Primer
   module Beta
     # Use `AvatarStack` to stack multiple avatars together.
     class AvatarStack < Primer::Component
+      warn_on_deprecated_slot_setter
+
       status :beta
 
       ALIGN_DEFAULT = :left
diff --git a/app/components/primer/beta/blankslate.rb b/app/components/primer/beta/blankslate.rb
index 17548b7426..7702b0fa14 100644
--- a/app/components/primer/beta/blankslate.rb
+++ b/app/components/primer/beta/blankslate.rb
@@ -11,6 +11,7 @@ module Beta
     #   - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
     #   - The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.
     class Blankslate < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       VISUAL_OPTIONS = %i[icon spinner image].freeze
@@ -100,48 +101,48 @@ class Blankslate < Primer::Component
       }
 
       # @example Basic
-      #   <%= render Primer::Beta::Blankslate.new do |c| %>
-      #     <% c.heading(tag: :h2).with_content("Title") %>
-      #     <% c.description { "Description"} %>
+      #   <%= render Primer::Beta::Blankslate.new do |component| %>
+      #     <% component.with_heading(tag: :h2).with_content("Title") %>
+      #     <% component.with_description { "Description"} %>
       #   <% end %>
       #
       # @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::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :globe) %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description { "Description"} %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :globe) %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
       #     <% 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::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_spinner(size: :large) %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description { "Description"} %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_spinner(size: :large) %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
       #     <% end %>
       #
       # @example Using an image
       #   @description
       #     Add an `image` to give context that an Octicon couldn't.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description { "Description"} %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
       #     <% end %>
       #
       # @example Custom content
       #   @description
       #     Pass custom content to `description`.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.heading(tag: :h2).with_content("Title") %>
-      #       <% c.description do %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description do %>
       #         <em>Your custom content here</em>
       #       <% end %>
       #     <% end %>
@@ -150,34 +151,34 @@ class Blankslate < Primer::Component
       #   @description
       #     Provide a `primary_action` to guide users to take action from the blankslate. The `primary_action` appears below the description and custom content.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.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."} %>
-      #       <% c.primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_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."} %>
+      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
       #     <% end %>
       #
       # @example Secondary action
       #   @description
       #     Add an additional `secondary_action` to help users learn more about a feature. See <%= link_to_accessibility %>. `secondary_action` will be shown at the very bottom:
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.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."} %>
-      #       <% c.secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_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."} %>
+      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
       #     <% end %>
       #
       # @example Primary and secondary actions
       #   @description
       #     `primary_action` and `secondary_action` can also be used together. The `primary_action` will always be rendered before the `secondary_action`:
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.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."} %>
-      #       <% c.primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
-      #       <% c.secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_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."} %>
+      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
+      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
       #     <% end %>
       #
       # @example Variations
@@ -187,20 +188,20 @@ class Blankslate < Primer::Component
       #     <%= render Primer::Beta::Blankslate.new(
       #       narrow: true,
       #       spacious: true,
-      #     ) do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.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."} %>
+      #     ) do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_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."} %>
       #     <% end %>
       #
       # @example With border
       #   @description
       #     It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
       #   @code
-      #     <%= render Primer::Beta::Blankslate.new(border: true) do |c| %>
-      #       <% c.visual_icon(icon: :book) %>
-      #       <% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
-      #       <% c.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."} %>
+      #     <%= render Primer::Beta::Blankslate.new(border: true) do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_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."} %>
       #     <% end %>
       #
       # @param narrow [Boolean] Adds a maximum width of `485px` to the Blankslate.
diff --git a/app/components/primer/beta/border_box.rb b/app/components/primer/beta/border_box.rb
index 2d60a4838b..010320e14c 100644
--- a/app/components/primer/beta/border_box.rb
+++ b/app/components/primer/beta/border_box.rb
@@ -4,6 +4,8 @@ module Primer
   module Beta
     # `BorderBox` is a Box component with a border.
     class BorderBox < Primer::Component
+      warn_on_deprecated_slot_setter
+
       status :beta
 
       DEFAULT_PADDING = :default
diff --git a/app/components/primer/beta/border_box/header.rb b/app/components/primer/beta/border_box/header.rb
index a66820a98d..4ae178be86 100644
--- a/app/components/primer/beta/border_box/header.rb
+++ b/app/components/primer/beta/border_box/header.rb
@@ -7,6 +7,8 @@ class BorderBox
       #
       # @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
+        warn_on_deprecated_slot_setter
+
         status :beta
 
         TITLE_TAG_FALLBACK = :h2
diff --git a/app/components/primer/beta/breadcrumbs.rb b/app/components/primer/beta/breadcrumbs.rb
index ddf347aed5..88e96a9581 100644
--- a/app/components/primer/beta/breadcrumbs.rb
+++ b/app/components/primer/beta/breadcrumbs.rb
@@ -17,6 +17,7 @@ module Beta
     #
     #   For more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
     class Breadcrumbs < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."
diff --git a/app/components/primer/beta/button.rb b/app/components/primer/beta/button.rb
index b6efab0f02..97dc30fc60 100644
--- a/app/components/primer/beta/button.rb
+++ b/app/components/primer/beta/button.rb
@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
     class Button < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default
diff --git a/app/components/primer/beta/button_group.rb b/app/components/primer/beta/button_group.rb
index 64b8faca4a..991c658a56 100644
--- a/app/components/primer/beta/button_group.rb
+++ b/app/components/primer/beta/button_group.rb
@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `ButtonGroup` to render a series of buttons.
     class ButtonGroup < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       # Required list of buttons to be rendered.
@@ -13,7 +14,9 @@ class ButtonGroup < Primer::Component
         kwargs[:group_item] = true
         kwargs[:size] = @size
 
+        # rubocop:disable Primer/ComponentNameMigration
         Primer::ButtonComponent.new(**kwargs)
+        # rubocop:enable Primer/ComponentNameMigration
       }
 
       # @example Default
diff --git a/app/components/primer/beta/details.rb b/app/components/primer/beta/details.rb
index c52e2a702a..6a6154430e 100644
--- a/app/components/primer/beta/details.rb
+++ b/app/components/primer/beta/details.rb
@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `DetailsComponent` to reveal content after clicking a button.
     class Details < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       BODY_TAG_DEFAULT = :div
@@ -25,7 +26,9 @@ class Details < Primer::Component
 
         return Primer::BaseComponent.new(**system_arguments) unless button
 
+        # rubocop:disable Primer/ComponentNameMigration
         Primer::ButtonComponent.new(**system_arguments)
+        # rubocop:enable Primer/ComponentNameMigration
       }
 
       # Use the Body slot as the main content to be shown when triggered by the Summary.
@@ -40,11 +43,11 @@ class Details < Primer::Component
 
       # @example Default
       #
-      #   <%= render Primer::Beta::Details.new do |c| %>
-      #     <% c.with_summary do %>
+      #   <%= render Primer::Beta::Details.new do |component| %>
+      #     <% component.with_summary do %>
       #       Summary
       #     <% end %>
-      #     <% c.with_body do %>
+      #     <% component.with_body do %>
       #       Body
       #     <% end %>
       #   <% end %>
diff --git a/app/components/primer/beta/flash.rb b/app/components/primer/beta/flash.rb
index 05c56107f4..686caa97d8 100644
--- a/app/components/primer/beta/flash.rb
+++ b/app/components/primer/beta/flash.rb
@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Flash` to inform users of successful or pending actions.
     class Flash < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       # Optional action content showed on the right side of the component.
diff --git a/app/components/primer/beta/link.rb b/app/components/primer/beta/link.rb
index 5e7d38329a..aee700237d 100644
--- a/app/components/primer/beta/link.rb
+++ b/app/components/primer/beta/link.rb
@@ -4,6 +4,7 @@ module Primer
   module Beta
     # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.
     class Link < Primer::Component
+      warn_on_deprecated_slot_setter
       status :beta
 
       DEFAULT_SCHEME = :default
diff --git a/app/components/primer/beta/octicon.rb b/app/components/primer/beta/octicon.rb
index c917fa5421..b76f05e49c 100644
--- a/app/components/primer/beta/octicon.rb
+++ b/app/components/primer/beta/octicon.rb
@@ -7,6 +7,7 @@ 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
diff --git a/app/components/primer/beta/popover.rb b/app/components/primer/beta/popover.rb
index 1216331c6c..49ae9e6270 100644
--- a/app/components/primer/beta/popover.rb
+++ b/app/components/primer/beta/popover.rb
@@ -6,6 +6,7 @@ module Beta
     #
     # 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
diff --git a/app/components/primer/beta/truncate.rb b/app/components/primer/beta/truncate.rb
index d62a2d5256..5398b42aa7 100644
--- a/app/components/primer/beta/truncate.rb
+++ b/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 @@ def initialize(**system_arguments)
       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
diff --git a/app/components/primer/dropdown_menu_component.rb b/app/components/primer/dropdown_menu_component.rb
index 7b2af27200..0f17e80ebf 100644
--- a/app/components/primer/dropdown_menu_component.rb
+++ b/app/components/primer/dropdown_menu_component.rb
@@ -18,12 +18,12 @@ class DropdownMenuComponent < Primer::Component
 
     # @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>
diff --git a/previews/primer/beta/details_preview.rb b/previews/primer/beta/details_preview.rb
index 6df12ae6f9..294b0f2de1 100644
--- a/previews/primer/beta/details_preview.rb
+++ b/previews/primer/beta/details_preview.rb
@@ -39,9 +39,9 @@ def default(reset: false, overlay: :default)
       # @param overlay [Symbol] select [none, default, dark]
       # @param reset [Boolean] toggle
       def custom_button(reset: false, overlay: :default)
-        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
-          c.summary(size: :small, scheme: :primary) { "Click me" }
-          c.body { "Body" }
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |component|
+          component.with_summary(size: :small, scheme: :primary) { "Click me" }
+          component.with_body { "Body" }
         end
       end
 
@@ -50,9 +50,9 @@ def custom_button(reset: false, overlay: :default)
       # @param overlay [Symbol] select [none, default, dark]
       # @param reset [Boolean] toggle
       def without_button(reset: false, overlay: :default)
-        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
-          c.summary(button: false) { "Click me" }
-          c.body { "Body" }
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |component|
+          component.with_summary(button: false) { "Click me" }
+          component.with_body { "Body" }
         end
       end
     end
diff --git a/previews/primer/local_time_component_preview.rb b/previews/primer/local_time_component_preview.rb
index fabf0f1004..af81cfc2f6 100644
--- a/previews/primer/local_time_component_preview.rb
+++ b/previews/primer/local_time_component_preview.rb
@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Primer/ComponentNameMigration
+
 module Primer
   # @label LocalTime
   class LocalTimeComponentPreview < ViewComponent::Preview
@@ -52,3 +54,4 @@ def with_contents(initial_text: "This will be replaced")
     end
   end
 end
+# rubocop:enable Primer/ComponentNameMigration
diff --git a/previews/primer/time_ago_component_preview.rb b/previews/primer/time_ago_component_preview.rb
index ddae968ee2..1d6fcddf26 100644
--- a/previews/primer/time_ago_component_preview.rb
+++ b/previews/primer/time_ago_component_preview.rb
@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Primer/ComponentNameMigration
+
 module Primer
   # @label TimeAgoComponent
   class TimeAgoComponentPreview < ViewComponent::Preview
@@ -22,3 +24,4 @@ def micro
     end
   end
 end
+# rubocop:enable Primer/ComponentNameMigration
diff --git a/previews/primer/url_helpers.rb b/previews/primer/url_helpers.rb
index d9be9a2b7d..b4436fda9c 100644
--- a/previews/primer/url_helpers.rb
+++ b/previews/primer/url_helpers.rb
@@ -8,8 +8,7 @@ class << self
 
       private
 
-      def controller
-      end
+      def controller; end
     end
   end
 end
diff --git a/test/components/beta/auto_complete/item_test.rb b/test/components/beta/auto_complete/item_test.rb
index dd49f6ab1e..0b927ad4ba 100644
--- a/test/components/beta/auto_complete/item_test.rb
+++ b/test/components/beta/auto_complete/item_test.rb
@@ -25,7 +25,7 @@ def test_renders_disabled_item
 
   def test_renders_with_leading_visual_icon
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo", disabled: false)) do |component|
-      component.leading_visual_icon(icon: :search)
+      component.with_leading_visual_icon(icon: :search)
       "Item text"
     end
 
@@ -38,7 +38,7 @@ def test_renders_with_leading_visual_icon
 
   def test_renders_with_leading_visual_avatar
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo", disabled: false)) do |component|
-      component.leading_visual_avatar(src: "https://github.com/github.png", alt: "github")
+      component.with_leading_visual_avatar(src: "https://github.com/github.png", alt: "github")
       "Item text"
     end
 
@@ -51,7 +51,7 @@ def test_renders_with_leading_visual_avatar
 
   def test_renders_with_trailing_visual
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo", disabled: false)) do |component|
-      component.trailing_visual_icon(icon: :search)
+      component.with_trailing_visual_icon(icon: :search)
       "Item text"
     end
 
@@ -64,7 +64,7 @@ def test_renders_with_trailing_visual
 
   def test_renders_with_description
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo", disabled: false)) do |component|
-      component.description { "Item description" }
+      component.with_description { "Item description" }
       "Item text"
     end
 
@@ -79,7 +79,7 @@ def test_renders_with_description
 
   def test_renders_with_inline_description
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo", disabled: false, description_variant: :inline)) do |component|
-      component.description { "Item description" }
+      component.with_description { "Item description" }
       "Item text"
     end
 
diff --git a/test/components/beta/auto_complete_test.rb b/test/components/beta/auto_complete_test.rb
index 9480a93624..dd91c13863 100644
--- a/test/components/beta/auto_complete_test.rb
+++ b/test/components/beta/auto_complete_test.rb
@@ -15,7 +15,7 @@ def test_raises_if_autofocus_added_to_input
     with_raise_on_invalid_options(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", input_id: "test-input", list_id: "my-list-id") do |component|
-          component.input(autofocus: true)
+          component.with_input(autofocus: true)
         end
       end
 
@@ -27,7 +27,7 @@ def test_raises_if_aria_label_added_to_input
     with_raise_on_invalid_aria(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", input_id: "test-input", list_id: "my-list-id") do |component|
-          component.input("aria-label": "Don't add one")
+          component.with_input("aria-label": "Don't add one")
         end
       end
 
@@ -81,7 +81,7 @@ def test_forwards_input_name_on_parent_to_input_slot_name
 
   def test_renders_with_icon
     render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", list_id: "my-list-id", input_id: "test-input") do |component|
-      component.leading_visual_icon(icon: :search)
+      component.with_leading_visual_icon(icon: :search)
     end
 
     assert_selector('auto-complete[for="my-list-id"][src="/url"]') do
@@ -103,7 +103,7 @@ def test_renders_non_visible_label
 
   def test_renders_results_with_custom_classes
     render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", list_id: "my-list-id", input_id: "test-input") do |component|
-      component.results(classes: "my-class")
+      component.with_results(classes: "my-class")
     end
 
     assert_selector('auto-complete[for="my-list-id"][src="/url"]') do
@@ -121,7 +121,7 @@ def test_denies_id_on_input_slot
     with_raise_on_invalid_options(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", input_id: "test-input", list_id: "my-list-id") do |component|
-          component.input(id: "some-other-id")
+          component.with_input(id: "some-other-id")
         end
       end
       assert_includes(err.message, "`id` will always be set to @input_id.")
@@ -132,7 +132,7 @@ def test_denies_name_on_input_slot
     with_raise_on_invalid_options(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", input_id: "test-input", list_id: "my-list-id") do |component|
-          component.input(name: "some-other-name")
+          component.with_input(name: "some-other-name")
         end
       end
       assert_includes(err.message, "Set @input_name on the component initializer instead with `input_name`.")
diff --git a/test/components/beta/avatar_stack_test.rb b/test/components/beta/avatar_stack_test.rb
index 42fa883a58..2a6396b2bf 100644
--- a/test/components/beta/avatar_stack_test.rb
+++ b/test/components/beta/avatar_stack_test.rb
@@ -6,24 +6,24 @@ class PrimerAvatarStackTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_renders_as_a_div_by_default
-    render_inline(Primer::Beta::AvatarStack.new) do |c|
-      c.avatar(src: "Foo", alt: "Bar")
+    render_inline(Primer::Beta::AvatarStack.new) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
     end
 
     assert_selector("div.AvatarStack")
   end
 
   def test_renders_as_a_span
-    render_inline(Primer::Beta::AvatarStack.new(tag: :span)) do |c|
-      c.avatar(src: "Foo", alt: "Bar")
+    render_inline(Primer::Beta::AvatarStack.new(tag: :span)) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
     end
     assert_selector("span.AvatarStack")
   end
 
   def test_falls_back_when_tag_isnt_valid
     without_fetch_or_fallback_raises do
-      render_inline(Primer::Beta::AvatarStack.new(tag: :h1)) do |c|
-        c.avatar(src: "Foo", alt: "Bar")
+      render_inline(Primer::Beta::AvatarStack.new(tag: :h1)) do |component|
+        component.with_avatar(src: "Foo", alt: "Bar")
       end
       assert_selector("div.AvatarStack")
     end
@@ -31,8 +31,8 @@ def test_falls_back_when_tag_isnt_valid
 
   def test_falls_back_when_body_tag_isnt_valid
     without_fetch_or_fallback_raises do
-      render_inline(Primer::Beta::AvatarStack.new(body_arguments: { tag: :h1 })) do |c|
-        c.avatar(src: "Foo", alt: "Bar")
+      render_inline(Primer::Beta::AvatarStack.new(body_arguments: { tag: :h1 })) do |component|
+        component.with_avatar(src: "Foo", alt: "Bar")
       end
       assert_selector("div.AvatarStack-body")
     end
@@ -45,8 +45,8 @@ def test_does_not_render_without_avatars
   end
 
   def test_renders_default_body
-    render_inline(Primer::Beta::AvatarStack.new) do |c|
-      c.avatar(src: "Foo", alt: "Bar")
+    render_inline(Primer::Beta::AvatarStack.new) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
     end
 
     assert_selector(".AvatarStack") do
@@ -58,8 +58,8 @@ def test_renders_default_body
   end
 
   def test_renders_tooltipped_body
-    render_inline(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "Tooltip" })) do |c|
-      c.avatar(src: "Foo", alt: "Bar")
+    render_inline(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "Tooltip" })) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
     end
 
     assert_selector(".AvatarStack") do
@@ -70,8 +70,8 @@ def test_renders_tooltipped_body
   end
 
   def test_renders_right_aligned
-    render_inline(Primer::Beta::AvatarStack.new(align: :right)) do |c|
-      c.avatar(src: "Foo", alt: "Bar")
+    render_inline(Primer::Beta::AvatarStack.new(align: :right)) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
     end
 
     assert_selector(".AvatarStack.AvatarStack--right") do
@@ -83,9 +83,9 @@ def test_renders_right_aligned
   end
 
   def test_renders_two_avatar_stack
-    render_inline(Primer::Beta::AvatarStack.new) do |c|
-      c.avatar(src: "Foo", alt: "Bar")
-      c.avatar(src: "Foo", alt: "Bar")
+    render_inline(Primer::Beta::AvatarStack.new) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
+      component.with_avatar(src: "Foo", alt: "Bar")
     end
 
     assert_selector(".AvatarStack.AvatarStack--two") do
@@ -96,10 +96,10 @@ def test_renders_two_avatar_stack
   end
 
   def test_renders_three_plus_avatar_stack
-    render_inline(Primer::Beta::AvatarStack.new) do |c|
-      c.avatar(src: "Foo", alt: "Bar")
-      c.avatar(src: "Foo", alt: "Bar")
-      c.avatar(src: "Foo", alt: "Bar")
+    render_inline(Primer::Beta::AvatarStack.new) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
+      component.with_avatar(src: "Foo", alt: "Bar")
+      component.with_avatar(src: "Foo", alt: "Bar")
     end
 
     assert_selector(".AvatarStack.AvatarStack--three-plus") do
diff --git a/test/components/beta/blankslate_test.rb b/test/components/beta/blankslate_test.rb
index 1bbc45ea93..112e9648e0 100644
--- a/test/components/beta/blankslate_test.rb
+++ b/test/components/beta/blankslate_test.rb
@@ -6,8 +6,8 @@ class PrimerBetaBlankslateTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_renders_a_basic_blankslate_component_with_a_heading
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.heading(tag: :h3).with_content("Title")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_heading(tag: :h3).with_content("Title")
     end
 
     assert_selector("div.blankslate")
@@ -17,9 +17,9 @@ def test_renders_a_basic_blankslate_component_with_a_heading
   end
 
   def test_renders_a_blankslate_component_with_a_spinner_component
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.heading(tag: :h2).with_content("Title")
-      c.visual_spinner(test_selector: "blankslate-spinner")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_heading(tag: :h2).with_content("Title")
+      component.with_visual_spinner(test_selector: "blankslate-spinner")
     end
 
     assert_selector(".blankslate") do
@@ -28,8 +28,8 @@ def test_renders_a_blankslate_component_with_a_spinner_component
   end
 
   def test_renders_a_narrow_and_spacious_blankslate_component
-    render_inline(Primer::Beta::Blankslate.new(narrow: true, spacious: true)) do |c|
-      c.heading(tag: :h2).with_content("Title")
+    render_inline(Primer::Beta::Blankslate.new(narrow: true, spacious: true)) do |component|
+      component.with_heading(tag: :h2).with_content("Title")
     end
 
     assert_selector(".blankslate.blankslate-narrow")
@@ -37,27 +37,27 @@ def test_renders_a_narrow_and_spacious_blankslate_component
   end
 
   def test_renders_a_blankslate_component_with_an_icon
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.visual_icon(icon: :star)
-      c.heading(tag: :h2).with_content("Title")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_visual_icon(icon: :star)
+      component.with_heading(tag: :h2).with_content("Title")
     end
 
     assert_selector(".blankslate-icon[height=24]")
   end
 
   def test_renders_a_blankslate_component_with_an_icon_with_a_custom_size
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.visual_icon(icon: :star, size: :small)
-      c.heading(tag: :h3).with_content("Title")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_visual_icon(icon: :star, size: :small)
+      component.with_heading(tag: :h3).with_content("Title")
     end
 
     assert_selector(".blankslate-icon[height=16]")
   end
 
   def test_renders_a_blankslate_component_with_an_image
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.heading(tag: :h3).with_content("Title")
-      c.visual_image(src: "/some_image", alt: "Alt text")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_heading(tag: :h3).with_content("Title")
+      component.with_visual_image(src: "/some_image", alt: "Alt text")
     end
 
     assert_selector(".blankslate > img[src$='/some_image']")
@@ -65,44 +65,44 @@ def test_renders_a_blankslate_component_with_an_image
   end
 
   def test_renders_a_blankslate_component_with_a_description
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.heading(tag: :h3).with_content("Title")
-      c.description { "Description" }
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_heading(tag: :h3).with_content("Title")
+      component.with_description { "Description" }
     end
 
     assert_selector("div", text: "Description")
   end
 
   def test_renders_a_blankslate_component_with_a_primary_action
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.heading(tag: :h2).with_content("Title")
-      c.primary_action(href: "https://github.com").with_content("Button")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_heading(tag: :h2).with_content("Title")
+      component.with_primary_action(href: "https://github.com").with_content("Button")
     end
 
     assert_selector("a.Button[href='https://github.com']", text: "Button")
   end
 
   def test_renders_a_blankslate_component_with_a_primary_action_with_custom_classes
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.heading(tag: :h2).with_content("Title")
-      c.primary_action(href: "https://github.com", scheme: :danger).with_content("Button")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_heading(tag: :h2).with_content("Title")
+      component.with_primary_action(href: "https://github.com", scheme: :danger).with_content("Button")
     end
 
     assert_selector("a.Button.Button--danger[href='https://github.com']", text: "Button")
   end
 
   def test_renders_a_blankslate_component_with_a_secondary_action
-    render_inline(Primer::Beta::Blankslate.new) do |c|
-      c.heading(tag: :h2).with_content("Title")
-      c.secondary_action(href: "https://docs.github.com").with_content("Link")
+    render_inline(Primer::Beta::Blankslate.new) do |component|
+      component.with_heading(tag: :h2).with_content("Title")
+      component.with_secondary_action(href: "https://docs.github.com").with_content("Link")
     end
 
     assert_selector("a[href='https://docs.github.com']", text: "Link")
   end
 
   def test_wraps_in_a_box_when_border_true
-    render_inline(Primer::Beta::Blankslate.new(border: true)) do |c|
-      c.heading(tag: :h2) { "Title" }
+    render_inline(Primer::Beta::Blankslate.new(border: true)) do |component|
+      component.with_heading(tag: :h2) { "Title" }
     end
 
     assert_selector(".Box") do
diff --git a/test/components/beta/border_box/header_test.rb b/test/components/beta/border_box/header_test.rb
index 0d3bab2c46..c216c0aa35 100644
--- a/test/components/beta/border_box/header_test.rb
+++ b/test/components/beta/border_box/header_test.rb
@@ -12,8 +12,8 @@ def test_renders_content
   end
 
   def test_renders_title
-    render_inline(Primer::Beta::BorderBox::Header.new) do |h|
-      h.title(tag: :h3) { "Title" }
+    render_inline(Primer::Beta::BorderBox::Header.new) do |header|
+      header.with_title(tag: :h3) { "Title" }
     end
 
     assert_text("Title")
diff --git a/test/components/beta/border_box_test.rb b/test/components/beta/border_box_test.rb
index 2d7b99f906..981939e29c 100644
--- a/test/components/beta/border_box_test.rb
+++ b/test/components/beta/border_box_test.rb
@@ -17,7 +17,7 @@ def test_does_not_render_an_empty_box
 
   def test_renders_header
     render_inline(Primer::Beta::BorderBox.new) do |component|
-      component.header { "Header" }
+      component.with_header { "Header" }
     end
 
     assert_selector("div.Box-header", text: "Header")
@@ -25,7 +25,7 @@ def test_renders_header
 
   def test_renders_body
     render_inline(Primer::Beta::BorderBox.new) do |component|
-      component.body { "Body" }
+      component.with_body { "Body" }
     end
 
     assert_selector("div.Box-body", text: "Body")
@@ -33,7 +33,7 @@ def test_renders_body
 
   def test_renders_footer
     render_inline(Primer::Beta::BorderBox.new) do |component|
-      component.footer { "Footer" }
+      component.with_footer { "Footer" }
     end
 
     assert_selector("div.Box-footer", text: "Footer")
@@ -41,9 +41,9 @@ def test_renders_footer
 
   def test_renders_multiple_rows
     render_inline(Primer::Beta::BorderBox.new) do |component|
-      component.row { "First" }
-      component.row { "Second" }
-      component.row { "Third" }
+      component.with_row { "First" }
+      component.with_row { "Second" }
+      component.with_row { "Third" }
     end
 
     assert_selector("ul", count: 1)
@@ -52,7 +52,7 @@ def test_renders_multiple_rows
 
   def test_renders_condensed
     render_inline(Primer::Beta::BorderBox.new(padding: :condensed)) do |component|
-      component.body { "Body" }
+      component.with_body { "Body" }
     end
 
     assert_selector("div.Box.Box--condensed")
@@ -60,7 +60,7 @@ def test_renders_condensed
 
   def test_renders_spacious
     render_inline(Primer::Beta::BorderBox.new(padding: :spacious)) do |component|
-      component.body { "Body" }
+      component.with_body { "Body" }
     end
 
     assert_selector("div.Box.Box--spacious")
@@ -74,7 +74,7 @@ def test_restricts_allowed_system_arguments
     with_raise_on_invalid_options(true) do
       error = assert_raises(ArgumentError) do
         render_inline(Primer::Beta::BorderBox.new(p: 4)) do |component|
-          component.body { "Body" }
+          component.with_body { "Body" }
         end
       end
 
@@ -85,7 +85,7 @@ def test_restricts_allowed_system_arguments
   def test_strips_denied_system_arguments
     with_raise_on_invalid_options(false) do
       render_inline(Primer::Beta::BorderBox.new(p: 4)) do |component|
-        component.body { "Body" }
+        component.with_body { "Body" }
       end
     end
 
@@ -95,7 +95,7 @@ def test_strips_denied_system_arguments
   def test_renders_row_with_schemes
     { neutral: "gray", info: "blue", warning: "yellow" }.each_pair do |scheme, color|
       render_inline(Primer::Beta::BorderBox.new) do |component|
-        component.row(scheme: scheme) { "Row, row, row your boat" }
+        component.with_row(scheme: scheme) { "Row, row, row your boat" }
       end
 
       assert_selector(".Box .Box-row--#{color}")
@@ -104,7 +104,7 @@ def test_renders_row_with_schemes
 
   def test_renders_row_with_default_scheme
     render_inline(Primer::Beta::BorderBox.new) do |component|
-      component.row { "Row, row, row your boat" }
+      component.with_row { "Row, row, row your boat" }
     end
 
     assert_selector(".Box .Box-row")
diff --git a/test/components/beta/button_group_test.rb b/test/components/beta/button_group_test.rb
index 1b0eaaf6bb..3f90f2fc81 100644
--- a/test/components/beta/button_group_test.rb
+++ b/test/components/beta/button_group_test.rb
@@ -12,7 +12,7 @@ def test_does_not_render_without_buttons
   end
 
   def test_renders_button_items
-    render_inline(Primer::Beta::ButtonGroup.new) { |c| c.button { "Button" } }
+    render_inline(Primer::Beta::ButtonGroup.new) { |component| component.with_button { "Button" } }
 
     assert_selector("div.BtnGroup") do
       assert_selector("button.btn.BtnGroup-item", text: "Button")
@@ -20,12 +20,12 @@ def test_renders_button_items
   end
 
   def test_renders_button_with_props
-    render_inline(Primer::Beta::ButtonGroup.new) do |c|
-      c.button { "Button" }
-      c.button(scheme: :primary) { "Primary" }
-      c.button(scheme: :danger) { "Danger" }
-      c.button(scheme: :outline) { "Outline" }
-      c.button(classes: "custom-class") { "Custom class" }
+    render_inline(Primer::Beta::ButtonGroup.new) do |component|
+      component.with_button { "Button" }
+      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
 
     assert_selector("div.BtnGroup") do
@@ -44,8 +44,8 @@ def test_does_not_render_content
   end
 
   def test_all_buttons_with_same_size
-    render_inline(Primer::Beta::ButtonGroup.new(size: :small)) do |c|
-      c.button(size: :medium) { "Medium" }
+    render_inline(Primer::Beta::ButtonGroup.new(size: :small)) do |component|
+      component.with_button(size: :medium) { "Medium" }
     end
 
     assert_selector("div.BtnGroup") do
@@ -54,8 +54,8 @@ def test_all_buttons_with_same_size
   end
 
   def test_all_buttons_with_same_variant
-    render_inline(Primer::Beta::ButtonGroup.new(variant: :small)) do |c|
-      c.button(size: :medium) { "Medium" }
+    render_inline(Primer::Beta::ButtonGroup.new(variant: :small)) do |component|
+      component.with_button(size: :medium) { "Medium" }
     end
 
     assert_selector("div.BtnGroup") do
diff --git a/test/components/beta/details_test.rb b/test/components/beta/details_test.rb
index 7824483f96..dc1bc67c08 100644
--- a/test/components/beta/details_test.rb
+++ b/test/components/beta/details_test.rb
@@ -7,10 +7,10 @@ class PrimerBetaDetailsTest < Minitest::Test
 
   def test_overlay_default_renders_details_overlay
     render_inline(Primer::Beta::Details.new(overlay: :default)) do |component|
-      component.summary do
+      component.with_summary do
         "Summary"
       end
-      component.body do
+      component.with_body do
         "Body"
       end
     end
@@ -20,10 +20,10 @@ def test_overlay_default_renders_details_overlay
 
   def test_overlay_dark_renders_details_overlay_dark
     render_inline(Primer::Beta::Details.new(overlay: :dark)) do |component|
-      component.summary do
+      component.with_summary do
         "Summary"
       end
-      component.body do
+      component.with_body do
         "Body"
       end
     end
@@ -33,10 +33,10 @@ def test_overlay_dark_renders_details_overlay_dark
 
   def test_renders_details_reset_when_resetting_the_button_style
     render_inline(Primer::Beta::Details.new(reset: true)) do |component|
-      component.summary do
+      component.with_summary do
         "Summary"
       end
-      component.body do
+      component.with_body do
         "Body"
       end
     end
@@ -46,10 +46,10 @@ def test_renders_details_reset_when_resetting_the_button_style
 
   def test_default_component_renders_btn_summary
     render_inline(Primer::Beta::Details.new) do |component|
-      component.summary do
+      component.with_summary do
         "Summary"
       end
-      component.body do
+      component.with_body do
         "Body"
       end
     end
@@ -59,10 +59,10 @@ def test_default_component_renders_btn_summary
 
   def test_does_not_render_btn_if_button_false
     render_inline(Primer::Beta::Details.new) do |component|
-      component.summary(button: false) do
+      component.with_summary(button: false) do
         "Summary"
       end
-      component.body do
+      component.with_body do
         "Body"
       end
     end
@@ -74,8 +74,8 @@ def test_does_not_render_btn_if_button_false
   def test_falls_back_to_defaults_when_invalid_overlay_is_passed
     without_fetch_or_fallback_raises do
       render_inline(Primer::Beta::Details.new(overlay: :bar)) do |component|
-        component.summary { "Summary" }
-        component.body { "Body" }
+        component.with_summary { "Summary" }
+        component.with_body { "Body" }
       end
     end
 
@@ -86,8 +86,8 @@ def test_falls_back_to_defaults_when_invalid_overlay_is_passed
   def test_falls_back_to_default_body_tag_when_invalid_body_tag_is_passed
     without_fetch_or_fallback_raises do
       render_inline(Primer::Beta::Details.new) do |component|
-        component.summary { "Summary" }
-        component.body(tag: :img) { "Body" }
+        component.with_summary { "Summary" }
+        component.with_body(tag: :img) { "Body" }
       end
     end
 
@@ -97,10 +97,10 @@ def test_falls_back_to_default_body_tag_when_invalid_body_tag_is_passed
 
   def test_passes_props_to_button
     render_inline(Primer::Beta::Details.new) do |component|
-      component.summary(size: :small, scheme: :primary) do
+      component.with_summary(size: :small, scheme: :primary) do
         "Summary"
       end
-      component.body do
+      component.with_body do
         "Body"
       end
     end
@@ -111,10 +111,10 @@ def test_passes_props_to_button
   def test_prevents_rendering_without_slots
     render_inline(Primer::Beta::Details.new)
     render_inline(Primer::Beta::Details.new) do |component|
-      component.body { "Body" }
+      component.with_body { "Body" }
     end
     render_inline(Primer::Beta::Details.new) do |component|
-      component.summary { "Summary" }
+      component.with_summary { "Summary" }
     end
 
     refute_selector("details")
diff --git a/test/components/beta/flash_test.rb b/test/components/beta/flash_test.rb
index 0442f5f1de..f07972a535 100644
--- a/test/components/beta/flash_test.rb
+++ b/test/components/beta/flash_test.rb
@@ -50,7 +50,7 @@ def test_renders_flash_close
 
   def test_renders_flash_action_slot
     render_inline(Primer::Beta::Flash.new) do |component|
-      component.action { "submit" }
+      component.with_action { "submit" }
     end
 
     assert_selector(".flash .flash-action", text: "submit")
diff --git a/test/components/beta/link_test.rb b/test/components/beta/link_test.rb
index 9663b1a515..471016a8c1 100644
--- a/test/components/beta/link_test.rb
+++ b/test/components/beta/link_test.rb
@@ -85,8 +85,8 @@ def test_status
   end
 
   def test_renders_with_tooltip_sibling
-    render_inline(Primer::Beta::Link.new(id: "1", href: "http://google.com")) do |c|
-      c.tooltip(text: "Tooltip text")
+    render_inline(Primer::Beta::Link.new(id: "1", href: "http://google.com")) do |component|
+      component.with_tooltip(text: "Tooltip text")
       "content"
     end
 
diff --git a/test/components/beta/popover_test.rb b/test/components/beta/popover_test.rb
index e35890af1e..2bd5cd7f8c 100644
--- a/test/components/beta/popover_test.rb
+++ b/test/components/beta/popover_test.rb
@@ -7,10 +7,10 @@ class PrimerBetaPopoverTest < Minitest::Test
 
   def test_renders_default_styling
     render_inline(Primer::Beta::Popover.new) do |component|
-      component.heading do
+      component.with_heading do
         "My header"
       end
-      component.body do
+      component.with_body do
         "My body"
       end
     end
@@ -22,10 +22,10 @@ def test_renders_default_styling
 
   def test_without_left_and_right_classes
     render_inline(Primer::Beta::Popover.new(left: true, right: true)) do |component|
-      component.heading do
+      component.with_heading do
         "My header"
       end
-      component.body do
+      component.with_body do
         "My body"
       end
     end
@@ -40,7 +40,7 @@ def test_allows_customization
     render_inline(Primer::Beta::Popover.new(
                     position: :absolute, classes: "custom-class"
                   )) do |component|
-      component.body do
+      component.with_body do
         "Hi there"
       end
     end
@@ -50,7 +50,7 @@ def test_allows_customization
 
   def test_respects_message_caret_option
     render_inline(Primer::Beta::Popover.new) do |component|
-      component.body(caret: :left_bottom)
+      component.with_body(caret: :left_bottom)
     end
 
     assert_selector("div.Popover div.Popover-message.Popover-message--left-bottom.Box")
@@ -58,7 +58,7 @@ def test_respects_message_caret_option
 
   def test_respects_message_large_option
     render_inline(Primer::Beta::Popover.new) do |component|
-      component.body(large: true)
+      component.with_body(large: true)
     end
 
     assert_selector("div.Popover div.Popover-message.Popover-message--large.Box")
@@ -66,7 +66,7 @@ def test_respects_message_large_option
 
   def test_allows_message_customization
     render_inline(Primer::Beta::Popover.new) do |component|
-      component.body(p: 3, mt: 1, mx: 4, text_align: :right)
+      component.with_body(p: 3, mt: 1, mx: 4, text_align: :right)
     end
 
     assert_selector("div.Popover div.Popover-message.Box.p-3.mt-1.mx-4.text-right")
@@ -74,8 +74,8 @@ def test_allows_message_customization
 
   def test_allows_heading_customization
     render_inline(Primer::Beta::Popover.new) do |component|
-      component.body { "Foo" }
-      component.heading(mb: 4, pr: 3, tag: :h3) do
+      component.with_body { "Foo" }
+      component.with_heading(mb: 4, pr: 3, tag: :h3) do
         "Hello world"
       end
     end
diff --git a/test/components/beta/truncate_test.rb b/test/components/beta/truncate_test.rb
index 21ca5a4d9a..f4f58112c7 100644
--- a/test/components/beta/truncate_test.rb
+++ b/test/components/beta/truncate_test.rb
@@ -19,7 +19,7 @@ def test_truncate_supports_block_with_arguments
 
   def test_truncate_wrapper_and_text_tag
     render_inline(Primer::Beta::Truncate.new(tag: :button)) do |component|
-      component.item(tag: :strong) { "content" }
+      component.with_item(tag: :strong) { "content" }
     end
 
     assert_selector("button.Truncate > strong.Truncate-text", text: "content")
@@ -27,7 +27,7 @@ def test_truncate_wrapper_and_text_tag
 
   def test_truncate_with_default_options
     render_inline(Primer::Beta::Truncate.new) do |component|
-      component.item { "content" }
+      component.with_item { "content" }
     end
 
     assert_selector(".Truncate > .Truncate-text", text: "content")
@@ -35,7 +35,7 @@ def test_truncate_with_default_options
 
   def test_truncate_with_custom_item_classes
     render_inline(Primer::Beta::Truncate.new) do |component|
-      component.item(classes: "foo") { "content" }
+      component.with_item(classes: "foo") { "content" }
     end
 
     assert_selector(".Truncate .Truncate-text.foo", text: "content")
@@ -43,8 +43,8 @@ def test_truncate_with_custom_item_classes
 
   def test_truncate_with_priority
     render_inline(Primer::Beta::Truncate.new) do |component|
-      component.item { "content" }
-      component.item(priority: true) { "priority content" }
+      component.with_item { "content" }
+      component.with_item(priority: true) { "priority content" }
     end
 
     assert_selector(".Truncate > .Truncate-text.Truncate-text--primary", text: "priority content")
@@ -52,8 +52,8 @@ def test_truncate_with_priority
 
   def test_truncate_with_expandable
     render_inline(Primer::Beta::Truncate.new) do |component|
-      component.item { "content" }
-      component.item(tag: :button, expandable: true) { "expandable content" }
+      component.with_item { "content" }
+      component.with_item(tag: :button, expandable: true) { "expandable content" }
     end
 
     assert_selector(".Truncate > button.Truncate-text.Truncate-text--expandable", text: "expandable content")
@@ -61,7 +61,7 @@ def test_truncate_with_expandable
 
   def test_truncate_with_max_width
     render_inline(Primer::Beta::Truncate.new) do |component|
-      component.item(max_width: 1337) { "content" }
+      component.with_item(max_width: 1337) { "content" }
     end
 
     assert_selector(".Truncate > .Truncate-text[style='max-width: 1337px;']", text: "content")
diff --git a/test/components/breadcrumbs_test.rb b/test/components/breadcrumbs_test.rb
index 3763af6518..8f0adeb0ad 100644
--- a/test/components/breadcrumbs_test.rb
+++ b/test/components/breadcrumbs_test.rb
@@ -15,7 +15,7 @@ def test_system_argument_restriction
     with_raise_on_invalid_options(true) do
       error = assert_raises(ArgumentError) do
         render_inline(Primer::Beta::Breadcrumbs.new(p: 0)) do |component|
-          component.item(href: "/") { "Home" }
+          component.with_item(href: "/") { "Home" }
         end
       end
 
@@ -23,7 +23,7 @@ def test_system_argument_restriction
 
       error = assert_raises(ArgumentError) do
         render_inline(Primer::Beta::Breadcrumbs.new(font_size: 4)) do |component|
-          component.item(href: "/") { "Home" }
+          component.with_item(href: "/") { "Home" }
         end
       end
 
@@ -33,7 +33,7 @@ def test_system_argument_restriction
 
   def test_renders_single_item
     render_inline(Primer::Beta::Breadcrumbs.new) do |component|
-      component.item(href: "/") { "Home" }
+      component.with_item(href: "/") { "Home" }
     end
 
     assert_selector("nav[aria-label='Breadcrumb'] .breadcrumb-item", text: "Home")
@@ -41,9 +41,9 @@ def test_renders_single_item
 
   def test_renders_multiple_items
     render_inline(Primer::Beta::Breadcrumbs.new) do |component|
-      component.item(href: "/") { "Home" }
-      component.item(href: "/about") { "About" }
-      component.item(href: "/about/team") { "Team" }
+      component.with_item(href: "/") { "Home" }
+      component.with_item(href: "/about") { "About" }
+      component.with_item(href: "/about/team") { "Team" }
     end
 
     assert_selector("nav[aria-label='Breadcrumb'] .breadcrumb-item", count: 3)
@@ -51,8 +51,8 @@ def test_renders_multiple_items
 
   def test_renders_links_when_specified
     render_inline(Primer::Beta::Breadcrumbs.new) do |component|
-      component.item(href: "/") { "Home" }
-      component.item(href: "/about") { "About" }
+      component.with_item(href: "/") { "Home" }
+      component.with_item(href: "/about") { "About" }
     end
 
     assert_selector("nav[aria-label='Breadcrumb'] .breadcrumb-item a", count: 2)
@@ -61,8 +61,8 @@ def test_renders_links_when_specified
 
   def test_automatically_selects_last_item
     render_inline(Primer::Beta::Breadcrumbs.new) do |component|
-      component.item(href: "/") { "Home" }
-      component.item(href: "/about") { "About" }
+      component.with_item(href: "/") { "Home" }
+      component.with_item(href: "/about") { "About" }
     end
 
     assert_selector("li.breadcrumb-item-selected a[aria-current='page']", text: "About")
diff --git a/test/components/component_test.rb b/test/components/component_test.rb
index 82ac159e7f..01a12aa199 100644
--- a/test/components/component_test.rb
+++ b/test/components/component_test.rb
@@ -39,28 +39,28 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Beta::AutoComplete::Item, { value: "Foo" }],
     [Primer::Beta::Avatar, { alt: "github", src: "https://github.com/github.png" }],
     [Primer::Beta::AvatarStack, {}, lambda do |component|
-      component.avatar(alt: "github", src: "https://github.com/github.png")
+      component.with_avatar(alt: "github", src: "https://github.com/github.png")
     end],
     [Primer::Beta::BaseButton, {}],
     [Primer::BaseComponent, { tag: :div }],
     [Primer::Beta::Blankslate, {}, proc { |component|
-      component.heading(tag: :h2) { "Foo" }
+      component.with_heading(tag: :h2) { "Foo" }
     }],
-    [Primer::Beta::BorderBox, {}, proc { |component| component.header { "Foo" } }],
+    [Primer::Beta::BorderBox, {}, proc { |component| component.with_header { "Foo" } }],
     [Primer::Beta::BorderBox::Header, {}],
     [Primer::BlankslateComponent, { title: "Foo" }],
     [Primer::Box, {}],
-    [Primer::Beta::Breadcrumbs, {}, proc { |component| component.item(href: "/") { "Foo" } }],
+    [Primer::Beta::Breadcrumbs, {}, proc { |component| component.with_item(href: "/") { "Foo" } }],
     [Primer::ButtonComponent, {}, proc { "Button" }],
-    [Primer::Beta::ButtonGroup, {}, proc { |component| component.button { "Button" } }],
+    [Primer::Beta::ButtonGroup, {}, proc { |component| component.with_button { "Button" } }],
     [Primer::Alpha::ButtonMarketing, {}],
     [Primer::Beta::ClipboardCopy, { "aria-label": "String that will be read to screenreaders", value: "String that will be copied" }],
     [Primer::ConditionalWrapper, { condition: true, tag: :div }],
     [Primer::Beta::CloseButton, {}],
     [Primer::Beta::Counter, { count: 1 }],
     [Primer::Beta::Details, {}, lambda do |component|
-      component.summary { "Foo" }
-      component.body { "Bar" }
+      component.with_summary { "Foo" }
+      component.with_body { "Bar" }
     end],
     [Primer::Alpha::Dialog, { title: "Test" }, proc { |component|
       component.with_header { "Foo" }
@@ -88,7 +88,7 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Alpha::Menu, {}, proc { |c| c.item(href: "#url") { "Item" } }],
     [Primer::Navigation::TabComponent, {}],
     [Primer::Beta::Octicon, { icon: :people }],
-    [Primer::Beta::Popover, {}, proc { |component| component.body { "Foo" } }],
+    [Primer::Beta::Popover, {}, proc { |component| component.with_body { "Foo" } }],
     [Primer::Beta::ProgressBar, {}, proc { |component| component.item }],
     [Primer::Beta::Spinner, {}],
     [Primer::StateComponent, { title: "Open" }],
@@ -98,7 +98,7 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Alpha::TextField, { name: :foo, label: "Foo" }],
     [Primer::Beta::Text, {}],
     [Primer::Truncate, {}],
-    [Primer::Beta::Truncate, {}, proc { |component| component.item { "Foo" } }],
+    [Primer::Beta::Truncate, {}, proc { |component| component.with_item { "Foo" } }],
     [Primer::TimeAgoComponent, { time: Time.zone.now }],
     [Primer::TimelineItemComponent, {}, proc { |component| component.with_body { "Foo" } }],
     [Primer::Tooltip, { label: "More" }],