docs(button): expose tertiary button and restrict icon button variants (

#5201)
carbon-design-system · Feb 1, 2020 · c1c1cfd · c1c1cfd
1 parent c9019ce
commit c1c1cfd
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 30 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -101,7 +101,7 @@
     }
 
     &:active {
-      color: $inverse-01;
+      border-color: transparent;
     }
 
     &:disabled,
@@ -114,7 +114,7 @@
       color: $disabled;
       outline: none;
 
-      & > .#{$prefix}--btn__icon path {
+      > .#{$prefix}--btn__icon path {
         fill: $disabled;
       }
     }
@@ -124,6 +124,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,
@@ -180,13 +193,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
@@ -207,11 +218,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;
     }
@@ -221,23 +227,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--tertiary {
-      padding-left: rem(11px);
-      padding-right: rem(11px);
+  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only.#{$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);
     }
   }
 

diff --git 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
@@ -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,

diff --git 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,