openproject-primer_view_components 0.13.0 → 0.14.0

data/app/components/primer/alpha/action_bar_element.js

@@ -101,6 +101,8 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
 };
 _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_isVisible = function _ActionBarElement_isVisible(element) {
     // Safari doesn't support `checkVisibility` yet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     if (typeof element.checkVisibility === 'function')
         return element.checkVisibility();
     return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight);

data/app/components/primer/alpha/action_bar_element.ts

@@ -93,6 +93,8 @@ class ActionBarElement extends HTMLElement {
 
   #isVisible(element: HTMLElement): boolean {
     // Safari doesn't support `checkVisibility` yet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     if (typeof element.checkVisibility === 'function') return element.checkVisibility()
 
     return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -15,7 +15,7 @@ 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 _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_items_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isKeyboardActivationViaEnter, _ActionMenuElement_isKeyboardActivationViaSpace, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_items_get;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
@@ -109,7 +109,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a;
+        var _a, _b;
         const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
         const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
         if (targetIsInvoker && event.type === 'mousedown') {
@@ -151,6 +151,16 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             }
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, event, item);
+            // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
+            // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
+            // form submission. The code below therefore only calls preventDefault() if the button has been
+            // activated by the space key, and manually submits the form if the button is a submit button.
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
+                event.preventDefault();
+                if (item.getAttribute('type') === 'submit') {
+                    (_b = item.closest('form')) === null || _b === void 0 ? void 0 : _b.submit();
+                }
+            }
             return;
         }
         if (event.type === 'include-fragment-replaced') {
@@ -176,10 +186,17 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
         event.stopImmediatePropagation();
     }
 }, _ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
+    return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaEnter).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event);
+}, _ActionMenuElement_isKeyboardActivationViaEnter = function _ActionMenuElement_isKeyboardActivationViaEnter(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter');
+}, _ActionMenuElement_isKeyboardActivationViaSpace = function _ActionMenuElement_isKeyboardActivationViaSpace(event) {
     return (event instanceof KeyboardEvent &&
         event.type === 'keydown' &&
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        (event.key === 'Enter' || event.key === ' '));
+        event.key === ' ');
 }, _ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
     return event instanceof MouseEvent && event.type === 'click';
 }, _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -134,11 +134,24 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #isKeyboardActivation(event: Event): boolean {
+    return this.#isKeyboardActivationViaEnter(event) || this.#isKeyboardActivationViaSpace(event)
+  }
+
+  #isKeyboardActivationViaEnter(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === 'Enter'
+    )
+  }
+
+  #isKeyboardActivationViaSpace(event: Event): boolean {
     return (
       event instanceof KeyboardEvent &&
       event.type === 'keydown' &&
       !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-      (event.key === 'Enter' || event.key === ' ')
+      event.key === ' '
     )
   }
 
@@ -202,6 +215,19 @@ export class ActionMenuElement extends HTMLElement {
 
       this.#activateItem(event, item)
       this.#handleItemActivated(event, item)
+
+      // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
+      // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
+      // form submission. The code below therefore only calls preventDefault() if the button has been
+      // activated by the space key, and manually submits the form if the button is a submit button.
+      if (this.#isKeyboardActivationViaSpace(event)) {
+        event.preventDefault()
+
+        if (item.getAttribute('type') === 'submit') {
+          item.closest('form')?.submit()
+        }
+      }
+
       return
     }
 

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

@@ -1 +1 @@
-anchored-position[popover]{background:none;border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}
+anchored-position[popover]{background:none;border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}

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

@@ -3,7 +3,6 @@
   "selectors": [
     "anchored-position[popover]",
     ".Overlay",
-    "anchored-position[popover]:not(.\\:popover-open)",
     "anchored-position.not-anchored::-webkit-backdrop",
     "anchored-position.not-anchored::backdrop"
   ]

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

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BAOE,eAAgB,CANhB,cAAe,CAIf,UAAW,CADX,eAAgB,CAEhB,gBAAiB,CAJjB,SAAU,CACV,iBAKF,CAEA,SACE,YACF,CAEA,gDACE,YACF,CAEA,iDACE,2EACF,CAFA,yCACE,2EACF,CAGA,kCACE,gDACE,cACF,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n  overflow: visible;\n  background: none;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\nanchored-position.not-anchored::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BAME,eAAgB,CALhB,cAAe,CAGf,eAAgB,CAChB,gBAAiB,CAHjB,SAAU,CACV,iBAIF,CAEA,SACE,YACF,CAEA,iDACE,2EACF,CAFA,yCACE,2EACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  overflow: visible;\n  background: none;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position.not-anchored::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n"]}

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

