Merge branch 'main' into 9617-update-theme-compat-issue

packages/carbon-react/__tests__/index-test.js

@@ -75,6 +75,7 @@ Array [
   "IconSkeleton",
   "InlineLoading",
   "InlineNotification",
+  "Layer",
   "Link",
   "ListItem",
   "Loading",

packages/carbon-react/src/index.js

@@ -203,3 +203,5 @@ export {
 } from './components/Grid';
 
 export { Theme, useTheme } from './components/Theme';
+
+export { Layer } from './components/Layer';

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

@@ -724,6 +724,10 @@
     width: auto;
   }
 
+  .#{$prefix}--data-table-container--static {
+    width: fit-content;
+  }
+
   // -------------
   // Sticky header
   // -------------

packages/components/src/components/progress-indicator/_progress-indicator.scss

@@ -102,7 +102,7 @@
     margin-right: 0.75rem;
   }
 
-  .#{$prefix}--progress-label:active {
+  .#{$prefix}--tooltip__label.#{$prefix}--progress-label:active {
     box-shadow: 0 rem(3px) 0 0 $interactive-01;
     color: $interactive-01;
   }

packages/components/src/components/slider/_slider.scss

@@ -31,7 +31,9 @@
     width: 100%;
     min-width: rem(200px);
     max-width: rem(640px);
+    padding: $spacing-05 0;
     margin: 0 $carbon--spacing-05;
+    cursor: pointer;
   }
 
   .#{$prefix}--slider__range-label {
@@ -50,7 +52,6 @@
     width: 100%;
     height: rem(2px);
     background: $ui-03;
-    cursor: pointer;
     transform: translate(0%, -50%);
   }
 
@@ -80,13 +81,11 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
-    top: 0;
     width: rem(14px);
     height: rem(14px);
     background: $ui-05;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-    cursor: pointer;
     outline: none;
     transform: translate(-50%, -50%);
     transition: transform $duration--fast-02 motion(standard, productive),
@@ -143,6 +142,10 @@
     color: $disabled-02;
   }
 
+  .#{$prefix}--slider--disabled.#{$prefix}--slider {
+    cursor: not-allowed;
+  }
+
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $ui-03;
 
@@ -170,7 +173,6 @@
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
     background-color: $ui-03;
