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 (
{labelText && ( - + )}
{input} @@ -227,19 +228,26 @@ const DatePickerInput = React.forwardRef(function DatePickerInput( {invalid && ( <> {isFluid &&
} -
{invalidText}
+ + {invalidText} + )} {warn && ( <> {isFluid &&
} -
{warnText}
+ + {warnText} + )} - {helperText && ( -
+ {helperText && !invalid && ( + {helperText} -
+ )}
); diff --git a/packages/react/src/components/FileUploader/FileUploader.tsx b/packages/react/src/components/FileUploader/FileUploader.tsx index 072c7c34940e..7466f0173e11 100644 --- 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 { /** @@ -296,13 +297,17 @@ export default class FileUploader extends React.Component< return (
{!labelTitle ? null : ( -

+ {labelTitle} -

+ )} -

+ {labelDescription} -

+ (this.nodes[index] = node as HTMLSpanElement)} // eslint-disable-line {...other}> -

+ {name} -

+ { @@ -115,19 +116,24 @@ function FileUploaderItem({ align="bottom" className={`${prefix}--file-filename-tooltip`}>
) : ( -

+ {name} -

+ )}
@@ -159,13 +165,13 @@ function FileUploaderItem({ className={`${prefix}--form-requirement`} role="alert" id={`${name}-id-error`}> -
+ {errorSubject} -
+ {errorBody && ( -

+ {errorBody} -

+ )}
)} diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js index 40aa39b554a5..7a750b3219fc 100644 --- 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(); - await expect(container).toHaveNoAxeViolations(); - }); - - it.skip('should have no AC violations', async () => { - const { container } = render(); - await expect(container).toHaveNoACViolations('FileUploader'); - }); - }); - it('should support a custom class name on the root element', () => { const { container } = render( diff --git a/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js b/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js index fafabb2b9724..d544ac498d62 100644 --- 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( - + ); // 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( - + ); // 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 index c149a5b6f377..5613f41653c3 100644 --- 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(); + const { container } = render(Label); expect(container.firstChild).toHaveClass('test'); }); it('should spread extra props on the outermost element', () => { const { container } = render( - + + Label + ); expect(container.firstChild).toHaveAttribute('data-testid', 'test'); }); it('should support a unique id prop on the outermost element', () => { - const { container } = render(); + const { container } = render(Label); 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 index b0f4aa80092c..5e1743b1f030 100644 --- 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, 'htmlFor'> { @@ -42,9 +43,9 @@ function FormLabel({ ); return ( - + ); } diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx index 9fa18f078f04..eba39652f552 100644 --- a/packages/react/src/components/ListItem/ListItem.tsx +++ b/packages/react/src/components/ListItem/ListItem.tsx @@ -9,13 +9,22 @@ 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, + ...other +}: ListItemProps) { const prefix = usePrefix(); const classNames = classnames(`${prefix}--list__item`, className); - return
  • ; + return ( + + {children} + + ); } ListItem.propTypes = { diff --git a/packages/react/src/components/Menu/MenuItem.js b/packages/react/src/components/Menu/MenuItem.js index 87e4ad30dbd3..8e68928053d0 100644 --- a/packages/react/src/components/Menu/MenuItem.js +++ b/packages/react/src/components/Menu/MenuItem.js @@ -18,6 +18,7 @@ import { usePrefix } from '../../internal/usePrefix'; import { Menu } from './Menu'; import { MenuContext } from './MenuContext'; import { useLayoutDirection } from '../LayoutDirection'; +import { Text } from '../Text'; const hoverIntentDelay = 150; // in ms @@ -162,7 +163,9 @@ const MenuItem = React.forwardRef(function MenuItem(
    {IconElement && }
    -
    {label}
    + + {label} + {shortcut && !hasChildren && (
    {shortcut}
    )} diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js index 1d04dd39a7b9..5eca4542e223 100644 --- a/packages/react/src/components/Modal/Modal.js +++ b/packages/react/src/components/Modal/Modal.js @@ -19,6 +19,7 @@ import wrapFocus, { import setupGetInstanceId from '../../tools/setupGetInstanceId'; import { usePrefix } from '../../internal/usePrefix'; import { keys, match } from '../../internal/keyboard'; +import { Text } from '../Text'; const getInstanceId = setupGetInstanceId(); @@ -240,13 +241,19 @@ const Modal = React.forwardRef(function Modal(
    {passiveModal && modalButton} {modalLabel && ( -

    + {modalLabel} -

    + )} -

    + {modalHeading} -

    + {!passiveModal && modalButton}
    {title && ( -
    {title}
    + + {title} + )} {subtitle && ( -
    + {subtitle} -
    + )} {caption && ( -
    + {caption} -
    + )} {children}
    @@ -711,14 +714,16 @@ export function InlineNotification({ ref={contentRef} className={`${prefix}--inline-notification__text-wrapper`}> {title && ( -
    + {title} -
    + )} {subtitle && ( -
    + {subtitle} -
    + )} {children}
  • @@ -986,18 +991,20 @@ export function ActionableNotification({
    {title && ( -
    {title} -
    + )} {subtitle && ( -
    {subtitle} -
    + )} {children}
    diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx index f5166819a932..99b084453a11 100644 --- a/packages/react/src/components/NumberInput/NumberInput.tsx +++ b/packages/react/src/components/NumberInput/NumberInput.tsx @@ -14,6 +14,7 @@ import { useNormalizedInputProps as normalize } from '../../internal/useNormaliz import { usePrefix } from '../../internal/usePrefix'; import deprecate from '../../prop-types/deprecate'; import { FormContext } from '../FluidForm'; +import { Text } from '../Text'; export const translationIds = { 'increment.number': 'increment.number', @@ -596,9 +597,9 @@ function Label({ disabled, id, hideLabel, label }: Label) { if (label) { return ( - + ); } return null; @@ -624,9 +625,9 @@ function HelperText({ disabled, description, id }: HelperTextProps) { if (description) { return ( -
    + {description} -
    + ); } return null; diff --git a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js index dea4100e9403..5c36402ef22a 100644 --- a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js +++ b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js @@ -69,7 +69,14 @@ describe('NumberInput', () => { }); it('should allow an empty string as input to the underlying ', () => { - render(); + render( + + ); expect(screen.getByLabelText('test-label')).toHaveValue(null); }); diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js index 55db8c73726d..a392f665a166 100644 --- 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 = () => ( - + @@ -36,7 +36,7 @@ export const Default = () => ( ); export const RenderCustomIcon = () => ( - + @@ -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 index 374f69af13b0..6ce51bc5d0b5 100644 --- 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 { @@ -160,7 +161,7 @@ const OverflowMenuItem: OverflowMenuItemComponent = React.forwardRef( })(); return ( -
  • + {OverflowMenuItemContent} -
  • + ); } ); diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js index cf1af1fff618..70af1a73cce1 100644 --- 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} />
    -

    {label}

    + + {label} + {secondaryLabel !== null && secondaryLabel !== undefined ? ( -

    {secondaryLabel}

    + + {secondaryLabel} + ) : null}
    {message} diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js index 25cd5d547732..82077918c321 100644 --- a/packages/react/src/components/RadioTile/RadioTile-test.js +++ b/packages/react/src/components/RadioTile/RadioTile-test.js @@ -13,7 +13,11 @@ import { render, screen } from '@testing-library/react'; describe('RadioTile', () => { describe('renders as expected - Component API', () => { it('should spread extra props onto outermost element', () => { - render(); + render( + + Option 1 + + ); // eslint-disable-next-line testing-library/no-node-access expect(document.querySelector('.cds--tile')).toHaveAttribute( @@ -23,7 +27,11 @@ describe('RadioTile', () => { }); it('should respect checked prop', () => { - render(); + render( + + Option 1 + + ); expect(screen.getByRole('radio')).toBeChecked(); expect(screen.getByTestId('test-id')).toHaveClass( @@ -36,35 +44,52 @@ describe('RadioTile', () => { + data-testid="test-id"> + Option 1 + ); expect(screen.getByTestId('test-id')).toHaveClass('custom-class'); }); it('should respect disabled prop', () => { - render(); + render( + + Option 1 + + ); expect(screen.getByRole('radio')).toBeDisabled(); expect(screen.getByTestId('test-id')).toHaveClass('cds--tile--disabled'); }); it('should respect id prop', () => { - render(); + render( + + Option 1 + + ); expect(screen.getByRole('radio')).toHaveAttribute('id', 'tile-1'); }); it('should add name to input', () => { - render(); + render( + + Option 1 + + ); expect(screen.getByRole('radio')).toHaveAttribute('name', 'tile'); }); it('should call onChange when expected', async () => { const onChange = jest.fn(); - render(); + render( + + Option 1 + + ); await userEvent.click(screen.getByRole('radio')); @@ -72,20 +97,28 @@ describe('RadioTile', () => { }); it('should respect tabIndex prop', () => { - render(); + render( + + Option 1 + + ); expect(screen.getByRole('radio')).toHaveAttribute('tabIndex', '-1'); }); it('should respect value prop', () => { - render(); + render(Option 1); expect(screen.getByDisplayValue('standard')).toBeInTheDocument(); }); it('should pass a given ref to the input element', () => { const ref = React.createRef(); - render(); + render( + + Option 1 + + ); expect(ref.current.type).toEqual('radio'); expect(ref.current.value).toEqual('some test value'); diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js index 26a85591981b..7cecb48abc2e 100644 --- a/packages/react/src/components/RadioTile/RadioTile.js +++ b/packages/react/src/components/RadioTile/RadioTile.js @@ -13,6 +13,7 @@ import { keys, matches } from '../../internal/keyboard'; import { useFallbackId } from '../../internal/useId'; import { usePrefix } from '../../internal/usePrefix'; import deprecate from '../../prop-types/deprecate'; +import { Text } from '../Text'; const RadioTile = React.forwardRef(function RadioTile( { @@ -74,7 +75,7 @@ const RadioTile = React.forwardRef(function RadioTile( - {children} + {children}
    ); diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx index a8a57368f27a..36627540a365 100644 --- 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 ? ( -
    + {errorText} -
    + ) : 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 ? ( -
    + {helperText} -
    + ) : null; const ariaProps = {}; if (invalid) { @@ -273,9 +274,9 @@ const Select = React.forwardRef(function Select(
    {!noLabel && ( - + )} {inline && (
    diff --git a/packages/react/src/components/Select/__tests__/Select-test.js b/packages/react/src/components/Select/__tests__/Select-test.js index e0a43f98e4fe..7418e601095d 100644 --- a/packages/react/src/components/Select/__tests__/Select-test.js +++ b/packages/react/src/components/Select/__tests__/Select-test.js @@ -215,7 +215,7 @@ describe('Select', () => { it('should respect warn prop', () => { const { container } = render( - ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access diff --git a/packages/react/src/components/Slider/Slider-test.js b/packages/react/src/components/Slider/Slider-test.js index e9d9bbffae6f..aef02c459349 100644 --- a/packages/react/src/components/Slider/Slider-test.js +++ b/packages/react/src/components/Slider/Slider-test.js @@ -27,7 +27,18 @@ const renderSlider = ({ step = 1, ...rest } = {}) => - render(); + render( + + ); describe('Slider', () => { beforeEach(() => { diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx index fae09a4bb430..bb5430ff99af 100644 --- 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 { return (
    - +
    - + {formatLabel(min, minLabel)} - + {/* @ts-ignore onBlur + onChange types are incompatible*/}
    { ref={this.filledTrackRef} />
    - + {formatLabel(max, maxLabel)} - + { )}
    {!readOnly && isValid === false && ( -
    {invalidText} -
    + )} {!readOnly && warn && isValid && ( -
    {warnText} -
    + )}
    ); 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/TileGroup/__tests__/TileGroup-test.js b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js index ba142efd5399..614c87659691 100644 --- a/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js +++ b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js @@ -16,8 +16,12 @@ describe('PasswordInput', () => { it('should render `legend` in a ', () => { render( - - + + Option 1 + + + Option 2 + ); @@ -30,8 +34,12 @@ describe('PasswordInput', () => { it('should render as children', () => { render( - - + + Option 1 + + + Option 2 + ); @@ -52,8 +60,12 @@ describe('PasswordInput', () => { defaultSelected="test-1" legend="TestGroup" name="test"> - - + + Option 1 + + + Option 2 + ); @@ -67,8 +79,12 @@ describe('PasswordInput', () => { legend="TestGroup" name="test" disabled> - - + + Option 1 + + + Option 2 + ); @@ -88,8 +104,12 @@ describe('PasswordInput', () => { legend="TestGroup" name="test" disabled> - - + + Option 1 + + + Option 2 + ); @@ -107,8 +127,12 @@ describe('PasswordInput', () => { legend="TestGroup" name="test" disabled> - - + + Option 1 + + + Option 2 + ); @@ -124,8 +148,12 @@ describe('PasswordInput', () => { legend="TestGroup" name="test" disabled> - - + + Option 1 + + + Option 2 + ); @@ -139,8 +167,12 @@ describe('PasswordInput', () => { it('should set expected props on children', () => { render( - - + + Option 1 + + + Option 2 + ); @@ -156,8 +188,12 @@ describe('PasswordInput', () => { const onChange = jest.fn(); render( - - + + Option 1 + + + Option 2 + ); @@ -182,8 +218,12 @@ describe('PasswordInput', () => { it('should change the current selection upon change in props', () => { const { rerender } = render( - - + + Option 1 + + + Option 2 + ); @@ -191,8 +231,12 @@ describe('PasswordInput', () => { rerender( - - + + Option 1 + + + Option 2 + ); diff --git a/packages/react/src/components/Toggle/Toggle.tsx b/packages/react/src/components/Toggle/Toggle.tsx index a441986a5beb..b606418998f2 100644 --- a/packages/react/src/components/Toggle/Toggle.tsx +++ b/packages/react/src/components/Toggle/Toggle.tsx @@ -10,6 +10,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useControllableState } from '../../internal/useControllableState'; import { usePrefix } from '../../internal/usePrefix'; +import { Text } from '../Text'; type ExcludedAttributes = | 'aria-labelledby' @@ -191,7 +192,7 @@ export function Toggle({ - {labelText && {labelText}} + {labelText && {labelText}}
    {isSm && ( @@ -205,9 +206,9 @@ export function Toggle({ )}
    {renderSideLabel && ( - + )}
    diff --git a/packages/react/src/internal/useNormalizedInputProps.js b/packages/react/src/internal/useNormalizedInputProps.js index 1c75aee07242..d89993a68253 100644 --- a/packages/react/src/internal/useNormalizedInputProps.js +++ b/packages/react/src/internal/useNormalizedInputProps.js @@ -8,6 +8,7 @@ import React from 'react'; import { WarningFilled, WarningAltFilled } from '@carbon/icons-react'; import { usePrefix } from './usePrefix'; +import { Text } from '../components/Text'; /** * @typedef {object} InputProps @@ -69,20 +70,22 @@ export function useNormalizedInputProps({ if (normalizedProps.invalid) { normalizedProps.icon = WarningFilled; normalizedProps.validation = ( -
    {invalidText} -
    + ); } else if (normalizedProps.warn) { normalizedProps.icon = WarningAltFilled; normalizedProps.validation = ( -
    {warnText} -
    + ); }