Merge branch 'carbon-design-system:main' into fix/es-build-size

packages/carbon-react/.storybook/main.js

@@ -28,6 +28,8 @@ module.exports = {
     './Welcome/Welcome.stories.js',
     '../src/**/*.stories.js',
     '../src/**/*.stories.mdx',
+    '../../react/src/**/next/*.stories.js',
+    '../../react/src/**/next/*.stories.mdx',
   ],
   webpack(config) {
     const babelLoader = config.module.rules.find((rule) => {

packages/react/.storybook/main.js

@@ -7,6 +7,7 @@
 
 'use strict';
 
+const glob = require('fast-glob');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const customProperties = require('postcss-custom-properties');
@@ -36,11 +37,17 @@ module.exports = {
     require.resolve('./addon-theme/register'),
   ],
 
-  stories: [
-    './Welcome/Welcome.stories.js',
-    '../src/**/*-story.js',
-    '../src/**/*.stories.mdx',
-  ],
+  stories: glob.sync(
+    [
+      './Welcome/Welcome.stories.js',
+      '../src/**/*-story.js',
+      '../src/**/*.stories.mdx',
+    ],
+    {
+      cwd: __dirname,
+      ignore: ['../**/next/**'],
+    }
+  ),
 
   webpack(config) {
     const babelLoader = config.module.rules.find((rule) => {

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

@@ -5692,6 +5692,9 @@ Map {
     },
     "displayName": "Switch",
     "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
       "className": Object {
         "type": "string",
       },
@@ -5724,7 +5727,6 @@ Map {
         "type": "bool",
       },
       "text": Object {
-        "isRequired": true,
         "type": "string",
       },
     },

packages/react/package.json

@@ -111,6 +111,7 @@
     "css-loader": "^3.4.2",
     "cypress": "^8.1.0",
     "cypress-real-events": "^1.5.1",
+    "fast-glob": "^3.2.7",
     "fast-sass-loader": "^1.5.0",
     "gzip-size": "^6.0.0",
     "lcov2badge": "^0.1.0",

packages/react/src/components/Popover/Popover-story.js → packages/react/src/components/Popover/next/Popover.stories.js

@@ -14,10 +14,10 @@ import {
 } from '@carbon/icons-react';
 import { withKnobs, boolean, select } from '@storybook/addon-knobs';
 import React from 'react';
-import { Popover, PopoverContent } from '../Popover';
-import Button from '../Button';
+import { Popover, PopoverContent } from '../../Popover';
+import Button from '../../Button';
 import mdx from './Popover.mdx';
-import { useOutsideClick } from '../../internal/useOutsideClick';
+import { useOutsideClick } from '../../../internal/useOutsideClick';
 
 export default {
   title: 'Experimental/unstable_Popover',

packages/react/src/components/Switch/Switch.js

@@ -14,6 +14,7 @@ const { prefix } = settings;
 
 const Switch = React.forwardRef(function Switch(props, tabRef) {
   const {
+    children,
     className,
     disabled,
     index,
@@ -57,7 +58,7 @@ const Switch = React.forwardRef(function Switch(props, tabRef) {
       {...other}
       {...commonProps}>
       <span className={`${prefix}--content-switcher__label`} title={text}>
-        {text}
+        {text !== undefined ? text : children}
       </span>
     </button>
   );
@@ -66,6 +67,11 @@ const Switch = React.forwardRef(function Switch(props, tabRef) {
 Switch.displayName = 'Switch';
 
 Switch.propTypes = {
+  /**
+   * Provide child elements to be rendered inside of the Switch
+   */
+  children: PropTypes.node,
+
   /**
    * Specify an optional className to be added to your Switch
    */
@@ -107,7 +113,7 @@ Switch.propTypes = {
   /**
    * Provide the contents of your Switch
    */
-  text: PropTypes.string.isRequired,
+  text: PropTypes.string,
 };
 
 Switch.defaultProps = {

packages/react/src/components/Text/Text-story.js

@@ -10,6 +10,11 @@ import { LayoutDirection } from '../Layout';
 import { TextDirection, Text } from '../Text';
 import RadioButtonGroup from '../RadioButtonGroup';
 import RadioButton from '../RadioButton';
+import Button from '../Button';
+import Dropdown from '../Dropdown';
+import ContentSwitcher from '../ContentSwitcher';
+import Switch from '../Switch';
+import { Heading } from '../Heading';
 
 export default {
   title: 'Experimental/unstable_Text',
@@ -88,3 +93,44 @@ export const SetTextDirection = () => {
     </TextDirection>
   );
 };
+
+export const ComponentExamples = () => {
+  const rtlText = 'שלום!!';
+  const dropdownItems = [
+    {
+      id: 'option-0',
+      text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+    },
+    {
+      id: 'option-1',
+      text: rtlText,
+    },
+  ];
+  return (
+    <>
+      <Heading>{rtlText}</Heading>
+      <Button kind="ghost">
+        <Text>{rtlText}</Text>
+      </Button>
+      <div style={{ width: 400 }}>
+        <Dropdown
+          id="default"
+          titleText="Using <Text> with `itemToElement`"
+          helperText="This is some helper text"
+          label="Dropdown menu options"
+          items={dropdownItems}
+          itemToElement={(item) => <Text>{item.text}</Text>}
+        />
+      </div>
+      <ContentSwitcher
+        helperText="Using <Text> within <Switch>"
+        onChange={() => {}}>
+        <Switch name="one">
+          <Text>{rtlText}</Text>
+        </Switch>
+        <Switch name="two" text="Second section" />
+        <Switch name="three" text="Third section" />
+      </ContentSwitcher>
+    </>
+  );
+};

yarn.lock

@@ -10349,6 +10349,7 @@ __metadata:
     cypress: ^8.1.0
     cypress-real-events: ^1.5.1
     downshift: 5.2.1
+    fast-glob: ^3.2.7
     fast-sass-loader: ^1.5.0
     flatpickr: 4.6.9
     gzip-size: ^6.0.0