More PVCs use new Slots API (#1697)

.changeset/gorgeous-zoos-tap.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+ActionList, Alpha::AutoComplete, Banner, and Alpha::Dialog use new "with_*" Slots API.

app/components/primer/alpha/action_list.rb

@@ -9,6 +9,7 @@ module Alpha
     # Each item in an action list can be augmented by specifying corresponding leading
     # and/or trailing visuals.
     class ActionList < Primer::Component
+      warn_on_deprecated_slot_setter
       status :alpha
 
       DEFAULT_ROLE = :list

app/components/primer/alpha/action_list/divider.rb

@@ -5,6 +5,8 @@ module Alpha
     class ActionList
       # Section heading rendered above the section contents.
       class Divider < Primer::Component
+        warn_on_deprecated_slot_setter
+
         DEFAULT_SCHEME = :subtle
         SCHEME_MAPPINGS = {
           DEFAULT_SCHEME => nil,

app/components/primer/alpha/action_list/heading.rb

@@ -5,6 +5,8 @@ module Alpha
     class ActionList
       # Heading used to describe each sub list within an action list.
       class Heading < Primer::Component
+        warn_on_deprecated_slot_setter
+
         DEFAULT_SCHEME = :subtle
         SCHEME_MAPPINGS = {
           DEFAULT_SCHEME => nil,

app/components/primer/alpha/action_list/item.rb

@@ -6,6 +6,8 @@ class ActionList
       # An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,
       # such as icons, avatars, and counters.
       class Item < Primer::Component
+        warn_on_deprecated_slot_setter
+
         DEFAULT_SIZE = :medium
         SIZE_MAPPINGS = {
           DEFAULT_SIZE => nil,

app/components/primer/alpha/auto_complete.rb

@@ -12,6 +12,7 @@ module Alpha
     #   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 :deprecated
 
       # Customizable results list.
@@ -136,8 +137,8 @@ def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, is_label
 
       # 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
 
       private

app/components/primer/alpha/auto_complete/item.rb

@@ -5,6 +5,7 @@ module Alpha
     class AutoComplete
       # Use `AutoCompleteItem` to list results of an auto-completed search.
       class Item < Primer::Component
+        warn_on_deprecated_slot_setter
         status :deprecated
 
         # @example Default

app/components/primer/alpha/banner.rb

@@ -4,6 +4,7 @@ module Primer
   module Alpha
     # Use `Banner` to highlight important information.
     class Banner < Primer::Component
+      warn_on_deprecated_slot_setter
       status :alpha
 
       # A button or custom content that will render on the right-hand side of the component.

app/components/primer/alpha/dialog.rb

@@ -18,6 +18,7 @@ module Alpha
     #   `aria-labelledby` relationship between the title and the unique id of
     #   the dialog.
     class Dialog < Primer::Component
+      warn_on_deprecated_slot_setter
       status :alpha
       audited_at "2022-10-10"
 
@@ -58,7 +59,9 @@ class Dialog < Primer::Component
         )
         system_arguments[:id] = "dialog-show-#{@system_arguments[:id]}"
         system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
+        # rubocop:disable Primer/ComponentNameMigration
         Primer::ButtonComponent.new(**system_arguments)
+        # rubocop:enable Primer/ComponentNameMigration
       }
 
       # Header content.

previews/primer/alpha/action_list_preview.rb

@@ -169,7 +169,7 @@ def item(
         tooltip: false
       )
         list = Primer::Alpha::ActionList.new(aria: { label: "Action List" })
-        list.item(
+        list.with_item(
           label: label,
           truncate_label: truncate_label,
           href: href,

test/components/alpha/auto_complete_test.rb

@@ -8,7 +8,7 @@ class PrimerAlphaAutoCompleteTest < Minitest::Test
   def test_raises_if_no_label_text_is_passed_in
     assert_raises ArgumentError do
       render_inline Primer::Alpha::AutoComplete.new(src: "/url", input_id: "test-input", list_id: "my-list-id") do |component|
-        component.icon(icon: :person)
+        component.with_icon(icon: :person)
       end
     end
   end
@@ -17,8 +17,8 @@ def test_raises_if_autofocus_added_to_input
     with_raise_on_invalid_options(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/url", input_id: "test-input", list_id: "my-list-id") do |component|
-          component.input(autofocus: true)
-          component.icon(icon: :person)
+          component.with_input(autofocus: true)
+          component.with_icon(icon: :person)
         end
       end
       assert_includes(err.message, "autofocus is not allowed for accessibility reasons")
@@ -29,8 +29,8 @@ def test_raises_if_aria_label_added_to_input
     with_raise_on_invalid_aria(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Alpha::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.icon(icon: :person)
+          component.with_input("aria-label": "Don't add one")
+          component.with_icon(icon: :person)
         end
       end
       assert_includes(err.message, "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.")
@@ -129,7 +129,7 @@ def test_applies_correct_class_when_is_label_visible_is_false
 
   def test_renders_results_with_custom_classes
     render_inline Primer::Alpha::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
       assert_selector('ul[id="my-list-id"].autocomplete-results.my-class')
@@ -153,7 +153,7 @@ def test_denies_id_on_input_slot
     with_raise_on_invalid_options(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Alpha::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.")
@@ -164,7 +164,7 @@ def test_denies_name_on_input_slot
     with_raise_on_invalid_options(true) do
       err = assert_raises ArgumentError do
         render_inline Primer::Alpha::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`.")

test/components/component_test.rb

@@ -31,7 +31,7 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Alpha::ImageCrop, { src: "Foo" }],
     [Primer::IconButton, { icon: :star, "aria-label": "Label" }],
     [Primer::Alpha::ActionList, { aria: { label: "Action List" } }, lambda do |component|
-      component.item(label: "Foo")
+      component.with_item(label: "Foo")
     end],
     [Primer::Alpha::AutoComplete, { label_text: "Fruits", src: "Foo", list_id: "Bar", input_id: "input-id", input_name: "input-name" }],
     [Primer::Alpha::AutoComplete::Item, { value: "Foo" }],
@@ -63,9 +63,9 @@ class PrimerComponentTest < Minitest::Test
       component.body { "Bar" }
     end],
     [Primer::Alpha::Dialog, { title: "Test" }, proc { |component|
-      component.header { "Foo" }
-      component.body { "Foo" }
-      component.footer { "Foo" }
+      component.with_header { "Foo" }
+      component.with_body { "Foo" }
+      component.with_footer { "Foo" }
     }],
     [Primer::Alpha::Dialog::Header, { title: "Test", id: "test" }],
     [Primer::Alpha::Dialog::Body, {}],