Move Popover styles to PVC (#1599)

.changeset/blue-masks-yawn.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `Popover` styles to PVC

app/components/primer/popover_component.pcss

@@ -0,0 +1,225 @@
+/* Popover */
+
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--color-canvas-overlay);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+
+  /* Carets */
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -16px;
+    margin-left: -9px;
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -8px;
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+}
+
+/* No caret */
+.Popover-message--no-caret {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+/* Bottom-oriented carets */
+.Popover-message--bottom,
+.Popover-message--bottom-right,
+.Popover-message--bottom-left {
+  &::before,
+  &::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    bottom: -16px;
+    border-top-color: var(--color-border-default);
+  }
+
+  &::after {
+    bottom: -14px;
+    border-top-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Top & Bottom: Right-oriented carets */
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+
+  &::before,
+  &::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+  &::before {
+    right: 20px;
+  }
+
+  &::after {
+    right: 21px;
+  }
+}
+
+/* Top & Bottom: Left-oriented carets */
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+
+  &::before,
+  &::after {
+    left: 24px;
+    margin-left: 0;
+  }
+
+  &::after {
+    left: 25px;
+  }
+}
+
+/* Right- & Left-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom,
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    margin-top: -9px;
+  }
+
+  &::after {
+    margin-top: -8px;
+  }
+}
+
+/* Right-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom {
+  &::before {
+    right: -16px;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    right: -14px;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Left-oriented carets */
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before {
+    left: -16px;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    left: -14px;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Right & Left: Top-oriented carets */
+.Popover-message--right-top,
+.Popover-message--left-top {
+  &::before,
+  &::after {
+    top: 24px;
+  }
+}
+
+/* Right & Left: Bottom-oriented carets */
+.Popover-message--right-bottom,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: auto;
+  }
+
+  &::before {
+    bottom: 16px;
+  }
+
+  &::after {
+    bottom: 17px;
+  }
+}
+
+@media (min-width: 544px) {
+  .Popover-message--large {
+    min-width: 320px;
+  }
+}
+
+/* Responsive Popover
+** For < md it will show full-width anchored to the bottom */
+
+@media (max-width: 767.98px) {
+  .Popover {
+    position: fixed;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    width: auto !important;
+    margin: var(--primer-stack-gap-condensed, 8px);
+  }
+
+  /* Increase tap area for touch input */
+  .Popover-message > .btn-octicon {
+    padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;
+  }
+
+  /* Remove caret */
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

app/components/primer/primer.pcss

@@ -10,6 +10,7 @@
 @import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
+@import "./popover_component.pcss";
 @import "./state_component.pcss";
 @import "./subhead_component.pcss";
 @import "./timeline_item_component.pcss";

demo/app/assets/stylesheets/application.css

@@ -23,7 +23,6 @@
  *= require @primer/css/dist/header.css
  *= require @primer/css/dist/loaders.css
  *= require @primer/css/dist/markdown.css
- *= require @primer/css/dist/popover.css
  *= require @primer/css/dist/select-menu.css
  *= require @primer/css/dist/toasts.css
 */