Merge branch 'master' into content-switcher-docs-update

docs/developer-handbook.md

@@ -260,14 +260,10 @@ The subject contains a succinct description of the change:
 
 ### Body
 
-<!-- alex disable just -->
-
 Just as in the subject, use the imperative, present tense: "change" not
 "changed" nor "changes". The body should include the motivation for the change
 and contrast this with previous behavior.
 
-<!-- alex enable just -->
-
 ### Footer
 
 The footer should contain any information about Breaking Changes.

docs/guides/accessibility.md

@@ -1,5 +1,3 @@
-<!-- alex disable failure -->
-
 # Accessibility
 
 <!-- prettier-ignore-start -->
@@ -152,15 +150,11 @@ component with the necessary keyboard functionality.
 
 ### Screen magnifier testing🔎
 
-<!-- alex disable his -->
-
 (Credit to Frederick Creemers
 [excellent article](https://dev.to/_bigblind/how-to-make-your-website-accessible-to-people-who-use-a-screen-magnifier)
 talking about his experience as a visually impaired screen magnification user on
 the web.)
 
-<!-- alex enable his -->
-
 A user with a screen magnifier views web content on a component by component
 basis through a 2x, 4x, or 8x (etc) zoomed in box. Two things become very
 important when using a screen magnifier -- context and component permanence. We

docs/guides/colors.md

@@ -1,5 +1,3 @@
-<!-- alex disable colors -->
-
 # Colors
 
 <!-- prettier-ignore-start -->

docs/guides/endgame.md

@@ -1,5 +1,3 @@
-<!-- alex disable black -->
-
 # Endgame
 
 <!-- prettier-ignore-start -->

docs/guides/sass.md

@@ -1,5 +1,3 @@
-<!-- alex disable color -->
-
 # Sass
 
 <!-- prettier-ignore-start -->

docs/guides/setup/design.md

@@ -1,5 +1,3 @@
-<!-- alex disable color -->
-
 # Design
 
 <!-- prettier-ignore-start -->

docs/guides/support.md

@@ -1,5 +1,3 @@
-<!-- alex disable failures -->
-
 # Carbon core support and maintenance
 
 <!-- prettier-ignore-start -->

docs/guides/triaging-accessibility-issues.md

@@ -1,5 +1,3 @@
-<!-- alex disable failure -->
-
 # Triaging a new Accessibility Issue
 
 ## Severity

docs/migration/10.x-color.md

@@ -1,5 +1,3 @@
-<!-- alex disable color -->
-
 # Colors
 
 <!-- prettier-ignore-start -->

docs/migration/10.x-themes.md

@@ -1,5 +1,3 @@
-<!-- alex disable color -->
-
 # Themes
 
 <!-- prettier-ignore-start -->

docs/on-windows-hcm-support.md

@@ -1,5 +1,3 @@
-<!-- alex disable colors -->
-
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 

docs/postmortems/2019-08-15-icons-angular.md

@@ -60,8 +60,6 @@ This issue was first reported by @cal-smith
 
 **Where we got lucky**
 
-<!-- alex disable period -->
-
 - We were still within the 72 hour time period required by `npm` for their
   `unpublish` feature to work
 

docs/postmortems/2019-10-07-content-switcher-breaking-change.md

@@ -29,8 +29,6 @@ the Carbon Design System, notably `10.6.x` and `7.6.x` ranges.
 <!-- Looking back, what ended up being the main reasons why this event occurred?
 -->
 
-<!-- alex disable hooks -->
-
 We targeted `ContentSwitcher` as a good candidate for a React hooks migration.
 Unfortunately, the migration updated parts of the public API in a
 semver-incompatible way causing a breaking change.

docs/postmortems/2020-04-09-v10.11.0-release.md

@@ -3,8 +3,6 @@ date: 2020-04-09
 authors: joshblack
 ---
 
-<!-- alex disable colors -->
-
 # v10.11.0 Release
 
 **Summary**

docs/postmortems/README.md

@@ -1,5 +1,3 @@
-<!-- alex disable failure -->
-
 # Postmortems
 
 > A postmortem is a written record of an incident, its impact, the actions taken

docs/style.md

@@ -1,5 +1,3 @@
-<!-- alex disable hooks -->
-
 <!--
 Inspired by Uber's Go Style Guide:
 https://github.com/uber-go/guide/blob/85bf203f4371a8ae9e5e9a4d52ea77b17ca04ae6/style.md

package.json

@@ -24,7 +24,6 @@
     "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
     "lint": "eslint actions config codemods packages",
-    "lint:docs": "alex 'docs/**/*.md' -q",
     "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
     "sync": "carbon-cli sync",
     "test": "cross-env BABEL_ENV=test jest",
@@ -48,7 +47,6 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@ibma/aat": "https://able.ibm.com/tools/dist/ibma-aat-2.0.6.tgz",
-    "alex": "^8.0.0",
     "axe-core": "^3.3.2",
     "babel-jest": "^26.0.1",
     "cross-env": "^5.2.0",
@@ -129,7 +127,6 @@
       "git add"
     ],
     "!(*sass).md": [
-      "alex",
       "prettier --write",
       "git add"
     ]

packages/cli/src/commands/ci-check.js

@@ -23,7 +23,6 @@ async function check(args, env) {
   const tasks = [
     'yarn format:diff',
     'yarn lint --quiet',
-    'yarn lint:docs',
     'yarn lint:styles',
     `yarn bundler check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'`,
     `cross-env BABEL_ENV=test yarn test --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,

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,50 @@ 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(: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--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--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-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 +14171,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)
@@ -22861,6 +22942,7 @@ Slider styles
     @include type-style('code-02');
 
     color: $text-01;
+    white-space: nowrap;
 
     &:last-of-type {
       margin-right: $carbon--spacing-05;