openproject-primer_view_components 0.29.0 → 0.30.0

data/app/components/primer/open_project/page_header.pcss

@@ -47,16 +47,6 @@
   align-items: center;
 }
 
-.PageHeader--singleAction .PageHeader-action {
-  @media (max-width: 543.98px) {
-    position: absolute;
-    top: 10px;
-
-    /* Normally, the actions are hidden on mobile, except for this special case of a single action */
-    display: flex !important;
-  }
-}
-
 .PageHeader-breadcrumbs {
   display: block;
   width: 100%;

data/app/components/primer/open_project/page_header.rb

@@ -21,7 +21,7 @@ module Primer
       ].freeze
 
       DEFAULT_ACTION_SCHEME = :default
-      MORE_MENU_DISPLAY = [:flex, :none].freeze
+      MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
 
       DEFAULT_LEADING_ACTION_DISPLAY = [:none, :flex].freeze
       DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
@@ -58,32 +58,37 @@ module Primer
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :actions, types: {
-        icon_button: lambda { |icon:, mobile_icon:, label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+        icon_button: lambda { |icon:, mobile_icon:, label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments, &block|
           deny_tag_argument(**system_arguments)
 
-          system_arguments = set_action_arguments(system_arguments, scheme: scheme, button_action: true)
+          system_arguments[:icon] = icon
+          system_arguments[:"aria-label"] ||= label
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
 
-          add_option_to_mobile_menu(system_arguments, mobile_icon, label, scheme)
+          component = Primer::Beta::IconButton
+          create_mobile_alternatives(component, mobile_icon, label, scheme, **system_arguments, &block)
 
-          Primer::Beta::IconButton.new(icon: icon, "aria-label": label, **system_arguments)
+          component.new(**system_arguments)
         },
-        button: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+        button: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments, &block|
           deny_tag_argument(**system_arguments)
 
-          system_arguments = set_action_arguments(system_arguments, scheme: scheme, button_action: true)
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
 
-          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
+          component = Primer::Beta::Button
+          create_mobile_alternatives(component, mobile_icon, mobile_label, scheme, **system_arguments, &block)
 
-          Primer::Beta::Button.new(**system_arguments)
+          component.new(**system_arguments)
         },
-        zen_mode_button: lambda { |mobile_icon: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_ICON, mobile_label: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_LABEL, **system_arguments|
+        zen_mode_button: lambda { |mobile_icon: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_ICON, mobile_label: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_LABEL, **system_arguments, &block|
           deny_tag_argument(**system_arguments)
 
-          system_arguments = set_action_arguments(system_arguments, scheme: DEFAULT_ACTION_SCHEME, button_action: true)
+          system_arguments = set_action_arguments(system_arguments, scheme: DEFAULT_ACTION_SCHEME)
 
-          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, DEFAULT_ACTION_SCHEME)
+          component = Primer::OpenProject::ZenModeButton
+          create_mobile_alternatives(component, mobile_icon, mobile_label, DEFAULT_ACTION_SCHEME, **system_arguments, &block)
 
-          Primer::OpenProject::ZenModeButton.new(**system_arguments)
+          component.new(**system_arguments)
         },
 
         link: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
@@ -109,29 +114,31 @@ module Primer
           renders: lambda { |**system_arguments, &block|
             deny_tag_argument(**system_arguments)
 
-            system_arguments[:menu_arguments] = set_action_arguments(system_arguments[:menu_arguments])
             system_arguments[:button_arguments] ||= {}
-            system_arguments[:button_arguments][:data] ||= {}
-            system_arguments[:button_arguments][:data][:targets] = "page-header.actionItems"
+            system_arguments[:button_arguments] = set_action_arguments(system_arguments[:button_arguments])
 
             # Add the options individually to the mobile menu in the template
             @desktop_menu_block = block
 
-            Primer::OpenProject::PageHeader::Menu.new(**system_arguments)
+            component = Primer::OpenProject::PageHeader::Menu
+            create_mobile_single_action(component, **system_arguments, &block)
+
+            component.new(**system_arguments)
           },
         },
         dialog: {
-          renders: lambda { |mobile_icon:, mobile_label:, **system_arguments|
+          renders: lambda { |mobile_icon:, mobile_label:, **system_arguments, &block|
             deny_tag_argument(**system_arguments)
 
             # The id will be automatically calculated for the trigger button, so we have to behave the same, for the mobile click to work
             system_arguments[:button_arguments] ||= {}
             system_arguments[:button_arguments][:id] = "dialog-show-#{system_arguments[:dialog_arguments][:id]}"
-            system_arguments[:button_arguments] = set_action_arguments(system_arguments[:button_arguments], button_action: true)
+            system_arguments[:button_arguments] = set_action_arguments(system_arguments[:button_arguments])
 
-            add_option_to_mobile_menu(system_arguments[:button_arguments], mobile_icon, mobile_label, :default)
+            component = Primer::OpenProject::PageHeader::Dialog
+            create_mobile_alternatives(component, mobile_icon, mobile_label, :default, **system_arguments, &block)
 
-            Primer::OpenProject::PageHeader::Dialog.new(**system_arguments)
+            component.new(**system_arguments)
           },
         },
       }