@@ -3,7 +3,6 @@ anchored-position[popover] {
   padding: 0;
   position: absolute;
   min-width: 192px;
-  inset: auto;
   overflow: visible;
   background: none;
 }
@@ -12,17 +11,6 @@ anchored-position[popover] {
   display: flex;
 }
 
-anchored-position[popover]:not(.\:popover-open) {
-  display: none;
-}
-
 anchored-position.not-anchored::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
-
-/* This reverts the declaration above for native popover, where `:popover-open` is supported */
-@supports selector(:popover-open) {
-  anchored-position[popover]:not(.\:popover-open) {
-    display: revert;
-  }
-}

data/app/components/primer/alpha/tool_tip.js

@@ -32,8 +32,9 @@ const isPopoverOpen = (() => {
     }
     return (el) => (selector ? el.matches(selector) : setSelector(el));
 })();
+const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
-const TOOLTIP_OFFSET = 4;
+const TOOLTIP_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -106,15 +107,33 @@ class ToolTipElement extends HTMLElement {
         text-wrap: balance;
       }
 
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0;
+      }
+
       @keyframes tooltip-appear {
         from {
           opacity: 0;
         }
         to {
-          opacity: 1
+          opacity: 1;
         }
       }
 
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: "";
+      }
+
       :host(:popover-open),
       :host(:popover-open):before {
         animation-name: tooltip-appear;
@@ -123,11 +142,65 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
       }
 
-      :host(.\\:popover-open) {
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in;
+        animation-delay: .4s;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%;
+      }
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
     `;
     }

data/app/components/primer/alpha/tool_tip.ts

@@ -21,8 +21,9 @@ const isPopoverOpen = (() => {
   return (el: Element) => (selector ? el.matches(selector) : setSelector(el))
 })()
 
+const TOOLTIP_ARROW_EDGE_OFFSET = 6
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
-const TOOLTIP_OFFSET = 4
+const TOOLTIP_OFFSET = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -91,15 +92,33 @@ class ToolTipElement extends HTMLElement {
         text-wrap: balance;
       }
 
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0;
+      }
+
       @keyframes tooltip-appear {
         from {
           opacity: 0;
         }
         to {
-          opacity: 1
+          opacity: 1;
         }
       }
 
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: "";
+      }
+
       :host(:popover-open),
       :host(:popover-open):before {
         animation-name: tooltip-appear;
@@ -108,11 +127,65 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
       }
 
-      :host(.\\:popover-open) {
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in;
+        animation-delay: .4s;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%;
+      }
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
     `
   }

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:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.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);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top: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)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.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{justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) 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);width:100%}.PageHeader-backButton{margin-right:var(--base-size-4,.25rem);margin-top:2px}

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

@@ -2,10 +2,13 @@
   "name": "open_project/page_header",
   "selectors": [
     ".PageHeader",
+    ".PageHeader-titleBar",
     ".PageHeader-title",
     ".PageHeader-title--large",
     ".PageHeader-description",
     ".PageHeader-actions",
-    ".PageHeader-actions+.PageHeader-description"
+    ".PageHeader-actions+.PageHeader-description",
+    ".PageHeader-breadcrumbs",
+    ".PageHeader-backButton"
   ]
 }

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,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDASF,CAHE,4BARF,YASI,eAEJ,CADE,CAGF,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","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: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\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  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAQF,CAHE,4BAPF,YAQI,eAEJ,CADE,CAGF,qBAIE,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,oBAEE,wBAAyB,CADzB,sFAMF,CAHE,4CACE,oCACF,CAGF,wBACE,aAAc,CAEd,sCAAiC,CADjC,UAEF,CAEA,uBAEE,sCAAgC,CADhC,cAEF","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-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: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  justify-content: flex-end;\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}\n\n.PageHeader-backButton {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n"]}

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

@@ -1,5 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= title %>
+  <%= breadcrumbs %>
+  <div class="PageHeader-titleBar">
+    <%= back_button %>
+    <%= title %>
+    <%= actions %>
+  </div>
   <%= description %>
-  <%= actions %>
 <% end %>

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

@@ -5,19 +5,24 @@
   padding-bottom: var(--stack-padding-condensed);
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
-  flex-flow: row wrap;
-  justify-content: flex-end; /* Keep actions right aligned. */
+  flex-flow: column;
 
   @media (max-width: 767.98px) {
     border-bottom: 0;
   }
 }
 
