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

carbon-design-system · Sep 18, 2023 · 4347788 · 4347788
1 parent 7d7ebb2
commit 4347788
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 40 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/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx
@@ -9,13 +9,18 @@ import PropTypes from 'prop-types';
 import React, { type ComponentProps } from 'react';
 import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 type ListItemProps = ComponentProps<'li'>;
 
-export default function ListItem({ className, ...other }: ListItemProps) {
+export default function ListItem({ className, children }: ListItemProps) {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--list__item`, className);
-  return <li className={classNames} {...other} />;
+  return (
+    <Text as="li" className={classNames}>
+      {children}
+    </Text>
+  );
 }
 
 ListItem.propTypes = {

diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
@@ -29,6 +29,7 @@ import {
   InformationSquareFilled,
 } from '@carbon/icons-react';
 
+import { Text } from '../Text';
 import Button, { type ButtonProps } from '../Button';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren';
@@ -458,17 +459,19 @@ export function ToastNotification({
         ref={contentRef}
         className={`${prefix}--toast-notification__details`}>
         {title && (
-          <div className={`${prefix}--toast-notification__title`}>{title}</div>
+          <Text as="div" className={`${prefix}--toast-notification__title`}>
+            {title}
+          </Text>
         )}
         {subtitle && (
-          <div className={`${prefix}--toast-notification__subtitle`}>
+          <Text as="div" className={`${prefix}--toast-notification__subtitle`}>
             {subtitle}
-          </div>
+          </Text>
         )}
         {caption && (
-          <div className={`${prefix}--toast-notification__caption`}>
+          <Text as="div" className={`${prefix}--toast-notification__caption`}>
             {caption}
-          </div>
+          </Text>
         )}
         {children}
       </div>
@@ -711,14 +714,16 @@ export function InlineNotification({
           ref={contentRef}
           className={`${prefix}--inline-notification__text-wrapper`}>
           {title && (
-            <div className={`${prefix}--inline-notification__title`}>
+            <Text as="div" className={`${prefix}--inline-notification__title`}>
               {title}
-            </div>
+            </Text>
           )}
           {subtitle && (
-            <div className={`${prefix}--inline-notification__subtitle`}>
+            <Text
+              as="div"
+              className={`${prefix}--inline-notification__subtitle`}>
               {subtitle}
-            </div>
+            </Text>
           )}
           {children}
         </div>
@@ -986,18 +991,20 @@ export function ActionableNotification({
         <div className={`${prefix}--actionable-notification__text-wrapper`}>
           <div className={`${prefix}--actionable-notification__content`}>
             {title && (
-              <div
+              <Text
+                as="div"
                 className={`${prefix}--actionable-notification__title`}
                 id={id}>
                 {title}
-              </div>
+              </Text>
             )}
             {subtitle && (
-              <div
+              <Text
+                as="div"
                 className={`${prefix}--actionable-notification__subtitle`}
                 id={subtitleId}>
                 {subtitle}
-              </div>
+              </Text>
             )}
             {children}
           </div>

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
@@ -25,7 +25,7 @@ export default {
 };
 
 export const Default = () => (
-  <OverflowMenu aria-label="overflow-menu">
+  <OverflowMenu flipped={document?.dir === 'rtl'} aria-label="overflow-menu">
     <OverflowMenuItem itemText="Stop app" />
     <OverflowMenuItem itemText="Restart app" />
     <OverflowMenuItem itemText="Rename app" />
@@ -36,7 +36,7 @@ export const Default = () => (
 );
 
 export const RenderCustomIcon = () => (
-  <OverflowMenu renderIcon={Filter}>
+  <OverflowMenu flipped={document?.dir === 'rtl'} renderIcon={Filter}>
     <OverflowMenuItem itemText="Filter A" />
     <OverflowMenuItem itemText="Filter B" />
   </OverflowMenu>
@@ -54,7 +54,7 @@ export const Playground = (args) => (
 );
 
 Playground.args = {
-  flipped: false,
+  flipped: document?.dir === 'rtl',
   focusTrap: false,
   open: false,
 };

diff --git a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx
@@ -12,6 +12,7 @@ import { keys, match } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
 import { warning } from '../../internal/warning';
 import { ForwardRefReturn } from '../../types/common';
+import { Text } from '../Text';
 
 export interface OverflowMenuItemProps
   extends React.HTMLAttributes<HTMLElement> {
@@ -160,7 +161,7 @@ const OverflowMenuItem: OverflowMenuItemComponent = React.forwardRef(
     })();
 
     return (
-      <li className={overflowMenuItemClasses} role="none">
+      <Text as="li" className={overflowMenuItemClasses} role="none">
         <TagToUse
           className={overflowMenuBtnClasses}
           disabled={disabled}
@@ -183,7 +184,7 @@ const OverflowMenuItem: OverflowMenuItemComponent = React.forwardRef(
           {...rest}>
           {OverflowMenuItemContent}
         </TagToUse>
-      </li>
+      </Text>
     );
   }
 );

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -16,6 +16,7 @@ import {
   Incomplete,
 } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 const defaultTranslations = {
   'carbon.progress-step.complete': 'Complete',
@@ -212,9 +213,13 @@ function ProgressStep({
           prefix={prefix}
         />
         <div className={`${prefix}--progress-text`}>
-          <p className={`${prefix}--progress-label`}>{label}</p>
+          <Text as="p" className={`${prefix}--progress-label`}>
+            {label}
+          </Text>
           {secondaryLabel !== null && secondaryLabel !== undefined ? (
-            <p className={`${prefix}--progress-optional`}>{secondaryLabel}</p>
+            <Text as="p" className={`${prefix}--progress-optional`}>
+              {secondaryLabel}
+            </Text>
           ) : null}
         </div>
         <span className={`${prefix}--assistive-text`}>{message}</span>

diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -26,6 +26,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { composeEventHandlers } from '../../tools/events';
+import { Text } from '../Text';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -190,9 +191,9 @@ const Select = React.forwardRef(function Select(
   })();
   const error =
     invalid || warn ? (
-      <div className={`${prefix}--form-requirement`} id={errorId}>
+      <Text as="div" className={`${prefix}--form-requirement`} id={errorId}>
         {errorText}
-      </div>
+      </Text>
     ) : null;
   const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled,
@@ -203,9 +204,9 @@ const Select = React.forwardRef(function Select(
     : `select-helper-text-${selectInstanceId}`;
 
   const helper = helperText ? (
-    <div id={helperId} className={helperTextClasses}>
+    <Text as="div" id={helperId} className={helperTextClasses}>
       {helperText}
-    </div>
+    </Text>
   ) : null;
   const ariaProps = {};
   if (invalid) {
@@ -273,9 +274,9 @@ const Select = React.forwardRef(function Select(
     <div className={classNames(`${prefix}--form-item`, className)}>
       <div className={selectClasses}>
         {!noLabel && (
-          <label htmlFor={id} className={labelClasses}>
+          <Text as="label" htmlFor={id} className={labelClasses}>
             {labelText}
-          </label>
+          </Text>
         )}
         {inline && (
           <div className={`${prefix}--select-input--inline__wrapper`}>

diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
@@ -17,6 +17,7 @@ import { PrefixContext } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 import { FeatureFlagContext } from '../FeatureFlags';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { Text } from '../Text';
 
 const defaultFormatLabel = (value, label) => {
   return typeof label === 'function' ? label(value) : `${value}${label}`;
@@ -825,13 +826,17 @@ export default class Slider extends PureComponent<SliderProps> {
 
           return (
             <div className={classNames(`${prefix}--form-item`, className)}>
-              <label htmlFor={id} className={labelClasses} id={labelId}>
+              <Text
+                as="label"
+                htmlFor={id}
+                className={labelClasses}
+                id={labelId}>
                 {labelText}
-              </label>
+              </Text>
               <div className={`${prefix}--slider-container`}>
-                <span className={`${prefix}--slider__range-label`}>
+                <Text className={`${prefix}--slider__range-label`}>
                   {formatLabel(min, minLabel)}
-                </span>
+                </Text>
                 {/* @ts-ignore onBlur + onChange types are incompatible*/}
                 <div
                   className={sliderClasses}
@@ -867,9 +872,9 @@ export default class Slider extends PureComponent<SliderProps> {
                     ref={this.filledTrackRef}
                   />
                 </div>
-                <span className={`${prefix}--slider__range-label`}>
+                <Text className={`${prefix}--slider__range-label`}>
                   {formatLabel(max, maxLabel)}
-                </span>
+                </Text>
                 <input
                   type={hideTextInput ? 'hidden' : inputType}
                   id={`${id}-input-for-slider`}
@@ -903,23 +908,25 @@ export default class Slider extends PureComponent<SliderProps> {
                 )}
               </div>
               {!readOnly && isValid === false && (
-                <div
+                <Text
+                  as="div"
                   className={classNames(
                     `${prefix}--slider__validation-msg`,
                     `${prefix}--slider__validation-msg--invalid`,
                     `${prefix}--form-requirement`
                   )}>
                   {invalidText}
-                </div>
+                </Text>
               )}
               {!readOnly && warn && isValid && (
-                <div
+                <Text
+                  as="div"
                   className={classNames(
                     `${prefix}--slider__validation-msg`,
                     `${prefix}--form-requirement`
                   )}>
                   {warnText}
-                </div>
+                </Text>
               )}
             </div>
           );

diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
@@ -22,7 +22,7 @@ export type TextProps<T extends React.ElementType> = PolymorphicProps<
 function Text<T extends React.ElementType>({
   as,
   children,
-  dir,
+  dir = 'auto',
   ...rest
 }: TextProps<T>) {
   // TODO: Update with context typing once its been converted to TS