@papillonbits/components 0.7.0 → 0.8.0

package/build/index.scss

@@ -1 +1 @@
-@import '~@papillonbits/css/build/primer/index.scss';
+@import '../../css/src/primer/index.scss';

package/build/primer/BranchName/branch-name.scss

@@ -10,6 +10,7 @@
   padding: 2px 6px;
   font: 12px $mono-font;
   color: var(--color-fg-muted);
+  word-break: break-all;
   background-color: var(--color-accent-subtle);
   border-radius: $border-radius;
 

package/build/primer/Button/Button.scss

@@ -69,8 +69,8 @@
   background-color: var(--color-btn-bg);
   border-color: var(--color-btn-border);
   box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
 
   &:hover,
   &.hover,
@@ -103,14 +103,6 @@
       color: var(--color-primer-fg-disabled);
     }
   }
-
-  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
-  &:focus,
-  &.focus {
-    border-color: var(--color-btn-focus-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
-  }
 }
 
 // Primary button
@@ -128,6 +120,22 @@
     border-color: var(--color-btn-primary-hover-border);
   }
 
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+
   &:active,
   &.selected,
   &[aria-selected='true'] {
@@ -147,13 +155,6 @@
     }
   }
 
-  &:focus,
-  &.focus {
-    background-color: var(--color-btn-primary-focus-bg);
-    border-color: var(--color-btn-primary-focus-border);
-    box-shadow: var(--color-btn-primary-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-primary-counter-bg);
@@ -164,6 +165,26 @@
   }
 }
 
+// ensure links styled as button primary gets proper focus style
+// stylelint-disable-next-line selector-no-qualifying-type
+a.btn-primary {
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+}
+
 // Outline button
 
 .btn-outline {
@@ -192,6 +213,22 @@
     background-color: var(--color-btn-outline-selected-bg);
     border-color: var(--color-btn-outline-selected-border);
     box-shadow: var(--color-btn-outline-selected-shadow);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:disabled,
@@ -207,11 +244,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-outline-focus-border);
-    box-shadow: var(--color-btn-outline-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-outline-counter-bg);
@@ -269,11 +301,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-danger-focus-border);
-    box-shadow: var(--color-btn-danger-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-danger-counter-bg);

package/build/primer/Dropdown/Dropdown.scss

@@ -86,12 +86,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:focus,
   &:hover {
     color: var(--color-fg-on-emphasis);
     text-decoration: none;
     background-color: var(--color-accent-emphasis);
-    outline: none;
 
     > .octicon {
       color: inherit;

package/build/primer/Form/form-control.scss

@@ -1,4 +1,5 @@
 // Needs refactoring
+// stylelint-disable no-descending-specificity
 // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
 // stylelint-disable selector-max-type
 // Base form controls
@@ -29,14 +30,32 @@ label {
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  outline: none;
   box-shadow: var(--color-primer-shadow-inset);
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
 
-  &.focus,
   &:focus {
-    border-color: var(--color-accent-emphasis);
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    @include focusBoxShadowInset;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      border-color: transparent;
+
+      @include focusBoxShadowInset(1px, transparent);
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusBoxShadowInset;
+  }
+
+  // override form controls with no border in focused state
+  &.border-0 {
+    &:focus,
+    &:focus-visible {
+      border: $border-width $border-style var(--color-accent-fg) !important;
+    }
   }
 
   &[disabled] {

package/build/primer/Form/form-group.scss

@@ -15,8 +15,16 @@
   // stylelint-disable-next-line primer/spacing
   margin: 15px 0;
 
+  // Autocomplete with embedded icon
+  .form-control.autocomplete-embedded-icon-wrap {
+    &:focus-within {
+      background-color: var(--color-canvas-default);
+    }
+  }
+
   // Text fields
   .form-control {
+    // stylelint-disable-next-line primer/responsive-widths
     width: 440px;
     max-width: 100%;
     // stylelint-disable-next-line primer/spacing
@@ -210,6 +218,7 @@
       &::after {
         border-bottom-color: var(--color-success-subtle);
       }
+
       &::before {
         border-bottom-color: var(--color-success-muted);
       }
@@ -217,7 +226,7 @@
   }
 
   &.warn {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-attention-emphasis);
     }
 
@@ -230,6 +239,7 @@
       &::after {
         border-bottom-color: var(--color-attention-subtle);
       }
+
       &::before {
         border-bottom-color: var(--color-attention-muted);
       }
@@ -237,7 +247,7 @@
   }
 
   &.errored {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-danger-emphasis);
     }
 
@@ -254,6 +264,7 @@
       &::after {
         border-bottom-color: var(--color-danger-subtle);
       }
+
       &::before {
         border-bottom-color: var(--color-danger-muted);
       }

package/build/primer/Form/form-validation.scss

@@ -236,15 +236,20 @@ dl.form-group > dd, // TODO: Deprecate
   }
 
   &.focused {
+    border-color: var(--color-accent-fg);
     border-radius: $border-radius;
-    box-shadow: var(--color-primer-shadow-inset), var(--color-primer-shadow-focus);
+    outline: none;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 2px var(--color-accent-fg);
 
     .form-control {
+      border-color: transparent;
+      border-bottom-color: var(--color-accent-fg);
       box-shadow: none;
     }
 
     .drag-and-drop {
-      border-color: var(--color-accent-emphasis);
+      border-color: transparent;
     }
   }
 }
