diff --git a/.changeset/gorgeous-zoos-tap.md b/.changeset/gorgeous-zoos-tap.md new file mode 100644 index 0000000000..17b80a88aa --- /dev/null +++ b/.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. diff --git a/app/components/primer/alpha/action_list.rb b/app/components/primer/alpha/action_list.rb index 7198e2d371..7c3e806244 100644 --- a/app/components/primer/alpha/action_list.rb +++ b/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 diff --git a/app/components/primer/alpha/action_list/divider.rb b/app/components/primer/alpha/action_list/divider.rb index fa1fa9a4f3..0c4ea4b796 100644 --- a/app/components/primer/alpha/action_list/divider.rb +++ b/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, diff --git a/app/components/primer/alpha/action_list/heading.rb b/app/components/primer/alpha/action_list/heading.rb index 65f0cf7734..cb5c57ed0d 100644 --- a/app/components/primer/alpha/action_list/heading.rb +++ b/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, diff --git a/app/components/primer/alpha/action_list/item.rb b/app/components/primer/alpha/action_list/item.rb index f963299ebe..cb9c0c7430 100644 --- a/app/components/primer/alpha/action_list/item.rb +++ b/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, diff --git a/app/components/primer/alpha/auto_complete.rb b/app/components/primer/alpha/auto_complete.rb index 8ef1787247..d6fdab9e17 100644 --- a/app/components/primer/alpha/auto_complete.rb +++ b/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 diff --git a/app/components/primer/alpha/auto_complete/item.rb b/app/components/primer/alpha/auto_complete/item.rb index 8265bff3a6..e30dea2f8b 100644 --- a/app/components/primer/alpha/auto_complete/item.rb +++ b/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 diff --git a/app/components/primer/alpha/banner.rb b/app/components/primer/alpha/banner.rb index f62b406d6f..9a9dcbf8d4 100644 --- a/app/components/primer/alpha/banner.rb +++ b/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. diff --git a/app/components/primer/alpha/dialog.rb b/app/components/primer/alpha/dialog.rb index 22d5c8a3e6..0b82c4df81 100644 --- a/app/components/primer/alpha/dialog.rb +++ b/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. diff --git a/previews/primer/alpha/action_list_preview.rb b/previews/primer/alpha/action_list_preview.rb index c4ff73123e..479b929214 100644 --- a/previews/primer/alpha/action_list_preview.rb +++ b/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, diff --git a/test/components/alpha/auto_complete_test.rb b/test/components/alpha/auto_complete_test.rb index 5429ad78a7..de374b06c5 100644 --- a/test/components/alpha/auto_complete_test.rb +++ b/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`.") diff --git a/test/components/component_test.rb b/test/components/component_test.rb index 34710dc89b..761f601d2d 100644 --- a/test/components/component_test.rb +++ b/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, {}],