openproject-primer_view_components 0.22.2 → 0.24.0

data/app/components/primer/beta/nav_list.d.ts

@@ -1,6 +1,9 @@
 export declare class NavListElement extends HTMLElement {
     #private;
     items: HTMLElement[];
+    topLevelList: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     selectItemById(itemId: string | null): boolean;
     selectItemByHref(href: string | null): boolean;
     selectItemByCurrentLocation(): boolean;

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

@@ -1,7 +1,7 @@
 <%= render(Primer::BaseComponent.new(tag: :nav, **@system_arguments)) do %>
   <%= heading %>
   <nav-list>
-    <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul, classes: "ActionListWrap")) do %>
+    <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul, classes: "ActionListWrap", data: { target: "nav-list.topLevelList" })) do %>
       <% items.each_with_index do |item, index| %>
         <% if index > 0 && render_divider_between?(item, items[index - 1]) %>
           <%= render(Primer::Alpha::ActionList::Divider.new) %>

data/app/components/primer/beta/nav_list.js

@@ -4,18 +4,37 @@ 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;
 };
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _NavListElement_instances, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
+var _NavListElement_instances, _NavListElement_truncationObserver, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
 /* eslint-disable custom-elements/expose-class-on-global */
-import { controller, targets } from '@github/catalyst';
+import { controller, target, targets } from '@github/catalyst';
+import { ActionListTruncationObserver } from '../alpha/action_list';
 let NavListElement = class NavListElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _NavListElement_instances.add(this);
+        _NavListElement_truncationObserver.set(this, void 0);
+    }
+    connectedCallback() {
+        // groups are wrapped in <action-list>, which handles resizing on its own
+        if (this.topLevelList) {
+            __classPrivateFieldSet(this, _NavListElement_truncationObserver, new ActionListTruncationObserver(this.topLevelList), "f");
+        }
+    }
+    disconnectedCallback() {
+        if (this.topLevelList) {
+            __classPrivateFieldGet(this, _NavListElement_truncationObserver, "f").unobserve(this.topLevelList);
+        }
     }
     selectItemById(itemId) {
         if (!itemId)
@@ -47,21 +66,19 @@ let NavListElement = class NavListElement extends HTMLElement {
     }
     // expand collapsible item onClick
     expandItem(item) {
-        var _a;
-        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-hidden');
+        item.nextElementSibling?.removeAttribute('data-hidden');
         item.setAttribute('aria-expanded', 'true');
     }
     collapseItem(item) {
-        var _a;
-        (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.setAttribute('data-hidden', '');
+        item.nextElementSibling?.setAttribute('data-hidden', '');
         item.setAttribute('aria-expanded', 'false');
         item.focus();
     }
     itemIsExpanded(item) {
-        if ((item === null || item === void 0 ? void 0 : item.tagName) === 'A') {
+        if (item?.tagName === 'A') {
             return true;
         }
-        return (item === null || item === void 0 ? void 0 : item.getAttribute('aria-expanded')) === 'true';
+        return item?.getAttribute('aria-expanded') === 'true';
     }
     // expand/collapse item
     handleItemWithSubItemClick(e) {
@@ -102,15 +119,15 @@ let NavListElement = class NavListElement extends HTMLElement {
         e.stopPropagation();
     }
 };
+_NavListElement_truncationObserver = new WeakMap();
 _NavListElement_instances = new WeakSet();
 _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
-    var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
         if (navItem.classList.contains('ActionListItem--hasSubItem')) {
             continue;
         }
-        const keys = ((_a = navItem.getAttribute('data-item-id')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
+        const keys = navItem.getAttribute('data-item-id')?.split(' ') || [];
         if (keys.includes(itemId)) {
             return navItem;
         }
@@ -154,10 +171,9 @@ _NavListElement_deselect = function _NavListElement_deselect(navItem) {
     }
 };
 _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
-    var _a;
     if (!navItem.classList.contains('ActionListItem--subItem'))
         return null;
-    const parent = (_a = navItem.closest('li.ActionListItem--hasSubItem')) === null || _a === void 0 ? void 0 : _a.querySelector('button.ActionListContent');
+    const parent = navItem.closest('li.ActionListItem--hasSubItem')?.querySelector('button.ActionListContent');
     if (parent) {
         return parent;
     }
@@ -168,6 +184,9 @@ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem
 __decorate([
     targets
 ], NavListElement.prototype, "items", void 0);
+__decorate([
+    target
+], NavListElement.prototype, "topLevelList", void 0);
 NavListElement = __decorate([
     controller
 ], NavListElement);

data/app/components/primer/beta/nav_list.ts

@@ -1,9 +1,26 @@
 /* eslint-disable custom-elements/expose-class-on-global */
-import {controller, targets} from '@github/catalyst'
+import {controller, target, targets} from '@github/catalyst'
+import {ActionListTruncationObserver} from '../alpha/action_list'
 
 @controller
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
+  @target topLevelList: HTMLElement
+
+  #truncationObserver: ActionListTruncationObserver
+
+  connectedCallback() {
+    // groups are wrapped in <action-list>, which handles resizing on its own
+    if (this.topLevelList) {
+      this.#truncationObserver = new ActionListTruncationObserver(this.topLevelList)
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.topLevelList) {
+      this.#truncationObserver.unobserve(this.topLevelList)
+    }
+  }
 
   selectItemById(itemId: string | null): boolean {
     if (!itemId) return false

data/app/components/primer/beta/nav_list_group_element.js

@@ -9,12 +9,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
+var _NavListGroupElement_instances, _NavListGroupElement_parseHTML, _NavListGroupElement_truncateObserver;
 import { controller, target, targets } from '@github/catalyst';
+import { ActionListTruncationObserver } from '../alpha/action_list';
 let NavListGroupElement = class NavListGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _NavListGroupElement_instances.add(this);
+        _NavListGroupElement_truncateObserver.set(this, new ActionListTruncationObserver(this));
     }
     connectedCallback() {
         this.setShowMoreItemState();
@@ -44,7 +46,6 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
         return this.showMoreItem.getAttribute('src') || '';
     }
     async showMore(e) {
-        var _a, _b;
         e.preventDefault();
         if (this.showMoreDisabled)
             return;
@@ -69,11 +70,11 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
             return;
         }
         const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_parseHTML).call(this, document, html);
-        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list-group.focusMarkers');
+        fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers');
         const listId = e.target.closest('button').getAttribute('data-list-id');
         const list = document.getElementById(listId);
         list.append(fragment);
-        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.focusMarkers.pop()?.focus();
         this.showMoreDisabled = false;
     }
     setShowMoreItemState() {
@@ -88,6 +89,7 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
         }
     }
 };
