From 23fe5d4ee978769be894d4ca0532e320b7720aa0 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 28 Jan 2020 13:29:17 -0600
Subject: [PATCH 1/7] docs(button): expose tertiary button and restrict icon
 button variants

---
 .../src/components/button/button.config.js         | 14 +++++++-------
 .../react/src/components/Button/Button-story.js    | 11 ++++++++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/button/button.config.js b/packages/components/src/components/button/button.config.js
index e86dde432976..f75109c35050 100644
--- a/packages/components/src/components/button/button.config.js
+++ b/packages/components/src/components/button/button.config.js
@@ -29,7 +29,7 @@ module.exports = {
       name: 'primary--field',
       label: 'Primary Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
@@ -66,7 +66,7 @@ module.exports = {
       name: 'secondary--field',
       label: 'Secondary Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
@@ -96,13 +96,14 @@ module.exports = {
         'Tertiary buttons should be used for tertiary actions on each page.',
       context: {
         variant: 'tertiary',
+        hasIconOnly: true,
       },
     },
     {
       name: 'tertiary--field',
       label: 'Tertiary Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
@@ -122,6 +123,7 @@ module.exports = {
       context: {
         variant: 'tertiary',
         small: true,
+        hasIconOnly: true,
       },
     },
     {
@@ -138,13 +140,12 @@ module.exports = {
       name: 'danger--field',
       label: 'Danger Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
         variant: 'danger',
         field: true,
-        hasIconOnly: true,
       },
     },
     {
@@ -172,13 +173,12 @@ module.exports = {
       name: 'ghost--field',
       label: 'Ghost Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
         variant: 'ghost',
         field: true,
-        hasIconOnly: true,
       },
     },
     {
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 989e794fe4f6..8260f1bf0896 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -33,6 +33,7 @@ const iconMap = {
 const kinds = {
   'Primary button (primary)': 'primary',
   'Secondary button (secondary)': 'secondary',
+  'Tertiary button (tertiary)': 'tertiary',
   'Danger button (danger)': 'danger',
   'Ghost button (ghost)': 'ghost',
 };
@@ -64,7 +65,15 @@ const props = {
     const iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')];
     return {
       className: 'some-class',
-      kind: select('Button kind (kind)', kinds, 'primary'),
+      kind: select(
+        'Button kind (kind)',
+        {
+          'Primary button (primary)': 'primary',
+          'Secondary button (secondary)': 'secondary',
+          'Tertiary button (tertiary)': 'tertiary',
+        },
+        'primary'
+      ),
       disabled: boolean('Disabled (disabled)', false),
       size: select('Button size (size)', sizes, 'default'),
       renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,

From 160d79bb1e5cd12bd8baff123adb4e741f6bd9d0 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 28 Jan 2020 15:04:30 -0600
Subject: [PATCH 2/7] fix(button): use active-tertiary color token

---
 packages/components/src/components/button/_button.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 66e8270c5cb0..7687f167ffdb 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -101,7 +101,7 @@
     }
 
     &:active {
-      color: $inverse-01;
+      color: $active-tertiary;
     }
 
     &:disabled,

From 90504799477c5935c2e7d99726d243c8f0ad4d3d Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Thu, 30 Jan 2020 09:54:34 -0600
Subject: [PATCH 3/7] fix(button): remove active tertiary text color override

---
 packages/components/src/components/button/_button.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 7687f167ffdb..3ceda149c8a6 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -100,10 +100,6 @@
       background-color: $interactive-03;
     }
 
-    &:active {
-      color: $active-tertiary;
-    }
-
     &:disabled,
     &:hover:disabled,
     &:focus:disabled,

From fbbc31e9df9355ea0383bc528c65da6c723a74cc Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Thu, 30 Jan 2020 10:00:45 -0600
Subject: [PATCH 4/7] refactor(Button): combine button class logic

---
 packages/react/src/components/Button/Button.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 780406d9c889..35ad6a797d5f 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -38,12 +38,7 @@ const Button = React.forwardRef(function Button(
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--field`]: size === 'field',
     [`${prefix}--btn--sm`]: size === 'small' || small,
-    [`${prefix}--btn--primary`]: kind === 'primary',
-    [`${prefix}--btn--danger`]: kind === 'danger',
-    [`${prefix}--btn--secondary`]: kind === 'secondary',
-    [`${prefix}--btn--ghost`]: kind === 'ghost',
-    [`${prefix}--btn--danger--primary`]: kind === 'danger--primary',
-    [`${prefix}--btn--tertiary`]: kind === 'tertiary',
+    [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--icon-only`]: hasIconOnly,
     [`${prefix}--tooltip__trigger`]: hasIconOnly,

From 85506d1f537e88b30cf6c82953aa43bdb0005e71 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Thu, 30 Jan 2020 14:02:33 -0600
Subject: [PATCH 5/7] fix(button): replace outline with box-shadow

---
 packages/components/src/components/button/_button.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 3ceda149c8a6..298b705f5b3a 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -176,13 +176,11 @@
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
     @include tooltip--trigger('icon', 'bottom');
-    outline: $button-outline-width solid transparent;
-    outline-offset: -4px;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     border-color: $focus;
-    outline-color: $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus

From d0a3ba82edecdc2514992f91a6af86b5ee22c954 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Thu, 30 Jan 2020 14:08:32 -0600
Subject: [PATCH 6/7] fix(button): preserve tertiary button width

---
 .../src/components/button/_button.scss        | 52 ++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 298b705f5b3a..dc48b6092ae8 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -110,7 +110,7 @@
       color: $disabled;
       outline: none;
 
-      & > .#{$prefix}--btn__icon path {
+      > .#{$prefix}--btn__icon path {
         fill: $disabled;
       }
     }
@@ -120,6 +120,19 @@
     }
   }
 
+  .#{$prefix}--btn--tertiary,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--field,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--sm {
+    padding-right: rem(62px);
+    padding-left: rem(14px);
+
+    &:focus {
+      border-width: rem(3px);
+      padding-right: rem(60px);
+      padding-left: rem(12px);
+    }
+  }
+
   .#{$prefix}--btn--ghost {
     @include button-theme(
       transparent,
@@ -201,11 +214,6 @@
     padding-left: rem(13px);
     padding-right: rem(13px);
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(15px);
-      padding-right: rem(15px);
-    }
-
     .#{$prefix}--btn__icon {
       position: static;
     }