@@ -212,7 +219,7 @@ module Primer
           )
 
         @mobile_action_menu = Primer::Alpha::ActionMenu.new(
-          display: MORE_MENU_DISPLAY,
+          display: MOBILE_ACTIONS_DISPLAY,
           anchor_align: :end
         )
       end
@@ -224,15 +231,6 @@ module Primer
         title? && breadcrumbs?
       end
 
-      def before_render
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "PageHeader--singleAction": !render_mobile_menu?
-        )
-
-        content
-      end
-
       def render_mobile_menu?
         actions.count > 1
       end
@@ -242,26 +240,32 @@ module Primer
       def set_action_arguments(system_arguments, scheme: nil, button_action: false)
         system_arguments[:ml] ||= 2
         system_arguments[:display] = [:none, :flex]
+        system_arguments[:size] = :medium
         system_arguments[:scheme] = scheme unless scheme.nil?
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "PageHeader-action",
         )
-        if button_action
-          system_arguments[:data] ||= {}
-          system_arguments[:data][:targets] = "page-header.actionItems"
-        end
 
         system_arguments[:id] ||= self.class.generate_id
         system_arguments
       end
 
+      def create_mobile_alternatives(component, mobile_icon, mobile_label, scheme, **system_arguments, &block)
+        # All actions should collapse into a single actionMenu on mobile
+        add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
+
+        # Except for single actions, which remain as they are, just smaller.
+        create_mobile_single_action(component, **system_arguments, &block)
+      end
+
       def add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
         unless mobile_icon.nil? || mobile_label.nil?
           # In action menus, only :default and :danger are allowed
           scheme = DEFAULT_ACTION_SCHEME unless scheme == :danger
 
-          with_menu_item(id: system_arguments[:id], label: mobile_label, scheme: scheme) do |c|
+          id = system_arguments[:button_arguments].present? ? system_arguments[:button_arguments][:id] : system_arguments[:id]
+          with_menu_item(id: id, label: mobile_label, scheme: scheme) do |c|
             c.with_leading_visual_icon(icon: mobile_icon)
           end
         end
@@ -281,6 +285,19 @@ module Primer
         )
       end
 
+      def create_mobile_single_action(component, **system_arguments, &block)
+        # Single actions shall not collapse into an action menu on mobile, but keep their state.
+        # However the position and size will change
+        unless render_mobile_menu?
+          mobile_options = system_arguments[:button_arguments].present? ?
+                             { button_arguments: { display: MOBILE_ACTIONS_DISPLAY, size: :small } } :
+                             { display: MOBILE_ACTIONS_DISPLAY, size: :small }
+
+          @mobile_action = component.new(**system_arguments.deep_merge(mobile_options))
+          @mobile_action_block = block
+        end
+      end
+
       # transform anchor tag strings to {href, text} objects
       # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
       def anchor_string_to_object(html_string)

data/app/components/primer/open_project/page_header_element.d.ts