+_NavListGroupElement_truncateObserver = new WeakMap();
 _NavListGroupElement_instances = new WeakSet();
 _NavListGroupElement_parseHTML = function _NavListGroupElement_parseHTML(document, html) {
     const template = document.createElement('template');

data/app/components/primer/beta/nav_list_group_element.ts

@@ -1,4 +1,5 @@
 import {controller, target, targets} from '@github/catalyst'
+import {ActionListTruncationObserver} from '../alpha/action_list'
 
 @controller
 export class NavListGroupElement extends HTMLElement {
@@ -86,6 +87,8 @@ export class NavListGroupElement extends HTMLElement {
     template.innerHTML = html
     return document.importNode(template.content, true)
   }
+
+  #truncateObserver = new ActionListTruncationObserver(this)
 }
 
 declare global {

data/app/components/primer/beta/popover.css

@@ -1 +1 @@
-.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}
+.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}

data/app/components/primer/beta/popover.css.map

@@ -1 +1 @@
-{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAHzC,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    border: 7px solid transparent;\n    border-bottom-color: var(--overlay-bgColor);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--borderColor-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    border-top-color: var(--overlay-bgColor);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: 20px;\n  }\n\n  &::after {\n    right: 21px;\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: 24px;\n    margin-left: 0;\n  }\n\n  &::after {\n    left: 25px;\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    right: -14px;\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    left: -14px;\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: 24px;\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: 16px;\n  }\n\n  &::after {\n    bottom: 17px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--stack-gap-condensed);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--control-medium-paddingInline-normal) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}
+{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAgCF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n\n  /* adding !important to override utility classes used in dotcom */\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    border: 7px solid transparent;\n    border-bottom-color: var(--overlay-bgColor);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--borderColor-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    border-top-color: var(--overlay-bgColor);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: 20px;\n  }\n\n  &::after {\n    right: 21px;\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: 24px;\n    margin-left: 0;\n  }\n\n  &::after {\n    left: 25px;\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    right: -14px;\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    left: -14px;\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: 24px;\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: 16px;\n  }\n\n  &::after {\n    bottom: 17px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--stack-gap-condensed);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--control-medium-paddingInline-normal) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}

