diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
index 3ba18aeb89bc..b9bc4a79201c 100644
--- 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 (
-
+ {
+ return dir;
+ }}>
+
+
);
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
index 8cdcca8cd56f..8e65efac1227 100644
--- 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`] = `
Heading A
@@ -68,6 +69,7 @@ exports[`Accordion should render 1`] = `
Heading B
@@ -105,6 +107,7 @@ exports[`Accordion should render 1`] = `
Heading C
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
index c44d8ef26141..d031bf658ca9 100644
--- 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
Test title
diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js
index 8ad5a5cce133..18b3e8eb960e 100644
--- 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}
) : (
- {children}
+ {children}
)}
);
diff --git a/packages/react/src/components/DataTable/TableBatchActions.tsx b/packages/react/src/components/DataTable/TableBatchActions.tsx
index 6eb6e9d26af8..7414d3b35842 100644
--- a/packages/react/src/components/DataTable/TableBatchActions.tsx
+++ b/packages/react/src/components/DataTable/TableBatchActions.tsx
@@ -134,7 +134,7 @@ const TableBatchActions: TableBatchActionsComponent = ({
{...rest}>
-
+
{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
index a00dbc7d6598..5ebab2ced0e7 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -74,6 +74,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
/>
Select row
@@ -110,6 +111,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
/>
Select row
@@ -146,6 +148,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
/>
Select row
@@ -240,6 +243,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
/>
Select row
@@ -276,6 +280,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
/>
Select row
@@ -312,6 +317,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
/>
Select row
@@ -365,7 +371,9 @@ exports[`DataTable behaves as expected selection should render and match snapsho
-
+
0 items selected
@@ -802,7 +810,9 @@ exports[`DataTable renders as expected - Component API should render and match s
-
+
0 items selected
diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
index 89b237cb3094..f0b7a1271259 100644
--- 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 (
);
diff --git a/packages/react/src/components/StructuredList/StructuredList.tsx b/packages/react/src/components/StructuredList/StructuredList.tsx
index 023b7aa336a0..e01286a8b386 100644
--- a/packages/react/src/components/StructuredList/StructuredList.tsx
+++ b/packages/react/src/components/StructuredList/StructuredList.tsx
@@ -18,6 +18,7 @@ import classNames from 'classnames';
import { useId } from '../../internal/useId';
import deprecate from '../../prop-types/deprecate';
import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
type DivAttrs = HTMLAttributes;
@@ -473,16 +474,16 @@ export function StructuredListCell(props: StructuredListCellProps) {
if (head) {
return (
-
+
{children}
-
+
);
}
return (
-
+
{children}
-
+
);
}
StructuredListCell.propTypes = {
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 09b54119adc4..e3b3b01b443a 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -41,6 +41,7 @@ import deprecate from '../../prop-types/deprecate';
import { Close } from '@carbon/icons-react';
import { useEvent } from '../../internal/useEvent';
import { useMatchMedia } from '../../internal/useMatchMedia';
+import { Text } from '../Text';
// Used to manage the overall state of the Tabs
type TabsContextType = {
@@ -902,11 +903,11 @@ const Tab = forwardRef(function Tab(
{}
)}
-
{children}
-
+
{/* always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state */}
(function Tab(
{!dismissable && Icon && }
- {hasSecondaryLabel && (
-
{secondaryLabel}
-
+
)}
);
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 2323dcbbae3f..f51a005d5839 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -12,6 +12,7 @@ import { Close } from '@carbon/icons-react';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { usePrefix } from '../../internal/usePrefix';
import { PolymorphicProps } from '../../types/common';
+import { Text } from '../Text';
const getInstanceId = setupGetInstanceId();
const TYPES = {
@@ -127,11 +128,11 @@ const Tag = ({
const ComponentTag = BaseComponent ?? 'div';
return (
-
{children !== null && children !== undefined ? children : typeText}
-
+
);
};
diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
index d5c3aedabe43..9f2785deb8f8 100644
--- a/packages/react/src/components/Text/Text.tsx
+++ b/packages/react/src/components/Text/Text.tsx
@@ -22,7 +22,7 @@ export type TextProps = PolymorphicProps<
function Text({
as,
children,
- dir,
+ dir = 'auto',
...rest
}: TextProps) {
// TODO: Update with context typing once its been converted to TS
diff --git a/packages/react/src/components/Text/TextDirection.tsx b/packages/react/src/components/Text/TextDirection.tsx
index e3bc10a431a1..86451f0b3d82 100644
--- a/packages/react/src/components/Text/TextDirection.tsx
+++ b/packages/react/src/components/Text/TextDirection.tsx
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
import React, { ReactNode, useEffect, useMemo, useRef } from 'react';
import { TextDirectionContext } from './TextDirectionContext';
-export type TextDir = 'ltr' | 'rtl' | 'auto';
+export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
export interface TextDirectionProps {
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index 90dddf30c5a6..fe4bdb5c4749 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -16,6 +16,7 @@ import { useAnnouncer } from '../../internal/useAnnouncer';
import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
import { useMergedRefs } from '../../internal/useMergedRefs';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { Text } from '../Text';
const getInstanceId = setupGetInstanceId();
@@ -201,9 +202,9 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
});
const label = labelText ? (
-
+
) : null;
const counterClasses = classNames(`${prefix}--label`, {
@@ -212,7 +213,9 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
const counter =
enableCounter && maxCount ? (
-