@@ -1,6 +1,4 @@
 declare class PageHeaderElement extends HTMLElement {
-    actionItems: HTMLElement[];
-    connectedCallback(): void;
     menuItemClick(event: Event): void;
 }
 declare global {

data/app/components/primer/open_project/page_header_element.js

@@ -4,20 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { controller, targets } from '@github/catalyst';
+import { controller } from '@github/catalyst';
 let PageHeaderElement = class PageHeaderElement extends HTMLElement {
-    connectedCallback() {
-        for (const item of this.actionItems) {
-            /*
-            If there is only one action to be shown, we show that instead of the mobile action menu. However, the buttons should be the smaller button variant.
-            Unfortunately, the `size` attribute does not support responsive attributes and the .pcss syntax does not support inheritance between classes.
-            So we have to add the class manually here.
-            */
-            if (window.innerWidth <= 544) {
-                item.classList.add('Button--small');
-            }
-        }
-    }
     menuItemClick(event) {
         const currentTarget = event.currentTarget;
         const id = currentTarget?.getAttribute('data-for');
@@ -26,9 +14,6 @@ let PageHeaderElement = class PageHeaderElement extends HTMLElement {
         }
     }
 };
-__decorate([
-    targets
-], PageHeaderElement.prototype, "actionItems", void 0);
 PageHeaderElement = __decorate([
     controller
 ], PageHeaderElement);

data/app/components/primer/open_project/page_header_element.ts

@@ -1,22 +1,7 @@
-import {controller, targets} from '@github/catalyst'
+import {controller} from '@github/catalyst'
 
 @controller
 class PageHeaderElement extends HTMLElement {
-  @targets actionItems: HTMLElement[]
-
-  connectedCallback() {
-    for (const item of this.actionItems) {
-      /*
-      If there is only one action to be shown, we show that instead of the mobile action menu. However, the buttons should be the smaller button variant.
-      Unfortunately, the `size` attribute does not support responsive attributes and the .pcss syntax does not support inheritance between classes.
-      So we have to add the class manually here.
-      */
-      if (window.innerWidth <= 544) {
-        item.classList.add('Button--small')
-      }
-    }
-  }
-
   menuItemClick(event: Event) {
     const currentTarget = event.currentTarget as HTMLButtonElement
 

data/app/components/primer/open_project/zen_mode_button.html.erb

@@ -4,6 +4,7 @@
             scheme: :default,
             id: "zenModeButton",
             icon: ZEN_MODE_BUTTON_ICON,
+            size: @button_size,
             aria: { label: ZEN_MODE_BUTTON_LABEL },
             data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" }
           )

data/app/components/primer/open_project/zen_mode_button.rb

@@ -20,6 +20,8 @@ module Primer
           @system_arguments[:classes],
           "ZenModeButton"
         )
+
+        @button_size = @system_arguments[:size] || Primer::Beta::Button::DEFAULT_SIZE
       end
     end
   end

data/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";
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 29
+      MINOR = 30
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/button_marketing_preview.rb

@@ -10,19 +10,31 @@ module Primer
       # @param tag [Symbol] select [button, a]
       # @param type [Symbol] select [button, submit]
       # @param disabled [Boolean]
-      def playground(tag: :button, type: :button, scheme: :default, variant: :default, disabled: false)
-        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant, disabled: disabled)) { "Default" }
+      def playground(tag: :button, type: :button, scheme: :default, variant: :default, disabled: false, href: nil)
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant, disabled: disabled, href: href)) { "Default" }
       end
 
       # @label Default options
       # @param scheme [Symbol] select [default, primary, outline, transparent]
       # @param variant [Symbol] select [default, large]
-      # @param tag [Symbol] select [button, a]
       # @param type [Symbol] select [button, submit]
       def default(tag: :button, type: :button, scheme: :default, variant: :default)
         render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
       end
 