+.PageHeader-titleBar {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  align-items: center; /* Keep back button vertically aligned. */
+}
+
 .PageHeader-title {
   font-size: 24px;
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
-  order: 0;
 }
 
 .PageHeader-title--large {
@@ -29,17 +34,25 @@
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
   flex: 1 100%;
-  order: 2;
 }
 
 /* Add 1 or 2 buttons to the right of the heading */
 .PageHeader-actions {
   margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
-  align-self: center;
   justify-content: flex-end;
-  order: 1;
 
   & + .PageHeader-description {
     margin-top: var(--base-size-4);
   }
 }
+
+.PageHeader-breadcrumbs {
+  display: block;
+  width: 100%;
+  margin-bottom: var(--base-size-8);
+}
+
+.PageHeader-backButton {
+  margin-top: 2px; /* to center align with label */
+  margin-right: var(--base-size-4);
+}

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

@@ -13,6 +13,20 @@ module Primer
         DEFAULT_HEADER_VARIANT
       ].freeze
 
+      DEFAULT_BACK_BUTTON_SIZE = :medium
+      BACK_BUTTON_SIZE_OPTIONS = [
+        :small,
+        DEFAULT_HEADER_VARIANT,
+        :large
+      ].freeze
+
+      DEFAULT_BACK_BUTTON_ICON = "arrow-left"
+      BACK_BUTTON_ICON_OPTIONS = [
+        DEFAULT_BACK_BUTTON_ICON,
+        "chevron-left",
+        "triangle-left"
+      ].freeze
+
       status :open_project
 
       # The title of the page header
@@ -50,6 +64,45 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # Optional back button prepend the title
+      #
+      # @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 system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :back_button, lambda { |
+        size: DEFAULT_BACK_BUTTON_SIZE,
+        icon: DEFAULT_BACK_BUTTON_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")
+
+        Primer::Beta::IconButton.new(**system_arguments)
+      }
+
+      # Optional breadcrumbs above the title row
+      #
+      # @param items [Array<String, Hash>] Items is an array of strings, hash {href, text} or an anchor tag string
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :breadcrumbs, lambda { |items, **system_arguments|
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
+        render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
+          items.each do |item|
+            item = anchor_string_to_object(item) if anchor_tag_string?(item)
+
+            if item.is_a?(String)
+              breadcrumbs.with_item(href: "#") { item }
+            else
+              breadcrumbs.with_item(href: item[:href]) { item[:text] }
+            end
+          end
+        end
+      }
+
       def initialize(**system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
 
@@ -64,6 +117,23 @@ module Primer
       def render?
         title?
       end
+
+      private
+
+      # transform anchor tag strings to {href, text} objects
+      # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+      def anchor_string_to_object(html_string)
+        # Parse the HTML
+        doc = Nokogiri::HTML.fragment(html_string)
+        # Extract href and text
+        anchor = doc.at("a")
+        { href: anchor["href"], text: anchor.text }
+      end
+
+      # Check if the item is an anchor tag string e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+      def anchor_tag_string?(item)
+        item.is_a?(String) && item.start_with?("\u003c")
+      end
     end
   end
 end

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

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

data/app/components/primer/primer.js

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

data/app/components/primer/primer.pcss

@@ -1,5 +1,3 @@
-@import "@oddbird/popover-polyfill/dist/popover.css";
-
 /* CSS component styles here */
 
 /* alpha */

data/app/components/primer/primer.ts

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

data/lib/primer/accessibility.rb

@@ -8,9 +8,7 @@ module Primer
     # Do not add to this list for any other reason!
     IGNORED_PREVIEWS = [
       Primer::Beta::MarkdownPreview,
-      Primer::Beta::AutoCompleteItemPreview,
-      Primer::Alpha::RadioButtonPreview,
-      Primer::Alpha::CheckBoxPreview
+      Primer::Beta::AutoCompleteItemPreview
     ].freeze
 
     # Skip `:region` which relates to preview page structure rather than individual component.

data/lib/primer/static/generate_info_arch.rb

@@ -70,10 +70,15 @@ module Primer
                 render_erb_ignoring_markdown_code_fences(docs.base_docstring)
               end
 
+            accessibility_docs =
+              if (accessibility_tag_text = docs.tags(:accessibility)&.first&.text)
+                render_erb_ignoring_markdown_code_fences(accessibility_tag_text)
+              end
+
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
-              "accessibility_docs" => docs.tags(:accessibility)&.first&.text,
+              "accessibility_docs" => accessibility_docs,
               "is_form_component" => docs.manifest_entry.form_component?,
               "is_published" => docs.manifest_entry.published?,
               "requires_js" => docs.manifest_entry.requires_js?,

data/lib/primer/view_components/version.rb

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