feat(React): update more components to use Text, improve RTL support (#…

…14679) * feat(React): update more components to use Text, improve RTL support * test(snapshot): update snapshots * feat(React): more component updates, fix tests * feat(React): add Text to more components * feat(React): add Text to a few more components * test(React): fix fileuploader tests * fix(Tabs): set text as div for secondary label
carbon-design-system · Oct 17, 2023 · 5d00063 · 5d00063
1 parent 8496e88
commit 5d00063
Show file tree

Hide file tree

Showing 41 changed files with 393 additions and 172 deletions.
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -21,6 +21,7 @@ import React from 'react';
 import { breakpoints } from '@carbon/layout';
 import { GlobalTheme } from '../src/components/Theme';
 import { Layout } from '../src/components/Layout';
+import { TextDirection } from '../src/components/Text';
 
 import theme from './theme';
 
@@ -322,7 +323,12 @@ const decorators = [
     return (
       <GlobalTheme theme={theme}>
         <Layout size={layoutSize || null} density={layoutDensity || null}>
-          <Story key={randomKey} {...context} />
+          <TextDirection
+            getTextDirection={(text) => {
+              return dir;
+            }}>
+            <Story key={randomKey} {...context} />
+          </TextDirection>
         </Layout>
       </GlobalTheme>
     );

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -31,6 +31,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="cds--accordion__title"
+          dir="auto"
         >
           Heading A
         </div>
@@ -68,6 +69,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="cds--accordion__title"
+          dir="auto"
         >
           Heading B
         </div>
@@ -105,6 +107,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="cds--accordion__title"
+          dir="auto"
         >
           Heading C
         </div>

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -28,6 +28,7 @@ exports[`AccordionItem renders as expected - Component API should render and mat
       </svg>
       <div
         class="cds--accordion__title"
+        dir="auto"
       >
         Test title
       </div>

diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js
@@ -11,6 +11,7 @@ import cx from 'classnames';
 import Link from '../Link';
 import { OverflowMenuHorizontal } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(
   {
@@ -60,7 +61,7 @@ const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(
             {children}
           </Link>
         ) : (
-          <span className={`${prefix}--link`}>{children}</span>
+          <Text className={`${prefix}--link`}>{children}</Text>
         )}
       </li>
     );

diff --git a/packages/react/src/components/DataTable/TableBatchActions.tsx b/packages/react/src/components/DataTable/TableBatchActions.tsx
@@ -134,7 +134,7 @@ const TableBatchActions: TableBatchActionsComponent = ({
       {...rest}>
       <div className={batchSummaryClasses}>
         <p className={`${prefix}--batch-summary__para`}>
-          <Text as="span">
+          <Text>
             {totalSelected > 1 || totalSelected === 0
               ? t('carbon.table.batch.items.selected', { totalSelected })
               : t('carbon.table.batch.item.selected', { totalSelected })}

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -75,6 +75,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -112,6 +113,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -149,6 +151,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -244,6 +247,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -281,6 +285,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -318,6 +323,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -371,7 +377,9 @@ exports[`DataTable behaves as expected selection should render and match snapsho
           <p
             class="cds--batch-summary__para"
           >
-            <span>
+            <span
+              dir="auto"
+            >
               0 items selected
             </span>
           </p>
@@ -812,7 +820,9 @@ exports[`DataTable renders as expected - Component API should render and match s
           <p
             class="cds--batch-summary__para"
           >
-            <span>
+            <span
+              dir="auto"
+            >
               0 items selected
             </span>
           </p>

diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -13,6 +13,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { ReactAttr } from '../../types/common';
+import { Text } from '../Text';
 
 const getInstanceId = setupGetInstanceId();
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
@@ -211,9 +212,9 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
   return (
     <div className={containerClasses}>
       {labelText && (
-        <label htmlFor={id} className={labelClasses}>
+        <Text as="label" htmlFor={id} className={labelClasses}>
           {labelText}
-        </label>
+        </Text>
       )}
       <div className={wrapperClasses}>
         {input}
@@ -227,19 +228,26 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
       {invalid && (
         <>
           {isFluid && <hr className={`${prefix}--date-picker__divider`} />}
-          <div className={`${prefix}--form-requirement`}>{invalidText}</div>
+          <Text as="div" className={`${prefix}--form-requirement`}>
+            {invalidText}
+          </Text>
         </>
       )}
       {warn && (
         <>
           {isFluid && <hr className={`${prefix}--date-picker__divider`} />}
-          <div className={`${prefix}--form-requirement`}>{warnText}</div>
+          <Text as="div" className={`${prefix}--form-requirement`}>
+            {warnText}
+          </Text>
         </>
       )}
-      {helperText && (
-        <div id={datePickerInputHelperId} className={helperTextClasses}>
+      {helperText && !invalid && (
+        <Text
+          as="div"
+          id={datePickerInputHelperId}
+          className={helperTextClasses}>
           {helperText}
-        </div>
+        </Text>
       )}
     </div>
   );

diff --git a/packages/react/src/components/FileUploader/FileUploader.tsx b/packages/react/src/components/FileUploader/FileUploader.tsx
@@ -14,6 +14,7 @@ import { ButtonKinds } from '../../prop-types/types';
 import { keys, matches } from '../../internal/keyboard';
 import { PrefixContext } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
+import { Text } from '../Text';
 
 export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
   /**
@@ -296,13 +297,17 @@ export default class FileUploader extends React.Component<
     return (
       <div className={classes} {...other}>
         {!labelTitle ? null : (
-          <p className={getHelperLabelClasses(`${prefix}--file--label`)}>
+          <Text
+            as="p"
+            className={getHelperLabelClasses(`${prefix}--file--label`)}>
             {labelTitle}
-          </p>
+          </Text>
         )}
-        <p className={getHelperLabelClasses(`${prefix}--label-description`)}>
+        <Text
+          as="p"
+          className={getHelperLabelClasses(`${prefix}--label-description`)}>
           {labelDescription}
-        </p>
+        </Text>
         <FileUploaderButton
           innerRef={this.uploaderButton}
           disabled={disabled}
@@ -324,9 +329,9 @@ export default class FileUploader extends React.Component<
                   className={selectedFileClasses}
                   ref={(node) => (this.nodes[index] = node as HTMLSpanElement)} // eslint-disable-line
                   {...other}>
-                  <p className={`${prefix}--file-filename`} id={name}>
+                  <Text as="p" className={`${prefix}--file-filename`} id={name}>
                     {name}
-                  </p>
+                  </Text>
                   <span className={`${prefix}--file__state-container`}>
                     <Filename
                       name={name}

diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.tsx b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
@@ -13,6 +13,7 @@ import { keys, matches } from '../../internal/keyboard';
 import uid from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
+import { Text } from '../Text';
 import { Tooltip } from '../Tooltip';
 
 export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
@@ -115,19 +116,24 @@ function FileUploaderItem({
             align="bottom"
             className={`${prefix}--file-filename-tooltip`}>
             <button className={`${prefix}--file-filename-button`} type="button">
-              <p
+              <Text
+                as="p"
                 title={name}
                 className={`${prefix}--file-filename-button`}
                 id={name}>
                 {name}
-              </p>
+              </Text>
             </button>
           </Tooltip>
         </div>
       ) : (
-        <p title={name} className={`${prefix}--file-filename`} id={name}>
+        <Text
+          as="p"
+          title={name}
+          className={`${prefix}--file-filename`}
+          id={name}>
           {name}
-        </p>
+        </Text>
       )}
 
       <div className={`${prefix}--file-container-item`}>
@@ -159,13 +165,13 @@ function FileUploaderItem({
           className={`${prefix}--form-requirement`}
           role="alert"
           id={`${name}-id-error`}>
-          <div className={`${prefix}--form-requirement__title`}>
+          <Text as="div" className={`${prefix}--form-requirement__title`}>
             {errorSubject}
-          </div>
+          </Text>
           {errorBody && (
-            <p className={`${prefix}--form-requirement__supplement`}>
+            <Text as="p" className={`${prefix}--form-requirement__supplement`}>
               {errorBody}
-            </p>
+            </Text>
           )}
         </div>
       )}

diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
@@ -12,21 +12,13 @@ import FileUploader from '../';
 import { uploadFiles } from '../test-helpers';
 
 const iconDescription = 'test description';
-const requiredProps = { iconDescription };
+const requiredProps = {
+  iconDescription,
+  labelTitle: 'Upload files',
+  labelDescription: 'Max file size is 500mb. Only .jpg files are supported.',
+};
 
 describe('FileUploader', () => {
-  describe('automated accessibility tests', () => {
-    it.skip('should have no axe violations', async () => {
-      const { container } = render(<FileUploader {...requiredProps} />);
-      await expect(container).toHaveNoAxeViolations();
-    });
-
-    it.skip('should have no AC violations', async () => {
-      const { container } = render(<FileUploader {...requiredProps} />);
-      await expect(container).toHaveNoACViolations('FileUploader');
-    });
-  });
-
   it('should support a custom class name on the root element', () => {
     const { container } = render(
       <FileUploader {...requiredProps} className="test" />

diff --git a/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js b/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js
@@ -81,7 +81,12 @@ describe('FluidTextInput', () => {
 
     it('should respect invalid prop', () => {
       const { container } = render(
-        <FluidTextInput id="input-1" labelText="FluidTextInput" invalid />
+        <FluidTextInput
+          id="input-1"
+          labelText="FluidTextInput"
+          invalid
+          invalidText="Invalid"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -172,7 +177,12 @@ describe('FluidTextInput', () => {
 
     it('should respect warn prop', () => {
       const { container } = render(
-        <FluidTextInput id="input-1" labelText="FluidTextInput label" warn />
+        <FluidTextInput
+          id="input-1"
+          labelText="FluidTextInput label"
+          warn
+          warnText="Warning"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access

diff --git a/packages/react/src/components/FormLabel/FormLabel-test.js b/packages/react/src/components/FormLabel/FormLabel-test.js
@@ -11,19 +11,21 @@ import FormLabel from '../FormLabel';
 
 describe('FormLabel', () => {
   it('should support a custom `className` prop on the outermost element', () => {
-    const { container } = render(<FormLabel className="test" />);
+    const { container } = render(<FormLabel className="test">Label</FormLabel>);
     expect(container.firstChild).toHaveClass('test');
   });
 
   it('should spread extra props on the outermost element', () => {
     const { container } = render(
-      <FormLabel aria-label="test" data-testid="test" />
+      <FormLabel aria-label="test" data-testid="test">
+        Label
+      </FormLabel>
     );
     expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 
   it('should support a unique id prop on the outermost element', () => {
-    const { container } = render(<FormLabel id="test-1" />);
+    const { container } = render(<FormLabel id="test-1">Label</FormLabel>);
     expect(container.firstChild).toHaveProperty('htmlFor', 'test-1');
   });
 });
diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 export interface FormLabelProps
   extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> {
@@ -42,9 +43,9 @@ function FormLabel({
   );
 
   return (
-    <label htmlFor={id} className={className} {...rest}>
+    <Text as="label" htmlFor={id} className={className} {...rest}>
       {children}
-    </label>
+    </Text>
   );
 }