diff --git a/.changeset/thin-buckets-press.md b/.changeset/thin-buckets-press.md new file mode 100644 index 0000000000..9ffe295ac5 --- /dev/null +++ b/.changeset/thin-buckets-press.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +Move `Primer::HellipButton` to `Primer::Alpha::HellipButton` diff --git a/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/hellip_button_preview/default.png b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/hellip_button_preview/default.png new file mode 100644 index 0000000000..46b4333cac Binary files /dev/null and b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/hellip_button_preview/default.png differ diff --git a/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/hellip_button_preview/focused.png b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/hellip_button_preview/focused.png new file mode 100644 index 0000000000..5274bbc1c5 Binary files /dev/null and b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/hellip_button_preview/focused.png differ diff --git a/app/components/primer/alpha/hellip_button.rb b/app/components/primer/alpha/hellip_button.rb new file mode 100644 index 0000000000..bc0fafbebb --- /dev/null +++ b/app/components/primer/alpha/hellip_button.rb @@ -0,0 +1,41 @@ +# frozen_string_literal: true + +module Primer + module Alpha + # Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders. + # @accessibility + # Always set an accessible label to help the user interact with the component. + # + # * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers. + # * Set the attribute `aria-label` on the system arguments. E.g. `Primer::Alpha::HellipButton.new("aria-label": "Expand next part")` + class HellipButton < Primer::Component + # @example Default + # <%= render(Primer::Alpha::HellipButton.new("aria-label": "No effect")) %> + # + # @example Inline + # <%= render(Primer::Alpha::HellipButton.new(inline: true, "aria-label": "No effect")) %> + # + # @example Styling the button + # <%= render(Primer::Alpha::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %> + # + # @param inline [Boolean] Whether or not the button is inline. + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(inline: false, **system_arguments) + @system_arguments = deny_tag_argument(**system_arguments) + + validate_aria_label + + @system_arguments[:tag] = :button + @system_arguments[:"aria-expanded"] = false + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + "inline" => inline + ) + end + + def call + render(Primer::Beta::BaseButton.new(**@system_arguments)) { "…".html_safe } + end + end + end +end diff --git a/app/components/primer/alpha/hidden_text_expander.rb b/app/components/primer/alpha/hidden_text_expander.rb index f82249b9db..b2729ae52f 100644 --- a/app/components/primer/alpha/hidden_text_expander.rb +++ b/app/components/primer/alpha/hidden_text_expander.rb @@ -49,7 +49,7 @@ def initialize(inline: false, button_arguments: {}, **system_arguments) def call render(Primer::BaseComponent.new(**@system_arguments)) do - render(Primer::HellipButton.new(**@button_arguments)) + render(Primer::Alpha::HellipButton.new(**@button_arguments)) end end end diff --git a/app/components/primer/hellip_button.rb b/app/components/primer/hellip_button.rb index fcd2438996..ca89d854e5 100644 --- a/app/components/primer/hellip_button.rb +++ b/app/components/primer/hellip_button.rb @@ -1,39 +1,7 @@ # frozen_string_literal: true module Primer - # Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders. - # @accessibility - # Always set an accessible label to help the user interact with the component. - # - # * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers. - # * Set the attribute `aria-label` on the system arguments. E.g. `Primer::HellipButton.new("aria-label": "Expand next part")` - class HellipButton < Primer::Component - # @example Default - # <%= render(Primer::HellipButton.new("aria-label": "No effect")) %> - # - # @example Inline - # <%= render(Primer::HellipButton.new(inline: true, "aria-label": "No effect")) %> - # - # @example Styling the button - # <%= render(Primer::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %> - # - # @param inline [Boolean] Whether or not the button is inline. - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(inline: false, **system_arguments) - @system_arguments = deny_tag_argument(**system_arguments) - - validate_aria_label - - @system_arguments[:tag] = :button - @system_arguments[:"aria-expanded"] = false - @system_arguments[:classes] = class_names( - @system_arguments[:classes], - "inline" => inline - ) - end - - def call - render(Primer::Beta::BaseButton.new(**@system_arguments)) { "…".html_safe } - end + class HellipButton < Primer::Alpha::HellipButton + status :deprecated end end diff --git a/lib/primer/deprecations.yml b/lib/primer/deprecations.yml index d903565d04..05474522ab 100644 --- a/lib/primer/deprecations.yml +++ b/lib/primer/deprecations.yml @@ -47,6 +47,10 @@ deprecations: autocorrect: true replacement: "Primer::Alpha::Dropdown::Menu::Item" + - component: "Primer::HellipButton" + autocorrect: true + replacement: "Primer::Alpha::HellipButton" + - component: "Primer::IconButton" autocorrect: true replacement: "Primer::Beta::IconButton" diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index e20c658893..d99d702550 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -34,7 +34,7 @@ namespace :docs do Primer::Beta::Button, Primer::Alpha::SegmentedControl, Primer::Alpha::Layout, - Primer::HellipButton, + Primer::Alpha::HellipButton, Primer::Alpha::Image, Primer::LocalTime, Primer::Alpha::OcticonSymbols, diff --git a/previews/primer/alpha/hellip_button_preview.rb b/previews/primer/alpha/hellip_button_preview.rb new file mode 100644 index 0000000000..3ba662a9ef --- /dev/null +++ b/previews/primer/alpha/hellip_button_preview.rb @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +module Primer + module Alpha + # @label HellipButton + class HellipButtonPreview < ViewComponent::Preview + # @label Default Options + # + # @param aria_label [String] + # @param inline [Boolean] + def default(inline: false, aria_label: "No effect") + render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label)) + end + + # @label Playground + # + # @param aria_label [String] + # @param inline [Boolean] + def playground(inline: false, aria_label: "No effect") + render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label)) + end + end + end +end diff --git a/previews/primer/hellip_button_preview.rb b/previews/primer/hellip_button_preview.rb deleted file mode 100644 index f9e9b78777..0000000000 --- a/previews/primer/hellip_button_preview.rb +++ /dev/null @@ -1,22 +0,0 @@ -# frozen_string_literal: true - -module Primer - # @label HellipButton - class HellipButtonPreview < ViewComponent::Preview - # @label Default Options - # - # @param aria_label [String] - # @param inline [Boolean] - def default(inline: false, aria_label: "No effect") - render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label)) - end - - # @label Playground - # - # @param aria_label [String] - # @param inline [Boolean] - def playground(inline: false, aria_label: "No effect") - render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label)) - end - end -end diff --git a/static/arguments.json b/static/arguments.json index d66e525f84..55622c8ec0 100644 --- a/static/arguments.json +++ b/static/arguments.json @@ -381,6 +381,26 @@ } ] }, + { + "component": "HellipButton", + "status": "alpha", + "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hellip_button.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hellip_button_preview/default/", + "parameters": [ + { + "name": "inline", + "type": "Boolean", + "default": "`false`", + "description": "Whether or not the button is inline." + }, + { + "name": "system_arguments", + "type": "Hash", + "default": "N/A", + "description": "[System arguments](/system-arguments)" + } + ] + }, { "component": "HiddenTextExpander", "status": "alpha", @@ -2217,26 +2237,6 @@ } ] }, - { - "component": "HellipButton", - "status": "alpha", - "source": "https://github.com/primer/view_components/tree/main/app/components/primer/hellip_button.rb", - "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/hellip_button_preview/default/", - "parameters": [ - { - "name": "inline", - "type": "Boolean", - "default": "`false`", - "description": "Whether or not the button is inline." - }, - { - "name": "system_arguments", - "type": "Hash", - "default": "N/A", - "description": "[System arguments](/system-arguments)" - } - ] - }, { "component": "IconButton", "status": "deprecated", diff --git a/static/audited_at.json b/static/audited_at.json index 7956891a84..9506f90d37 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -14,6 +14,7 @@ "Primer::Alpha::Dropdown": "", "Primer::Alpha::Dropdown::Menu": "", "Primer::Alpha::Dropdown::Menu::Item": "", + "Primer::Alpha::HellipButton": "", "Primer::Alpha::HiddenTextExpander": "", "Primer::Alpha::Image": "", "Primer::Alpha::ImageCrop": "", diff --git a/static/constants.json b/static/constants.json index 55858325f9..c5de7a471e 100644 --- a/static/constants.json +++ b/static/constants.json @@ -216,6 +216,8 @@ "summary" ] }, + "Primer::Alpha::HellipButton": { + }, "Primer::Alpha::HiddenTextExpander": { }, "Primer::Alpha::Image": { diff --git a/static/statuses.json b/static/statuses.json index 88a6d7e509..cb78d1e582 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -14,6 +14,7 @@ "Primer::Alpha::Dropdown": "alpha", "Primer::Alpha::Dropdown::Menu": "alpha", "Primer::Alpha::Dropdown::Menu::Item": "alpha", + "Primer::Alpha::HellipButton": "alpha", "Primer::Alpha::HiddenTextExpander": "alpha", "Primer::Alpha::Image": "alpha", "Primer::Alpha::ImageCrop": "alpha", @@ -79,7 +80,7 @@ "Primer::Dropdown::Menu": "deprecated", "Primer::Dropdown::Menu::Item": "deprecated", "Primer::DropdownMenuComponent": "deprecated", - "Primer::HellipButton": "alpha", + "Primer::HellipButton": "deprecated", "Primer::IconButton": "deprecated", "Primer::LabelComponent": "deprecated", "Primer::LayoutComponent": "alpha", diff --git a/test/components/hellip_button_test.rb b/test/components/alpha/hellip_button_test.rb similarity index 59% rename from test/components/hellip_button_test.rb rename to test/components/alpha/hellip_button_test.rb index 0d00acaaa0..4444d04383 100644 --- a/test/components/hellip_button_test.rb +++ b/test/components/alpha/hellip_button_test.rb @@ -2,49 +2,49 @@ require "components/test_helper" -class PrimerHellipButtonTest < Minitest::Test +class PrimerAlphaHellipButtonTest < Minitest::Test include Primer::ComponentTestHelpers def test_renders - render_inline(Primer::HellipButton.new("aria-label": "No effect")) + render_inline(Primer::Alpha::HellipButton.new("aria-label": "No effect")) assert_selector("button[type='button'][aria-expanded='false']", text: "…") end def test_renders_inline - render_inline(Primer::HellipButton.new(inline: true, "aria-label": "No effect")) + render_inline(Primer::Alpha::HellipButton.new(inline: true, "aria-label": "No effect")) assert_selector("button[type='button'][aria-expanded='false'].inline", text: "…") end def test_renders_button_custom_classes - render_inline(Primer::HellipButton.new(classes: "custom-class", "aria-label": "No effect")) + render_inline(Primer::Alpha::HellipButton.new(classes: "custom-class", "aria-label": "No effect")) assert_selector("button[type='button'][aria-expanded='false'].custom-class", text: "…") end def test_renders_aria_label - render_inline(Primer::HellipButton.new("aria-label": "Custom aria label")) + render_inline(Primer::Alpha::HellipButton.new("aria-label": "Custom aria label")) assert_selector("button[aria-label='Custom aria label']") end def test_renders_aria_label_provided_as_object - render_inline(Primer::HellipButton.new(aria: { label: "Custom aria label" })) + render_inline(Primer::Alpha::HellipButton.new(aria: { label: "Custom aria label" })) assert_selector("button[aria-label='Custom aria label']") end def test_raises_if_no_aria_label_is_provided err = assert_raises ArgumentError do - render_inline(Primer::HellipButton.new) + render_inline(Primer::Alpha::HellipButton.new) end assert_equal("`aria-label` is required.", err.message) end def test_does_not_render_content - render_inline(Primer::HellipButton.new("aria-label": "No effect")) { "content" } + render_inline(Primer::Alpha::HellipButton.new("aria-label": "No effect")) { "content" } refute_text("content") end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index f8030404ac..2ff7575c50 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -22,7 +22,7 @@ class PrimerComponentTest < Minitest::Test component.with_main(tag: :div) { "Foo" } component.with_sidebar(tag: :div) { "Bar" } }], - [Primer::HellipButton, { "aria-label": "No action" }], + [Primer::Alpha::HellipButton, { "aria-label": "No action" }], [Primer::Alpha::TabPanels, { label: "label" }], [Primer::Alpha::TabNav, { label: "label" }], [Primer::Alpha::UnderlinePanels, { label: "Panel label" }], @@ -113,6 +113,7 @@ def test_registered_components ignored_components = [ "Primer::SubheadComponent", "Primer::TabContainerComponent", + "Primer::HellipButton", "Primer::StateComponent", "Primer::OcticonSymbolsComponent", "Primer::SpinnerComponent",