@@ -320,8 +325,8 @@ div.composer {
   min-height: 200px;
 }
 
-// stylelint-disable-next-line primer/spacing
 .composer .tabnav {
+  // stylelint-disable-next-line primer/spacing
   margin: 0 0 10px;
 }
 

package/build/primer/Form/input-group.scss

@@ -20,6 +20,20 @@
   &.inline {
     display: inline-table;
   }
+
+  // within input group, if button exists change focus styles to match input (no offset)
+  &:focus-within {
+    // stylelint-disable-next-line selector-max-type
+    button {
+      outline-offset: 0;
+    }
+  }
+
+  // Autocomplete with embedded icon
+  .form-control.autocomplete-embedded-icon-wrap {
+    display: inline-flex;
+    padding: $spacer-1 * 1.25 $spacer-2;
+  }
 }
 
 .input-group .form-control,
@@ -32,6 +46,10 @@
   vertical-align: middle; // Match the inputs
 }
 
+.input-group-button--autocomplete-embedded-icon {
+  vertical-align: bottom;
+}
+
 .input-group .form-control:first-child,
 .input-group-button:first-child .btn {
   border-top-right-radius: 0;

package/build/primer/Navigation/Menu/Menu.scss

@@ -40,12 +40,6 @@
     }
   }
 
-  &:focus {
-    z-index: 1;
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
-  }
-
   &:hover {
     text-decoration: none;
     background-color: var(--color-neutral-subtle);

package/build/primer/Navigation/TabNav/TabNav.scss

@@ -44,13 +44,18 @@
     }
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: var(--color-fg-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
 
+  &:focus,
+  &:focus-visible {
+    border-radius: $border-radius $border-radius 0 0 !important;
+    outline-offset: -6px;
+  }
+
   &:active {
     color: var(--color-fg-muted);
   }

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 {

package/build/primer/Pagination/PreviousNext/PreviousNext.scss

@@ -26,7 +26,6 @@
     &:focus {
       text-decoration: none;
       border-color: var(--color-border-default);
-      outline: 0;
       transition-duration: 0.1s;
     }
 

package/build/primer/Popover/Popover.scss

@@ -1,7 +1,5 @@
 @import '../../index.scss';
 
-// stylelint-disable function-no-unknown
-
 .Popover {
   position: absolute;
   z-index: 100;
@@ -126,6 +124,7 @@
   }
 
   &::before {
+    // stylelint-disable-next-line function-no-unknown
     margin-top: -($spacer-2 + 1);
   }
 

package/build/primer/Toast/Toast.scss

@@ -42,9 +42,7 @@
   background-color: transparent;
   border: 0;
 
-  &:focus,
   &:hover {
-    outline: none;
     opacity: 0.7;
   }
 
@@ -124,6 +122,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonbits/components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Papillon Bits Components",
   "homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/components",
   "repository": {
@@ -29,8 +29,8 @@
     "build-release": "npm run build"
   },
   "dependencies": {
-    "@papillonbits/css": "^0.7.0",
-    "@papillonbits/library": "^0.7.0"
+    "@papillonbits/css": "^0.8.0",
+    "@papillonbits/library": "^0.8.0"
   },
-  "gitHead": "df7997ecded1ad74bb4f697d79b1d5d2e316526d"
+  "gitHead": "a1b80ef4af73c00ad9edddcaefbe25f3b8e1a9d8"
 }

package/build/primer/Form/Checkbox/__tests__/__snapshots__/Checkbox.int.test.js.snap

@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Checkbox /> Render must match isChecked() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        checked=""
-        type="checkbox"
-      />
-      is checked
-    </label>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox /> Render must match isCheckedInactive() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox checkbox-inactive"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        checked=""
-        type="checkbox"
-      />
-      is checked
-    </label>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox /> Render must match isNotChecked() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        type="checkbox"
-      />
-      is not checked
-    </label>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox /> Render must match isNotCheckedInactive() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox checkbox-inactive"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        type="checkbox"
-      />
-      is not checked
-    </label>
-  </div>
-</div>
-`;

package/build/primer/Form/Input/__tests__/__snapshots__/Input.int.test.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Input /> Render must match inactive() 1`] = `
-<div>
-  <input
-    aria-label="Repository description"
-    class="form-control input-inactive"
-    placeholder="Fantastic placeholder"
-    type="text"
-    value=""
-  />
-</div>
-`;
-
-exports[`<Input /> Render must match regular() 1`] = `
-<div>
-  <input
-    aria-label="Repository description"
-    class="form-control"
-    placeholder="Fantastic placeholder"
-    type="text"
-    value=""
-  />
-</div>
-`;