@@ -215,23 +223,43 @@
     }
   }
 
+  .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(15px);
+    padding-right: rem(15px);
+
+    &:focus {
+      padding-left: rem(13px);
+      padding-right: rem(13px);
+    }
+  }
+
   .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
     padding-left: rem(9px);
     padding-right: rem(9px);
+  }
+
+  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(11px);
+    padding-right: rem(11px);
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(11px);
-      padding-right: rem(11px);
+    &:focus {
+      padding-left: rem(9px);
+      padding-right: rem(9px);
     }
   }
 
   .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
     padding-left: rem(5px);
     padding-right: rem(5px);
+  }
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(7px);
-      padding-right: rem(7px);
+  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(7px);
+    padding-right: rem(7px);
+
+    &:focus {
+      padding-left: rem(5px);
+      padding-right: rem(5px);
     }
   }
 

From dd4c4e2d80bd247951a8ff0b1828d22e8524bb5f Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Thu, 30 Jan 2020 14:54:42 -0600
Subject: [PATCH 7/7] fix(button): set active tertiary border

---
 packages/components/src/components/button/_button.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index dc48b6092ae8..0375ae67956d 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -100,6 +100,10 @@
       background-color: $interactive-03;
     }
 
+    &:active {
+      border-color: transparent;
+    }
+
     &:disabled,
     &:hover:disabled,
     &:focus:disabled,