migrate Primer::BoxComponent to Primer::Box

.changeset/fast-ghosts-provide.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+moving Primer::BoxComponent to Primer::Box and creating deprecated Primer::BoxComponent for backward compatibility

app/components/primer/box.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  # `Box` is a basic wrapper component for most layout related needs.
+  class Box < Primer::Component
+    status :stable
+
+    # @example Default
+    #   <%= render(Primer::Box.new) { "Your content here" } %>
+    #
+    # @example Color and padding
+    #   <%= render(Primer::Box.new(bg: :subtle, p: 3)) { "Hello world" } %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+
+      @system_arguments[:tag] = :div
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

app/components/primer/box_component.rb

@@ -1,25 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `Box` is a basic wrapper component for most layout related needs.
-  class BoxComponent < Primer::Component
-    status :stable
-
-    # @example Default
-    #   <%= render(Primer::BoxComponent.new) { "Your content here" } %>
-    #
-    # @example Color and padding
-    #   <%= render(Primer::BoxComponent.new(bg: :subtle, p: 3)) { "Hello world" } %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-
-      @system_arguments[:tag] = :div
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
+  class BoxComponent < Primer::Box
+    status :deprecated
   end
 end

app/components/primer/flex_component.rb

@@ -7,7 +7,7 @@ module Primer
   # Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
   #
   # @deprecated
-  #   Use <%= link_to_component(Primer::BoxComponent) %> instead.
+  #   Use <%= link_to_component(Primer::Box) %> instead.
   #
   #   **Before**:
   #
@@ -22,11 +22,11 @@ module Primer
   #   **After**:
   #
   #   ```erb
-  #   <%%= render Primer::BoxComponent.new(display: :flex, justify_content: :center) %>
-  #   <%%= render Primer::BoxComponent.new(display: :inline_flex) %>
-  #   <%%= render Primer::BoxComponent.new(display: :flex, flex_wrap: :wrap) %>
-  #   <%%= render Primer::BoxComponent.new(display: :flex, align_items: :start) %>
-  #   <%%= render Primer::BoxComponent.new(display: :flex, direction: :column) %>
+  #   <%%= render Primer::Box.new(display: :flex, justify_content: :center) %>
+  #   <%%= render Primer::Box.new(display: :inline_flex) %>
+  #   <%%= render Primer::Box.new(display: :flex, flex_wrap: :wrap) %>
+  #   <%%= render Primer::Box.new(display: :flex, align_items: :start) %>
+  #   <%%= render Primer::Box.new(display: :flex, direction: :column) %>
   #   ```
   class FlexComponent < Primer::Component
     status :deprecated
@@ -62,30 +62,30 @@ class FlexComponent < Primer::Component
 
     # @example Default
     #   <%= render(Primer::FlexComponent.new(bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Justify center
     #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Align end
     #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Direction column
     #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :subtle)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::Box.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @param justify_content [Symbol] Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>
@@ -102,7 +102,7 @@ def initialize(
       direction: nil,
       **system_arguments
     )
-      deprecated_component_warning(new_class: Primer::BoxComponent, version: "0.0.40")
+      deprecated_component_warning(new_class: Primer::Box, version: "0.0.40")
 
       @align_items = fetch_or_fallback(ALIGN_ITEMS_OPTIONS, align_items, ALIGN_ITEMS_DEFAULT)
       @justify_content = fetch_or_fallback(JUSTIFY_CONTENT_OPTIONS, justify_content, JUSTIFY_CONTENT_DEFAULT)
