openproject-primer_view_components 0.65.0 → 0.66.0

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

@@ -150,7 +150,7 @@ module Primer
             @mobile_segmented_control = Primer::Alpha::SegmentedControl.new(**system_arguments,
                                                                             **mobile_args,
                                                                             mr: 2,
-                                                                            display: %i[flex none])
+                                                                            display: MOBILE_ACTIONS_DISPLAY)
             @mobile_segmented_control_block = block
 
             Primer::Alpha::SegmentedControl.new(**system_arguments)

data/app/components/primer/open_project/sub_header/button.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A Helper class to create a Button with required icon inside the SubHeader action slot
+    # Do not use standalone
+    class SubHeader::Button < Primer::Component
+      status :open_project
+
+      renders_one :leading_visual_icon, lambda { |**system_arguments|
+        # Do nothing as this slot is reserved for the enforced leading icon
+      }
+
+      # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use as leading visual
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon:, **system_arguments)
+        @icon = icon
+        @button = Primer::Beta::Button.new(**system_arguments)
+      end
+
+      delegate :trailing_visual_icon?, :trailing_visual_icon, :with_trailing_visual_icon, :with_trailing_visual_content_icon,
+               :trailing_visual_counter?, :trailing_visual_counter, :with_trailing_visual_counter, :with_trailing_visual_content_counter,
+               :trailing_visual_label?, :trailing_visual_label, :with_trailing_visual_label, :with_trailing_visual_content_label,
+               :trailing_action?, :trailing_action, :with_trailing_action, :with_trailing_action_content,
+               :tooltip?, :tooltip, :with_tooltip, :with_tooltip,
+               to: :@button
+
+      def before_render
+        if leading_visual_icon.present?
+          raise ArgumentError,
+                "Do not use the leading_visual_icon slot within the SubHeader, as it is reserved. Instead provide a leading_icon within the subHeader button slot"
+        end
+      end
+
+      def call
+        render(@button) do |button|
+          button.with_leading_visual_icon(icon: @icon)
+          content
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/sub_header/button_group.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A Helper class to create ButtonGroups inside the SubHeader action slot
+    # Do not use standalone
+    class SubHeader::ButtonGroup < Primer::Beta::ButtonGroup
+      status :open_project
+
+      def with_button(icon:, **system_arguments, &block)
+        system_arguments[:icon] = icon
+        super(component_klass: Primer::OpenProject::SubHeader::ButtonGroup, **system_arguments, &block)
+      end
+    end
+  end
+end

data/app/components/primer/open_project/sub_header/menu.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A Helper class to create an ActionMenu with a required icon on the trigger button.
+    # It is meant to be used inside the SubHeader
+    # Do not use standalone
+    class SubHeader::Menu < Primer::Component
+      status :open_project
+
+      renders_one :show_button, lambda { |**system_arguments|
+        # Do nothing as this slot is reserved for the enforced leading icon
+      }
+
+      def set_show_button(**system_arguments)
+        aria_label = aria("label", system_arguments) || @label
+
+        if @icon_only
+          @menu.with_show_button(icon: @leading_icon, "aria-label": aria_label, **system_arguments)
+        else
+          @menu.with_show_button("aria-label": aria_label, **system_arguments) do |button|
+            button.with_leading_visual_icon(icon: @leading_icon)
+            button.with_trailing_action_icon(icon: @trailing_icon) unless @trailing_icon.nil?
+            @label
+          end
+        end
+      end
+
+      # @param icon_only [Boolean] Whether the trigger button is an IconButton
+      # @param leading_icon [Symbol] Name of Octicon icon to use as either leading icon or IconButton.
+      # @param label [String] The button label
+      # @param button_arguments [Hash] Additional arguments for the button
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon_only: false, leading_icon:, label:, trailing_icon: nil, button_arguments: {}, **system_arguments)
+        @icon_only = icon_only
+        @leading_icon = leading_icon
+        @trailing_icon = trailing_icon
+        @label = label
+
+        if @label.nil? || @label.empty?
+          raise ArgumentError, "You need to provide a valid label."
+        end
+
+        @button_arguments = button_arguments
+
+        @menu = Primer::Alpha::ActionMenu.new(**system_arguments)
+      end
+
+      delegate :with_item, :with_divider, :with_avatar_item, :with_group,
+               to: :@menu
+
+      def before_render
+        if show_button
+          raise ArgumentError,
+                "Do not use the show_button slot within the SubHeader, as it is reserved. Instead provide a leading_icon within the subHeader button slot"
+        end
+      end
+
+      def call
+        render(@menu) do
+          set_show_button(**@button_arguments)
+          content
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/sub_header/segmented_control.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A Helper class to create SegmentedControls inside the SubHeader action slot
+    # Do not use standalone
+    class SubHeader::SegmentedControl < Primer::Alpha::SegmentedControl
+      status :open_project
+
+      def with_item(icon:, **system_arguments, &block)
+        system_arguments[:icon] = icon
+        super(component_klass: Primer::OpenProject::SubHeader::SegmentedControl, **system_arguments, &block)
+      end
+    end
+  end
+end

