Move dropdown styles to PVC (#1600)

Co-authored-by: Jon Rohan <rohan@github.com>
primer · Nov 14, 2022 · 4501861 · 4501861
1 parent ce2e959
commit 4501861
Show file tree

Hide file tree

Showing 4 changed files with 266 additions and 1 deletion.
diff --git a/.changeset/twelve-dancers-retire.md b/.changeset/twelve-dancers-retire.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `dropdown` styles to PVC
diff --git a/app/components/primer/dropdown.pcss b/app/components/primer/dropdown.pcss
@@ -0,0 +1,260 @@
+/* dropdown */
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: '';
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thicker, 4px) var(--primer-borderWidth-thicker, 4px) 0;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
+** way the menu should render from the element triggering it. */
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: var(--primer-control-small-paddingBlock, 4px);
+  padding-bottom: var(--primer-control-small-paddingBlock, 4px);
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--color-canvas-overlay);
+  background-clip: padding-box;
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--color-shadow-large);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+  /* caret border */
+  &::before {
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  /* caret background (should match dropdown background) */
+  &::after {
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+
+  & > ul {
+    list-style: none;
+  }
+}
+
+.dropdown-menu-no-overflow {
+  width: auto;
+
+  & .dropdown-item {
+    padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
+    overflow: visible;
+    text-overflow: inherit;
+  }
+}
+
+/* Dropdown items (can be links or buttons) */
+.dropdown-item {
+  display: block;
+  padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  overflow: hidden;
+  color: var(--color-fg-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+
+    & > .octicon {
+      color: inherit;
+      opacity: 1;
+    }
+
+    & [class*='color-text-'] {
+      color: inherit !important;
+    }
+
+    & > .Label {
+      color: inherit !important;
+      border-color: currentcolor;
+    }
+  }
+
+  &.btn-link {
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.dropdown-signout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+.dropdown-divider {
+  display: block;
+  height: 0;
+  margin: var(--primer-stack-gap-condensed, 8px) 0;
+  border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+}
+
+.dropdown-header {
+  padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  font-size: var(--primer-text-body-size-small, 12px);
+  color: var(--color-fg-muted);
+}
+
+.dropdown-item[aria-checked='false'] .octicon-check {
+  display: none;
+}
+
+/* Directional classes
+**
+** Move the menu and the caret attached to it. Requires at least one of these on
+** the `.dropdown-menu` element. */
+
+.dropdown-menu-w {
+  top: 0;
+  right: 100%;
+  left: auto;
+  width: auto;
+  margin-top: 0;
+  margin-right: 8px;
+
+  &::before {
+    top: 10px;
+    right: -16px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    right: -14px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-e {
+  top: 0;
+  left: 100%;
+  width: auto;
+  margin-top: 0;
+  margin-left: 8px;
+
+  &::before {
+    top: 10px;
+    left: -16px;
+    border-color: transparent;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: 11px;
+    left: -14px;
+    border-color: transparent;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+.dropdown-menu-ne {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 3px;
+
+  &::before,
+  &::after {
+    top: auto;
+    right: auto;
+  }
+
+  &::before {
+    bottom: -8px;
+    left: 9px;
+    border-top: 8px solid var(--color-border-default);
+    border-right: 8px solid transparent;
+    border-bottom: 0;
+    border-left: 8px solid transparent;
+  }
+
+  &::after {
+    bottom: -7px;
+    left: 10px;
+    border-top: 7px solid var(--color-canvas-overlay);
+    border-right: 7px solid transparent;
+    border-bottom: 0;
+    border-left: 7px solid transparent;
+  }
+}
+
+.dropdown-menu-s {
+  right: 50%;
+  left: auto;
+  transform: translateX(50%);
+
+  &::before {
+    top: -16px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  &::after {
+    top: -14px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+.dropdown-menu-sw {
+  right: 0;
+  left: auto;
+
+  &::before {
+    top: -16px;
+    right: 9px;
+    left: auto;
+  }
+
+  &::after {
+    top: -14px;
+    right: 10px;
+    left: auto;
+  }
+}
+
+.dropdown-menu-se {
+  &::before {
+    top: -16px;
+    left: 9px;
+  }
+
+  &::after {
+    top: -14px;
+    left: 10px;
+  }
+}
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
@@ -11,6 +11,7 @@
 @import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
+@import "./dropdown.pcss";
 @import "./popover_component.pcss";
 @import "./state_component.pcss";
 @import "./subhead_component.pcss";

diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css
@@ -18,7 +18,6 @@
  *= require @primer/css/dist/autocomplete.css
  *= require @primer/css/dist/avatars.css
  *= require @primer/css/dist/branch-name.css
- *= require @primer/css/dist/dropdown.css
  *= require @primer/css/dist/header.css
  *= require @primer/css/dist/loaders.css
  *= require @primer/css/dist/markdown.css