-    cursor: not-allowed;
   }
 
   .#{$prefix}--slider--disabled

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,
@@ -1132,6 +1150,9 @@ Map {
         "title": Object {
           "type": "node",
         },
+        "useStaticWidth": Object {
+          "type": "bool",
+        },
       },
     },
     "TableExpandHeader": Object {
@@ -1769,6 +1790,9 @@ Map {
       "title": Object {
         "type": "node",
       },
+      "useStaticWidth": Object {
+        "type": "bool",
+      },
     },
   },
   "TableExpandHeader" => Object {
@@ -6379,9 +6403,9 @@ Map {
   "ClickableTile" => Object {
     "defaultProps": Object {
       "clicked": false,
-      "handleClick": [Function],
-      "handleKeyDown": [Function],
       "light": false,
+      "onClick": [Function],
+      "onKeyDown": [Function],
     },
     "propTypes": Object {
       "children": Object {
@@ -6390,18 +6414,20 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "handleClick": Object {
-        "type": "func",
-      },
-      "handleKeyDown": Object {
-        "type": "func",
-      },
+      "handleClick": [Function],
+      "handleKeyDown": [Function],
       "href": Object {
         "type": "string",
       },
       "light": Object {
         "type": "bool",
       },
+      "onClick": Object {
+        "type": "func",
+      },
+      "onKeyDown": Object {
+        "type": "func",
+      },
       "rel": Object {
         "type": "string",
       },
@@ -6410,6 +6436,9 @@ Map {
   "SelectableTile" => Object {
     "defaultProps": Object {
       "light": false,
+      "onChange": [Function],
+      "onClick": [Function],
+      "onKeyDown": [Function],
       "selected": false,
       "tabIndex": 0,
       "title": "title",
@@ -6474,9 +6503,9 @@ Map {
   "ExpandableTile" => Object {
     "defaultProps": Object {
       "expanded": false,
-      "handleClick": [Function],
       "light": false,
       "onBeforeClick": [Function],
+      "onClick": [Function],
       "tabIndex": 0,
       "tileCollapsedIconText": "Interact to expand Tile",
       "tileExpandedIconText": "Interact to collapse Tile",
@@ -6493,9 +6522,7 @@ Map {
       "expanded": Object {
         "type": "bool",
       },
-      "handleClick": Object {
-        "type": "func",
-      },
+      "handleClick": [Function],
       "id": Object {
         "type": "string",
       },

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`}>

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,

packages/react/src/components/Accordion/AccordionItem.js

@@ -10,6 +10,7 @@ import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import { Text } from '../Text';
 import { match, keys } from '../../internal/keyboard';
 import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate.js';
@@ -84,7 +85,9 @@ function AccordionItem({
         onKeyDown={onKeyDown}
         type="button">
         <ChevronRight16 className={`${prefix}--accordion__arrow`} />
-        <div className={`${prefix}--accordion__title`}>{title}</div>
+        <Text as="div" className={`${prefix}--accordion__title`}>
+          {title}
+        </Text>
       </Expando>
       <div id={id} className={`${prefix}--accordion__content`}>
         {children}

packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap

@@ -31,6 +31,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading A
         </div>
@@ -68,6 +69,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading B
         </div>
@@ -105,6 +107,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="bx--accordion__title"
+          dir="auto"
         >
           Heading C
         </div>

packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap

@@ -54,11 +54,17 @@ exports[`AccordionItem should render 1`] = `
             </svg>
           </Icon>
         </ForwardRef(ChevronRight16)>
-        <div
+        <Text
+          as="div"
           className="bx--accordion__title"
         >
-          A heading
-        </div>
+          <div
+            className="bx--accordion__title"
+            dir="auto"
+          >
+            A heading
+          </div>
+        </Text>
       </button>
     </defaultRenderExpando>
     <div

packages/react/src/components/Button/Button.js

@@ -212,14 +212,15 @@ const Button = React.forwardRef(function Button(
     component = 'a';
     otherProps = anchorProps;
   }
+
   return React.createElement(
     component,
     {
       onMouseEnter: composeEventHandlers([onMouseEnter, handleMouseEnter]),
       onMouseLeave: composeEventHandlers([onMouseLeave, handleMouseLeave]),
       onFocus: composeEventHandlers([onFocus, handleFocus]),
       onBlur: composeEventHandlers([onBlur, handleBlur]),
-      onClick: composeEventHandlers([handleClick, onClick]),
+      onClick: composeEventHandlers([onClick, handleClick]),
       ...other,
       ...commonProps,
       ...otherProps,

packages/react/src/components/Checkbox/Checkbox.js

@@ -8,6 +8,7 @@
 import PropTypes from 'prop-types';
 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';
@@ -69,7 +70,7 @@ const Checkbox = React.forwardRef(function Checkbox(
         }}
       />
       <label htmlFor={id} className={labelClasses} title={title || null}>
-        <span className={innerLabelClasses}>{labelText}</span>
+        <Text className={innerLabelClasses}>{labelText}</Text>
       </label>
     </div>
   );

packages/react/src/components/ComboBox/ComboBox.js

@@ -9,6 +9,7 @@ import cx from 'classnames';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, useRef } from 'react';
+import { Text } from '../Text';
 import { settings } from 'carbon-components';
 import {
   Checkmark16,
@@ -293,9 +294,9 @@ const ComboBox = React.forwardRef((props, ref) => {
         return (
           <div className={wrapperClasses}>
             {titleText && (
-              <label className={titleClasses} {...labelProps}>
+              <Text as="label" className={titleClasses} {...labelProps}>
                 {titleText}
-              </label>
+              </Text>
             )}
             <ListBox
               className={className}
@@ -391,9 +392,9 @@ const ComboBox = React.forwardRef((props, ref) => {
               </ListBox.Menu>
             </ListBox>
             {helperText && !invalid && !warn && (
-              <div id={comboBoxHelperId} className={helperClasses}>
+              <Text as="div" id={comboBoxHelperId} className={helperClasses}>
                 {helperText}
-              </div>
+              </Text>
             )}
           </div>
         );

packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js

@@ -9,9 +9,6 @@ import React from 'react';
 import ContentSwitcher from '../ContentSwitcher';
 import Switch from '../Switch';
 import { mount, shallow } from 'enzyme';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
 
 describe('ContentSwitcher', () => {
   describe('component initial rendering', () => {
@@ -24,10 +21,6 @@ describe('ContentSwitcher', () => {
 
     const children = wrapper.find(Switch);
 
-    it('should have the correct class', () => {
-      expect(wrapper.hasClass(`${prefix}--content-switcher`)).toEqual(true);
-    });
-
     it('should render children as expected', () => {
       expect(children.length).toEqual(2);
     });