data/app/components/primer/beta/popover.pcss

@@ -14,6 +14,9 @@
   border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
 
+  /* adding !important to override utility classes used in dotcom */
+  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
+
   /* Carets */
   &::before,
   &::after {

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

@@ -54,7 +54,6 @@ module Primer
         @body_arguments[:mt] ||= 2
         @body_arguments[:mx] ||= :auto
         @body_arguments[:text_align] ||= :left
-        @body_arguments[:box_shadow] ||= :large
 
         Primer::Content.new
       }

data/app/components/primer/dialog_helper.js

@@ -11,13 +11,12 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _DialogHelperElement_abortController;
 function dialogInvokerButtonHandler(event) {
-    var _a;
     const target = event.target;
-    const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    const button = target?.closest('button');
     if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
         return;
     // If the user is clicking a valid dialog trigger
-    let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
+    let dialogId = button?.getAttribute('data-show-dialog-id');
     if (dialogId) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
@@ -36,7 +35,7 @@ function dialogInvokerButtonHandler(event) {
             let node = button;
             let fixed = false;
             while (node) {
-                node = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]:not(:popover-open)');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
@@ -93,14 +92,13 @@ export class DialogHelperElement extends HTMLElement {
         }).observe(this, { subtree: true, attributeFilter: ['open'] });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")?.abort();
     }
     handleEvent(event) {
         const target = event.target;
         const dialog = this.dialog;
         // The click target _must_ be the dialog element itself, and not elements underneath or inside.
-        if (target !== dialog || !(dialog === null || dialog === void 0 ? void 0 : dialog.open))
+        if (target !== dialog || !dialog?.open)
             return;
         const rect = dialog.getBoundingClientRect();
         const clickWasInsideDialog = rect.top <= event.clientY &&

data/app/components/primer/focus_group.js

@@ -13,7 +13,7 @@ var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupEl
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
-const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
+const getMnemonicFor = (item) => item.textContent?.trim()[0].toLowerCase();
 const printable = /^\S$/;
 class FocusGroupElement extends HTMLElement {
     constructor() {
@@ -54,26 +54,23 @@ class FocusGroupElement extends HTMLElement {
         this.addEventListener('focusin', this, { signal });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")?.abort();
     }
     handleEvent(event) {
-        var _a;
         const { direction, nowrap } = this;
         if (event.type === 'focusin') {
             if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
-                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.abort();
                 const { signal } = (__classPrivateFieldSet(this, _FocusGroupElement_retainSignal, new AbortController(), "f"));
                 for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
                     item.setAttribute('tabindex', item === event.target ? '0' : '-1');
                     const popover = event.target.closest('[popover]');
-                    if (item === event.target && (popover === null || popover === void 0 ? void 0 : popover.popover) === 'auto' && popover.closest('focus-group') === this) {
+                    if (item === event.target && popover?.popover === 'auto' && popover.closest('focus-group') === this) {
                         popover.addEventListener('toggle', (toggleEvent) => {
-                            var _a, _b;
                             if (!(toggleEvent.target instanceof Element))
                                 return;
                             if (toggleEvent.newState === 'closed') {
-                                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.abort();
                                 item.setAttribute('tabindex', '-1');
                                 if (popover.id) {
                                     const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
@@ -81,7 +78,7 @@ class FocusGroupElement extends HTMLElement {
                                         invoker.setAttribute('tabindex', '0');
                                     }
                                     else {
-                                        (_b = __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+                                        __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]?.setAttribute('tabindex', '0');
                                     }
                                 }
                             }
@@ -146,13 +143,13 @@ class FocusGroupElement extends HTMLElement {
                 let el = focusEl;
                 do {
                     el = el.closest(`[popover]:not(:popover-open)`);
-                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+                    if (el?.popover === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
                         el.showPopover();
                     }
-                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
+                    el = el?.parentElement || null;
                 } while (el);
             }
-            focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+            focusEl?.focus();
         }
     }
 }

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

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{display:flex;justify-content:flex-end;margin:0 0 0 var(--base-size-4,.25rem)}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);padding-bottom:var(--base-size-4,.25rem);width:100%}.PageHeader-backButton{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto;margin-bottom:var(--base-size-4,.25rem)}.PageHeader-contextBarActions{margin:0 0 0 var(--base-size-4,.25rem)}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall,.25rem)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);padding-bottom:var(--base-size-4,.25rem);width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}

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

@@ -8,10 +8,8 @@
     ".PageHeader-title--large",
     ".PageHeader-description",
     ".PageHeader-actions",
-    ".PageHeader-actions+.PageHeader-description",
     ".PageHeader-breadcrumbs",
-    ".PageHeader-backButton",
-    ".PageHeader-parentLink",
-    ".PageHeader-contextBarActions"
+    ".PageHeader-leadingAction",
+    ".PageHeader-parentLink"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAQF,CAHE,4BAPF,YAQI,eAEJ,CADE,CAUF,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAEF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAGA,oBAGE,YAAa,CADb,wBAAyB,CADzB,sCAOF,CAHE,4CACE,oCACF,CAGF,wBACE,aAAc,CAEd,sCAAiC,CACjC,wCAAkC,CAFlC,UAGF,CAEA,uBAEE,sCAAgC,CADhC,cAEF,CAEA,uBACE,aAAc,CACd,uCACF,CAEA,8BACE,sCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: 0 0 0 var(--base-size-4);\n  justify-content: flex-end;\n  display: flex;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--base-size-8);\n  padding-bottom: var(--base-size-4);\n}\n\n.PageHeader-backButton {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n  margin-bottom: var(--base-size-4);\n}\n\n.PageHeader-contextBarActions {\n  margin: 0 0 0 var(--base-size-4);\n}"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAIF,CASA,4CAHE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAUF,CANA,qBAKE,wCACF,CAEA,kBAGE,aAAc,CAFd,+CAAwC,CACxC,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CAEd,sCAAiC,CACjC,wCAAkC,CAFlC,UAGF,CAEA,0BAEE,sCAAgC,CADhC,cAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--space-xsmall);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--base-size-8);\n  padding-bottom: var(--base-size-4);\n}\n\n.PageHeader-leadingAction {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n"]}

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

