Move Primer::TabContainerComponent to Primer::Alpha::TabContainer

.changeset/modern-games-destroy.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Move `Primer::TabContainerComponent` to `Primer::Alpha::TabContainer`

app/components/primer/alpha/tab_container.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
+    # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::Alpha::TabNav) %>.
+    #
+    # This component requires javascript.
+    class TabContainer < Primer::Component
+      # @example Default
+      #   <%= render(Primer::Alpha::TabContainer.new)  do %>
+      #     <div role="tablist">
+      #       <button type="button" role="tab" aria-selected="true">Tab one</button>
+      #       <button type="button" role="tab" tabindex="-1">Tab two</button>
+      #       <button type="button" role="tab" tabindex="-1">Tab three</button>
+      #     </div>
+      #     <div role="tabpanel">
+      #       Panel 1
+      #     </div>
+      #     <div role="tabpanel" hidden>
+      #       Panel 2
+      #     </div>
+      #     <div role="tabpanel" hidden>
+      #       Panel 3
+      #     </div>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "tab-container"
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+
+      def render?
+        content.present?
+      end
+    end
+  end
+end

app/components/primer/primer.ts

@@ -9,7 +9,7 @@ import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
 import './beta/clipboard_copy'
 import './local_time'
-import './tab_container_component'
+import './alpha/tab_container'
 import './time_ago_component'
 import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'

app/components/primer/tab_container_component.rb

@@ -1,41 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
-  # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::Alpha::TabNav) %>.
-  #
-  # This component requires javascript.
-  class TabContainerComponent < Primer::Component
-    # @example Default
-    #   <%= render(Primer::TabContainerComponent.new)  do %>
-    #     <div role="tablist">
-    #       <button type="button" role="tab" aria-selected="true">Tab one</button>
-    #       <button type="button" role="tab" tabindex="-1">Tab two</button>
-    #       <button type="button" role="tab" tabindex="-1">Tab three</button>
-    #     </div>
-    #     <div role="tabpanel">
-    #       Panel 1
-    #     </div>
-    #     <div role="tabpanel" hidden>
-    #       Panel 2
-    #     </div>
-    #     <div role="tabpanel" hidden>
-    #       Panel 3
-    #     </div>
-    #   <% end %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = "tab-container"
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
-
-    def render?
-      content.present?
-    end
+  class TabContainerComponent < Primer::Alpha::TabContainer
+    status :deprecated
   end
 end

app/lib/primer/tabbed_component_helper.rb

@@ -23,7 +23,7 @@ def aria_label_for_page_nav(label)
     def tab_container_wrapper(with_panel:, **system_arguments)
       return yield unless with_panel
 
-      render Primer::TabContainerComponent.new(**system_arguments) do
+      render Primer::Alpha::TabContainer.new(**system_arguments) do
         yield if block_given?
       end
     end

component_status_migrator.thor

@@ -43,11 +43,15 @@ class ComponentStatusMigrator < Thor::Group
   def move_reamining_files
     Dir["app/components/primer/#{name.underscore}.*"].each do |file_path|
       file_name = File.basename(file_path)
-      new_path = "#{status_full_path}#{file_name}"
+      new_path = "#{status_full_path}#{file_name.gsub('_component', '')}"
       move_file("misc", file_path, new_path)
     end
   end
 
+  def update_css
+    gsub_file(primer_css_file, component_css_import, component_css_import_with_status)
+  end
+
   def move_test
     return nil unless File.exist?(test_path)
 
@@ -84,17 +88,11 @@ class ComponentStatusMigrator < Thor::Group
   end
 
   def remove_suffix_from_preview_class
-    return nil unless File.exist?(preview_path)
+    return nil unless File.exist?(preview_path_with_status)
 
-    if preview_path.include?("_component") && !name.include?("Component") # rubocop:disable Rails/NegateInclude
-      # if the class name does not include 'Component', but the file name does include '_component',
-      # this line will correct it by removing the incosistency with the word 'Component'
-      gsub_file(preview_path_with_status, "class #{name}Component", "class #{name_without_suffix}")
-    elsif name == name_without_suffix
-      puts "No change needed - component suffix not removed from lookbook preview class name"
-    else
-      gsub_file(preview_path_with_status, "class #{name}", "class #{name_without_suffix}")
-    end
+    original_preview_class = /class .*Preview < ViewComponent::Preview/
+    updated_preview_class = "class #{name_without_suffix}Preview < ViewComponent::Preview"
+    gsub_file(preview_path_with_status, original_preview_class, updated_preview_class)
   end
 
   def rename_preview_label
@@ -222,6 +220,14 @@ class ComponentStatusMigrator < Thor::Group
     @controller_path_with_status ||= "app/components/primer/#{status_folder_name}#{name_without_suffix.underscore}.rb"
   end
 
+  def component_css_import
+    @component_css_import ||= "import \"./#{name.underscore}.pcss\""
+  end
+
+  def component_css_import_with_status
+    @component_css_import_with_status ||= "import \"./#{status_folder_name}#{name_without_suffix.underscore}.pcss\""
+  end
+
   def move_file(file_type, old_path, new_path)
     if old_path == new_path
       puts "No change needed - #{file_type} file not moved"
@@ -297,6 +303,10 @@ class ComponentStatusMigrator < Thor::Group
     @name_without_suffix ||= name.gsub("Component", "")
   end
 