+      # @label Link as button options
+      # @param scheme [Symbol] select [default, primary, outline, transparent]
+      # @param variant [Symbol] select [default, large]
+      # @param type [Symbol] select [button, submit]
+      # @param href [String]
+      def link_as_button(tag: :a, href: "#", type: :button, scheme: :default, variant: :default)
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, href: href, type: type, scheme: scheme, variant: variant)) { "Default" }
+      end
+
       # @!group Size Variants
       # @snapshot
       #

data/previews/primer/alpha/dialog_preview/with_header_filter.html.erb

@@ -0,0 +1,19 @@
+<%= render(Primer::Alpha::Dialog.new(open: true, title: "Dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Open" } %>
+  <% dialog.with_header do |header| %>
+    <% header.with_filter(pr: 3, pl: 3) do %>
+      <%= render Primer::Alpha::TextField.new(
+        autofocus: true,
+        visually_hide_label: true,
+        name: "filter",
+        label: "Filter dialog",
+      ) %>
+    <% end %>
+  <% end %>
+  <% dialog.with_body do %>
+    Body
+  <% end %>
+  <% dialog.with_footer do %>
+    Footer
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -296,6 +296,10 @@ module Primer
           d.with_body { body_text }
         end
       end
+
+      def with_header_filter
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb

@@ -0,0 +1,19 @@
+<div style="position:sticky;top:0;" class="color-bg-accent">
+  <%= render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d| %>
+    <% d.with_header(title: "Large Dialog Header", divider: true) do |header| %>
+      <% header.with_filter do %>
+        <%= render Primer::Alpha::TextField.new(
+          autofocus: true,
+          visually_hide_label:
+          true,
+          name: "filter",
+          label: "Filter Overlay"
+        ) %>
+      <% end %>
+    <% end %>
+    <% d.with_show_button { "Show Overlay" } %>
+    <% d.with_footer { "Large Dialog Footer" } %>
+    <% d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 } %>
+  <% end %>
+</div>
+<div style="height:3000px;"></div>

data/previews/primer/alpha/overlay_preview.rb

@@ -183,6 +183,21 @@ module Primer
       def overlay_with_header_filter
         render_with_template(locals: {})
       end
+
+      def overlay_with_header_subtitle
+        render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
+          d.with_header(title: "Large Dialog Header", divider: true) do |h|
+            h.with_subtitle {"A subtitle"}
+          end
+          d.with_show_button { "Show Overlay" }
+          d.with_footer { "Large Dialog Footer" }
+          d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
+        end
+      end
+
+      def in_a_sticky_container
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/beta/button_group_preview.rb

@@ -63,22 +63,18 @@ module Primer
         end
       end
 
-      # @label Button group with all tags
+      # @label Button group with multiple tags
       # @snapshot
-      def all_tags
+      def multiple_tags
         render(Primer::Beta::ButtonGroup.new) do |component|
           component.with_button(id: "button-1", tag: :button) do |button|
             button.with_tooltip(text: "Button Tooltip")
             "Button 1"
           end
-          component.with_button(id: "button-2", tag: :a) do |button|
+          component.with_button(id: "button-2", tag: :a, href: "#") do |button|
             button.with_tooltip(text: "Button Tooltip")
             "Button 2"
           end
-          component.with_button(id: "button-3", tag: :summary) do |button|
-            button.with_tooltip(text: "Button Tooltip")
-            "Button 3"
-          end
         end
       end
 

data/previews/primer/beta/button_preview/small_scheme_one_character.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Beta::Button.new(
+    size: :small,
+)) do %>
+  i
+<% end %>

data/previews/primer/beta/button_preview/summary_as_button.html.erb

@@ -0,0 +1,14 @@
+<details>
+  <%= render(Primer::Beta::Button.new(
+      scheme: scheme,
+      size: size,
+      block: block,
+      id: id,
+      align_content: align_content,
+      tag: tag
+  )) do %>
+    Button
+  <% end %>
+  <p>A wrapping `details` tag is required when using the button with the `:summary` tag</p>
+</details>
+

data/previews/primer/beta/button_preview.rb

@@ -20,7 +20,7 @@ module Primer
       # @param disabled toggle
       # @param inactive toggle
       # @param align_content select [center, start]