@@ -122,7 +122,7 @@ def initialize(
     end
 
     def call
-      render(Primer::BoxComponent.new(**@system_arguments)) { content }
+      render(Primer::Box.new(**@system_arguments)) { content }
     end
 
     private

app/components/primer/flex_item_component.rb

@@ -5,7 +5,7 @@ module Primer
   # dimensions to fill available space.
   #
   # @deprecated
-  #   Use <%= link_to_component(Primer::BoxComponent) %> instead.
+  #   Use <%= link_to_component(Primer::Box) %> instead.
   #
   #   **Before**:
   #
@@ -16,7 +16,7 @@ module Primer
   #   **After**:
   #
   #   ```erb
-  #   <%%= render Primer::BoxComponent.new(flex: :auto) %>
+  #   <%%= render Primer::Box.new(flex: :auto) %>
   #   ```
   class FlexItemComponent < Primer::Component
     status :deprecated
@@ -38,7 +38,7 @@ class FlexItemComponent < Primer::Component
     # @param flex_auto [Boolean] Fills available space and auto-sizes based on the content. Defaults to <%= Primer::FlexItemComponent::FLEX_AUTO_DEFAULT %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(flex_auto: FLEX_AUTO_DEFAULT, **system_arguments)
-      deprecated_component_warning(new_class: Primer::BoxComponent, version: "0.0.40")
+      deprecated_component_warning(new_class: Primer::Box, version: "0.0.40")
 
       @system_arguments = system_arguments
       @system_arguments[:classes] =
@@ -49,7 +49,7 @@ def initialize(flex_auto: FLEX_AUTO_DEFAULT, **system_arguments)
     end
 
     def call
-      render(Primer::BoxComponent.new(**@system_arguments)) { content }
+      render(Primer::Box.new(**@system_arguments)) { content }
     end
   end
 end

app/components/primer/popover_component.rb

@@ -119,7 +119,7 @@ def render?
     end
 
     def body_component
-      Primer::BoxComponent.new(**@body_arguments)
+      Primer::Box.new(**@body_arguments)
     end
   end
 end

component_status_migrator.thor

@@ -16,7 +16,7 @@ class ComponentStatusMigrator < Thor::Group
 
   # Define arguments and options
   argument :name
-  class_option :status, default: "alpha", desc: "Status of the component. Either #{STATUSES.to_sentence(last_word_connector: ', or')}", required: true, type: :string
+  class_option :status, default: "alpha", desc: "Status of the component. Either alpha, beta, stable or deprecated", required: true, type: :string
 
   def self.source_root
     File.dirname(__FILE__)

lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb

@@ -11,6 +11,7 @@ module DeprecatedComponentsHelpers
           "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
           "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
+          "Primer::BoxComponent" => "Primer::Box",
           "Primer::DropdownMenuComponent" => nil,
           "Primer::Tooltip" => "Primer::Alpha::Tooltip",
           "Primer::FlexComponent" => nil,

lib/rubocop/cop/primer/component_name_migration.rb

@@ -15,6 +15,7 @@ module Primer
       # Primer::Beta::ComponentName.new()
       class ComponentNameMigration < BaseCop
         DEPRECATIONS = {
+          "Primer::BoxComponent" => "Primer::Box",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
           "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
           "Primer::BaseButton" => "Primer::Beta::BaseButton",

lib/tasks/docs.rake

@@ -44,7 +44,7 @@ namespace :docs do
       Primer::Beta::Blankslate,
       Primer::Beta::BorderBox,
       Primer::Beta::BorderBox::Header,
-      Primer::BoxComponent,
+      Primer::Box,
       Primer::Beta::Breadcrumbs,
       Primer::ButtonComponent,
       Primer::ButtonGroup,

static/arguments.yml

@@ -508,7 +508,7 @@
     default: N/A
     description: "[System arguments](/system-arguments)"
 - component: Box
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/box_component.rb
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/box.rb
   parameters:
   - name: system_arguments
     type: Hash

static/audited_at.json

@@ -28,6 +28,7 @@
   "Primer::Beta::Truncate::TruncateText": "",
   "Primer::BlankslateComponent": "",
   "Primer::BorderBoxComponent": "",
+  "Primer::Box": "",
   "Primer::BoxComponent": "",
   "Primer::ButtonComponent": "",
   "Primer::ButtonGroup": "",

static/constants.json

@@ -319,6 +319,8 @@
   },
   "Primer::BorderBoxComponent": {
   },
+  "Primer::Box": {
+  },
   "Primer::BoxComponent": {
   },
   "Primer::ButtonComponent": {

static/statuses.json

@@ -28,7 +28,8 @@
   "Primer::Beta::Truncate::TruncateText": "alpha",
   "Primer::BlankslateComponent": "deprecated",
   "Primer::BorderBoxComponent": "deprecated",
-  "Primer::BoxComponent": "stable",
+  "Primer::Box": "stable",
+  "Primer::BoxComponent": "deprecated",
   "Primer::ButtonComponent": "beta",
   "Primer::ButtonGroup": "beta",
   "Primer::ClipboardCopy": "beta",

stories/primer/box_component_stories.rb → stories/primer/box_stories.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
-class Primer::BoxComponentStories < ViewComponent::Storybook::Stories
+require "primer/box"
+
+class Primer::BoxStories < ViewComponent::Storybook::Stories
   layout "storybook_preview"
 
   story(:box) do

stories/primer/utilities/animation_stories.rb

@@ -4,7 +4,7 @@ class Primer::Utilities::AnimationStories < ViewComponent::Storybook::Stories
   layout "storybook_preview"
 
   def self.default_component
-    Primer::BoxComponent
+    Primer::Box
   end
 
   story(:animation) do

test/components/box_component_test.rb → test/components/box_test.rb

@@ -2,26 +2,26 @@
 
 require "test_helper"
 
-class PrimerBoxComponentTest < Minitest::Test
+class PrimerBoxTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_renders_content
-    render_inline(Primer::BoxComponent.new) do
+    render_inline(Primer::Box.new) do
       "content"
     end
 
     assert_text("content")
   end
 
   def test_renders_div
-    render_inline(Primer::BoxComponent.new) do
+    render_inline(Primer::Box.new) do
       "content"
     end
 
     assert_selector("div")
   end
 
   def test_status
-    assert_component_state(Primer::BoxComponent, :stable)
+    assert_component_state(Primer::Box, :stable)
   end
 end

test/components/component_test.rb

@@ -34,7 +34,7 @@ class PrimerComponentTest < Minitest::Test
     }],
     [Primer::Beta::BorderBox, {}, proc { |component| component.header { "Foo" } }],
     [Primer::Beta::BorderBox::Header, {}],
