openproject-primer_view_components 0.64.1 → 0.66.0

data/app/components/primer/alpha/select_panel.css

@@ -1 +1 @@
-.SelectPanel-emptyPanel,.SelectPanel-loadingPanel{min-height:min(var(--overlay-height) - 10rem,100vh - 2rem)}
+.SelectPanel-loadingPanel{min-height:min(calc(var(--overlay-height) - 10rem),calc(100vh - 2rem))}.SelectPanel-emptyPanel{align-items:center;display:flex;justify-content:center;min-height:min(calc(var(--overlay-height) - 23rem),calc(100vh - 2rem))}

data/app/components/primer/alpha/select_panel.css.json

@@ -1,7 +1,7 @@
 {
   "name": "alpha/select_panel",
   "selectors": [
-    ".SelectPanel-emptyPanel",
-    ".SelectPanel-loadingPanel"
+    ".SelectPanel-loadingPanel",
+    ".SelectPanel-emptyPanel"
   ]
 }

data/app/components/primer/alpha/select_panel.css.map

@@ -1 +1 @@
-{"version":3,"sources":["select_panel.pcss"],"names":[],"mappings":"AAIA,kDACE,0DACF","file":"select_panel.css","sourcesContent":[".SelectPanel-loadingPanel {\n  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n\n.SelectPanel-emptyPanel {\n  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n"]}
+{"version":3,"sources":["select_panel.pcss"],"names":[],"mappings":"AAAA,0BACE,sEACF,CAEA,wBAEE,kBAAmB,CACnB,YAAa,CACb,sBAAuB,CAHvB,sEAIF","file":"select_panel.css","sourcesContent":[".SelectPanel-loadingPanel {\n  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));\n}\n\n.SelectPanel-emptyPanel {\n  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n"]}

data/app/components/primer/alpha/select_panel.html.erb

@@ -97,7 +97,7 @@
                 <%= render(@list) %>
               <% end %>
             </div>
-            <div data-target="select-panel.noResults" class="pt-2 color-border-muted text-center d-flex flex-items-start flex-justify-center SelectPanel-emptyPanel" hidden>
+            <div data-target="select-panel.noResults" class="SelectPanel-emptyPanel" hidden>
               <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
             </div>
           <% end %>

data/app/components/primer/alpha/select_panel.pcss

@@ -1,7 +1,10 @@
 .SelectPanel-loadingPanel {
-  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));
 }
 
 .SelectPanel-emptyPanel {
-  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }

data/app/components/primer/beta/spinner.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::BaseComponent.new(tag: :span, hidden: @hidden, data: { target: @target })) do %>
+<%= render(Primer::BaseComponent.new(tag: :span, hidden: @hidden, data: { target: @target }, **@wrapper_arguments)) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
     <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />

data/app/components/primer/beta/spinner.rb

@@ -43,6 +43,8 @@ module Primer
 
         @target = extract_data(:target, @system_arguments)
         @hidden = @system_arguments.delete(:hidden)
+
+        @wrapper_arguments = @system_arguments.delete(:wrapper_arguments) || {}
       end
 
       def no_aria_label?

data/app/components/primer/open_project/file_tree_view/directory_node.html.erb

@@ -0,0 +1,5 @@
+<% with_leading_visual_icons do |icons| %>
+  <% icons.with_expanded_icon(icon: :"file-directory-open-fill", **@expanded_icon_arguments) %>
+  <% icons.with_collapsed_icon(icon: :"file-directory-fill", **@collapsed_icon_arguments) %>
+<% end %>
+<%= render_parent %>

