Merge branch 'main' into 9261-vertincal-progress-indicator-bug

carbon-design-system · Sep 22, 2021 · 1df10dc · 1df10dc
2 parents 4483e8d + 6b96dc0
commit 1df10dc
Show file tree

Hide file tree

Showing 91 changed files with 412 additions and 324 deletions.
diff --git a/.yarn/cache/sass-npm-1.36.0-1ecc2af923-fdb03deed1.zip b/.yarn/cache/sass-npm-1.36.0-1ecc2af923-fdb03deed1.zip
diff --git a/.yarn/cache/sass-npm-1.41.0-da27912b16-12f791d1d3.zip b/.yarn/cache/sass-npm-1.41.0-da27912b16-12f791d1d3.zip
diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json
@@ -85,7 +85,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-strip-banner": "^2.0.0",
     "rtlcss": "^3.1.2",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sass-loader": "10",
     "style-loader": "^2.0.0",
     "webpack": "^4.41.5"

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -48,7 +48,7 @@
     "remark": "^10.0.1",
     "replace-in-file": "^6.1.0",
     "rollup": "^2.46.0",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sassdoc": "^2.7.3",
     "yargs": "^17.0.1"
   }

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -163,7 +163,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sass-loader": "^8.0.2",
     "serve-static": "^1.13.0",
     "style-loader": "^1.1.3",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -875,6 +875,24 @@ Map {
     },
   },
   "ContentSwitcher" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": "bx",
+      "_currentValue2": "bx",
+      "_threadCount": 0,
+    },
     "defaultProps": Object {
       "onChange": [Function],
       "selectedIndex": 0,
@@ -7621,6 +7639,24 @@ Map {
     },
   },
   "HeaderNavigation" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": "bx",
+      "_currentValue2": "bx",
+      "_threadCount": 0,
+    },
     "propTypes": Object {
       "aria-label": [Function],
       "aria-labelledby": [Function],

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -129,7 +129,7 @@
     "rollup-plugin-strip-banner": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rtlcss": "^2.4.0",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sass-loader": "^10.1.1",
     "storybook-readme": "^5.0.9",
     "string-replace-loader": "^2.1.0",

diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.js b/packages/react/src/components/Accordion/Accordion.Skeleton.js
@@ -9,13 +9,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { ChevronRight16 } from '@carbon/icons-react';
-import { settings } from 'carbon-components';
 import SkeletonText from '../SkeletonText';
 import deprecate from '../../prop-types/deprecate';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 function AccordionSkeleton({ align, open, count, className, ...rest }) {
+  const prefix = usePrefix();
   const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
     [`${prefix}--accordion--${align}`]: align,
   });
