Merge branch 'master' into image-with-caption-a11y-fixes

carbon-design-system · Nov 5, 2020 · 46f9d03 · 46f9d03
2 parents 9eecd2a + 5043a0f
commit 46f9d03
Show file tree

Hide file tree

Showing 115 changed files with 1,655 additions and 329 deletions.
diff --git a/.github/workflows/ci-check.yml b/.github/workflows/ci-check.yml
@@ -7,13 +7,13 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node }}
+          node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn install --offline
       - name: Build project
@@ -26,13 +26,13 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node }}
+          node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn install --offline
       - name: Build project
@@ -45,13 +45,13 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node }}
+          node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn install --offline
       - name: Build project
@@ -64,7 +64,7 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 12.x
@@ -93,7 +93,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, ubuntu-latest]
-        node-version: [12.x]
+        node-version: ['12.x']
         browser: [chromium, firefox]
     runs-on: ${{ matrix.os }}
     steps:

diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml
@@ -10,13 +10,13 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn install
       - name: Install xvfb

diff --git a/.github/workflows/percy-update-base.yml b/.github/workflows/percy-update-base.yml
@@ -11,13 +11,13 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn install
       - name: Install xvfb
@@ -39,13 +39,13 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn install
       - name: Install xvfb
@@ -67,13 +67,13 @@ jobs:
     runs-on: ubuntu-16.04
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['12.x']
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn install
       - name: Install xvfb

diff --git a/docs/building-for-ibm-dotcom.md b/docs/building-for-ibm-dotcom.md
@@ -55,7 +55,7 @@ for your page:
             language: '', // e.g. en-US
             publishDate: '', // e.g. 2014-11-19
             publisher: '', // e.g. IBM Corporation