+  def primer_css_file
+    @primer_css_file ||= "app/components/primer/primer.pcss"
+  end
+
   def short_name
     @short_name ||= begin
       name_with_status = name.gsub(/Primer::|Component/, "")

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -94,7 +94,7 @@
   - title: Subhead
     url: "/components/beta/subhead"
   - title: TabContainer
-    url: "/components/tabcontainer"
+    url: "/components/alpha/tabcontainer"
   - title: TabNav
     url: "/components/alpha/tabnav"
   - title: TabPanels

lib/primer/deprecations.yml

@@ -96,6 +96,10 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::Subhead"
 
+  - component: "Primer::TabContainerComponent"
+    autocorrect: true
+    replacement: "Primer::Alpha::TabContainer"
+
   - component: "Primer::TimeAgoComponent"
     autocorrect: false
     replacement: "Primer::Beta::RelativeTime"

lib/tasks/docs.rake

@@ -76,7 +76,7 @@ namespace :docs do
       Primer::Beta::State,
       Primer::Beta::Spinner,
       Primer::Beta::Subhead,
-      Primer::TabContainerComponent,
+      Primer::Alpha::TabContainer,
       Primer::Beta::Text,
       Primer::Alpha::TextField,
       Primer::TimeAgoComponent,
@@ -106,7 +106,7 @@ namespace :docs do
       Primer::Beta::AutoComplete,
       Primer::Alpha::Banner,
       Primer::Beta::ClipboardCopy,
-      Primer::TabContainerComponent,
+      Primer::Alpha::TabContainer,
       Primer::TimeAgoComponent,
       Primer::Alpha::UnderlinePanels,
       Primer::Alpha::TabPanels,

static/arguments.json

@@ -635,6 +635,20 @@
       }
     ]
   },
+  {
+    "component": "TabContainer",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_container.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_container_preview/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "TabNav",
     "status": "alpha",
@@ -2441,20 +2455,6 @@
       }
     ]
   },
-  {
-    "component": "TabContainer",
-    "status": "alpha",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/tab_container_component.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tab_container_preview/default/",
-    "parameters": [
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "TimeAgo",
     "status": "deprecated",

static/audited_at.json

@@ -27,6 +27,7 @@
   "Primer::Alpha::OcticonSymbols": "",
   "Primer::Alpha::SegmentedControl": "",
   "Primer::Alpha::SegmentedControl::Item": "",
+  "Primer::Alpha::TabContainer": "",
   "Primer::Alpha::TabNav": "",
   "Primer::Alpha::TabPanels": "",
   "Primer::Alpha::TextField": "",

static/constants.json

@@ -328,6 +328,8 @@
   },
   "Primer::Alpha::SegmentedControl::Item": {
   },
+  "Primer::Alpha::TabContainer": {
+  },
   "Primer::Alpha::TabNav": {
     "BODY_TAG_DEFAULT": "ul",
     "TAG_DEFAULT": "nav",

static/statuses.json

@@ -27,6 +27,7 @@
   "Primer::Alpha::OcticonSymbols": "alpha",
   "Primer::Alpha::SegmentedControl": "alpha",
   "Primer::Alpha::SegmentedControl::Item": "alpha",
+  "Primer::Alpha::TabContainer": "alpha",
   "Primer::Alpha::TabNav": "alpha",
   "Primer::Alpha::TabPanels": "alpha",
   "Primer::Alpha::TextField": "alpha",
@@ -93,7 +94,7 @@
   "Primer::SpinnerComponent": "deprecated",
   "Primer::StateComponent": "deprecated",
   "Primer::SubheadComponent": "deprecated",
-  "Primer::TabContainerComponent": "alpha",
+  "Primer::TabContainerComponent": "deprecated",
   "Primer::TimeAgoComponent": "deprecated",
   "Primer::TimelineItemComponent": "beta",
   "Primer::TimelineItemComponent::BadgeComponent": "alpha",

test/components/tab_container_component_test.rb → test/components/alpha/tab_container_test.rb

@@ -2,17 +2,17 @@
 
 require "components/test_helper"
 
-class PrimerTabContainerComponentTest < Minitest::Test
+class PrimerAlphaTabContainerTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_does_not_render_without_content
-    render_inline(Primer::TabContainerComponent.new)
+    render_inline(Primer::Alpha::TabContainer.new)
 
     refute_selector("tab-container")
   end
 
   def test_renders_content
-    render_inline(Primer::TabContainerComponent.new) { "content" }
+    render_inline(Primer::Alpha::TabContainer.new) { "content" }
 
     assert_selector("tab-container[data-view-component]", text: "content")
   end

test/components/component_test.rb

@@ -93,7 +93,7 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Beta::Spinner, {}],
     [Primer::Beta::State, { title: "Open" }],
     [Primer::Beta::Subhead, { heading: "Foo" }, proc { |component| component.with_heading { "Foo" } }],
-    [Primer::TabContainerComponent, {}, proc { "Foo" }],
+    [Primer::Alpha::TabContainer, {}, proc { "Foo" }],
     [Primer::Alpha::ToggleSwitch, {}],
     [Primer::Alpha::TextField, { name: :foo, label: "Foo" }],
     [Primer::Beta::Text, {}],
@@ -112,6 +112,7 @@ class PrimerComponentTest < Minitest::Test
   def test_registered_components
     ignored_components = [
       "Primer::SubheadComponent",
+      "Primer::TabContainerComponent",
       "Primer::StateComponent",
       "Primer::OcticonSymbolsComponent",
       "Primer::SpinnerComponent",