-      # @param tag select [a, summary, button]
+      # @param tag select [a, button]
       # @param label_wrap toggle
       def playground(
         scheme: :default,
@@ -31,8 +31,13 @@ module Primer
         tag: :button,
         disabled: false,
         inactive: false,
-        label_wrap: false
+        label_wrap: false,
+        href: nil
       )
+        # Sets default href to `a`, to ensure it's keyboard interactive and proper markup
+        if tag == :a && href.nil?
+          href = "#"
+        end
         render(Primer::Beta::Button.new(
                  scheme: scheme,
                  size: size,
@@ -42,8 +47,9 @@ module Primer
                  tag: tag,
                  disabled: disabled,
                  inactive: inactive,
-                 label_wrap: label_wrap
-               )) do |_c|
+                 label_wrap: label_wrap,
+                 href: href
+                )) do |_c|
           "Button"
         end
       end
@@ -51,7 +57,6 @@ module Primer
       # @label Default
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def default(
         block: false,
         id: "button-preview",
@@ -73,7 +78,6 @@ module Primer
       # @label Primary
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def primary(
         id: "button-preview",
         block: false,
@@ -95,7 +99,6 @@ module Primer
       # @label Danger
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def danger(
         id: "button-preview",
         block: false,
@@ -117,7 +120,6 @@ module Primer
       # @label Invisible
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       def invisible(
         id: "button-preview",
         block: false,
@@ -145,7 +147,6 @@ module Primer
       # @label Link
       # @param block toggle
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       # @snapshot
       def link(
         id: "button-preview",
@@ -178,7 +179,6 @@ module Primer
 
       # @label Full width
       # @param disabled toggle
-      # @param tag select [a, summary, button]
       # @snapshot
       def full_width(
         id: "button-preview",
@@ -222,6 +222,7 @@ module Primer
       # @param size select [small, medium]
       # @param block toggle
       # @param align_content select [center, start]
+      # @param href
       # @snapshot
       def link_as_button(
         scheme: :default,
@@ -245,12 +246,35 @@ module Primer
         end
       end
 
+      # @label Summary as button
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @snapshot
+      def summary_as_button(
+        scheme: :default,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center,
+        tag: :summary
+      )
+        render_with_template(locals: {
+                              scheme: scheme,
+                              size: size,
+                              block: block,
+                              id: id,
+                              align_content: align_content,
+                              tag: tag
+                             })
+      end
+
       # @label Trailing visual
       # @param scheme select [default, primary, danger, invisible, link]
       # @param size select [small, medium]
       # @param block toggle
       # @param align_content select [center, start]
-      # @param tag select [a, summary, button]
       # @snapshot
       def trailing_visual(
         scheme: :default,
@@ -258,7 +282,7 @@ module Primer
         block: false,
         id: "button-preview",
         align_content: :center,
-        tag: :a
+        tag: :button
       )
         render_with_template(locals: {
                                scheme: scheme,
@@ -390,6 +414,12 @@ module Primer
       def link_scheme_label_wrap
         render_with_template(locals: {})
       end
+
+      # @label Small scheme with one character
+      # @snapshot
+      def small_scheme_one_character
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/open_project/page_header_preview.rb

@@ -120,6 +120,21 @@ module Primer
         end
       end
 
+
+      # @label With a single action
+      # The single action will not be transformed into a menu on mobile, but remains in a smaller variant
+      def single_action
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Great news" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+
+          component.with_action_button(mobile_icon: "plus", mobile_label: "Meeting", scheme: :primary) do |button|
+            button.with_leading_visual_icon(icon: "plus")
+            "Meeting"
+          end
+        end
+      end
+
       # @label With leading action (on wide)
       # **Leading action** is only shown on **wide screens** by default.
       # If you want to override that behaviour please use the system_argument: **display**

data/static/arguments.json

@@ -2462,18 +2462,6 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
-      {
-        "name": "body_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the body wrapper."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/classes.json

@@ -429,9 +429,6 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader--singleAction": [
-    "Primer::OpenProject::PageHeader"
-  ],
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],