-            version: 'Carbon:Carbon for IBM.com',
+            version: 'Carbon for IBM.com',
             ibm: {
                 contentDelivery: '', // e.g. ECM/Filegen
                 contentProducer: '', // e.g. ECM/IConS Adopter 34 - GS83J2343G3H3ERG - 11/19/2014 05:14:02 PM

diff --git a/packages/react/src/components/Footer/README.stories.mdx b/packages/react/src/components/Footer/README.stories.mdx
@@ -115,16 +115,17 @@ function App() {
 | `dds--footer-logo`            | Component   |
 | `dds--footer-logo__link`      | Interactive |
 | `dds--footer-locale-btn`      | Interactive |
+| `dds--privacy-cp`             | Component   |
 | `dds--legal-nav`              | Component   |
 | `dds--legal-nav__link`        | Interactive |
 | `dds--locale-modal`           | Component   |
 | `dds--language-selector`      | Component   |
 
-## Server Side Rendering
+## Server-Side Rendering
 
-To server side render the footer, the `Translation` service call needs to be
-made to retrieve navigation links. Make sure to pass in the `lc` and `cc` values
-as shown in the example below.
+For server-side rendering of the footer, the `Translation` service call needs to
+be made to retrieve navigation links. Make sure to pass in the `lc` and `cc`
+values as shown in the example below.
 
 ```javascript
 import { TranslationAPI } from '@carbon/ibmdotcom-services';

diff --git a/packages/react/src/components/Masthead/HeaderNavContainer.js b/packages/react/src/components/Masthead/HeaderNavContainer.js
@@ -107,13 +107,15 @@ const HeaderNavContainer = ({ children }) => {
           records => {
             records.forEach(record => {
               if (
+                contentLeftRef.current &&
                 record.target.classList.contains(
                   contentLeftRef.current.className
                 )
               ) {
                 caretLeftRef.current.hidden = record.isIntersecting;
               }
               if (
+                contentRightRef.current &&
                 record.target.classList.contains(
                   contentRightRef.current.className
                 )
@@ -152,18 +154,20 @@ const HeaderNavContainer = ({ children }) => {
       if (event.shiftKey) {
         //Focus previous input
         if (
+          document.activeElement.parentElement.previousSibling &&
           document.activeElement.parentElement.previousSibling.offsetLeft +
             position <=
-          buttonSize
+            buttonSize
         ) {
           paginateLeft();
         }
       } else {
         //Focus next input
         if (
+          document.activeElement.parentElement.nextSibling &&
           document.activeElement.parentElement.nextSibling.offsetLeft +
             document.activeElement.parentElement.nextSibling.offsetWidth >=
-          containerRef.current.offsetWidth - buttonSize
+            containerRef.current.offsetWidth - buttonSize
         ) {
           paginateRight();
         }

diff --git a/packages/styles/scss/components/buttongroup/_buttongroup.scss b/packages/styles/scss/components/buttongroup/_buttongroup.scss
@@ -5,8 +5,8 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-@import '../../globals/imports';
 @import '../../globals/vars';
+@import '../../globals/imports';
 @import 'carbon-components/scss/components/button/button';
 @import '../lightbox-media-viewer/lightbox-media-viewer';
 
@@ -57,6 +57,8 @@
     ::slotted([slot='icon']) {
       position: absolute;
       right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
       flex-shrink: 0;
     }
     .#{$prefix}--btn {

diff --git a/packages/styles/scss/components/callout-quote/index.scss b/packages/styles/scss/components/callout-quote/index.scss
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
 @import '../../globals/vars';
+@import '../../globals/imports';
 @import '../../internal/callout/callout';
 @import '../quote/quote';
 @import '../../globals/utils/hang';

diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
@@ -5,46 +5,72 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@import '../../globals/imports';
+@import '../../globals/vars';
+@import '../../internal/callout/callout';
+
 @mixin callout-with-media {
+  :host(#{$dds-prefix}-callout-with-media),
   .#{$prefix}--callout-with-media {
-    .#{$prefix}--callout__content {
-      padding-top: 0;
-
-      .#{$prefix}--content-block {
-        padding-bottom: $layout-05;
-
-        @include carbon--theme(
-          $carbon--theme--g90,
-          feature-flag-enabled('enable-css-custom-properties')
-        ) {
-          color: $text-04;
-          .#{$prefix}--image__caption {
-            color: $text-01;
-          }
-          .#{$prefix}--video-player__video-caption {
-            color: $text-01;
-          }
-        }
-      }
-
-      .#{$prefix}--content-block-simple__media-video {
-        @include carbon--breakpoint-down('md') {
-          margin-top: -16px;
-        }
-
-        margin-top: $spacing-07;
-      }
-
-      .#{$prefix}--content-block-simple__media-image {
-        @include carbon--breakpoint-down('md') {
-          margin-top: 0;
-        }
-
-        margin-top: $spacing-09;
-      }
+    display: block;
+    background-color: $inverse-02;
+  }
+
+  .#{$prefix}--callout-with-media .#{$prefix}--callout__content {
+    padding-top: 0;
+  }
+  :host(#{$dds-prefix}-callout-with-media-video),
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block-simple__media-video {
+    @include carbon--breakpoint-down('md') {
+      margin-top: -16px;
+    }
+
+    margin-top: $spacing-07;
+  }
+
+  :host(#{$dds-prefix}-callout-with-media-image),
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block-simple__media-image {
+    @include carbon--breakpoint-down('md') {
+      margin-top: 0;
     }
 
+    margin-top: $spacing-09;
+  }
+
+  :host(#{$dds-prefix}-callout-with-media) .#{$prefix}--callout__content,
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block {
+    padding-bottom: $layout-05;
+
+    @include carbon--theme(
+      $carbon--theme--g90,
+      feature-flag-enabled('enable-css-custom-properties')
+    ) {
+      color: $text-04;
+      // `$text-05` in inverse theme is not accessible, which has an adverse effect to `bx--video-player__video-caption` in `<dds-callout-with-media>`.
+      // TODO: Consider global `$text-05` color change in inverse theme, or introduce a component-specific token for `.bx--video-player__video-caption`.
+      --cds-text-05: #f4f4f4;
+    }
+  }
+
+  :host(#{$dds-prefix}-callout-with-media-image),
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block {
+    .#{$prefix}--image__caption {
+      @include use-carbon-productive-tokens();
+      @include carbon--type-style('body-short-01', true);
+
+      margin-top: $carbon--spacing-03;
+      color: $text-01;
+    }
     .#{$prefix}--video-player__video-caption {
+      color: $text-01;
       padding-top: $spacing-03;
     }
   }

diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@import '../../globals/vars';
 @import '../../globals/imports';
 @import '../../globals/utils/ratio-base';
 @import '../../internal/content-section/content-section';

diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@import '../../globals/vars';
 @import '../../globals/imports';
 @import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss';