Deprecate FlexComponent in favor of BoxComponent

CHANGELOG.md

@@ -24,7 +24,7 @@
 
     *Jon Rohan*
 
-* Deprecate `FlexItem` in favor of `BoxComponent`.
+* Deprecate `FlexItem` and `Flex` in favor of `BoxComponent`.
 
     *Manuel Puyol*
 

app/components/primer/flex_component.rb

@@ -5,7 +5,32 @@ module Primer
   # Before using these utilities, you should be familiar with CSS3 Flexible Box
   # spec. If you are not, check out MDN's guide  [Using CSS Flexible
   # 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.
+  #
+  #   **Before**:
+  #
+  #   ```erb
+  #   <%%= render Primer::FlexComponent.new(justify_content: :center) %>
+  #   <%%= render Primer::FlexComponent.new(inline: true) %>
+  #   <%%= render Primer::FlexComponent.new(flex_wrap: true) %>
+  #   <%%= render Primer::FlexComponent.new(align_items: :start) %>
+  #   <%%= render Primer::FlexComponent.new(direction: :column) %>
+  #   ```
+  #
+  #   **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) %>
+  #   ```
   class FlexComponent < Primer::Component
+    status :deprecated
+
     JUSTIFY_CONTENT_DEFAULT = nil
     JUSTIFY_CONTENT_MAPPINGS = {
       flex_start: "flex-justify-start",
@@ -77,6 +102,8 @@ def initialize(
       direction: nil,
       **system_arguments
     )
+      deprecated_component_warning(new_class: Primer::BoxComponent, 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)
       @flex_wrap = fetch_or_fallback(FLEX_WRAP_OPTIONS, flex_wrap, FLEX_WRAP_DEFAULT)

app/components/primer/flex_item_component.rb

@@ -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.39")
+      deprecated_component_warning(new_class: Primer::BoxComponent, version: "0.0.40")
 
       @system_arguments = system_arguments
       @system_arguments[:classes] =

docs/content/components/flex.md

@@ -1,6 +1,6 @@
 ---
 title: Flex
-status: Alpha
+status: Deprecated
 source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb
 storybook: https://primer.style/view-components/stories/?path=/story/primer-flex-component
 ---
@@ -14,6 +14,30 @@ Before using these utilities, you should be familiar with CSS3 Flexible Box
 spec. If you are not, check out MDN's guide  [Using CSS Flexible
 Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
 
+## Deprecation
+
+Use [Box](/components/box) instead.
+
+**Before**:
+
+```erb
+<%= render Primer::FlexComponent.new(justify_content: :center) %>
+<%= render Primer::FlexComponent.new(inline: true) %>
+<%= render Primer::FlexComponent.new(flex_wrap: true) %>
+<%= render Primer::FlexComponent.new(align_items: :start) %>
+<%= render Primer::FlexComponent.new(direction: :column) %>
+```
+
+**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) %>
+```
+
 ## Examples
 
 ### Default

static/statuses.json

@@ -1 +1 @@
-{"Primer::AutoComplete":"beta","Primer::AutoComplete::Item":"beta","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"beta","Primer::BaseButton":"beta","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"beta","Primer::ButtonGroup":"beta","Primer::ButtonMarketingComponent":"alpha","Primer::ClipboardCopy":"alpha","Primer::CloseButton":"beta","Primer::CounterComponent":"beta","Primer::DetailsComponent":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"deprecated","Primer::HeadingComponent":"beta","Primer::HiddenTextExpander":"alpha","Primer::IconButton":"alpha","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::Navigation::TabComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"beta","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TextComponent":"beta","Primer::TimeAgoComponent":"beta","Primer::TimelineItemComponent":"beta","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::Truncate":"beta","Primer::UnderlineNavComponent":"alpha"}
+{"Primer::AutoComplete":"beta","Primer::AutoComplete::Item":"beta","Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"beta","Primer::BaseButton":"beta","Primer::BaseComponent":"beta","Primer::BlankslateComponent":"beta","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"beta","Primer::BreadcrumbComponent::ItemComponent":"alpha","Primer::ButtonComponent":"beta","Primer::ButtonGroup":"beta","Primer::ButtonMarketingComponent":"alpha","Primer::ClipboardCopy":"alpha","Primer::CloseButton":"beta","Primer::CounterComponent":"beta","Primer::DetailsComponent":"beta","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"deprecated","Primer::FlexItemComponent":"deprecated","Primer::HeadingComponent":"beta","Primer::HiddenTextExpander":"alpha","Primer::IconButton":"alpha","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::Navigation::TabComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"beta","Primer::ProgressBarComponent":"beta","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"beta","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TextComponent":"beta","Primer::TimeAgoComponent":"beta","Primer::TimelineItemComponent":"beta","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::Truncate":"beta","Primer::UnderlineNavComponent":"alpha"}

test/components/flex_component_test.rb

@@ -116,4 +116,11 @@ def test_renders_responsive_direction
 
     assert_selector(".flex-row.flex-sm-column")
   end
+
+  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
+      Primer::FlexComponent.new
+    end
+  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.39. Use Primer::BoxComponent instead.").once
+      ActiveSupport::Deprecation.expects(:warn).with("Primer::FlexItemComponent is deprecated and will be removed in v0.0.40. Use Primer::BoxComponent instead.").once
       Primer::FlexItemComponent.new
     end
   end