diff --git a/.changeset/sour-crews-suffer.md b/.changeset/sour-crews-suffer.md new file mode 100644 index 0000000000..367ad92549 --- /dev/null +++ b/.changeset/sour-crews-suffer.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +move the Primer::CloseButton component into Primer::Beta::CloseButton, update all references, create a deprecated Primer::CloseButton in place of the original diff --git a/app/components/primer/beta/close_button.rb b/app/components/primer/beta/close_button.rb new file mode 100644 index 0000000000..516bf27743 --- /dev/null +++ b/app/components/primer/beta/close_button.rb @@ -0,0 +1,41 @@ +# frozen_string_literal: true + +module Primer + module Beta + # Use `CloseButton` to render an `×` without default button styles. + # + # @accessibility + # `CloseButton` has a default `aria-label` of "Close" to provides assistive technologies with an accessible label. + # You may choose to override this label with something more descriptive via [system_arguments][0]. + # [0]: https://primer.style/view-components/system-arguments#html-attributes + class CloseButton < Primer::Component + status :beta + + DEFAULT_TYPE = :button + TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze + + # @example Default + # <%= render(Primer::Beta::CloseButton.new) %> + # + # @param type [Symbol] <%= one_of(Primer::Beta::CloseButton::TYPE_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(type: DEFAULT_TYPE, **system_arguments) + @system_arguments = deny_tag_argument(**system_arguments) + @system_arguments[:tag] = :button + @system_arguments[:block] = false + @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) + @system_arguments[:classes] = class_names( + "close-button", + system_arguments[:classes] + ) + @system_arguments[:"aria-label"] ||= "Close" + end + + def call + render(Primer::Beta::BaseButton.new(**@system_arguments)) do + render(Primer::OcticonComponent.new("x")) + end + end + end + end +end diff --git a/app/components/primer/close_button.rb b/app/components/primer/close_button.rb index d0aa400632..7ea7b83547 100644 --- a/app/components/primer/close_button.rb +++ b/app/components/primer/close_button.rb @@ -1,39 +1,7 @@ # frozen_string_literal: true module Primer - # Use `CloseButton` to render an `×` without default button styles. - # - # @accessibility - # `CloseButton` has a default `aria-label` of "Close" to provides assistive technologies with an accessible label. - # You may choose to override this label with something more descriptive via [system_arguments][0]. - # [0]: https://primer.style/view-components/system-arguments#html-attributes - class CloseButton < Primer::Component - status :beta - - DEFAULT_TYPE = :button - TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze - - # @example Default - # <%= render(Primer::CloseButton.new) %> - # - # @param type [Symbol] <%= one_of(Primer::CloseButton::TYPE_OPTIONS) %> - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(type: DEFAULT_TYPE, **system_arguments) - @system_arguments = deny_tag_argument(**system_arguments) - @system_arguments[:tag] = :button - @system_arguments[:block] = false - @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) - @system_arguments[:classes] = class_names( - "close-button", - system_arguments[:classes] - ) - @system_arguments[:"aria-label"] ||= "Close" - end - - def call - render(Primer::Beta::BaseButton.new(**@system_arguments)) do - render(Primer::OcticonComponent.new("x")) - end - end + class CloseButton < Primer::Beta::CloseButton + status :deprecated end end diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index fc33a59153..00a6ac236d 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -40,7 +40,7 @@ - title: ClipboardCopy url: "/components/clipboardcopy" - title: CloseButton - url: "/components/closebutton" + url: "/components/beta/closebutton" - title: Counter url: "/components/counter" - title: Details diff --git a/lib/primer/view_components/linters/argument_mappers/close_button.rb b/lib/primer/view_components/linters/argument_mappers/close_button.rb index d237d18a35..af427becca 100644 --- a/lib/primer/view_components/linters/argument_mappers/close_button.rb +++ b/lib/primer/view_components/linters/argument_mappers/close_button.rb @@ -10,12 +10,12 @@ class CloseButton < Base ATTRIBUTES = %w[type].freeze TYPE_OPTIONS = Primer::ViewComponents::Constants.get( - component: "Primer::CloseButton", + component: "Primer::Beta::CloseButton", constant: "TYPE_OPTIONS" ).freeze DEFAULT_TYPE = Primer::ViewComponents::Constants.get( - component: "Primer::CloseButton", + component: "Primer::Beta::CloseButton", constant: "DEFAULT_TYPE" ).freeze diff --git a/lib/primer/view_components/linters/close_button_component_migration_counter.rb b/lib/primer/view_components/linters/close_button_component_migration_counter.rb index 1cb33ac6d5..23497b3ae2 100644 --- a/lib/primer/view_components/linters/close_button_component_migration_counter.rb +++ b/lib/primer/view_components/linters/close_button_component_migration_counter.rb @@ -14,9 +14,9 @@ class CloseButtonComponentMigrationCounter < BaseLinter TAGS = %w[button].freeze CLASSES = %w[close-button].freeze - MESSAGE = "We are migrating close-button to use [Primer::CloseButton](https://primer.style/view-components/components/closebutton), please try to use that instead of raw HTML." + MESSAGE = "We are migrating close-button to use [Primer::Beta::CloseButton](https://primer.style/view-components/components/closebutton), please try to use that instead of raw HTML." ARGUMENT_MAPPER = ArgumentMappers::CloseButton - COMPONENT = "Primer::CloseButton" + COMPONENT = "Primer::Beta::CloseButton" ALLOWED_OCTICON_ARGS = %w[icon aria-label aria].freeze diff --git a/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb b/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb index 6809c8f1c8..d48633dccd 100644 --- a/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +++ b/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb @@ -8,6 +8,7 @@ module DeprecatedComponentsHelpers # If there is no alternative to suggest, set the value to nil COMPONENT_TO_USE_INSTEAD = { "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup", + "Primer::CloseButton" => "Primer::Beta::CloseButton", "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item", "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete", "Primer::BlankslateComponent" => "Primer::Beta::Blankslate", diff --git a/lib/rubocop/cop/primer/component_name_migration.rb b/lib/rubocop/cop/primer/component_name_migration.rb index 427294633a..8dc3f178e2 100644 --- a/lib/rubocop/cop/primer/component_name_migration.rb +++ b/lib/rubocop/cop/primer/component_name_migration.rb @@ -17,6 +17,7 @@ class ComponentNameMigration < BaseCop DEPRECATIONS = { "Primer::BoxComponent" => "Primer::Box", "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup", + "Primer::CloseButton" => "Primer::Beta::CloseButton", "Primer::BlankslateComponent" => "Primer::Beta::Blankslate", "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox", "Primer::BaseButton" => "Primer::Beta::BaseButton", diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index fdc7feae76..5082bae5fe 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -50,7 +50,7 @@ namespace :docs do Primer::Beta::ButtonGroup, Primer::Alpha::ButtonMarketing, Primer::ClipboardCopy, - Primer::CloseButton, + Primer::Beta::CloseButton, Primer::CounterComponent, Primer::DetailsComponent, Primer::Dropdown, diff --git a/static/arguments.yml b/static/arguments.yml index 2a64bbbc1a..cb8bbdc675 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -477,6 +477,17 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" +- component: CloseButton + source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/close_button.rb + parameters: + - name: type + type: Symbol + default: "`:button`" + description: One of `:button` or `:submit`. + - name: system_arguments + type: Hash + default: N/A + description: "[System arguments](/system-arguments)" - component: Flash source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb parameters: @@ -588,17 +599,6 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" -- component: CloseButton - source: https://github.com/primer/view_components/tree/main/app/components/primer/close_button.rb - parameters: - - name: type - type: Symbol - default: "`:button`" - description: One of `:button` or `:submit`. - - name: system_arguments - type: Hash - default: N/A - description: "[System arguments](/system-arguments)" - component: Counter source: https://github.com/primer/view_components/tree/main/app/components/primer/counter_component.rb parameters: diff --git a/static/audited_at.json b/static/audited_at.json index 887c4006be..ec7d68e0c6 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -23,6 +23,7 @@ "Primer::Beta::Breadcrumbs": "", "Primer::Beta::Breadcrumbs::Item": "", "Primer::Beta::ButtonGroup": "", + "Primer::Beta::CloseButton": "", "Primer::Beta::Flash": "", "Primer::Beta::Text": "", "Primer::Beta::Truncate": "", diff --git a/static/constants.json b/static/constants.json index 2c5c1415e1..d62d0556da 100644 --- a/static/constants.json +++ b/static/constants.json @@ -300,6 +300,13 @@ }, "Primer::Beta::ButtonGroup": { }, + "Primer::Beta::CloseButton": { + "DEFAULT_TYPE": "button", + "TYPE_OPTIONS": [ + "button", + "submit" + ] + }, "Primer::Beta::Flash": { "DEFAULT_SCHEME": "default", "SCHEME_MAPPINGS": { @@ -359,11 +366,6 @@ "Primer::ClipboardCopy": { }, "Primer::CloseButton": { - "DEFAULT_TYPE": "button", - "TYPE_OPTIONS": [ - "button", - "submit" - ] }, "Primer::ConditionalWrapper": { }, diff --git a/static/statuses.json b/static/statuses.json index 73b7d063e5..ca56846d9f 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -23,6 +23,7 @@ "Primer::Beta::Breadcrumbs": "beta", "Primer::Beta::Breadcrumbs::Item": "alpha", "Primer::Beta::ButtonGroup": "beta", + "Primer::Beta::CloseButton": "beta", "Primer::Beta::Flash": "beta", "Primer::Beta::Text": "beta", "Primer::Beta::Truncate": "beta", @@ -34,7 +35,7 @@ "Primer::ButtonComponent": "beta", "Primer::ButtonGroup": "deprecated", "Primer::ClipboardCopy": "beta", - "Primer::CloseButton": "beta", + "Primer::CloseButton": "deprecated", "Primer::ConditionalWrapper": "alpha", "Primer::Content": "stable", "Primer::CounterComponent": "beta", diff --git a/stories/primer/beta/close_button_stories.rb b/stories/primer/beta/close_button_stories.rb new file mode 100644 index 0000000000..0be385d568 --- /dev/null +++ b/stories/primer/beta/close_button_stories.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +require "primer/beta/close_button" + +class Primer::Beta::CloseButtonStories < ViewComponent::Storybook::Stories + layout "storybook_preview" + + story(:close_button) do + controls do + select(:type, Primer::Beta::CloseButton::TYPE_OPTIONS, Primer::Beta::CloseButton::DEFAULT_TYPE) + end + end +end diff --git a/stories/primer/close_button_stories.rb b/stories/primer/close_button_stories.rb deleted file mode 100644 index c6b24327a4..0000000000 --- a/stories/primer/close_button_stories.rb +++ /dev/null @@ -1,11 +0,0 @@ -# frozen_string_literal: true - -class Primer::CloseButtonStories < ViewComponent::Storybook::Stories - layout "storybook_preview" - - story(:close_button) do - controls do - select(:type, Primer::CloseButton::TYPE_OPTIONS, Primer::CloseButton::DEFAULT_TYPE) - end - end -end diff --git a/test/components/close_button_test.rb b/test/components/beta/close_button_test.rb similarity index 67% rename from test/components/close_button_test.rb rename to test/components/beta/close_button_test.rb index 46cef09325..5ecc7c8f5a 100644 --- a/test/components/close_button_test.rb +++ b/test/components/beta/close_button_test.rb @@ -2,11 +2,11 @@ require "test_helper" -class PrimerCloseButtonTest < Minitest::Test +class PrimerBetaCloseButtonTest < Minitest::Test include Primer::ComponentTestHelpers def test_renders - render_inline(Primer::CloseButton.new) + render_inline(Primer::Beta::CloseButton.new) assert_selector("button[type='button'][aria-label='Close'].close-button") do assert_selector(".octicon.octicon-x") @@ -14,7 +14,7 @@ def test_renders end def test_renders_as_submit - render_inline(Primer::CloseButton.new(type: :submit)) + render_inline(Primer::Beta::CloseButton.new(type: :submit)) assert_selector("button[type='submit'].close-button") do assert_selector(".octicon.octicon-x") @@ -23,7 +23,7 @@ def test_renders_as_submit def test_renders_defaults_type_to_button without_fetch_or_fallback_raises do - render_inline(Primer::CloseButton.new(type: :invalid)) + render_inline(Primer::Beta::CloseButton.new(type: :invalid)) assert_selector("button[type='button'].close-button") do assert_selector(".octicon.octicon-x") @@ -32,19 +32,19 @@ def test_renders_defaults_type_to_button end def test_does_not_render_content - render_inline(Primer::CloseButton.new) { "content" } + render_inline(Primer::Beta::CloseButton.new) { "content" } refute_text("content") end def test_does_not_render_as_block - render_inline(Primer::CloseButton.new(block: true)) + render_inline(Primer::Beta::CloseButton.new(block: true)) refute_selector(".btn-block") end def test_can_override_aria_label - render_inline(Primer::CloseButton.new(aria: { label: "Label" })) + render_inline(Primer::Beta::CloseButton.new(aria: { label: "Label" })) assert_selector("button[type='button'][aria-label='Label'].close-button") end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index 1e6b420c04..d1b46b62e7 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -42,7 +42,7 @@ class PrimerComponentTest < Minitest::Test [Primer::Alpha::ButtonMarketing, {}], [Primer::ClipboardCopy, { "aria-label": "String that will be read to screenreaders", value: "String that will be copied" }], [Primer::ConditionalWrapper, { condition: true, tag: :div }], - [Primer::CloseButton, {}], + [Primer::Beta::CloseButton, {}], [Primer::CounterComponent, { count: 1 }], [Primer::DetailsComponent, {}, lambda do |component| component.summary { "Foo" } @@ -88,6 +88,7 @@ class PrimerComponentTest < Minitest::Test def test_registered_components ignored_components = [ "Primer::ButtonGroup", + "Primer::CloseButton", "Primer::Component", "Primer::OcticonsSymbolComponent", "Primer::Content", diff --git a/test/linters/argument_mappers/close_button_test.rb b/test/linters/argument_mappers/close_button_test.rb index 35835683dc..fa3ecce877 100644 --- a/test/linters/argument_mappers/close_button_test.rb +++ b/test/linters/argument_mappers/close_button_test.rb @@ -11,7 +11,7 @@ def test_returns_no_arguments_if_only_close_button end def test_returns_type_argument - Primer::CloseButton::TYPE_OPTIONS.each do |type| + Primer::Beta::CloseButton::TYPE_OPTIONS.each do |type| # button is the default, so it does not require a `type` argument next if type == :button diff --git a/test/linters/close_button_component_migration_counter_test.rb b/test/linters/close_button_component_migration_counter_test.rb index f5a741a31c..196807c282 100644 --- a/test/linters/close_button_component_migration_counter_test.rb +++ b/test/linters/close_button_component_migration_counter_test.rb @@ -16,7 +16,7 @@ def test_autocorrects_using_primer_octicon_aria_label HTML expected = <<~HTML - <%= render Primer::CloseButton.new(\"aria-label\": \"Close menu\") %> + <%= render Primer::Beta::CloseButton.new(\"aria-label\": \"Close menu\") %> HTML assert_equal expected, corrected_content @@ -28,7 +28,7 @@ def test_autocorrects_using_octicon_aria_label HTML expected = <<~HTML - <%= render Primer::CloseButton.new(\"aria-label\": \"Close menu\") %> + <%= render Primer::Beta::CloseButton.new(\"aria-label\": \"Close menu\") %> HTML assert_equal expected, corrected_content @@ -40,7 +40,7 @@ def test_autocorrects_using_primer_octicon_hash_aria_label HTML expected = <<~HTML - <%= render Primer::CloseButton.new(\"aria-label\": \"Close menu\") %> + <%= render Primer::Beta::CloseButton.new(\"aria-label\": \"Close menu\") %> HTML assert_equal expected, corrected_content @@ -54,7 +54,7 @@ def test_autocorrects_using_primer_octicon_class_aria_label HTML expected = <<~HTML - <%= render Primer::CloseButton.new(\"aria-label\": \"Close menu\") %> + <%= render Primer::Beta::CloseButton.new(\"aria-label\": \"Close menu\") %> HTML assert_equal expected, corrected_content @@ -68,7 +68,7 @@ def test_autocorrects_with_primer_octicon_class_without_aria_label HTML expected = <<~HTML - <%= render Primer::CloseButton.new(\"aria-label\": \"Close menu\") %> + <%= render Primer::Beta::CloseButton.new(\"aria-label\": \"Close menu\") %> HTML assert_equal expected, corrected_content @@ -112,7 +112,7 @@ def test_autocorrects_mixing_button_args_and_octicon_aria_label HTML expected = <<~HTML - <%= render Primer::CloseButton.new(ml: 1, \"aria-value\": \"some value\", \"aria-label\": \"Close menu\") %> + <%= render Primer::Beta::CloseButton.new(ml: 1, \"aria-value\": \"some value\", \"aria-label\": \"Close menu\") %> HTML assert_equal expected, corrected_content