@papillonbits/components 0.6.0 → 0.9.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/Checkbox/__tests__/__snapshots__/Checkbox.int.test.js.snap

@@ -1,77 +1,75 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Checkbox /> Render must match isChecked() 1`] = `
-<div
-  className="m-0 form-checkbox"
-  data-test={null}
->
-  <label
-    htmlFor="checkbox"
+<div>
+  <div
+    class="m-0 form-checkbox"
   >
-    <input
-      aria-describedby="help-text-for-checkbox"
-      checked={true}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    is checked
-  </label>
+    <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
-  className="m-0 form-checkbox checkbox-inactive"
-  data-test={null}
->
-  <label
-    htmlFor="checkbox"
+<div>
+  <div
+    class="m-0 form-checkbox checkbox-inactive"
   >
-    <input
-      aria-describedby="help-text-for-checkbox"
-      checked={true}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    is checked
-  </label>
+    <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
-  className="m-0 form-checkbox"
-  data-test={null}
->
-  <label
-    htmlFor="checkbox"
+<div>
+  <div
+    class="m-0 form-checkbox"
   >
-    <input
-      aria-describedby="help-text-for-checkbox"
-      checked={false}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    is not checked
-  </label>
+    <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
-  className="m-0 form-checkbox checkbox-inactive"
-  data-test={null}
->
-  <label
-    htmlFor="checkbox"
+<div>
+  <div
+    class="m-0 form-checkbox checkbox-inactive"
   >
-    <input
-      aria-describedby="help-text-for-checkbox"
-      checked={false}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    is not checked
-  </label>
+    <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,31 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Input /> Render must match inactive() 1`] = `
-<input
-  aria-label="Repository description"
-  className="form-control input-inactive"
-  data-test={null}
-  id={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onFocus={[Function]}
-  onKeyUp={[Function]}
-  placeholder="Fantastic placeholder"
-  type="text"
-/>
+<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`] = `
-<input
-  aria-label="Repository description"
-  className="form-control"
-  data-test={null}
-  id={null}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onFocus={[Function]}
-  onKeyUp={[Function]}
-  placeholder="Fantastic placeholder"
-  type="text"
-/>
+<div>
+  <input
+    aria-label="Repository description"
+    class="form-control"
+    placeholder="Fantastic placeholder"
+    type="text"
+    value=""
+  />
+</div>
 `;

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

@@ -1,75 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Radio /> Render must match inactive() 1`] = `
-Array [
+<div>
   <div
-    className="m-0 form-checkbox radio-inactive"
-    data-test={null}
+    class="m-0 form-checkbox radio-inactive"
   >
     <label
-      htmlFor="checkbox"
+      for="checkbox"
     >
       <input
-        checked={false}
         name="fantastic-name"
-        onChange={[Function]}
         type="radio"
       />
       White
     </label>
-  </div>,
+  </div>
   <div
-    className="m-0 form-checkbox radio-inactive"
-    data-test={null}
+    class="m-0 form-checkbox radio-inactive"
   >
     <label
-      htmlFor="checkbox"
+      for="checkbox"
     >
       <input
-        checked={true}
+        checked=""
         name="fantastic-name"
-        onChange={[Function]}
         type="radio"
       />
       Black
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`<Radio /> Render must match regular() 1`] = `
-Array [
+<div>
   <div
-    className="m-0 form-checkbox"
-    data-test={null}
+    class="m-0 form-checkbox"
   >
     <label
-      htmlFor="checkbox"
+      for="checkbox"
     >
       <input
-        checked={false}
         name="fantastic-name"
-        onChange={[Function]}
         type="radio"
       />
       White
     </label>
-  </div>,
+  </div>
   <div
-    className="m-0 form-checkbox"
-    data-test={null}
+    class="m-0 form-checkbox"
   >
     <label
-      htmlFor="checkbox"
+      for="checkbox"
     >
       <input
-        checked={true}
+        checked=""
         name="fantastic-name"
-        onChange={[Function]}
         type="radio"
       />
       Black
     </label>
-  </div>,
-]
+  </div>
+</div>
 `;

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;