Revert "fix(button): prevent icon and tooltip jumping for tertiary bu…

…tton (carbon-design-system#5618)" This reverts commit 734a393.
renmaddox · Mar 20, 2020 · 6228169 · 6228169
1 parent 9d7f9e5
commit 6228169
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 22 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -6203,6 +6203,7 @@ $ui-02: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [button [mixin]](#button-mixin)
   - [button-theme [mixin]](#button-theme-mixin)
   - [snippet [mixin]](#snippet-mixin)
   - [loading [mixin]](#loading-mixin)
@@ -12963,7 +12964,8 @@ Button styles
       $interactive-03,
       $hover-tertiary,
       currentColor,
-      $active-tertiary
+      $active-tertiary,
+      1px
     );
 
     &:hover {
@@ -12991,6 +12993,19 @@ Button styles
     }
   }
 
+  .#{$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,
@@ -13043,6 +13058,7 @@ Button styles
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     border-color: $focus;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
@@ -13060,8 +13076,8 @@ Button styles
   }
 
   .#{$prefix}--btn--icon-only {
-    padding-left: rem(15px);
-    padding-right: rem(15px);
+    padding-left: rem(13px);
+    padding-right: rem(13px);
 
     .#{$prefix}--btn__icon {
       position: static;
@@ -13097,14 +13113,44 @@ Button styles
     display: none;
   }
 
+  .#{$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);
+
+    &: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--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);
+    }
   }
 
   .#{$prefix}--btn--danger {
@@ -13119,6 +13165,7 @@ Button styles
 
     &:hover {
       color: $text-04;
+      border: $button-border-width solid transparent;
     }
   }
 
@@ -13165,6 +13212,7 @@ Button styles
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [hover-primary-text [variable]](#hover-primary-text-variable)
   - [focus [variable]](#focus-variable)
+  - [ui-02 [variable]](#ui-02-variable)
   - [icon-01 [variable]](#icon-01-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
   - [danger [variable]](#danger-variable)
@@ -13239,7 +13287,7 @@ Button variant styles
 ```scss
 @mixin button-theme() {
   background-color: $bg-color;
-  border-width: $button-outline-width;
+  border-width: $border-width;
   border-style: solid;
   border-color: $border-color;
   color: $font-color;
@@ -13250,8 +13298,7 @@ Button variant styles
 
   &:focus {
     border-color: $focus;
-    box-shadow: inset 0 0 0 $button-border-width $focus, inset 0 0 0
-        ($button-border-width + $button-outline-width) $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   &:disabled:hover,

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -84,6 +84,7 @@
       $hover-tertiary,
       currentColor,
       $active-tertiary,
+      1px
     );
 
     &:hover {
@@ -111,6 +112,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,
@@ -159,16 +173,11 @@
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
     @include tooltip--trigger('icon', 'bottom');
-
-    svg,
-    &:hover svg,
-    &:focus svg {
-      fill: currentColor;
-    }
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     border-color: $focus;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
@@ -186,8 +195,8 @@
   }
 
   .#{$prefix}--btn--icon-only {
-    padding-left: rem(15px);
-    padding-right: rem(15px);
+    padding-left: rem(13px);
+    padding-right: rem(13px);
 
     .#{$prefix}--btn__icon {
       position: static;
@@ -223,20 +232,50 @@
     display: none;
   }
 
+  .#{$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);
+
+    &: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--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);
+    }
   }
 
   .#{$prefix}--btn--danger {
     @include button-theme(
       $danger,
-      transparent,
+      $danger,
       $text-04,
       $hover-danger,
       currentColor,
@@ -245,6 +284,7 @@
 
     &:hover {
       color: $text-04;
+      border: $button-border-width solid transparent;
     }
   }
 

diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
@@ -59,9 +59,10 @@
   $hover-bg-color,
   $icon-color,
   $active-color,
+  $border-width: $button-border-width
 ) {
   background-color: $bg-color;
-  border-width: $button-outline-width;
+  border-width: $border-width;
   border-style: solid;
   border-color: $border-color;
   color: $font-color;
@@ -72,9 +73,7 @@
 
   &:focus {
     border-color: $focus;
-    box-shadow:
-    inset 0 0 0 $button-border-width $focus,
-    inset 0 0 0 ($button-border-width + $button-outline-width) $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   &:disabled:hover,

diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -131,7 +131,7 @@ $button-padding-ghost-sm: calc(0.375rem - 3px) 12px !default;
 /// @type Number
 /// @access public
 /// @group button
-$button-border-width: 2px !default;
+$button-border-width: 3px !default;
 
 /// @type Number
 /// @access public
@@ -141,13 +141,11 @@ $button-outline-width: 1px !default;
 /// @type Number
 /// @access public
 /// @group button
-/// @deprecated
 $button-outline-offset: -5px !default;
 
 /// @type Value
 /// @access public
 /// @group button
-/// @deprecated
 $button-outline: 1px solid $ibm-color__white-0 !default;
 
 // Accordion