@papillonbits/components 0.6.0 → 0.9.0

package/build/primer/Navigation/TabNav/__tests__/__snapshots__/TabNav.int.test.js.snap

@@ -1,218 +1,218 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TabNav /> Render must match inactive() 1`] = `
-<div
-  className="tabnav tabnav-inactive"
->
-  <nav
-    aria-label="Foo bar"
-    className="tabnav-tabs"
+<div>
+  <div
+    class="tabnav tabnav-inactive"
   >
-    <a
-      aria-current="page"
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Foo tab
-    </a>
-    <a
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Bar tab
-    </a>
-  </nav>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
 </div>
 `;
 
 exports[`<TabNav /> Render must match regular() 1`] = `
-<div
-  className="tabnav"
->
-  <nav
-    aria-label="Foo bar"
-    className="tabnav-tabs"
+<div>
+  <div
+    class="tabnav"
   >
-    <a
-      aria-current="page"
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Foo tab
-    </a>
-    <a
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Bar tab
-    </a>
-  </nav>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
 </div>
 `;
 
 exports[`<TabNav /> Render must match withButtonActions() 1`] = `
-<div
-  className="tabnav"
->
-  <a
-    className="btn btn-sm float-right"
-    href="#url"
-    role="button"
-  >
-    Button
-  </a>
-  <nav
-    aria-label="Foo bar"
-    className="tabnav-tabs"
+<div>
+  <div
+    class="tabnav"
   >
     <a
-      aria-current="page"
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Foo tab
-    </a>
-    <a
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Bar tab
-    </a>
-  </nav>
+      class="btn btn-sm float-right"
+      href="#url"
+      role="button"
+    >
+      Button
+    </a>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
 </div>
 `;
 
 exports[`<TabNav /> Render must match withLinkActions() 1`] = `
-<div
-  className="tabnav"
->
+<div>
   <div
-    className="float-right"
+    class="tabnav"
   >
-    <a
-      className="tabnav-extra"
-      href="#url"
-    >
-      Tabnav extra link
-    </a>
-    <a
-      className="tabnav-extra"
-      href="#url"
-    >
-      Tabnav extra link
-    </a>
+    <div
+      class="float-right"
+    >
+      <a
+        class="tabnav-extra"
+        href="#url"
+      >
+        Tabnav extra link
+      </a>
+      <a
+        class="tabnav-extra"
+        href="#url"
+      >
+        Tabnav extra link
+      </a>
+    </div>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
   </div>
-  <nav
-    aria-label="Foo bar"
-    className="tabnav-tabs"
-  >
-    <a
-      aria-current="page"
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Foo tab
-    </a>
-    <a
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Bar tab
-    </a>
-  </nav>
 </div>
 `;
 
 exports[`<TabNav /> Render must match withMixedEnabledVisibleItems() 1`] = `
-<div
-  className="tabnav"
->
-  <nav
-    aria-label="Foo bar"
-    className="tabnav-tabs"
+<div>
+  <div
+    class="tabnav"
   >
-    <a
-      aria-current="page"
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Foo tab
-    </a>
-    <a
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Bar tab
-    </a>
-  </nav>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
 </div>
 `;
 
 exports[`<TabNav /> Render must match withNavigation() 1`] = `
-<div
-  className="tabnav"
->
-  <nav
-    aria-label="Foo bar"
-    className="tabnav-tabs"
+<div>
+  <div
+    class="tabnav"
   >
-    <a
-      aria-current="page"
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Foo tab
-    </a>
-    <a
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Bar tab
-    </a>
-  </nav>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
+  </div>
 </div>
 `;
 
 exports[`<TabNav /> Render must match withTextActions() 1`] = `
-<div
-  className="tabnav"
->
+<div>
   <div
-    className="tabnav-extra float-right"
+    class="tabnav"
   >
