Merge branch 'main' into static-width-table-fix

packages/carbon-react/.storybook/styles.scss

@@ -13,19 +13,19 @@
 @use '../scss/components/tag';
 
 :root {
-  @include styles.theme(styles.$white, button.$white, tag.$white);
+  @include styles.theme(styles.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include styles.theme(styles.$g10, button.$g10, tag.$g10);
+  @include styles.theme(styles.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include styles.theme(styles.$g90, button.$g90, tag.$g90);
+  @include styles.theme(styles.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include styles.theme(styles.$g100, button.$g100, tag.$g100);
+  @include styles.theme(styles.$g100);
 }
 
 body {

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

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

packages/carbon-react/icons/index.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export * from '@carbon/icons-react';
+export * from '@carbon/icons-react/next';

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.4.0",
+  "version": "0.5.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@carbon/feature-flags": "^0.6.0",
     "@carbon/icons-react": "^10.38.0",
-    "@carbon/styles": "^0.4.0",
+    "@carbon/styles": "^0.5.0-rc.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.43.0",
-    "carbon-components-react": "^7.43.0",
+    "carbon-components": "^10.44.0-rc.0",
+    "carbon-components-react": "^7.44.0-rc.0",
     "carbon-icons": "^7.0.7"
   },
   "devDependencies": {

packages/carbon-react/scss/compat/_theme.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/compat/theme';

packages/carbon-react/scss/compat/_themes.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/compat/themes';

packages/carbon-react/src/components/Icons/Icons.stories.js

@@ -4,9 +4,10 @@
  * 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 React from 'react';
-import { Bee, Bicycle, ChevronUp } from '@carbon/icons-react/next';
+
 import './Icons.stories.scss';
+import React from 'react';
+import { Bee, Bicycle, ChevronUp } from '../../../icons';
 
 export default {
   title: 'Elements/Icons',

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/carbon-react/tasks/build-styles.js

@@ -449,6 +449,20 @@ async function build() {
           },
         ],
       },
+      {
+        type: 'directory',
+        filepath: 'compat',
+        files: [
+          {
+            type: 'file',
+            filepath: '_theme.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_themes.scss',
+          },
+        ],
+      },
     ],
   };
   const files = collect(styles);

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.43.0",
+  "version": "10.44.0-rc.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",

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),
@@ -128,6 +127,10 @@
     }
   }
 
+  .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid {
+    padding-right: 1rem;
+  }
+
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
     background-color: $interactive-04;
   }
@@ -139,6 +142,10 @@
     color: $disabled-02;
   }
 
+  .#{$prefix}--slider--disabled.#{$prefix}--slider {
+    cursor: not-allowed;
+  }
+
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $ui-03;
 
@@ -166,7 +173,6 @@
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
     background-color: $ui-03;
-    cursor: not-allowed;
   }
 
   .#{$prefix}--slider--disabled

packages/components/src/globals/scss/_helper-mixins.scss

@@ -185,6 +185,8 @@
 
   &::before {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     animation: 3000ms ease-in-out skeleton infinite;

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -6385,9 +6385,9 @@ Map {
   "ClickableTile" => Object {
     "defaultProps": Object {
       "clicked": false,
-      "handleClick": [Function],
-      "handleKeyDown": [Function],
       "light": false,
+      "onClick": [Function],
+      "onKeyDown": [Function],
     },
     "propTypes": Object {
       "children": Object {
@@ -6396,18 +6396,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",
       },
@@ -6416,6 +6418,9 @@ Map {
   "SelectableTile" => Object {
     "defaultProps": Object {
       "light": false,
+      "onChange": [Function],
+      "onClick": [Function],
+      "onKeyDown": [Function],
       "selected": false,
       "tabIndex": 0,
       "title": "title",
@@ -6480,9 +6485,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",
@@ -6499,9 +6504,7 @@ Map {
       "expanded": Object {
         "type": "bool",
       },
-      "handleClick": Object {
-        "type": "func",
-      },
+      "handleClick": [Function],
       "id": Object {
         "type": "string",
       },

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "7.43.0",
+  "version": "7.44.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -100,7 +100,7 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "browserslist-config-carbon": "^10.6.1",
-    "carbon-components": "^10.43.0",
+    "carbon-components": "^10.44.0-rc.0",
     "carbon-icons": "^7.0.5",
     "chalk": "^4.1.1",
     "cli-table": "^0.3.0",

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>
   );