feat(button): add separator in button sets (#6608)

* feat(button): add separator in button sets * fix(button): remove border on last button in set * feat(button): support vertically stacked buttons in set * docs(Button): add stacked button set knob * refactor(button): use box-shadow instead of border * feat(ButtonSet): add ButtonSet component * chore: update snapshots * docs(theme-tokens): update sassdoc type * test(ButtonSet): refactor test file structure * fix(button): restore focus styles for first button * fix(theme-tokens): use updated separator value * fix(button): prevent separator overlap on focus shadow * fix(Modal): use ButtonSet * fix(ComposedModal): use ButtonSet * fix(button): prevent box shadow overlaps * feat(theme-tokens): create themed separator tokens * chore: update snapshots Co-authored-by: Alessandra Davila <aledavila@ibm.com>
carbon-design-system · Aug 13, 2020 · aca2405 · aca2405
1 parent 3603c06
commit aca2405
Show file tree

Hide file tree

Showing 20 changed files with 389 additions and 50 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -196,6 +196,7 @@
  - [✅highlight [variable]](#highlight-variable)
  - [✅decorative-01 [variable]](#decorative-01-variable)
  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
+ - [✅button-separator [variable]](#button-separator-variable)
  - [✅skeleton-01 [variable]](#skeleton-01-variable)
  - [✅skeleton-02 [variable]](#skeleton-02-variable)
  - [✅⚠️brand-01 [variable]](#brand-01-variable)
@@ -4227,6 +4228,7 @@ Define theme variables from a map of tokens
  $highlight: map-get($theme, 'highlight') !global;
  $decorative-01: map-get($theme, 'decorative-01') !global;
  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
+ $button-separator: map-get($theme, 'button-separator') !global;
  $skeleton-01: map-get($theme, 'skeleton-01') !global;
  $skeleton-02: map-get($theme, 'skeleton-02') !global;
  $brand-01: map-get($theme, 'brand-01') !global;
@@ -4539,6 +4541,10 @@ Define theme variables from a map of tokens
  --#{$custom-property-prefix}-hover-light-ui,
  map-get($theme, 'hover-light-ui')
  ) !global;
+ $button-separator: var(
+ --#{$custom-property-prefix}-button-separator,
+ map-get($theme, 'button-separator')
+ ) !global;
  $skeleton-01: var(
  --#{$custom-property-prefix}-skeleton-01,
  map-get($theme, 'skeleton-01')
@@ -5232,6 +5238,19 @@ Define theme variables from a map of tokens
  );
  }
 
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'button-separator',
+ $emit-difference
+ )
+ {
+ @include custom-property(
+ 'button-separator',
+ map-get($theme, 'button-separator')
+ );
+ }
+
  @if should-emit(
  $theme,
  $parent-carbon-theme,
@@ -6015,6 +6034,7 @@ Define theme variables from a map of tokens
  - [highlight [variable]](#highlight-variable)
  - [decorative-01 [variable]](#decorative-01-variable)
  - [hover-light-ui [variable]](#hover-light-ui-variable)
+ - [button-separator [variable]](#button-separator-variable)
  - [skeleton-01 [variable]](#skeleton-01-variable)
  - [skeleton-02 [variable]](#skeleton-02-variable)
  - [brand-01 [variable]](#brand-01-variable)
@@ -6171,6 +6191,7 @@ $carbon--theme--g90: map-merge(
  highlight: #0043ce,
  decorative-01: #6f6f6f,
  hover-light-ui: #6f6f6f,
+ button-separator: #161616,
  skeleton-01: #353535,
  skeleton-02: #525252,
  brand-02: #6f6f6f,
@@ -6246,6 +6267,7 @@ $carbon--theme--g100: map-merge(
  highlight: #002d9c,
  decorative-01: #525252,
  hover-light-ui: #525252,
+ button-separator: #161616,
  skeleton-01: #353535,
  skeleton-02: #393939,
  brand-02: #6f6f6f,
@@ -6412,6 +6434,7 @@ $carbon--theme: (
  highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
  decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
+ button-separator: if(global-variable-exists('button-separator'), $button-separator, map-get($carbon--theme--white, 'button-separator')),
  skeleton-01: if(global-variable-exists('skeleton-01'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
  skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
  brand-01: if(global-variable-exists('brand-01'), $brand-01, map-get($carbon--theme--white, 'brand-01')),
@@ -8327,6 +8350,30 @@ $hover-light-ui: if(
  - [carbon--theme [mixin]](#carbon--theme-mixin)
  - [content-switcher [mixin]](#content-switcher-mixin)
 
+### ✅button-separator [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$button-separator: if(
+ global-variable-exists('carbon--theme') and map-has-key(
+ $carbon--theme,
+ 'button-separator'
+ ),
+ map-get($carbon--theme, 'button-separator'),
+ #e0e0e0
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+ - [button [mixin]](#button-mixin)
+
 ### ✅skeleton-01 [variable]
 
 Skeleton state of graphics
@@ -13823,17 +13870,43 @@ Button styles
  display: flex;
  }
 
- .#{$prefix}--btn-set > .#{$prefix}--btn {
+ .#{$prefix}--btn-set--stacked {
+ flex-direction: column;
+ }
+
+ .#{$prefix}--btn-set .#{$prefix}--btn {
  width: 100%;
  // 196px from design kit
  max-width: rem(196px);
+
+ &:not(:first-of-type):not(:focus) {
+ box-shadow: rem(-1px) 0 0 0 $button-separator;
+ }
  }
 
- .#{$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:focus + .#{$prefix}--btn {
+ box-shadow: inherit;
+ }
+
+ .#{$prefix}--btn-set--stacked
+ .#{$prefix}--btn:not(:first-of-type):not(:focus) {
+ box-shadow: 0 rem(-1px) 0 0 $button-separator;
+ }
+
+ .#{$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 {
@@ -14091,6 +14164,7 @@ Button styles
  - [button-base [mixin]](#button-base-mixin)
  - [button-theme [mixin]](#button-theme-mixin)
  - [prefix [variable]](#prefix-variable)
+ - [button-separator [variable]](#button-separator-variable)
  - [disabled-03 [variable]](#disabled-03-variable)
  - [interactive-01 [variable]](#interactive-01-variable)
  - [text-04 [variable]](#text-04-variable)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -23,17 +23,50 @@
  display: flex;
  }
 
- .#{$prefix}--btn-set > .#{$prefix}--btn {
+ .#{$prefix}--btn-set--stacked {
+ flex-direction: column;
+ }
+
+ .#{$prefix}--btn-set .#{$prefix}--btn {
  width: 100%;
  // 196px from design kit
  max-width: rem(196px);
+
+ &:not(:focus) {
+ box-shadow: rem(-1px) 0 0 0 $button-separator;
+ }
+
+ &:first-of-type:not(:focus) {
+ box-shadow: inherit;
+ }
+ }
+
+ .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn {
+ box-shadow: inherit;
+ }
+
+ .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) {
+ box-shadow: 0 rem(-1px) 0 0 $button-separator;
+ }
+
+ .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) {
+ box-shadow: inherit;
  }
 
- .#{$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/elements/docs/sass.md b/packages/elements/docs/sass.md
@@ -196,6 +196,7 @@
  - [✅highlight [variable]](#highlight-variable)
  - [✅decorative-01 [variable]](#decorative-01-variable)
  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
+ - [✅button-separator [variable]](#button-separator-variable)
  - [✅skeleton-01 [variable]](#skeleton-01-variable)
  - [✅skeleton-02 [variable]](#skeleton-02-variable)
  - [✅⚠️brand-01 [variable]](#brand-01-variable)
@@ -3848,6 +3849,7 @@ Define theme variables from a map of tokens
  $highlight: map-get($theme, 'highlight') !global;
  $decorative-01: map-get($theme, 'decorative-01') !global;
  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
+ $button-separator: map-get($theme, 'button-separator') !global;
  $skeleton-01: map-get($theme, 'skeleton-01') !global;
  $skeleton-02: map-get($theme, 'skeleton-02') !global;
  $brand-01: map-get($theme, 'brand-01') !global;
@@ -4160,6 +4162,10 @@ Define theme variables from a map of tokens
  --#{$custom-property-prefix}-hover-light-ui,
  map-get($theme, 'hover-light-ui')
  ) !global;
+ $button-separator: var(
+ --#{$custom-property-prefix}-button-separator,
+ map-get($theme, 'button-separator')
+ ) !global;
  $skeleton-01: var(
  --#{$custom-property-prefix}-skeleton-01,
  map-get($theme, 'skeleton-01')
@@ -4853,6 +4859,19 @@ Define theme variables from a map of tokens
  );
  }
 
+ @if should-emit(
+ $theme,
+ $parent-carbon-theme,
+ 'button-separator',
+ $emit-difference
+ )
+ {
+ @include custom-property(
+ 'button-separator',
+ map-get($theme, 'button-separator')
+ );
+ }
+
  @if should-emit(
  $theme,
  $parent-carbon-theme,
@@ -5636,6 +5655,7 @@ Define theme variables from a map of tokens
  - [highlight [variable]](#highlight-variable)
  - [decorative-01 [variable]](#decorative-01-variable)
  - [hover-light-ui [variable]](#hover-light-ui-variable)
+ - [button-separator [variable]](#button-separator-variable)
  - [skeleton-01 [variable]](#skeleton-01-variable)
  - [skeleton-02 [variable]](#skeleton-02-variable)
  - [brand-01 [variable]](#brand-01-variable)
@@ -5792,6 +5812,7 @@ $carbon--theme--g90: map-merge(
  highlight: #0043ce,
  decorative-01: #6f6f6f,
  hover-light-ui: #6f6f6f,
+ button-separator: #161616,
  skeleton-01: #353535,
  skeleton-02: #525252,
  brand-02: #6f6f6f,
@@ -5867,6 +5888,7 @@ $carbon--theme--g100: map-merge(
  highlight: #002d9c,
  decorative-01: #525252,
  hover-light-ui: #525252,
+ button-separator: #161616,
  skeleton-01: #353535,
  skeleton-02: #393939,
  brand-02: #6f6f6f,
@@ -6033,6 +6055,7 @@ $carbon--theme: (
  highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
  decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
+ button-separator: if(global-variable-exists('button-separator'), $button-separator, map-get($carbon--theme--white, 'button-separator')),
  skeleton-01: if(global-variable-exists('skeleton-01'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
  skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
  brand-01: if(global-variable-exists('brand-01'), $brand-01, map-get($carbon--theme--white, 'brand-01')),
@@ -7599,6 +7622,29 @@ $hover-light-ui: if(
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅button-separator [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$button-separator: if(
+ global-variable-exists('carbon--theme') and map-has-key(
+ $carbon--theme,
+ 'button-separator'
+ ),
+ map-get($carbon--theme, 'button-separator'),
+ #e0e0e0
+);
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `{undefined}`
 - **Used by**:

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -216,6 +216,22 @@ Map {
  },
  "render": [Function],
  },
+ "ButtonSet" => Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "displayName": "ButtonSet",
+ "propTypes": Object {
+ "children": Object {
+ "type": "node",
+ },
+ "className": Object {
+ "type": "string",
+ },
+ "stacked": Object {
+ "type": "bool",
+ },
+ },
+ "render": [Function],
+ },
  "Checkbox" => Object {
  "$$typeof": Symbol(react.forward_ref),
  "defaultProps": Object {

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -22,6 +22,7 @@ describe('Carbon Components React', () => {
  "BreadcrumbItem",
  "BreadcrumbSkeleton",
  "Button",
+ "ButtonSet",
  "ButtonSkeleton",
  "Checkbox",
  "CheckboxSkeleton",