@@ -3,14 +3,26 @@
     <div class="PageHeader-contextBar">
       <%= parent_link %>
       <%= breadcrumbs %>
-      <%= context_bar_actions %>
+      <% if context_bar_actions.any? %>
+        <%= render Primer::BaseComponent.new(tag: :div, classes: 'PageHeader-contextBarActions', display: DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY, align_items: :center) do %>
+          <% context_bar_actions.each do |action| %>
+            <%= action %>
+          <% end %>
+        <% end %>
+      <% end %>
     </div>
   <% end %>
 
   <div class="PageHeader-titleBar">
-    <%= back_button %>
+    <%= leading_action %>
     <%= title %>
-    <%= actions %>
+    <% if actions.any? %>
+      <div class="PageHeader-actions">
+        <% actions.each do |action| %>
+          <%= action %>
+        <% end %>
+      </div>
+    <% end %>
   </div>
 
   <%= description %>

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

@@ -6,10 +6,6 @@
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: column;
-
-  @media (max-width: 767.98px) {
-    border-bottom: 0;
-  }
 }
 
 .PageHeader-contextBar {
@@ -24,10 +20,11 @@
   flex-flow: row;
   justify-content: flex-end;
   align-items: center; /* Keep back button vertically aligned. */
+  margin-bottom: var(--space-xsmall);
 }
 
 .PageHeader-title {
-  font-size: 24px;
+  font-size: var(--text-title-size-medium);
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
 }
@@ -43,15 +40,10 @@
   flex: 1 100%;
 }
 