-    Tabnav widget text here.
+    <div
+      class="tabnav-extra float-right"
+    >
+      Tabnav widget text here.
+    </div>
+    <nav
+      aria-label="Foo bar"
+      class="tabnav-tabs"
+    >
+      <a
+        aria-current="page"
+        class="tabnav-tab"
+        href="#url"
+      >
+        Foo tab
+      </a>
+      <a
+        class="tabnav-tab"
+        href="#url"
+      >
+        Bar tab
+      </a>
+    </nav>
   </div>
-  <nav
-    aria-label="Foo bar"
-    className="tabnav-tabs"
-  >
-    <a
-      aria-current="page"
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Foo tab
-    </a>
-    <a
-      className="tabnav-tab"
-      href="#url"
-      onClick={[Function]}
-    >
-      Bar tab
-    </a>
-  </nav>
 </div>
 `;

package/build/primer/Navigation/UnderlineNav/UnderlineNav.scss

@@ -2,54 +2,107 @@
 @import '../../../index.scss';
 
 // stylelint-disable no-descending-specificity
+$nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav {
   display: flex;
+  min-height: $nav-height;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  -webkit-overflow-scrolling: auto;
   justify-content: space-between;
+
+  .Counter {
+    margin-left: $spacer-2;
+    color: var(--color-fg-default);
+    background-color: var(--color-neutral-muted);
+
+    &--primary {
+      color: var(--color-fg-on-emphasis);
+      background-color: var(--color-neutral-emphasis);
+    }
+  }
 }
 
 .UnderlineNav-body {
   display: flex;
+  align-items: center;
+  gap: $spacer-2;
+  list-style: none;
 }
 
 .UnderlineNav-item {
-  padding: $spacer-2 $spacer-3;
+  position: relative;
+  display: flex;
+  padding: 0 $spacer-2;
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 30px;
   color: var(--color-fg-default);
   text-align: center;
   white-space: nowrap;
+  cursor: pointer;
   background-color: transparent;
   border: 0;
-  // stylelint-disable-next-line primer/borders
-  border-bottom: 2px $border-style transparent;
+  border-radius: $border-radius;
+  align-items: center;
 
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-visible {
     color: var(--color-fg-default);
     text-decoration: none;
     border-bottom-color: var(--color-neutral-muted);
-    outline: 1px dotted transparent; // Support Firefox custom colors
-    outline-offset: -1px;
+    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: $font-weight-bold;
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  // increase touch target area
+  &::before {
+    @include minTouchTarget($min-height: $nav-height);
+  }
+
+  // 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: $font-weight-bold;
     color: var(--color-fg-default);
     border-bottom-color: var(--color-primer-border-active);
-    outline: 1px dotted transparent; // Support Firefox custom colors
-    outline-offset: -1px;
+    outline-offset: -8px;
 
-    .UnderlineNav-octicon {
-      color: var(--color-fg-muted);
+    // current/selected underline
+    &::after {
+      position: absolute;
+      right: 50%;
+      // 48px total height / 2 (24px) + 1px
+      bottom: calc(50% - 25px);
+      width: 100%;
+      height: 2px;
+      content: '';
+      background: var(--color-primer-border-active);
+      border-radius: $border-radius;
+      transform: translate(50%, -50%);
     }
   }
 }
@@ -68,22 +121,18 @@
 
 .UnderlineNav--full {
   display: block;
-}
 
-.UnderlineNav-octicon {
-  margin-right: $spacer-1;
-  color: var(--color-fg-subtle);
+  // required for underline to align with additional wrapper element
+  .UnderlineNav-body {
+    min-height: $nav-height;
+  }
 }
 
-.UnderlineNav .Counter {
-  margin-left: $spacer-1;
-  color: var(--color-fg-default);
-  background-color: var(--color-neutral-muted);
-
-  &--primary {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-neutral-emphasis);
-  }
+.UnderlineNav-octicon {
+  display: inline !important;
+  margin-right: $spacer-2;
+  color: var(--color-fg-muted);
+  fill: var(--color-fg-muted);
 }
 
 .UnderlineNav-container {