refactor(button): use box-shadow instead of border

carbon-design-system · Aug 6, 2020 · ccf66f1 · ccf66f1
1 parent 76afa37
commit ccf66f1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -27,30 +27,39 @@
     flex-direction: column;
   }
 
-  .#{$prefix}--btn-set > .#{$prefix}--btn {
+  .#{$prefix}--btn-set .#{$prefix}--btn {
     width: 100%;
     // 196px from design kit
     max-width: rem(196px);
-    border-right: $button-separator;
+    box-shadow: rem(-1px) 0 0 0 $button-separator;
 
-    &:last-of-type {
-      border-right: 0;
+    &:first-of-type {
+      box-shadow: none;
     }
   }
 
-  .#{$prefix}--btn-set--stacked > .#{$prefix}--btn {
-    border-bottom: $button-separator;
+  .#{$prefix}--btn-set--stacked .#{$prefix}--btn {
+    box-shadow: 0 rem(-1px) 0 0 $button-separator;
 
-    &:last-of-type {
-      border-right: 0;
+    &:first-of-type {
+      box-shadow: none;
     }
   }
 
-  .#{$prefix}--btn--secondary.#{$prefix}--btn--disabled
-    + .#{$prefix}--btn--primary.#{$prefix}--btn--disabled,
-  .#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled
-    + .#{$prefix}--btn--danger.#{$prefix}--btn--disabled {
+  .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled {
     box-shadow: rem(-1px) 0 0 0 $disabled-03;
+
+    &:first-of-type {
+      box-shadow: none;
+    }
+  }
+
+  .#{$prefix}--btn-set--stacked .#{$prefix}--btn.#{$prefix}--btn--disabled {
+    box-shadow: 0 rem(-1px) 0 0 $disabled-03;
+
+    &:first-of-type {
+      box-shadow: none;
+    }
   }
 
   .#{$prefix}--btn {

diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -153,7 +153,7 @@ $button-outline: 1px solid $ibm-color__white-0 !default;
 /// @type Value
 /// @access public
 /// @group button
-$button-separator: 1px solid $gray-20;
+$button-separator: $gray-20;
 
 // Accordion