Merge pull request #1029 from primer/next-inputs

Refresh inputs
primer · Feb 21, 2020 · 8f12463 · 8f12463
2 parents 03cd280 + a5eb8fd
commit 8f12463
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 38 deletions.
diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md
@@ -22,8 +22,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
 ```html live
 <p>
   <button class="btn" type="button">Button</button>
-  <button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
+  <button class="btn" type="button" aria-expanded="false" aria-haspopup="true">
     Select menu
+    <span class="dropdown-caret">
   </button>
   <input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
   <input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
@@ -35,8 +36,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
 
 <p>
   <button class="btn btn-sm" type="button">Small button</button>
-  <button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
+  <button class="btn btn-sm" type="button" aria-expanded="false" aria-haspopup="true">
     Select menu
+    <span class="dropdown-caret">
   </button>
   <input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
   <select class="form-select select-sm" aria-label="Important decision">
@@ -168,15 +170,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
   <option>Battlestar Galactica</option>
 </select>
 
-<select class="form-select select-sm" aria-label="Preference">
-  <option>Choose an option</option>
-  <option>Git</option>
-  <option>Subversion</option>
-  <option>Social Coding</option>
-  <option>Beets</option>
-  <option>Bears</option>
-  <option>Battlestar Galactica</option>
-</select>
+<button class="btn btn-sm ml-1"> Small button</button>
 ```
 
 #### Form groups

diff --git a/src/buttons/button.scss b/src/buttons/button.scss
@@ -75,7 +75,7 @@
   &:focus,
   &.focus {
     border-color: transparent;
-    box-shadow: $btn-input-focus-shadow;
+    box-shadow: $focus-shadow;
   }
 
   &:hover,

diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
@@ -19,26 +19,24 @@ label {
 .form-select {
   min-height: 34px;
   // stylelint-disable-next-line primer/spacing
-  padding: 6px $spacer-2;
-  font-size: $h4-size;
+  padding: 6px 12px;
+  font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
   color: $text-gray-dark;
   vertical-align: middle;
   background-color: $bg-white;
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: $border-width $border-style $border-gray-dark;
+  border: $border-width $border-style $border-color;
   border-radius: $border-radius;
   outline: none;
-  box-shadow: $form-control-shadow;
 
   &.focus,
   &:focus {
-    // stylelint-disable-next-line primer/borders
-    border-color: $blue-400;
+    border-color: $border-blue;
     outline: none;
-    box-shadow: $form-control-shadow, $btn-input-focus-shadow;
+    box-shadow: $focus-shadow;
   }
 
   // Ensures inputs don't zoom on mobile but are body-font size on desktop
@@ -47,6 +45,12 @@ label {
   }
 }
 
+// Textarea
+textarea.form-control {
+  padding-top: $spacer-2;
+  padding-bottom: $spacer-2;
+}
+
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
   background-color: $bg-gray-light;
@@ -94,7 +98,7 @@ label {
 
 // Large inputs
 .input-lg {
-  padding: $spacer-1 10px;
+  padding: $spacer-1 $spacer-3;
   font-size: $h4-size;
 }
 

diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
@@ -139,11 +139,9 @@
       z-index: 10;
       display: block; // Show up in errored/warn state
       max-width: 450px; // Keep our long errors readable
-      // stylelint-disable-next-line primer/spacing
-      padding: 5px $spacer-2;
-      margin: $spacer-1 0 0;
-      // stylelint-disable-next-line primer/typography
-      font-size: 13px;
+      padding: $spacer-1 $spacer-2;
+      margin: $spacer-2 0 0;
+      font-size: $font-size-small;
       font-weight: $font-weight-normal;
       border-style: $border-style;
       border-width: $border-width;
@@ -178,16 +176,19 @@
   }
 
   &.warn {
+    .form-control {
+      // stylelint-disable-next-line primer/borders
+      border-color: $yellow-600;
+    }
+
     .warning {
       // stylelint-disable-next-line primer/colors
-      color: $yellow-900;
-      // stylelint-disable-next-line primer/colors
-      background-color: $yellow-100;
+      background-color: $yellow-200;
       border-color: $border-yellow;
 
       &::after {
         // stylelint-disable-next-line primer/borders
-        border-bottom-color: $yellow-100;
+        border-bottom-color: $yellow-200;
       }
 
       &::before {
@@ -197,13 +198,16 @@
   }
 
   &.errored {
+    .form-control {
+      // stylelint-disable-next-line primer/borders
+      border-color: $red-600;
+    }
+
     label {
       color: $text-red;
     }
 
     .error {
-      // stylelint-disable-next-line primer/colors
-      color: $red-900;
       background-color: $bg-red-light;
       border-color: $border-red-light;
 

diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss
@@ -15,7 +15,7 @@
   line-height: 20px; // Specifically not inherit our `<body>` default
   color: $text-gray-dark;
   cursor: pointer;
-  border: $border-width $border-style $border-gray-dark;
+  border: $border-width $border-style $border-color;
 
   :checked + & {
     position: relative;

diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss
@@ -15,8 +15,8 @@ $border-green:       $green-400 !default;
 $border-green-light: desaturate($green-300, 40%) !default;
 $border-purple:      $purple !default;
 $border-red:         $red !default;
-$border-red-light:   desaturate($red-300, 60%) !default;
-$border-yellow:      desaturate($yellow-300, 60%) !default;
+$border-red-light:   $red-300 !default;
+$border-yellow:      $yellow-600 !default;
 
 // Background colors
 $bg-white:          $white !default;
@@ -34,7 +34,7 @@ $bg-purple:         $purple-500 !default;
 $bg-purple-light:   $purple-000 !default;
 $bg-pink:           $pink-500 !default;
 $bg-red:            $red-500 !default;
-$bg-red-light:      $red-100 !default;
+$bg-red-light:      $red-000 !default;
 $bg-yellow:         $yellow-500 !default;
 $bg-yellow-light:   $yellow-200 !default;
 $bg-yellow-dark:    $yellow-700 !default;

diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
@@ -13,13 +13,14 @@ $box-shadow-medium: 0 1px 5px $black-fade-15 !default;
 $box-shadow-large: 0 1px 15px $black-fade-15 !default;
 $box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
 
+// Focus shadow
+$focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default;
+
 // Button and form variables
-$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
+$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate? It's now unused.
 $btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $focus-shadow
 $btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate? It's now unused.
 
-$focus-shadow: 0 0 0 3px rgba($blue, 0.4) !default;
-
 $border-color-button: $border-color !default;
 
 // Tooltips