move Primer::CloseButton to Primer::Beta::CloseButton

.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

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

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

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

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
 

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
 

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

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

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,

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:

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": "",

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": {
   },

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

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

test/components/close_button_test.rb → test/components/beta/close_button_test.rb

@@ -2,19 +2,19 @@
 
 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")
     end
   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

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

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
 

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