data/app/components/primer/open_project/sub_header.css

@@ -1 +1 @@
-.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+button.FormControl-input-trailingAction{display:none}
+.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:var(--base-size-16)}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;grid-area:left;width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;flex-basis:max-content;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction{display:none}@media (max-width:543.98px){.SubHeader{grid-template-areas:"left right" "middle middle" "bottom bottom";grid-template-columns:1fr auto}.SubHeader--emptyLeftPane{grid-template-areas:"middle middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto}.SubHeader--emptyLeftPane .SubHeader-middlePane{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SubHeader-middlePane{text-align:left}.SubHeader-middlePane:has(>*){margin-top:var(--stack-gap-normal)}}

data/app/components/primer/open_project/sub_header.css.json

@@ -9,6 +9,9 @@
     ".SubHeader-leftPane",
     ":is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto)",
     ".SubHeader-filterContainer",
-    ".SubHeader-filterInput_hiddenClearButton+button.FormControl-input-trailingAction"
+    ".SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction",
+    ".SubHeader--emptyLeftPane",
+    ".SubHeader--emptyLeftPane .SubHeader-middlePane",
+    ".SubHeader-middlePane:has(>*)"
   ]
 }

data/app/components/primer/open_project/sub_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,kBACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAUJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ,CAEA,iFACE,YACF","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.SubHeader--expandedSearch {\n    grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + button.FormControl-input-trailingAction {\n  display: none;\n}\n"]}
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,iCACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CADb,cAAe,CAGf,UASJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CACb,sBAAuB,CAEvB,OAAQ,CADR,UAEJ,CAEA,2EACE,YACF,CAEA,4BACI,WACI,gEAAiE,CACjE,8BACJ,CAEA,0BACI,gEAAiE,CACjE,mCACJ,CAEA,gDAGI,eAAgB,CADhB,sBAAuB,CADvB,kBAGJ,CAEA,sBACI,eACJ,CAEA,8BACI,kCACJ,CACJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: var(--base-size-16);\n}\n\n.SubHeader--expandedSearch {\n    grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    flex-basis: max-content;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {\n  display: none;\n}\n\n@media (max-width: 543.98px) {\n    .SubHeader {\n        grid-template-areas: \"left right\" \"middle middle\" \"bottom bottom\";\n        grid-template-columns: 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane {\n        grid-template-areas: \"middle middle right\" \"bottom bottom bottom\";\n        grid-template-columns: auto 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane .SubHeader-middlePane {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .SubHeader-middlePane {\n        text-align: left;\n    }\n\n    .SubHeader-middlePane:has(> *) {\n        margin-top: var(--stack-gap-normal);\n    }\n}\n"]}

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

@@ -6,17 +6,38 @@
         I18n.t("button_cancel")
       end if @mobile_filter_cancel.present? %>
     <% end if filter_input.present? %>
+
     <%= render @mobile_filter_trigger if @mobile_filter_trigger.present? %>
+
+    <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
+
     <%= filter_button %>
+
+    <%= segmented_control %>
+
+    <% if @segmented_control_block.present? %>
+      <%= render(@mobile_segmented_control) do |control| %>
+        <% @segmented_control_block.call(control) %>
+      <% end %>
+    <% end %>
   </div>
+
   <div class="SubHeader-middlePane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
     <%= text %>
   </div>
+
   <div class="SubHeader-rightPane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
     <% actions.each do |action| %>
       <%= action %>
     <% end %>
+
+    <% @mobile_actions.each do |mobile_action| %>
+      <%= render(mobile_action[:component]) do |action| %>
+        <% mobile_action[:block].call(action) %>
+      <% end %>
+    <% end unless @mobile_actions.nil? %>
   </div>
+
   <% if bottom_pane_component.present? %>
     <div class="SubHeader-bottomPane">
       <%= bottom_pane_component %>

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

@@ -5,7 +5,7 @@
     grid-template-areas: "left middle right" "bottom bottom bottom";
     grid-template-columns: auto 1fr auto;
     align-items: center;
-    margin-bottom: 16px;
+    margin-bottom: var(--base-size-16);
 }
 
 .SubHeader--expandedSearch {
@@ -33,7 +33,6 @@
     display: flex;
     align-items: center;
     width: 100%;
-    gap: 12px;
 
     /* Since the container is not full width (due to the grid around it)
      we want it to grow, and then be limited by the max-width of the "FormControl-input-width--xy" class */
@@ -46,10 +45,37 @@
 
 .SubHeader-filterContainer {
     display: flex;
+    flex-basis: max-content;
     width: 100%;
     gap: 8px;
 }
 
-.SubHeader-filterInput_hiddenClearButton + button.FormControl-input-trailingAction {
+.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {
   display: none;
 }
+
+@media (max-width: 543.98px) {
+    .SubHeader {
+        grid-template-areas: "left right" "middle middle" "bottom bottom";
+        grid-template-columns: 1fr auto;
+    }
+
+    .SubHeader--emptyLeftPane {
+        grid-template-areas: "middle middle right" "bottom bottom bottom";
+        grid-template-columns: auto 1fr auto;
+    }
+
+    .SubHeader--emptyLeftPane .SubHeader-middlePane {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .SubHeader-middlePane {
+        text-align: left;
+    }
+
+    .SubHeader-middlePane:has(> *) {
+        margin-top: var(--stack-gap-normal);
+    }
+}

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

@@ -10,6 +10,9 @@ module Primer
       HIDDEN_FILTER_TARGET_SELECTOR = "sub-header.hiddenItemsOnExpandedFilter"
       SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
 
+      MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
+      DESKTOP_ACTIONS_DISPLAY = [:none, :flex].freeze
+
       # A button or custom content that will render on the right-hand side of the component.
       #
       # To render a button, call the `with_button` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
@@ -17,25 +20,63 @@ module Primer
       # To render custom content, call the `with_button_component` method and pass a block that returns HTML.
       renders_many :actions, types: {
         button: {
-          renders: lambda { |icon: nil, **kwargs|
-            if icon
-              Primer::Beta::IconButton.new(icon: icon, **kwargs)
+          renders: lambda { |icon_only: false, leading_icon:, label:, **kwargs, &block|
+            if label.nil? || label.empty?
+              raise ArgumentError, "You need to provide a valid label."
+            end
+
+            kwargs[:icon] = leading_icon
+
+            kwargs[:aria] ||= merge_aria(
+              kwargs,
+              { aria: { label: label } }
+            )
+
+            icon_args = kwargs.deep_dup
+
+            if icon_only
+              Primer::Beta::IconButton.new(**icon_args)
             else
-              Primer::Beta::Button.new(**kwargs)
+              @mobile_actions ||= []
+              mobile_component =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
+                                                               **icon_args)
+              @mobile_actions.push({ component: mobile_component, block: block})
+
+              Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
             end
           },
         },
-        component: {
-          # A generic slot to render whatever component you like on the right side
+        button_group: {
           renders: lambda { |**kwargs|
-            deny_tag_argument(**kwargs)
-            kwargs[:tag] = :div
-            Primer::BaseComponent.new(**kwargs)
+            Primer::OpenProject::SubHeader::ButtonGroup.new(**kwargs)
+          },
+        },
+        menu: {
+          renders: lambda { |icon_only: false, leading_icon:, label:, button_arguments: {}, **kwargs, &block|
+            if label.nil? || label.empty?
+              raise ArgumentError, "You need to provide a valid label."
+            end
+
+            kwargs[:leading_icon] = leading_icon
+            kwargs[:label] = label
+            kwargs[:button_arguments] = button_arguments
+
+            @mobile_actions ||= []
+            mobile_component =  Primer::OpenProject::SubHeader::Menu.new(icon_only: true,
+                                                                         display: MOBILE_ACTIONS_DISPLAY,
+                                                                         **kwargs)
+            @mobile_actions.push({ component: mobile_component, block: block})
+
+            Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only,display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
           },
         }
       }
 
       renders_one :filter_input, lambda { |name:, label:, **system_arguments|
+        if label.nil? || label.empty?
+          raise ArgumentError, "You need to provide a valid label."
+        end
+
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "SubHeader-filterInput",
@@ -62,6 +103,7 @@ module Primer
         @mobile_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
                                                               display: [:inline_flex, :none],
                                                               aria: { label: label },
+                                                              mr: 2,
                                                               "data-action": "click:sub-header#expandFilterInput",
                                                               "data-targets": HIDDEN_FILTER_TARGET_SELECTOR)
 
@@ -83,18 +125,25 @@ module Primer
       # To render custom content, call the `with_filter_component` method and pass a block that returns HTML.
       renders_one :filter_button, types: {
         button: {
-          renders: lambda { |icon: nil, **kwargs|
-            kwargs[:classes] = class_names(
-              kwargs[:classes],
-              "SubHeader-filterButton"
+          renders: lambda { |icon_only: false, leading_icon: :filter, mobile_label: I18n.t("button_filter"), **kwargs|
+            kwargs[:mr] ||= 2
+            kwargs[:icon] = leading_icon
+
+            kwargs[:aria] ||= merge_aria(
+              kwargs,
+              { aria: { label: mobile_label } }
             )
-            kwargs[:data] ||= {}
-            kwargs[:data][:targets] ||= HIDDEN_FILTER_TARGET_SELECTOR
 
-            if icon
-              Primer::Beta::IconButton.new(icon: icon, **kwargs)
+            icon_args = kwargs.deep_dup
+            icon_args = set_as_hidden_filter_target(icon_args)
+
+            if icon_only
+              Primer::Beta::IconButton.new(**icon_args)
             else
-              Primer::Beta::Button.new(**kwargs)
+              @mobile_filter_button =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
+                                                                    **icon_args)
+
+              Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
             end
           },
 
@@ -105,8 +154,7 @@ module Primer
           renders: lambda { |**kwargs|
             deny_tag_argument(**kwargs)
             kwargs[:tag] = :div
-            kwargs[:data] ||= {}
-            kwargs[:data][:targets] ||= HIDDEN_FILTER_TARGET_SELECTOR
+            kwargs = set_as_hidden_filter_target(kwargs)
 
             Primer::BaseComponent.new(**kwargs)
           },
@@ -115,6 +163,21 @@ module Primer
         }
       }
 
+      renders_one :segmented_control, lambda { |**system_arguments, &block|
+          deny_tag_argument(**system_arguments)
+          system_arguments[:mr] ||= 2
+          system_arguments = set_as_hidden_filter_target(system_arguments)
+
+          @segmented_control_block = block
+          @mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
+            hide_labels: true,
+            display: MOBILE_ACTIONS_DISPLAY,
+            **system_arguments
+          )
+
+          Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
+      }
+
       renders_one :text, lambda { |**system_arguments|
         system_arguments[:font_weight] ||= :bold
 
@@ -138,7 +201,9 @@ module Primer
 
         @filter_container = Primer::BaseComponent.new(tag: :div,
                                                       classes: "SubHeader-filterContainer",
-                                                      display: [:none, :flex],
+                                                      display: DESKTOP_ACTIONS_DISPLAY,
+
+                                                      mr: 2,
                                                       data: { targets: SHOWN_FILTER_TARGET_SELECTOR })
 
         @system_arguments[:classes] = class_names(
@@ -146,6 +211,25 @@ module Primer
           system_arguments[:classes]
         )
       end
+
+      def before_render
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input
+        )
+      end
+
+      def set_as_hidden_filter_target(system_arguments)
+        system_arguments[:data] ||= {}
+        system_arguments[:data] = merge_data(
+            system_arguments, {
+            data: {
+              targets: HIDDEN_FILTER_TARGET_SELECTOR,
+            }
+          }
+        )
+        system_arguments
+      end
     end
   end
 end

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/page_header_preview/create_action.html.erb

@@ -13,8 +13,7 @@
       "Filter"
     end
 
-    component.with_action_button(scheme: :primary) do |button|
-      button.with_leading_visual_icon(icon: :plus)
+    component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
       "User"
     end
   end

data/previews/primer/open_project/sub_header_preview/action_menu_buttons.html.erb

@@ -1,15 +1,12 @@
 <%= render(Primer::OpenProject::SubHeader.new) do |component| %>
   <% component.with_filter_input(name: "filter", label: "Filter") %>
 
-  <% component.with_action_component do %>
-    <%= render Primer::Alpha::ActionMenu.new(menu_id: "menu-1") do |menu|
-      menu.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu")
-      menu.with_item(label: "Subitem 1") do |item|
-        item.with_leading_visual_icon(icon: :paste)
-      end
-      menu.with_item(label: "Subitem 2") do |item|
-        item.with_leading_visual_icon(icon: :log)
-      end
-    end %>
+  <% component.with_action_menu(leading_icon: :plus, trailing_icon: :"triangle-down", label: "Create", button_arguments: { scheme: :primary, "aria-label": "Menu"}) do |menu| %>
+    <%= menu.with_item(label: "Subitem 1") do |item|
+          item.with_leading_visual_icon(icon: :paste)
+        end
+        menu.with_item(label: "Subitem 2") do |item|
+          item.with_leading_visual_icon(icon: :log)
+        end %>
   <% end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview/button_group.html.erb

@@ -1,11 +1,17 @@
 <%= render(Primer::OpenProject::SubHeader.new) do |component| %>
   <% component.with_filter_input(name: "filter", label: "Filter") %>
 
-  <% component.with_action_component do %>
-    <%= render(Primer::Beta::ButtonGroup.new) do |group|
-      group.with_button { "Button 1" }
-      group.with_button { "Button 2" }
-      group.with_button { "Button 3" }
-    end %>
-  <% end %>
+  <% component.with_action_button_group do |group|
+    group.with_button(icon: :note, "aria-label": "Button 1")
+    group.with_button(icon: :rows, "aria-label": "Button 2")
+    group.with_button(icon: "sort-desc", "aria-label": "Button 3")
+  end %>
+
+  <% component.with_action_button(icon_only: true, leading_icon: :star, label: "Star") do
+    "Star"
+  end %>
+
+  <% component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+    "Create"
+  end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview/custom_filter_button.html.erb

@@ -3,6 +3,6 @@
   <% component.with_filter_component do %>
     <!-- Render any custom filter component that you want -->
     <!-- Note, that you can pass an ID for the bottom pane if you need to access that area for further filter actions-->
-    <%= render(Primer::Beta::IconButton.new(icon: "filter", "aria-label": "Filter")) %>
+    <%= render(Primer::Beta::IconButton.new(icon: "filter-remove", "aria-label": "Filter")) %>
   <% end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview/dialog_buttons.html.erb

@@ -1,12 +1,13 @@
 <%= render(Primer::OpenProject::SubHeader.new) do |component| %>
   <% component.with_filter_input(name: "filter", label: "Filter") %>
 
-  <% component.with_action_component do %>
-    <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: "Dialog")) do |d| %>
-      <% d.with_show_button { "Show Dialog" } %>
-      <% d.with_body do %>
-        Hello world!
-      <% end %>
-    <% end %>
-  <% end %>
+  <% component.with_text { "Only async dialogs are supported in the SubHeader!" } %>
+
+  <% component.with_action_button(leading_icon: :alert,
+                                  label: "Open Dialog",
+                                  #tag: :a,
+                                  #href: "show_dialog_path",
+                                  data: { controller: "async-dialog" }) do
+    "Open Dialog"
+  end %>
 <% end %>

data/previews/primer/open_project/sub_header_preview.rb

@@ -35,9 +35,8 @@ module Primer
 
           component.with_text { text } unless text.nil?
 
-          component.with_action_button(scheme: :primary) do |button|
-              button.with_leading_visual_icon(icon: :plus)
-              "Create"
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+            "Create"
           end if show_action_button
         end
       end
@@ -51,8 +50,7 @@ module Primer
             "Filter"
           end
 
-          component.with_action_button(scheme: :primary)  do |button|
-            button.with_leading_visual_icon(icon: :plus)
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
             "Create"
           end
         end
@@ -64,6 +62,9 @@ module Primer
       end
 
       # @label With Dialog
+      # Only async dialogs are supported in the SubHeader.
+      # Since we duplicate the buttons for mobile purposes,
+      # the dialog would otherwise be duplicated (with the same ID) as well
       def dialog_buttons
         render_with_template(locals: {})
       end
@@ -78,6 +79,25 @@ module Primer
         render_with_template(locals: {})
       end
 
+      # @label With SegmentedControl
+      def segmented_control
+        render(Primer::OpenProject::SubHeader.new) do |component|
+          component.with_filter_button do |button|
+            button.with_trailing_visual_counter(count: "15")
+            "Filter"
+          end
+
+          component.with_segmented_control("aria-label": "Segmented control") do |control|
+            control.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
+            control.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
+          end
+
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+            "Create"
+          end
+        end
+      end
+
       # @label With a custom area below
       def bottom_pane
         render_with_template(locals: {})
@@ -90,8 +110,7 @@ module Primer
 
           component.with_text { "Hello world!" }
 
-          component.with_action_button(scheme: :primary)  do |button|
-            button.with_leading_visual_icon(icon: :plus)
+          component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
             "Create"
           end
         end