openproject-primer_view_components 0.24.0 → 0.25.0

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

@@ -21,9 +21,7 @@ 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 = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -69,6 +67,8 @@ class ToolTipElement extends HTMLElement {
   styles() {
     return `
       :host {
+        --tooltip-top: var(--tool-tip-position-top, 0);
+        --tooltip-left: var(--tool-tip-position-left, 0);
         padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
         font: var(--text-body-shorthand-small);
         color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
@@ -87,27 +87,29 @@ class ToolTipElement extends HTMLElement {
         word-wrap: break-word;
         white-space: normal;
         width: max-content !important;
-        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        inset: var(--tooltip-top) auto auto var(--tooltip-left) !important;
         overflow: visible !important;
         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;
+      :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) {
+        --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem));
+        --tooltip-left: var(--tool-tip-position-left);
       }
 
-      @keyframes tooltip-appear {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
+      :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) {
+        --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem));
+        --tooltip-left: var(--tool-tip-position-left);
+      }
+
+      :host(.tooltip-w) {
+        --tooltip-top: var(--tool-tip-position-top);
+        --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem));
+      }
+
+      :host(.tooltip-e) {
+        --tooltip-top: var(--tool-tip-position-top);
+        --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem));
       }
 
       :host:after{
@@ -119,73 +121,40 @@ class ToolTipElement extends HTMLElement {
         content: "";
       }
 
-      :host(:popover-open),
-      :host(:popover-open):before {
-        animation-name: tooltip-appear;
-        animation-duration: .1s;
-        animation-fill-mode: forwards;
-        animation-timing-function: ease-in;
-      }
-
-      :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;
+
+      @keyframes tooltip-appear {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
-      :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(:popover-open),
+      :host(:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
       }
-      :host(.tooltip-e):before {
-        top: 50%;
-        right: 100%;
-        bottom: 50%;
-        margin-top: -6px;
-        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+
+      :host(.\\:popover-open) {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
       }
 
       @media (forced-colors: active) {
@@ -398,25 +367,25 @@ class ToolTipElement extends HTMLElement {
       this.#align = 'center'
       this.#side = 'outside-top'
     } else if (direction === 'ne') {
-      this.#align = 'start'
+      this.#align = 'end'
       this.#side = 'outside-top'
     } else if (direction === 'e') {
       this.#align = 'center'
       this.#side = 'outside-right'
     } else if (direction === 'se') {
-      this.#align = 'start'
+      this.#align = 'end'
       this.#side = 'outside-bottom'
     } else if (direction === 's') {
       this.#align = 'center'
       this.#side = 'outside-bottom'
     } else if (direction === 'sw') {
-      this.#align = 'end'
+      this.#align = 'start'
       this.#side = 'outside-bottom'
     } else if (direction === 'w') {
       this.#align = 'center'
       this.#side = 'outside-left'
     } else if (direction === 'nw') {
-      this.#align = 'end'
+      this.#align = 'start'
       this.#side = 'outside-top'
     }
   }
@@ -428,7 +397,7 @@ class ToolTipElement extends HTMLElement {
     const position = getAnchoredPosition(this, this.control, {
       side: this.#side,
       align: this.#align,
-      anchorOffset: TOOLTIP_OFFSET,
+      anchorOffset: 0,
     })
     const anchorSide = position.anchorSide
     const align = position.anchorAlign

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

@@ -1 +1 @@
-.flash:not(.Banner){background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-color:var(--bgColor-danger-muted,var(--color-danger-subtle));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-color:var(--bgColor-success-muted,var(--color-success-subtle));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
+.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}

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

@@ -1 +1 @@
-{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uEAA6C,CAC7C,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,6EAAgD,CAChD,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,yEAA8C,CAC9C,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n\n  & .octicon {\n    color: var(--fgColor-accent);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  margin-top: calc(var(--base-size-4) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-attention-muted);\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-danger-muted);\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-success-muted);\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}
+{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border-color: var(--borderColor-accent-muted);\n\n  & .octicon {\n    color: var(--fgColor-accent);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  margin-top: calc(var(--base-size-4) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}

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

@@ -10,7 +10,7 @@
 
   /* Default color */
   color: var(--fgColor-default);
-  background-color: var(--bgColor-accent-muted);
+  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
   border-color: var(--borderColor-accent-muted);
 
   & .octicon {
@@ -78,7 +78,7 @@
 
 .flash-warn:not(.Banner) {
   color: var(--fgColor-default);
-  background-color: var(--bgColor-attention-muted);
+  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
   border-color: var(--borderColor-attention-muted);
 
   & .octicon {
@@ -88,7 +88,7 @@
 
 .flash-error:not(.Banner) {
   color: var(--fgColor-default);
-  background-color: var(--bgColor-danger-muted);
+  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
   border-color: var(--borderColor-danger-muted);
 
   & .octicon {
@@ -98,7 +98,7 @@
 
 .flash-success:not(.Banner) {
   color: var(--fgColor-default);
-  background-color: var(--bgColor-success-muted);
+  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
   border-color: var(--borderColor-success-muted);
 
   & .octicon {

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)}.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}
+.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}@media (max-width:543.98px){.PageHeader--singleAction .PageHeader-action{display:flex!important;position:absolute;top:10px}}.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,6 +8,7 @@
     ".PageHeader-title--large",
     ".PageHeader-description",
     ".PageHeader-actions",
+    ".PageHeader--singleAction .PageHeader-action",
     ".PageHeader-breadcrumbs",
     ".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,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"]}
+{"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,CAGE,4BADF,6CAMI,sBAAwB,CAJxB,iBAAkB,CAClB,QAKJ,CADE,CAGF,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--singleAction .PageHeader-action {\n  @media (max-width: 543.98px) {\n    position: absolute;\n    top: 10px;\n\n    /* Normally, the actions are hidden on mobile, except for this special case of a single action */\n    display: flex !important;\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-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

@@ -1,13 +1,12 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if parent_link || breadcrumbs || context_bar_actions %>
+  <% if @parent_link || breadcrumbs || actions.any? %>
     <div class="PageHeader-contextBar">
-      <%= parent_link %>
+      <%= @parent_link %>
       <%= breadcrumbs %>
-      <% 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 %>
+      <% if render_mobile_menu? %>
+        <%= render(@mobile_action_menu) do |menu| %>
+          <% menu.with_show_button(icon: :"kebab-horizontal", "aria-label": @mobile_menu_label) %>
+          <% @desktop_menu_block.call(menu) unless @desktop_menu_block.nil? %>
         <% end %>
       <% end %>
     </div>

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

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

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

@@ -20,10 +20,12 @@ module Primer
         "triangle-left"
       ].freeze
 
+      DEFAULT_ACTION_SCHEME = :default
+      MORE_MENU_DISPLAY = [:flex, :none].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 = [:flex, :none].freeze
 
       status :open_project
 
@@ -54,24 +56,50 @@ module Primer
       # Actions
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :actions, lambda { |**system_arguments|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:tag] = :div
-        system_arguments[:ml] ||= 2
+      renders_many :actions, types: {
+        icon_button: lambda { |icon:, mobile_icon:, label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, label, scheme)
 
-        Primer::BaseComponent.new(**system_arguments)
-      }
+          Primer::Beta::IconButton.new(icon: icon, "aria-label": label, **system_arguments)
+        },
+        button: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
 
-      # Context Bar Actions
-      # By default shown on narrow screens. Can be overridden with system_argument: display
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :context_bar_actions, lambda { |**system_arguments|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:tag] = :div
-        system_arguments[:ml] ||= 2
+          Primer::Beta::Button.new(**system_arguments)
+        },
+        link: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
 
-        Primer::BaseComponent.new(**system_arguments)
+          Primer::Beta::Link.new(**system_arguments)
+        },
+        # Should only be used rarely on a per-need basis
+        text: lambda { |**system_arguments|
+          system_arguments = set_action_arguments(system_arguments)
+
+          system_arguments[:color] ||= :muted
+
+          # Enforce that texts are hidden on mobile
+          system_arguments[:display] = [:none, :flex]
+
+          Primer::Beta::Text.new(**system_arguments)
+        },
+        menu: {
+          renders: lambda { |**system_arguments, &block|
+            deny_tag_argument(**system_arguments)
+            system_arguments[:menu_arguments] = set_action_arguments(system_arguments[:menu_arguments])
+
+            # Add the options individually to the mobile menu in the template
+            @desktop_menu_block = block
+
+            PageHeaderActionMenu.new(**system_arguments)
+          },
+        },
       }
 
       # Optional leading action prepend the title
@@ -93,21 +121,6 @@ module Primer
         Primer::Beta::IconButton.new(icon: icon, **system_arguments)
       }
 
-      # Optional parent link in the context area
-      # By default shown on narrow screens. Can be overridden with system_argument: display
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :parent_link, lambda { |icon: DEFAULT_BACK_BUTTON_ICON, **system_arguments, &block|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
-        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-parentLink")
-        system_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
-
-        render(Primer::Beta::Link.new(scheme: :primary, muted: true, **system_arguments)) do
-          render(Primer::Beta::Octicon.new(icon: "arrow-left", "aria-label": "aria_label", mr: 2)) + content_tag(:span, &block)
-        end
-      }
-
       # Optional breadcrumbs above the title row
       # By default shown on wider screens. Can be overridden with system_argument: display
       #
@@ -117,6 +130,25 @@ module Primer
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
 
+        # show parent link if there is a parent for current page
+        if items.length > 1
+          link_arguments = {}
+          parent_item = items[items.length - 2]
+          parsed_parent_item = anchor_tag_string?(parent_item) ? anchor_string_to_object(parent_item) : parent_item
+
+          link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
+          link_arguments[:href] = parsed_parent_item[:href]
+          link_arguments[:classes] = class_names(link_arguments[:classes], "PageHeader-parentLink")
+          link_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
+
+          @parent_link = render(Primer::Beta::Link.new(scheme: :primary, muted: true, **link_arguments)) do
+            render(Primer::Beta::Octicon.new(icon: "arrow-left",
+                                             "aria-label": I18n.t("button_back"),
+                                             mr: 2)
+            ) + content_tag(:span, parsed_parent_item[:text])
+          end
+        end
+
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
             item = anchor_string_to_object(item) if anchor_tag_string?(item)
@@ -130,23 +162,83 @@ module Primer
         end
       }
 
-      def initialize(**system_arguments)
+      # @param mobile_menu_label [String] The tooltip label of the mobile menu
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
+        @mobile_menu_label = mobile_menu_label
 
-        @system_arguments[:tag] = :header
+        @system_arguments[:tag] = :"page-header"
         @system_arguments[:classes] =
           class_names(
             @system_arguments[:classes],
             "PageHeader"
           )
+
+        @mobile_action_menu = Primer::Alpha::ActionMenu.new(
+          display: MORE_MENU_DISPLAY,
+          anchor_align: :end
+        )
       end
 
       def render?
-        title?
+        raise ArgumentError, "PageHeader needs a title and a breadcrumb. Please use the `with_title` and `with_breadcrumbs` slot" unless breadcrumbs? || Rails.env.production?
+        title? && breadcrumbs?
+      end
+
+      def before_render
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "PageHeader--singleAction": !render_mobile_menu?
+        )
+
+        content
+      end
+
+      def render_mobile_menu?
+        actions.count > 1
       end
 
       private
 
+      def set_action_arguments(system_arguments, scheme: nil)
+        system_arguments[:ml] ||= 2
+        system_arguments[:display] = [:none, :flex]
+        system_arguments[:scheme] = scheme unless scheme.nil?
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "PageHeader-action",
+        )
+
+        system_arguments[:id] ||= self.class.generate_id
+        system_arguments
+      end
+
+      def add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
+        unless mobile_icon.nil? || mobile_label.nil?
+          # In action menus, only :default and :danger are allowed
+          scheme = DEFAULT_ACTION_SCHEME unless scheme == :danger
+
+          with_menu_item(id: system_arguments[:id], label: mobile_label, scheme: scheme) do |c|
+            c.with_leading_visual_icon(icon: mobile_icon)
+          end
+        end
+      end
+
+      def with_menu_item(id:, **system_arguments, &block)
+        system_arguments = {
+          **system_arguments,
+          "data-for": id,
+          "data-action": "click:page-header#menuItemClick"
+        }
+
+        @mobile_action_menu.with_item(
+          value: "",
+          **system_arguments,
+          &block
+        )
+      end
+
       # transform anchor tag strings to {href, text} objects
       # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
       def anchor_string_to_object(html_string)
@@ -161,6 +253,32 @@ module Primer
       def anchor_tag_string?(item)
         item.is_a?(String) && item.start_with?("\u003c")
       end
+
+      # A Helper class to create ActionMenus inside the PageHeader action slot
+      class PageHeaderActionMenu < Primer::Component
+        status :open_project
+
+        # @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
+        # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
+        def initialize(menu_arguments: {}, button_arguments: {})
+          @menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
+          @button = @menu.with_show_button(icon: "triangle-down", **button_arguments)
+        end
+
+        def render_in(view_context, &block)
+          super(view_context) do
+            block.call(@menu, @button)
+          end
+        end
+
+        def before_render
+          content
+        end
+
+        def call
+          render(@menu)
+        end
+      end
     end
   end
 end

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

@@ -0,0 +1,9 @@
+declare class PageHeaderElement extends HTMLElement {
+    menuItemClick(event: Event): void;
+}
+declare global {
+    interface Window {
+        PageHeaderElement: typeof PageHeaderElement;
+    }
+}
+export {};

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

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller } from '@github/catalyst';
+let PageHeaderElement = class PageHeaderElement extends HTMLElement {
+    menuItemClick(event) {
+        const currentTarget = event.currentTarget;
+        const id = currentTarget?.getAttribute('data-for');
+        if (id) {
+            document.getElementById(id)?.click();
+        }
+    }
+};
+PageHeaderElement = __decorate([
+    controller
+], PageHeaderElement);
+if (!window.customElements.get('page-header')) {
+    window.PageHeaderElement = PageHeaderElement;
+    window.customElements.define('page-header', PageHeaderElement);
+}

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

@@ -0,0 +1,25 @@
+import {controller} from '@github/catalyst'
+
+@controller
+class PageHeaderElement extends HTMLElement {
+  menuItemClick(event: Event) {
+    const currentTarget = event.currentTarget as HTMLButtonElement
+
+    const id = currentTarget?.getAttribute('data-for')
+
+    if (id) {
+      document.getElementById(id)?.click()
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    PageHeaderElement: typeof PageHeaderElement
+  }
+}
+
+if (!window.customElements.get('page-header')) {
+  window.PageHeaderElement = PageHeaderElement
+  window.customElements.define('page-header', PageHeaderElement)
+}

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

@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './open_project/page_header_element';

data/app/components/primer/primer.js

@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './open_project/page_header_element';