primer_view_components 0.0.111 → 0.0.112

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

@@ -0,0 +1,284 @@
+/* BorderBox */
+
+/* TODO: Rename to BorderBox to match PVC */
+.Box {
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+/* Box padding density options */
+.Box--condensed {
+  line-height: 1.25;
+
+  & .Box-header {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+      line-height: 1.25;
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+}
+
+.Box--spacious {
+  & .Box-header {
+    padding: var(--primer-stack-padding-spacious, 24px);
+    line-height: 1.25;
+  }
+
+  & .Box-title {
+    font-size: var(--primer-text-title-size-medium, 20px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-stack-padding-spacious, 24px);
+      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+}
+
+.Box-header {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+  border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+.Box-title {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.Box-body {
+  padding: var(--primer-stack-padding-normal, 16px);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+
+  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+  &:last-of-type {
+    margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+}
+
+/* Box rows */
+.Box-row {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--color-border-muted);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+
+  &:first-of-type {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  /* Adds a blue vertical line to the left of the row
+  ** For indicating a row item is unread */
+  &.Box-row--unread,
+  /* .unread to be deprecated with .Box-row-unread */
+  &.unread {
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+  }
+
+  &.navigation-focus {
+    /* Focus styles for when drag icon */
+    & .Box-row--drag-button {
+      color: var(--color-accent-fg);
+      cursor: grab;
+      opacity: 100;
+    }
+
+    /* Grabbing while row is dragged */
+    &.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+    /* Row dragging styles */
+    &.sortable-chosen {
+      background-color: var(--color-canvas-subtle);
+    }
+
+    /* Makes dragging row background gray */
+    &.sortable-ghost {
+      background-color: var(--color-canvas-subtle);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+      & .Box-row--drag-hide {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.Box-row--focus-gray {
+  &.navigation-focus {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--focus-blue {
+  &.navigation-focus {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+.Box-row--hover-gray {
+  &:hover {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--hover-blue {
+  &:hover {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+/* Optional link style
+** Makes links on mobile blue since they don't have hover state,
+** and links are dark-gray with blue hover on desktop. */
+.Box-row-link {
+  @media (min-width: 768px) {
+    color: var(--color-fg-default);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-accent-fg);
+      text-decoration: none;
+    }
+  }
+}
+
+/* Optional drag icon styles for reordering items
+** Focus styles included in .Box-row above */
+.Box-row--drag-button {
+  opacity: 0;
+}
+
+.Box-footer {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--color-border-default);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
+}
+
+/* Option for a box with scrolling content */
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+/* Box themes */
+
+.Box--blue {
+  border-color: var(--color-accent-muted);
+
+  & .Box-header {
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-body {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-row {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-footer {
+    border-color: var(--color-accent-muted);
+  }
+}
+
+/* Applies and red border to the outside of the box,
+** but not to the border separating rows. */
+.Box--danger {
+  border-color: var(--color-danger-emphasis);
+
+  & .Box-row {
+    &:first-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+
+  & .Box-body {
+    &:last-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+}
+
+.Box-header--blue {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
+}
+
+/* Box row highlight themes */
+
+.Box-row--yellow {
+  background-color: var(--color-attention-subtle);
+}
+
+.Box-row--blue {
+  background-color: var(--color-accent-subtle);
+}
+
+.Box-row--gray {
+  background-color: var(--color-canvas-subtle);
+}
+
+/* Box with btn-octicon */
+.Box-btn-octicon {
+  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+  &.btn-octicon {
+    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);
+    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+    line-height: 1.5; /* override btn-octicon line-height */
+  }
+}

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

@@ -0,0 +1 @@
+.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

data/app/components/primer/beta/link.css.json

@@ -0,0 +1 @@
+{"name":"beta/link","selectors":[".Link",".Link:hover",".Link:focus",".Link:focus-visible",".Link--primary",".Link--primary:hover",".Link--secondary",".Link--secondary:hover",".Link--muted",".Link--muted:hover",".Link--onHover:hover",".Link--muted:hover [class*=color-fg]",".Link--primary:hover [class*=color-fg]",".Link--secondary:hover [class*=color-fg]"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,4BAWF,CATE,YAEE,cAAe,CADf,yBAEF,CAEA,gCAEE,gBACF,CAGF,eACE,uCAKF,CAHE,qBACE,sCACF,CAGF,iBACE,qCAKF,CAHE,uBACE,sCACF,CAGF,aACE,qCAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,sCAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--color-accent-fg);\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--primary {\n  color: var(--color-fg-default) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}

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

@@ -0,0 +1,60 @@
+/* Links */
+
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+.Link--primary {
+  color: var(--color-fg-default) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--secondary {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--muted {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: none;
+  }
+}
+
+/* Set the link color only on hover
+   Useful when you want only part of a link to turn blue on hover */
+.Link--onHover {
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+/* When using a color utility class inside of a link class
+   color should change with link on hover. */
+.Link--secondary,
+.Link--primary,
+.Link--muted {
+  &:hover [class*='color-fg'] {
+    color: inherit !important;
+  }
+}

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

@@ -0,0 +1 @@
+{"name":"beta/popover","selectors":[".Popover",".Popover-message",".Popover-message:after",".Popover-message:before",".Popover-message--no-caret:after",".Popover-message--no-caret:before",".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",".Popover-message--bottom-right",".Popover-message--top-right",".Popover-message--top-right:after",".Popover-message--top-right:before",".Popover-message--bottom-left",".Popover-message--top-left",".Popover-message--top-left:after",".Popover-message--top-left:before",".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",".Popover-message--large",".Popover-message>.btn-octicon"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,4CAA6C,CAD7C,YAEF,CAEA,wGAEE,4CAA6C,CAD7C,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,6CAA8C,CAD9C,WAEF,CAEA,qGAEE,6CAA8C,CAD9C,WAEF,CAOA,qGAEE,8CAA+C,CAD/C,UAEF,CAEA,kGAEE,8CAA+C,CAD/C,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,4CAA8C,CAJ9C,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,wEACF,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(--color-canvas-overlay);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\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(--color-border-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    border: 7px solid transparent;\n    border-bottom-color: var(--color-canvas-overlay);\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(--color-border-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    border-top-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Top & 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 & 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- & 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(--color-border-default);\n  }\n\n  &::after {\n    right: -14px;\n    border-left-color: var(--color-canvas-overlay);\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(--color-border-default);\n  }\n\n  &::after {\n    left: -14px;\n    border-right-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Right & 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 & 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(--primer-stack-gap-condensed, 8px);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--primer-control-medium-paddingInline-normal, 12px) !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.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+    #
+    # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
+    class Popover < Primer::Component
+      status :beta
+
+      CARET_DEFAULT = :top
+      CARET_MAPPINGS = {
+        CARET_DEFAULT => "",
+        :bottom => "Popover-message--bottom",
+        :bottom_right => "Popover-message--bottom-right",
+        :bottom_left => "Popover-message--bottom-left",
+        :left => "Popover-message--left",
+        :left_bottom => "Popover-message--left-bottom",
+        :left_top => "Popover-message--left-top",
+        :right => "Popover-message--right",
+        :right_bottom => "Popover-message--right-bottom",
+        :right_top => "Popover-message--right-top",
+        :top_left => "Popover-message--top-left",
+        :top_right => "Popover-message--top-right"
+      }.freeze
+
+      DEFAULT_HEADING_TAG = :h4
+
+      # The heading
+      #
+      # @param tag [Symbol] (Primer::Beta::Popover::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
+        system_arguments[:tag] = tag
+        system_arguments[:mb] ||= 2
+
+        Primer::Beta::Heading.new(**system_arguments)
+      }
+
+      # The body
+      #
+      # @param caret [Symbol] <%= one_of(Primer::Beta::Popover::CARET_MAPPINGS.keys) %>
+      # @param large [Boolean] Whether to use the large version of the component.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
+        @body_arguments = system_arguments
+        @body_arguments[:classes] = class_names(
+          @body_arguments[:classes],
+          "Popover-message Box",
+          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+          "Popover-message--large" => large
+        )
+        @body_arguments[:p] ||= 4
+        @body_arguments[:mt] ||= 2
+        @body_arguments[:mx] ||= :auto
+        @body_arguments[:text_align] ||= :left
+        @body_arguments[:box_shadow] ||= :large
+
+        Primer::Content.new
+      }
+
+      # @example Default
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(large: true) do %>
+      #       This is the large Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Caret position
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With multiple elements in the body
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       <p>This is the Popover body.</p>
+      #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
+      #         Got it!
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "Popover"
+        )
+        @system_arguments[:position] ||= :relative
+        @system_arguments[:right] = false unless @system_arguments.delete(:right)
+        @system_arguments[:left] = false unless @system_arguments.delete(:left)
+      end
+
+      def render?
+        body.present?
+      end
+
+      def body_component
+        Primer::Box.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -121,11 +121,11 @@ module Primer
     end
 
     def should_raise_error?
-      raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
+      !Rails.env.production? && raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
 
     def should_raise_aria_error?
-      raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
+      !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
   end
 end

data/app/components/primer/dropdown/menu.rb

@@ -2,97 +2,12 @@
 
 module Primer
   class Dropdown
-    # This component is part of `Dropdown` and should not be
-    # used as a standalone component.
-    class Menu < Primer::Component
-      AS_DEFAULT = :default
-      AS_OPTIONS = [AS_DEFAULT, :list].freeze
+    # :nodoc:
+    class Menu < Primer::Alpha::Dropdown::Menu
+      status :deprecated
 
-      SCHEME_DEFAULT = :default
-      SCHEME_MAPPINGS = {
-        SCHEME_DEFAULT => "",
-        :dark => "dropdown-menu-dark"
-      }.freeze
-
-      DIRECTION_DEFAULT = :se
-      DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
-
-      # @param tag [Symbol] <%= one_of(Primer::Dropdown::Menu::Item::TAG_OPTIONS) %>.
-      # @param divider [Boolean] Whether the item is a divider without any function.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :items, lambda { |divider: false, **system_arguments|
-        Primer::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
-      }
-
-      # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
-      # @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>.
-      # @param header [String] Header to be displayed above the menu.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
-        @header = header
-        @direction = direction
-        @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
-
-        @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = "details-menu"
-        @system_arguments[:role] = "menu"
-
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "dropdown-menu",
-          "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
-          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
-        )
-      end
-
-      private
-
-      def list?
-        @as == :list
-      end
-
-      # Items to be rendered in the `Dropdown` menu.
-      class Item < Primer::Component
-        TAG_DEFAULT = :a
-        BUTTON_TAGS = [:button, :summary].freeze
-        TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
-
-        def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
-          @divider = divider
-          @as = as
-
-          @system_arguments = system_arguments
-          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
-          @system_arguments[:tag] = :li if list? && divider?
-          @system_arguments[:role] ||= :menuitem
-          @system_arguments[:role] = :separator if divider
-          @system_arguments[:classes] = class_names(
-            @system_arguments[:classes],
-            "dropdown-item" => !divider,
-            "dropdown-divider" => divider
-          )
-        end
-
-        def call
-          component = if BUTTON_TAGS.include?(@system_arguments[:tag])
-                        Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
-                      else
-                        Primer::BaseComponent.new(**@system_arguments)
-                      end
-
-          # divider has no content
-          render(component) if divider?
-
-          render(component) { content }
-        end
-
-        def divider?
-          @divider
-        end
-
-        def list?
-          @as == :list
-        end
+      class Item < Primer::Alpha::Dropdown::Menu::Item
+        status :deprecated
       end
     end
   end