Move navigation styles to PVC (#1626)

Co-authored-by: simurai <simurai@users.noreply.github.com>

.changeset/dull-geckos-work.md

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

app/components/primer/alpha/tab_nav.pcss

@@ -0,0 +1,100 @@
+/* tabnav */
+
+/* Outer wrapper */
+.tabnav {
+  margin-top: 0;
+  margin-bottom: var(--primer-stack-gap-normal, 16px);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+}
+
+.tabnav-tabs {
+  display: flex;
+  margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  overflow: auto;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: var(--base-size-8, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  font-size: var(--primer-text-body-size-medium, 14px);
+  line-height: 23px;
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  background-color: transparent;
+  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+  border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default); /* cover bottom border */
+    border-color: var(--color-border-default);
+    border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0;
+
+    & .octicon {
+      color: inherit;
+    }
+  }
+
+  &:hover {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0 !important;
+    outline-offset: -6px;
+  }
+
+  &:active {
+    color: var(--color-fg-muted);
+  }
+
+  & .octicon {
+    margin-right: var(--primer-control-small-gap, 4px);
+    color: var(--color-fg-muted);
+  }
+
+  & .Counter {
+    margin-left: var(--primer-control-small-gap, 4px);
+    color: inherit;
+  }
+}
+
+/* Tabnav extras
+**
+** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+** inline text or links. */
+
+.tabnav-extra {
+  display: inline-block;
+  padding-top: 10px;
+  margin-left: 10px;
+  font-size: var(--primer-text-body-size-small, 12px);
+  color: var(--color-fg-muted);
+
+  & > .octicon {
+    margin-right: 2px;
+  }
+}
+
+/* When tabnav-extra are anchors
+** stylelint-disable-next-line selector-no-qualifying-type */
+a.tabnav-extra:hover {
+  color: var(--color-accent-fg);
+  text-decoration: none;
+}
+
+/* Tabnav buttons
+**
+** For when there are multiple buttons, space them out appropriately. Requires
+** the buttons to be floated or inline-block. */
+
+.tabnav-btn {
+  margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);
+}

app/components/primer/alpha/underline_nav.pcss

@@ -0,0 +1,133 @@
+/* UnderlineNav */
+
+.UnderlineNav {
+  display: flex;
+  min-height: var(--base-size-48, 48px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  -webkit-overflow-scrolling: auto;
+  justify-content: space-between;
+
+  & .Counter {
+    margin-left: var(--primer-control-medium-gap, 8px);
+    color: var(--color-fg-default);
+    background-color: var(--color-neutral-muted);
+  }
+
+  & .Counter--primary {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
+  }
+}
+
+.UnderlineNav-body {
+  display: flex;
+  align-items: center;
+  gap: var(--primer-control-medium-gap, 8px);
+  list-style: none;
+}
+
+.UnderlineNav-item {
+  position: relative;
+  display: flex;
+  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
+  font-size: var(--primer-text-body-size-medium, 14px);
+  line-height: 30px;
+  color: var(--color-fg-default);
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  align-items: center;
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    border-bottom-color: var(--color-neutral-muted);
+    outline-offset: -2px;
+    transition: border-bottom-color 0.12s ease-out;
+  }
+
+  /* renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected */
+  & [data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold, 600);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  /* increase touch target area */
+  &::before {
+    @mixin minTouchTarget 48px;
+  }
+
+  /* hover state was "sticking" on mobile after click */
+  @media (pointer: fine) {
+    &:hover {
+      color: var(--color-fg-default);
+      text-decoration: none;
+      background: var(--color-action-list-item-default-hover-bg);
+      transition: background 0.12s ease-out;
+    }
+  }
+
+  &.selected,
+  &[role='tab'][aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    font-weight: var(--base-text-weight-semibold, 600);
+    color: var(--color-fg-default);
+    border-bottom-color: var(--color-primer-border-active);
+
+    /* current/selected underline */
+    &::after {
+      position: absolute;
+      right: 50%;
+      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
+      width: 100%;
+      height: 2px;
+      content: '';
+      background: var(--color-primer-border-active);
+      border-radius: var(--primer-borderRadius-medium, 6px);
+      transform: translate(50%, -50%);
+    }
+  }
+}
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+
+  & .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+}
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+
+  /* required for underline to align with additional wrapper element */
+  & .UnderlineNav-body {
+    min-height: var(--base-size-48, 48px);
+  }
+}
+
+.UnderlineNav-octicon {
+  display: inline !important;
+  margin-right: var(--primer-control-medium-gap, 8px);
+  color: var(--color-fg-muted);
+  fill: var(--color-fg-muted);
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}

app/components/primer/menu_component.pcss

@@ -0,0 +1,119 @@
+/* menu */
+
+/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
+
+.menu {
+  margin-bottom: var(--primer-stack-gap-normal, 16px);
+  list-style: none;
+  background-color: var(--color-canvas-default);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  color: var(--color-fg-default);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+
+  &:first-child {
+    border-top: 0;
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+
+    &::before {
+      border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    }
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+
+    &::before {
+      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--color-neutral-subtle);
+  }
+
+  &:active {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    cursor: default;
+    background-color: var(--color-menu-bg-active);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: '';
+      background-color: var(--color-primer-border-active);
+    }
+  }
+
+  & .octicon {
+    width: 16px;
+    margin-right: var(--primer-control-medium-gap, 8px);
+    color: var(--color-fg-muted);
+    text-align: center;
+  }
+
+  & .Counter {
+    float: right;
+    margin-left: var(--primer-control-small-gap, 4px);
+  }
+
+  & .menu-warning {
+    float: right;
+    color: var(--color-attention-fg);
+  }
+
+  & .avatar {
+    float: left;
+    margin-right: var(--primer-control-small-gap, 4px);
+  }
+
+  &.alert {
+    & .Counter {
+      color: var(--color-danger-fg);
+    }
+  }
+}
+
+.menu-heading {
+  display: block;
+  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-fg-default);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+}

app/components/primer/primer.pcss

@@ -2,7 +2,9 @@
 @import "./alpha/action_list.pcss";
 @import "./alpha/auto_complete.pcss";
 @import "./alpha/banner.pcss";
+@import "./alpha/tab_nav.pcss";
 @import "./alpha/toggle_switch.pcss";
+@import "./alpha/underline_nav.pcss";
 @import "./alpha/segmented_control.pcss";
 @import "./beta/avatar.pcss";
 @import "./beta/avatar_stack.pcss";
@@ -15,6 +17,7 @@
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
 @import "./dropdown.pcss";
+@import "./menu_component.pcss";
 @import "./popover_component.pcss";
 @import "./state_component.pcss";
 @import "./subhead_component.pcss";

demo/app/assets/stylesheets/application.css

@@ -9,7 +9,6 @@
  *= require @primer/css/dist/forms.css
  *= require @primer/css/dist/layout.css
  *= require @primer/css/dist/links.css
- *= require @primer/css/dist/navigation.css
  *= require @primer/css/dist/overlay.css
  *= require @primer/css/dist/utilities.css
  *= require @primer/css/dist/markdown.css