data/app/components/primer/open_project/file_tree_view/directory_node.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class FileTreeView
+      class DirectoryNode < TreeView::SubTreeNode
+        def initialize(icon_arguments: nil, expanded_icon_arguments: nil, collapsed_icon_arguments: nil, **system_arguments)
+          @expanded_icon_arguments = expanded_icon_arguments || icon_arguments || {}
+          @collapsed_icon_arguments = collapsed_icon_arguments || icon_arguments || {}
+
+          super(**system_arguments)
+        end
+
+        def with_file(**system_arguments, &block)
+          with_leaf(**system_arguments, component_klass: FileNode, &block)
+        end
+
+        def with_directory(**system_arguments, &block)
+          with_sub_tree(**system_arguments, component_klass: DirectoryNode, &block)
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/file_tree_view/file_node.html.erb

@@ -0,0 +1,2 @@
+<% with_leading_visual_icon(icon: :file, **@icon_arguments) %>
+<%= render_parent %>

data/app/components/primer/open_project/file_tree_view/file_node.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class FileTreeView
+      class FileNode < TreeView::LeafNode
+        def initialize(icon_arguments: {}, **system_arguments)
+          @icon_arguments = icon_arguments
+          super(**system_arguments)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class FileTreeView < TreeView
+      def with_file(**system_arguments, &block)
+        with_leaf(**system_arguments, component_klass: FileNode, &block)
+      end
+
+      def with_directory(**system_arguments, &block)
+        with_sub_tree(**system_arguments, component_klass: DirectoryNode, &block)
+      end
+    end
+  end
+end

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/skeleton_box.css

@@ -0,0 +1 @@
+@keyframes shimmer{0%{mask-position:200%}to{mask-position:0}}.SkeletonBox{animation:shimmer;background-color:var(--bgColor-muted);border-radius:var(--borderRadius-small);display:block;height:1rem}@media (prefers-reduced-motion:no-preference){.SkeletonBox{animation:shimmer;animation-duration:1s;animation-iteration-count:infinite;mask-image:linear-gradient(75deg,#000 30%,#000000a6 80%);mask-size:200%}}@media (forced-colors:active){.SkeletonBox{outline:1px solid #0000;outline-offset:-1px}}

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

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/skeleton_box",
+  "selectors": [
+    ".SkeletonBox"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["skeleton_box.pcss"],"names":[],"mappings":"AAAA,mBACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,aAKE,iBAAkB,CAFlB,qCAAsC,CACtC,uCAAwC,CAHxC,aAAc,CACd,WAiBF,CAZE,8CAPF,aAUI,iBAAkB,CAClB,qBAAsB,CACtB,kCAAmC,CAJnC,wDAAqE,CACrE,cAUJ,CANE,CAEA,8BAfF,aAgBI,uBAA8B,CAC9B,mBAEJ,CADE","file":"skeleton_box.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.SkeletonBox {\n  display: block;\n  height: 1rem;\n  background-color: var(--bgColor-muted);\n  border-radius: var(--borderRadius-small);\n  animation: shimmer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n    mask-size: 200%;\n    animation: shimmer;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n\n  @media (forced-colors: active) {\n    outline: 1px solid transparent;\n    outline-offset: -1px;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) %>

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

@@ -0,0 +1,30 @@
+@keyframes shimmer {
+  from {
+    mask-position: 200%;
+  }
+
+  to {
+    mask-position: 0%;
+  }
+}
+
+.SkeletonBox {
+  display: block;
+  height: 1rem;
+  background-color: var(--bgColor-muted);
+  border-radius: var(--borderRadius-small);
+  animation: shimmer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+    mask-size: 200%;
+    animation: shimmer;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  @media (forced-colors: active) {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+  }
+}

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images)
+    # that are still loading. You can adjust width and height to match the content's dimensions.
+    class SkeletonBox < Primer::Component
+      # @param height [String] Any valid CSS height.
+      # @param width [String] Any valid CSS width.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(height: nil, width: nil, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        styles = []
+        styles << "width: #{width}" if width
+        styles << "height: #{height}" if height
+
+        @system_arguments[:tag] = :div
+        @system_arguments[:style] = styles.join("; ") if styles.present?
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "SkeletonBox"
+        )
+      end
+    end
+  end
+end

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);
+    }
+}