@@ -77,6 +76,7 @@ AccordionSkeleton.defaultProps = {
 };
 
 function AccordionSkeletonItem() {
+  const prefix = usePrefix();
   return (
     <li className={`${prefix}--accordion__item`}>
       <span className={`${prefix}--accordion__heading`}>

diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js
@@ -5,13 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const { prefix } = settings;
-
 function Accordion({
   align,
   children,
@@ -20,6 +18,7 @@ function Accordion({
   size,
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,
     [`${prefix}--accordion--${size}`]: size,

diff --git a/packages/react/src/components/AspectRatio/AspectRatio.js b/packages/react/src/components/AspectRatio/AspectRatio.js
@@ -5,12 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 /**
  * The AspectRatio component provides a `ratio` prop that will be used to
@@ -25,6 +23,7 @@ function AspectRatio({
   ratio = '1x1',
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(
     containerClassName,
     `${prefix}--aspect-ratio`,

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js
@@ -8,24 +8,27 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
+function Item() {
+  const prefix = usePrefix();
 
-const item = (
-  <div className={`${prefix}--breadcrumb-item`}>
-    <span className={`${prefix}--link`}>&nbsp;</span>
-  </div>
-);
+  return (
+    <div className={`${prefix}--breadcrumb-item`}>
+      <span className={`${prefix}--link`}>&nbsp;</span>
+    </div>
+  );
+}
 
 function BreadcrumbSkeleton({ className, ...rest }) {
+  const prefix = usePrefix();
   const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
 
   return (
     <div className={classes} {...rest}>
-      {item}
-      {item}
-      {item}
+      <Item />
+      <Item />
+      <Item />
     </div>
   );
 }

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.js b/packages/react/src/components/Breadcrumb/Breadcrumb.js
@@ -8,9 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Breadcrumb = React.forwardRef(function Breadcrumb(
   {
@@ -22,6 +20,7 @@ const Breadcrumb = React.forwardRef(function Breadcrumb(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const className = cx({
     [`${prefix}--breadcrumb`]: true,
     [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,

diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js
@@ -17,7 +17,6 @@ describe('Breadcrumb', () => {
   let BreadcrumbItem;
 
   beforeEach(() => {
-    jest.resetModules();
     const BreadcrumbEntrypoint = require('../');
     Breadcrumb = BreadcrumbEntrypoint.Breadcrumb;
     BreadcrumbItem = BreadcrumbEntrypoint.BreadcrumbItem;

diff --git a/.../react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap b/.../react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap
@@ -5,33 +5,39 @@ exports[`BreadcrumbSkeleton should render 1`] = `
   <div
     className="bx--breadcrumb bx--skeleton"
   >
-    <div
-      className="bx--breadcrumb-item"
-    >
-      <span
-        className="bx--link"
+    <Item>
+      <div
+        className="bx--breadcrumb-item"
       >
-         
-      </span>
-    </div>
-    <div
-      className="bx--breadcrumb-item"
-    >
-      <span
-        className="bx--link"
+        <span
+          className="bx--link"
+        >
+           
+        </span>
+      </div>
+    </Item>
+    <Item>
+      <div
+        className="bx--breadcrumb-item"
       >
-         
-      </span>
-    </div>
-    <div
-      className="bx--breadcrumb-item"
-    >
-      <span
-        className="bx--link"
+        <span
+          className="bx--link"
+        >
+           
+        </span>
+      </div>
+    </Item>
+    <Item>
+      <div
+        className="bx--breadcrumb-item"
       >
-         
-      </span>
-    </div>
+        <span
+          className="bx--link"
+        >
+           
+        </span>
+      </div>
+    </Item>
   </div>
 </BreadcrumbSkeleton>
 `;
diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js
@@ -8,13 +8,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const ButtonSkeleton = ({ className, small, href, size, ...rest }) => {
   const enabled = useFeatureFlag('enable-v11-release');
+  const prefix = usePrefix();
 
   const buttonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -8,16 +8,15 @@
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import { ButtonKinds } from '../../prop-types/types';
 import deprecate from '../../prop-types/deprecate';
 import { composeEventHandlers } from '../../tools/events';
 import { keys, matches } from '../../internal/keyboard';
+import { usePrefix } from '../../internal/usePrefix';
 import { useId } from '../../internal/useId';
 import toggleClass from '../../tools/toggleClass';
 import { useFeatureFlag } from '../FeatureFlags';
 
-const { prefix } = settings;
 const Button = React.forwardRef(function Button(
   {
     children,
@@ -52,6 +51,7 @@ const Button = React.forwardRef(function Button(
   const [isFocused, setIsFocused] = useState(false);
   const tooltipRef = useRef(null);
   const tooltipTimeout = useRef(null);
+  const prefix = usePrefix();
 
   const closeTooltips = (evt) => {
     const tooltipNode = document?.querySelectorAll(`.${prefix}--tooltip--a11y`);

diff --git a/packages/react/src/components/Checkbox/Checkbox.Skeleton.js b/packages/react/src/components/Checkbox/Checkbox.Skeleton.js
@@ -8,22 +8,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
-
-const CheckboxSkeleton = ({ className, ...rest }) => (
-  <div
-    className={cx(
-      `${prefix}--form-item`,
-      `${prefix}--checkbox-wrapper`,
-      `${prefix}--checkbox-label`,
-      className
-    )}
-    {...rest}>
-    <span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
-  </div>
-);
+const CheckboxSkeleton = ({ className, ...rest }) => {
+  const prefix = usePrefix();
+  return (
+    <div
+      className={cx(
+        `${prefix}--form-item`,
+        `${prefix}--checkbox-wrapper`,
+        `${prefix}--checkbox-label`,
+        className
+      )}
+      {...rest}>
+      <span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
+    </div>
+  );
+};
 
 CheckboxSkeleton.propTypes = {
   /**

diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
@@ -10,10 +10,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { Text } from '../Text';
 import { useFeatureFlag } from '../FeatureFlags';
-import { settings } from 'carbon-components';
 import deprecate from '../../prop-types/deprecate';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Checkbox = React.forwardRef(function Checkbox(
   {
@@ -30,6 +28,7 @@ const Checkbox = React.forwardRef(function Checkbox(
   ref
 ) {
   const enabled = useFeatureFlag('enable-v11-release');
+  const prefix = usePrefix();
 
   const labelClasses = classNames(`${prefix}--checkbox-label`, [
     enabled ? null : className,