upgrade @github/tab-container-element@latest

.changeset/fifty-experts-melt.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Upgrade @github/tab-container, using shadowdom

app/components/primer/alpha/overlay.pcss

@@ -30,7 +30,7 @@ anchored-position.not-anchored::backdrop, dialog::backdrop {
   flex-direction: column;
   overflow-y: hidden;
 
-  & > .tabnav {
+  &::part(tablist-wrapper) {
     margin: var(--base-size-8) 0;
     padding: 0 var(--base-size-8);
   }
@@ -39,4 +39,4 @@ anchored-position.not-anchored::backdrop, dialog::backdrop {
 .Overlay-tabPanel {
   overflow: hidden;
   display: flex;
-}
+}

app/components/primer/alpha/tab_nav.pcss

@@ -13,6 +13,11 @@
   overflow: auto;
 }
 
+.tabnav::part(tablist-wrapper) {
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
@@ -66,6 +71,11 @@
   }
 }
 
+tab-container .tabnav-tab {
+  margin-bottom: -1px;
+}
+
+
 /* Tabnav extras
 **
 ** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're

app/components/primer/alpha/tab_panels.html.erb

@@ -1,13 +1,9 @@
-<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
-  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <%= extra if @align == :left %>
-    <%= render Primer::BaseComponent.new(**@body_arguments) do %>
-      <% tabs.each do |tab| %>
-        <%= tab %>
-      <% end %>
-    <% end %>
-    <%= extra if @align == :right %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= extra if @align == :left %>
+  <% tabs.each do |tab| %>
+    <%= tab %>
   <% end %>
+  <%= extra if @align == :right %>
   <% tabs.each do |tab| %>
     <%= tab.panel %>
   <% end %>

app/components/primer/alpha/tab_panels.rb

@@ -26,7 +26,7 @@ class TabPanels < Primer::Component
         Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
-          list: true,
+          list: false,
           panel_id: "panel-#{id}",
           **system_arguments
         )
@@ -43,23 +43,14 @@ class TabPanels < Primer::Component
 
       # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
       # @param align [Symbol] <%= one_of(Primer::TabNavHelper::EXTRA_ALIGN_OPTIONS) %> - Defaults to <%= Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT %>
-      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
-      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(label:, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
         @align = EXTRA_ALIGN_DEFAULT
-        @wrapper_arguments = wrapper_arguments
 
-        @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = :div
+        @system_arguments = { **deny_tag_argument(**system_arguments), **deny_tag_argument(**wrapper_arguments) }
+        @system_arguments[:tag] = :"tab-container"
         @system_arguments[:classes] = tab_nav_classes(@system_arguments[:classes])
-
-        @body_arguments = deny_tag_argument(**body_arguments)
-        @body_arguments[:tag] = :ul
-        @body_arguments[:classes] = tab_nav_body_classes(@body_arguments[:classes])
-
-        @body_arguments[:role] = :tablist
-        @body_arguments[:"aria-label"] = label
+        @system_arguments[:"aria-label"] = label
       end
 
       def before_render

app/components/primer/alpha/underline_nav.pcss

@@ -21,7 +21,13 @@
   }
 }
 
-.UnderlineNav-body {
+.UnderlineNav::part(tablist-wrapper) {
+  width: 100%;
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted);
+  padding: var(--control-medium-gap) 0;
+}
+
+.UnderlineNav-body,.UnderlineNav::part(tablist) {
   display: flex;
   align-items: center;
   gap: var(--control-medium-gap);

app/components/primer/alpha/underline_panels.html.erb

@@ -1,18 +1,16 @@
-<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
+<%= render Primer::BaseComponent.new(**@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <% if @align == :right %>
       <%= actions %>
     <% end %>
-    <%= render body do %>
-      <% tabs.each do |tab| %>
-        <%= tab %>
-      <% end %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
     <% end %>
     <% if @align == :left %>
       <%= actions %>
     <% end %>
-  <% end %>
-  <% tabs.each do |tab| %>
-    <%= tab.panel %>
+    <% tabs.each do |tab| %>
+      <%= tab.panel %>
+    <% end %>
   <% end %>
 <% end %>

app/components/primer/alpha/underline_panels.pcss

@@ -0,0 +1,4 @@
+tab-container.UnderlineNav {
+  box-shadow: none;
+  flex-direction: column;
+}

app/components/primer/alpha/underline_panels.rb

@@ -18,7 +18,7 @@ class UnderlinePanels < Primer::Component
         Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
-          list: true,
+          list: false,
           icon_classes: "UnderlineNav-octicon",
           panel_id: "panel-#{id}",
           **system_arguments
@@ -43,24 +43,16 @@ class UnderlinePanels < Primer::Component
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(label:, align: ALIGN_DEFAULT, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
         @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
-        @wrapper_arguments = wrapper_arguments
+        @wrapper_arguments = deny_tag_argument(**wrapper_arguments)
+        @wrapper_arguments[:tag] = :div
 
         @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = :div
+        @system_arguments[:tag] = :"tab-container"
         @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+        @system_arguments[:"aria-label"] = label
 
         @body_arguments = deny_tag_argument(**body_arguments)
-        @body_arguments[:tag] = :ul
-        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
-
-        @body_arguments[:role] = :tablist
-        @body_arguments[:"aria-label"] = label
-      end
-
-      private
-
-      def body
-        Primer::BaseComponent.new(**@body_arguments)
+        @body_arguments[:tag] = :div
       end
     end
   end

app/components/primer/primer.pcss

@@ -12,6 +12,7 @@
 @import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
+@import "./alpha/underline_panels.pcss";
 @import "./alpha/segmented_control.pcss";
 @import "./alpha/menu.pcss";
 

package.json

@@ -50,7 +50,7 @@
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
-    "@github/tab-container-element": "^3.1.2",
+    "@github/tab-container-element": "^4.5.0",
     "@oddbird/popover-polyfill": "^0.4.0",
     "@primer/behaviors": "^1.3.4"
   },

test/components/alpha/tab_panels_test.rb

@@ -31,16 +31,8 @@ def test_renders_tabs_and_panels_with_relevant_aria_attributes
     end
 
     assert_selector("tab-container") do
-      assert_selector("div.tabnav") do
-        assert_selector("ul.tabnav-tabs[aria-label='label']") do
-          assert_selector("li") do
-            assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
-          end
-          assert_selector("li") do
-            assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
-          end
-        end
-      end
+      assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
+      assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
       assert_selector("div#panel-tab-1[aria-labelledby='tab-1']", text: "Panel 1")
       assert_selector("div#panel-tab-2[aria-labelledby='tab-2']", text: "Panel 2", visible: false)
     end
@@ -70,16 +62,8 @@ def test_renders_extra_content
       component.with_extra { "extra" }
     end
     assert_selector("tab-container") do
-      assert_selector("div.tabnav") do
-        assert_selector("ul.tabnav-tabs[aria-label='label']") do
-          assert_selector("li") do
-            assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
-          end
-          assert_selector("li") do
-            assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
-          end
-        end
-      end
+      assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
+      assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
       assert_selector("div#panel-tab-1[aria-labelledby='tab-1']", text: "Panel 1")
       assert_selector("div#panel-tab-2[aria-labelledby='tab-2']", text: "Panel 2", visible: false)
       assert_text("extra")

test/components/alpha/underline_panels_test.rb

@@ -20,21 +20,13 @@ def test_renders_panels_and_tab_container
       end
     end
 
-    assert_selector("tab-container") do
-      assert_selector("div.UnderlineNav") do
-        assert_selector("ul.UnderlineNav-body[role='tablist'][aria-label='label']") do
-          assert_selector("li[role='presentation']") do
-            assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
-          end
-          assert_selector("li[role='presentation']") do
-            assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
-          end
-        end
-        assert_selector("div.UnderlineNav-actions", text: "Actions content")
-      end
-      assert_selector("div[role='tabpanel']", text: "Panel 1")
-      assert_selector("div[role='tabpanel']", text: "Panel 2", visible: false)
+    assert_selector("tab-container.UnderlineNav") do
+      assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
+      assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
+      assert_selector("div.UnderlineNav-actions", text: "Actions content")
     end
+    assert_selector("div[role='tabpanel']", text: "Panel 1")
+    assert_selector("div[role='tabpanel']", text: "Panel 2", visible: false)
   end
 
   def test_customizes_tab_container
@@ -45,7 +37,7 @@ def test_customizes_tab_container
       end
     end
 
-    assert_selector("tab-container.m-2.custom-class")
+    assert_selector("div.m-2.custom-class")
   end
 
   def test_raises_if_multiple_tabs_are_selected
@@ -109,15 +101,9 @@ def test_align_falls_back_to_default
 
     refute_selector(".UnderlineNav--right")
 
-    assert_selector("div.UnderlineNav") do
-      assert_selector("ul.UnderlineNav-body[aria-label='label']") do
-        assert_selector("li[role='presentation']") do
-          assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
-        end
-        assert_selector("li[role='presentation']") do
-          assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
-        end
-      end
+    assert_selector("tab-container.UnderlineNav") do
+      assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
+      assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
       assert_selector("div.UnderlineNav-actions", text: "Actions content")
     end
   end
@@ -137,15 +123,9 @@ def test_adds_underline_nav_right_when_align_right_is_set
       end
     end
 
-    assert_selector("div.UnderlineNav.UnderlineNav--right") do
-      assert_selector("ul.UnderlineNav-body[aria-label='label']") do
-        assert_selector("li[role='presentation']") do
-          assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
-        end
-        assert_selector("li[role='presentation']") do
-          assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
-        end
-      end
+    assert_selector("tab-container.UnderlineNav.UnderlineNav--right") do
+      assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
+      assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
       assert_selector("div.UnderlineNav-actions", text: "Actions content")
     end
   end
@@ -164,8 +144,6 @@ def test_puts_actions_first_if_align_right_and_actions_exist
         "Actions content"
       end
     end
-
-    assert_selector(".UnderlineNav > .UnderlineNav-body:last-child")
   end
 
   def test_renders_tab_icon_with_correct_classes

test/css/component_specific_selectors_test.rb

@@ -50,6 +50,7 @@ class ComponentSpecificSelectorsTest < Minitest::Test
     ],
     Primer::Alpha::TabNav => [
       ".tabnav-tab.selected",
+      "tab-container .tabnav-tab",
       ".tabnav-extra",
       ".tabnav-btn"
     ],