-/* Add 1 or 2 buttons to the right of the heading */
 .PageHeader-actions {
-  margin: 0 0 0 var(--base-size-4);
   justify-content: flex-end;
   display: flex;
-
-  & + .PageHeader-description {
-    margin-top: var(--base-size-4);
-  }
+  align-items: center;
 }
 
 .PageHeader-breadcrumbs {
@@ -61,16 +53,11 @@
   padding-bottom: var(--base-size-4);
 }
 
-.PageHeader-backButton {
+.PageHeader-leadingAction {
   margin-top: 2px; /* to center align with label */
   margin-right: var(--base-size-4);
 }
 
 .PageHeader-parentLink {
   flex: 1 1 auto;
-  margin-bottom: var(--base-size-4);
 }
-
-.PageHeader-contextBarActions {
-  margin: 0 0 0 var(--base-size-4);
-}

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

@@ -5,18 +5,11 @@ module Primer
     # A ViewComponent PageHeader inspired by the primer react variant
     class PageHeader < Primer::Component
       HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
-      HEADING_TAG_FALLBACK = :h2
+      HEADING_TAG_FALLBACK = :h1
 
-      DEFAULT_HEADER_VARIANT = :large
+      DEFAULT_HEADER_VARIANT = :medium
       HEADER_VARIANT_OPTIONS = [
-        :medium,
-        DEFAULT_HEADER_VARIANT
-      ].freeze
-
-      DEFAULT_BACK_BUTTON_SIZE = :medium
-      BACK_BUTTON_SIZE_OPTIONS = [
-        :small,
-        DEFAULT_BACK_BUTTON_SIZE,
+        DEFAULT_HEADER_VARIANT,
         :large
       ].freeze
 
@@ -27,10 +20,10 @@ module Primer
         "triangle-left"
       ].freeze
 
-      DEFAULT_BACK_BUTTON_DISPLAY = [:none, :flex].freeze
+      DEFAULT_LEADING_ACTION_DISPLAY = [:none, :flex].freeze
       DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
       DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
-      DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY = [:block, :none].freeze
+      DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY = [:flex, :none].freeze
 
       status :open_project
 
@@ -61,10 +54,10 @@ module Primer
       # Actions
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :actions, lambda { |**system_arguments|
+      renders_many :actions, lambda { |**system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :div
-        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-actions")
+        system_arguments[:ml] ||= 2
 
         Primer::BaseComponent.new(**system_arguments)
       }
@@ -73,35 +66,31 @@ module Primer
       # By default shown on narrow screens. Can be overridden with system_argument: display
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :context_bar_actions, lambda { |**system_arguments|
+      renders_many :context_bar_actions, lambda { |**system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :div
-        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-contextBarActions")
-        system_arguments[:display] ||= DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY
+        system_arguments[:ml] ||= 2
 
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # Optional back button prepend the title
+      # Optional leading action prepend the title
       # By default shown on wider screens. Can be overridden with system_argument: display
       #
-      # @param size [Symbol] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_SIZE_OPTIONS) %>
-      # @param icon [String] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_ICON_OPTIONS) %>
+      # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :back_button, lambda { |
-        size: DEFAULT_BACK_BUTTON_SIZE,
-        icon: DEFAULT_BACK_BUTTON_ICON,
+      renders_one :leading_action, lambda { |
+        icon:,
         **system_arguments
       |
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :a
         system_arguments[:scheme] = :invisible
-        system_arguments[:size] = fetch_or_fallback(BACK_BUTTON_SIZE_OPTIONS, size, DEFAULT_BACK_BUTTON_SIZE)
-        system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
-        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
-        system_arguments[:display] ||= DEFAULT_BACK_BUTTON_DISPLAY
+        system_arguments[:icon] = icon
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-leadingAction")
+        system_arguments[:display] ||= DEFAULT_LEADING_ACTION_DISPLAY
 
-        Primer::Beta::IconButton.new(**system_arguments)
+        Primer::Beta::IconButton.new(icon: icon, **system_arguments)
       }
 
       # Optional parent link in the context area

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

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.js

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.ts

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element'
+import './alpha/action_list'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'