Merge branch 'main' into 8017-convert-console-error-warning

.github/CONTRIBUTING.md

@@ -98,7 +98,7 @@ To create a new branch, ensure you are in your forked branch in your terminal
 and run:
 
 ```sh
-git pull origin master
+git pull origin main
 git checkout -b {your-branch-name}
 ```
 
@@ -137,7 +137,7 @@ http://localhost:9000 to see the changes happen on the fly.
 
 For information about our coding style, such as how we name our classes and our
 file structure, go to our
-[developer handbook](https://github.com/carbon-design-system/carbon/blob/master/docs/developer-handbook.md#coding-style)
+[developer handbook](https://github.com/carbon-design-system/carbon/blob/main/docs/developer-handbook.md#coding-style)
 
 ### 6. Test your JavaScript code
 
@@ -149,7 +149,7 @@ yarn test
 ```
 
 For more extensive testing information, see our
-[developer handbook](https://github.com/carbon-design-system/carbon/blob/master/docs/developer-handbook.md#common-tasks)
+[developer handbook](https://github.com/carbon-design-system/carbon/blob/main/docs/developer-handbook.md#common-tasks)
 
 ### 7. Add yourself to the contributor list
 
@@ -203,7 +203,7 @@ git commit -m "YOUR  COMMIT MESSAGE HERE"
 
 For more information about how to write your commit message, view our commit
 conventions detailed in a our
-[developer handbook](https://github.com/carbon-design-system/carbon/blob/master/docs/developer-handbook.md#commit-conventions).
+[developer handbook](https://github.com/carbon-design-system/carbon/blob/main/docs/developer-handbook.md#commit-conventions).
 
 After your changes are committed, run:
 
@@ -295,23 +295,23 @@ Here are some contribution quick tips:
 
 ### What projects can I contribute to?
 
-- [`carbon-components`](https://github.com/carbon-design-system/carbon/tree/master/packages/components)
-- [`carbon-components-react`](https://github.com/carbon-design-system/carbon/tree/master/packages/react)
+- [`carbon-components`](https://github.com/carbon-design-system/carbon/tree/main/packages/components)
+- [`carbon-components-react`](https://github.com/carbon-design-system/carbon/tree/main/packages/react)
 - [`carbon-website`](https://github.com/carbon-design-system/carbon-website)
 - [`gatsby-theme-carbon`](https://github.com/carbon-design-system/gatsby-theme-carbon)
 - [`carbon-design-kit`](https://github.com/carbon-design-system/carbon-design-kit)
-- [`@carbon/elements`](https://github.com/carbon-design-system/carbon/tree/master/packages/elements)
-- [`@carbon/type`](https://github.com/carbon-design-system/carbon/tree/master/packages/type)
-- [`@carbon/colors`](https://github.com/carbon-design-system/carbon/tree/master/packages/colors)
-- [`@carbon/grid`](https://github.com/carbon-design-system/carbon/tree/master/packages/grid)
-- [`@carbon/icons`](https://github.com/carbon-design-system/carbon/tree/master/packages/icons)
-- [`@carbon/layout`](https://github.com/carbon-design-system/carbon/tree/master/packages/layout)
-- [`@carbon/motion`](https://github.com/carbon-design-system/carbon/tree/master/packages/motion)
-- [`@carbon/themes`](https://github.com/carbon-design-system/carbon/tree/master/packages/themes)
-- [`@carbon/icons-react`](https://github.com/carbon-design-system/carbon/tree/master/packages/icons-react)
+- [`@carbon/elements`](https://github.com/carbon-design-system/carbon/tree/main/packages/elements)
+- [`@carbon/type`](https://github.com/carbon-design-system/carbon/tree/main/packages/type)
+- [`@carbon/colors`](https://github.com/carbon-design-system/carbon/tree/main/packages/colors)
+- [`@carbon/grid`](https://github.com/carbon-design-system/carbon/tree/main/packages/grid)
+- [`@carbon/icons`](https://github.com/carbon-design-system/carbon/tree/main/packages/icons)
+- [`@carbon/layout`](https://github.com/carbon-design-system/carbon/tree/main/packages/layout)
+- [`@carbon/motion`](https://github.com/carbon-design-system/carbon/tree/main/packages/motion)
+- [`@carbon/themes`](https://github.com/carbon-design-system/carbon/tree/main/packages/themes)
+- [`@carbon/icons-react`](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react)
 
 And more! You can view a complete list of our packages
-[here](https://github.com/carbon-design-system/carbon/tree/master/packages).
+[here](https://github.com/carbon-design-system/carbon/tree/main/packages).
 
 ### Besides some of the obvious contributions mentioned above, how else can I contribute?
 

.github/ISSUE_TEMPLATE/accessibility-issue.md

@@ -42,9 +42,9 @@ assignees: ''
 > Please create a reduced test case in CodeSandbox
 >
 > - Style and vanilla JS:
->   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
+>   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/components/examples/codesandbox
 > - React:
->   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox
+>   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox
 
 ## Additional information
 

.github/ISSUE_TEMPLATE/bug-report.md

@@ -48,9 +48,9 @@ assignees: ''
 > Please create a reduced test case in CodeSandbox
 >
 > - Style and vanilla JS:
->   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
+>   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/components/examples/codesandbox
 > - React:
->   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox
+>   https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox
 
 ## Additional information
 

.github/workflows/add-review-labels.yml

@@ -4,7 +4,7 @@ jobs:
   reviewer:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
       - uses: ./actions/add-review-labels
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: CI
 on:
   pull_request:
     branches:
-      - master
+      - main
 jobs:
   dedupe:
     runs-on: ubuntu-latest

.github/workflows/codeql-analysis.yml

@@ -1,10 +1,10 @@
-name: "Code scanning - action"
+name: 'Code scanning - action'
 
 on:
   push:
-    branches: [master]
+    branches: [main]
   pull_request:
-    branches: [master]
+    branches: [main]
   schedule:
     - cron: '0 12 * * 1'
 
@@ -13,23 +13,23 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # We must fetch at least the immediate parents so that if this is
+          # a pull request then we can checkout the head.
+          fetch-depth: 2
 
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
+      # If this run was triggered by a pull request event, then checkout
+      # the head of the pull request instead of the merge commit.
+      - run: git checkout HEAD^2
+        if: ${{ github.event_name == 'pull_request' }}
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: javascript
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: javascript
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/deploy-react-storybook.yml

@@ -16,7 +16,7 @@ jobs:
   build:
     runs-on: macOS-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
       - name: Use Node.js 14.x
         uses: actions/[email protected]
         with:

.github/workflows/deploy-vanilla-devenv.yml

@@ -15,7 +15,7 @@ jobs:
   build:
     runs-on: macOS-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
       - name: Use Node.js 14.x
         uses: actions/[email protected]
         with:

.github/workflows/issue-triage.yml

@@ -8,7 +8,7 @@ jobs:
   comment:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
       - uses: ./actions/issues
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/nightly-release.yml

@@ -9,7 +9,7 @@ jobs:
   release:
     runs-on: macOS-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
       - name: Use Node.js 14.x
         uses: actions/[email protected]
         with:

.github/workflows/sync-generated-files.yml

@@ -2,7 +2,7 @@ name: Sync generated files
 on:
   push:
     branches:
-      - master
+      - main
 jobs:
   release:
     runs-on: macOS-latest
@@ -31,7 +31,7 @@ jobs:
             git config --global user.name "carbon-bot"
 
             git remote set-url origin "https://x-access-token:[email protected]/carbon-design-system/carbon.git"
-            git checkout master
+            git checkout main
             git add -A
             git commit -m "chore(project): sync generated files"
             git push

packages/components/src/components/content-switcher/_content-switcher.scss

@@ -58,6 +58,11 @@
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $ui-01;
+
+      // Firefox HCM Fix
+      @media screen and (prefers-contrast) {
+        border-style: dotted;
+      }
     }
 
     &:hover {

packages/components/src/components/context-menu/_context-menu.scss

@@ -0,0 +1,126 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/helper-mixins';
+
+/// Context Menu styles
+/// @access private
+/// @group context-menu
+@mixin context-menu {
+  .#{$prefix}--context-menu {
+    @include box-shadow;
+
+    position: fixed;
+    z-index: z('modal');
+    min-width: 13rem;
+    max-width: 18rem;
+    padding: $spacing-02 0;
+    background-color: $ui-01;
+    visibility: hidden;
+  }
+
+  .#{$prefix}--context-menu--open {
+    visibility: visible;
+
+    &:focus {
+      @include focus-outline('border');
+    }
+  }
+
+  .#{$prefix}--context-menu--invisible {
+    opacity: 0;
+  }
+
+  .#{$prefix}--context-menu-option {
+    position: relative;
+    height: $spacing-07;
+    background-color: $ui-01;
+    cursor: pointer;
+    transition: background-color $duration--fast-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--context-menu-option--active,
+  .#{$prefix}--context-menu-option:hover {
+    background-color: $hover-ui;
+  }
+
+  .#{$prefix}--context-menu-option > .#{$prefix}--context-menu {
+    margin-top: calc(#{$spacing-02} * -1);
+  }
+
+  .#{$prefix}--context-menu-option__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 $spacing-05;
+  }
+
+  .#{$prefix}--context-menu-option__content--disabled {
+    background-color: $ui-01;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--context-menu-option__content--disabled
+    .#{$prefix}--context-menu-option__label,
+  .#{$prefix}--context-menu-option__content--disabled
+    .#{$prefix}--context-menu-option__info,
+  .#{$prefix}--context-menu-option__content--disabled
+    .#{$prefix}--context-menu-option__icon {
+    color: $disabled-02;
+  }
+
+  .#{$prefix}--context-menu-option__content--indented
+    .#{$prefix}--context-menu-option__label {
+    margin-left: $spacing-05;
+  }
+
+  .#{$prefix}--context-menu-option__label {
+    @include type-style('body-short-01');
+
+    flex-grow: 1;
+    // add top/bottom padding to make sure letters are not cut off by hidden overflow
+    padding: $spacing-02 0;
+    overflow: hidden;
+    color: $text-01;
+    white-space: nowrap;
+    text-align: start;
+    text-overflow: ellipsis;
+  }
+
+  .#{$prefix}--context-menu-option__info {
+    display: inline-flex;
+    margin-left: $spacing-05;
+    color: $icon-01;
+  }
+
+  .#{$prefix}--context-menu-option__icon {
+    display: flex;
+    align-items: center;
+    width: 1rem;
+    height: 1rem;
+    margin-right: $spacing-03;
+    color: $icon-01;
+  }
+
+  .#{$prefix}--context-menu-divider {
+    width: 100%;
+    height: 1px;
+    margin: $spacing-02 0;
+    background-color: $ui-03;
+  }
+}
+
+@include exports('context-menu') {
+  @include context-menu;
+}

packages/components/src/components/data-table/_data-table-expandable.scss

@@ -63,7 +63,7 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
-    padding-left: $carbon--spacing-09;
+    padding-left: 4rem;
     border-bottom: 1px solid $ui-03;
     transition: padding-bottom $duration--fast-02 motion(standard, productive),
       transform $duration--fast-02 motion(standard, productive),
@@ -164,11 +164,6 @@
     border-bottom: 1px solid $ui-03;
   }
 
-  .#{$prefix}--data-table th.#{$prefix}--table-expand + th,
-  .#{$prefix}--data-table td.#{$prefix}--table-expand + td {
-    padding-left: 0;
-  }
-
   .#{$prefix}--data-table
     th.#{$prefix}--table-expand
     + .#{$prefix}--table-column-checkbox,