-    [Primer::BoxComponent, {}],
+    [Primer::Box, {}],
     [Primer::Beta::Breadcrumbs, {}, proc { |component| component.item(href: "/") { "Foo" } }],
     [Primer::ButtonComponent, {}, proc { "Button" }],
     [Primer::ButtonGroup, {}, proc { |component| component.button { "Button" } }],
@@ -90,7 +90,8 @@ def test_registered_components
       "Primer::OcticonsSymbolComponent",
       "Primer::Content",
       "Primer::BlankslateComponent",
-      "Primer::BorderBoxComponent"
+      "Primer::BorderBoxComponent",
+      "Primer::BoxComponent"
     ]
 
     primer_component_files_count = Dir["app/components/**/*.rb"].count

test/components/flex_component_test.rb

@@ -119,7 +119,7 @@ def test_renders_responsive_direction
 
   def test_warns_of_deprecation_if_not_silenced
     with_silence_deprecations(false) do
-      ActiveSupport::Deprecation.expects(:warn).with("Primer::FlexComponent is deprecated and will be removed in v0.0.40. Use Primer::BoxComponent instead.").once
+      ActiveSupport::Deprecation.expects(:warn).with("Primer::FlexComponent is deprecated and will be removed in v0.0.40. Use Primer::Box instead.").once
       Primer::FlexComponent.new
     end
   end

test/components/flex_item_component_test.rb

@@ -27,7 +27,7 @@ def test_flex_auto_falls_back_to_false
 
   def test_warns_of_deprecation_if_not_silenced
     with_silence_deprecations(false) do
-      ActiveSupport::Deprecation.expects(:warn).with("Primer::FlexItemComponent is deprecated and will be removed in v0.0.40. Use Primer::BoxComponent instead.").once
+      ActiveSupport::Deprecation.expects(:warn).with("Primer::FlexItemComponent is deprecated and will be removed in v0.0.40. Use Primer::Box instead.").once
       Primer::FlexItemComponent.new
     end
   end