Beta components use new Slots API (#1703)

.changeset/thick-numbers-beam.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Beta components use new `with_*` Slots API.

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 %>

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

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

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

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

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.

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

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

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."

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

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

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 %>

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.

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

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

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

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

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>