diff --git a/.changeset/datatable-stable-selectors.md b/.changeset/datatable-stable-selectors.md new file mode 100644 index 00000000000..d7de8fe3ceb --- /dev/null +++ b/.changeset/datatable-stable-selectors.md @@ -0,0 +1,20 @@ +--- +'@primer/react': minor +--- + +Add stable `data-component` selectors to multiple components following ADR-023: + +- **ActionBar** +- **ActionList** and friends +- **Button** +- **FilteredActionList** and friends +- **Link** +- **LinkButton** +- **Pagination** +- **SelectPanel** and friends +- **Table** and friends +- **TextInput** +- **TextInputwithTokens** +- **TooltipV2** + +This enables consumers to query and test components using stable selectors like `[data-component="Table.Row"]`. diff --git a/packages/react/src/ActionBar/ActionBar.test.tsx b/packages/react/src/ActionBar/ActionBar.test.tsx index f176d5e7add..bce7afda03f 100644 --- a/packages/react/src/ActionBar/ActionBar.test.tsx +++ b/packages/react/src/ActionBar/ActionBar.test.tsx @@ -417,3 +417,65 @@ describe('ActionBar.Menu returnFocusRef', () => { expect(document.activeElement).toEqual(menuButton) }) }) + +describe('ActionBar data-component attributes', () => { + it('renders ActionBar with data-component attribute', () => { + const {container} = render( + + + , + ) + + const actionBar = container.querySelector('[data-component="ActionBar"]') + expect(actionBar).toBeInTheDocument() + }) + + it('renders ActionBar.IconButton with data-component attribute', () => { + const {container} = render( + + + , + ) + + const iconButton = container.querySelector('[data-component="ActionBar"] [data-component="IconButton"]') + expect(iconButton).toBeInTheDocument() + }) + + it('renders ActionBar.VerticalDivider with data-component attribute', () => { + const {container} = render( + + + + + , + ) + + const divider = container.querySelector('[data-component="ActionBar.VerticalDivider"]') + expect(divider).toBeInTheDocument() + }) + + it('renders ActionBar.Group with data-component attribute', () => { + const {container} = render( + + + + + + , + ) + + const group = container.querySelector('[data-component="ActionBar.Group"]') + expect(group).toBeInTheDocument() + }) + + it('renders ActionBar.Menu.IconButton with data-component attribute', () => { + render( + + + , + ) + + const menuButton = screen.getByRole('button', {name: 'More options'}) + expect(menuButton).toHaveAttribute('data-component', 'ActionBar.Menu.IconButton') + }) +}) diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 83712ce21fd..34f7d51ca78 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -353,7 +353,7 @@ export const ActionBar: React.FC> = prop return ( -
+
-
+
{children}
@@ -571,7 +571,14 @@ export const ActionBarMenu = forwardRef( return ( - + {items.map((item, index) => renderMenuItem(item, index))} diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx index 49e44022c7f..f9d514c562c 100644 --- a/packages/react/src/ActionList/ActionList.test.tsx +++ b/packages/react/src/ActionList/ActionList.test.tsx @@ -258,3 +258,180 @@ describe('ActionList', () => { expect(linkElements[2]).toHaveAttribute('data-size', 'medium') // default should be medium }) }) + +describe('ActionList data-component attributes', () => { + it('renders ActionList with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const actionList = container.querySelector('[data-component="ActionList"]') + expect(actionList).toBeInTheDocument() + }) + + it('renders ActionList.Item with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const item = container.querySelector('[data-component="ActionList.Item"]') + expect(item).toBeInTheDocument() + }) + + it('renders ActionList.Item.Wrapper with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const wrapper = container.querySelector('[data-component="ActionList.Item.Wrapper"]') + expect(wrapper).toBeInTheDocument() + }) + + it('renders ActionList.Item.Label with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const label = container.querySelector('[data-component="ActionList.Item.Label"]') + expect(label).toBeInTheDocument() + }) + + it('renders ActionList.Item--DividerContainer with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const dividerContainer = container.querySelector('[data-component="ActionList.Item--DividerContainer"]') + expect(dividerContainer).toBeInTheDocument() + }) + + it('renders ActionList.Group with data-component attribute', () => { + const {container} = HTMLRender( + + + Group + Item + + , + ) + + const group = container.querySelector('[data-component="ActionList.Group"]') + expect(group).toBeInTheDocument() + }) + + it('renders ActionList.GroupHeading with data-component attribute', () => { + const {container} = HTMLRender( + + + Group Heading + Item + + , + ) + + const groupHeading = container.querySelector('[data-component="GroupHeadingWrap"]') + expect(groupHeading).toBeInTheDocument() + }) + + it('renders ActionList.Divider with data-component attribute', () => { + const {container} = HTMLRender( + + Item 1 + + Item 2 + , + ) + + const divider = container.querySelector('[data-component="ActionList.Divider"]') + expect(divider).toBeInTheDocument() + }) + + it('renders ActionList.Description with data-component attribute', () => { + const {container} = HTMLRender( + + + Item + Description + + , + ) + + const description = container.querySelector('[data-component="ActionList.Description"]') + expect(description).toBeInTheDocument() + }) + + it('renders ActionList.LeadingVisual with data-component attribute', () => { + const {container} = HTMLRender( + + + Icon + Item + + , + ) + + const leadingVisual = container.querySelector('[data-component="ActionList.LeadingVisual"]') + expect(leadingVisual).toBeInTheDocument() + }) + + it('renders ActionList.TrailingVisual with data-component attribute', () => { + const {container} = HTMLRender( + + + Item + Icon + + , + ) + + const trailingVisual = container.querySelector('[data-component="ActionList.TrailingVisual"]') + expect(trailingVisual).toBeInTheDocument() + }) + + it('renders ActionList.Selection with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const selection = container.querySelector('[data-component="ActionList.Selection"]') + expect(selection).toBeInTheDocument() + }) + + it('renders ActionList.Heading with data-component attribute', () => { + const {container} = HTMLRender( + + Heading + Item + , + ) + + const heading = container.querySelector('[data-component="ActionList.Heading"]') + expect(heading).toBeInTheDocument() + }) + + it('renders ActionList.TrailingAction with data-component attribute', () => { + const {container} = HTMLRender( + + + Item + + + , + ) + + const trailingAction = container.querySelector('[data-component="ActionList.TrailingAction"]') + expect(trailingAction).toBeInTheDocument() + }) +}) diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index 441e79302c9..dbfae9838db 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -98,7 +98,12 @@ export const Group: FCWithSlotMarker +
  • {title && !slots.groupHeading ? ( // Escape hatch: supports old API in a non breaking way @@ -177,6 +182,7 @@ export const GroupHeading: FCWithSlotMarker
  • ( {...wrapperProps} className={classes.ActionListContent} data-size={size} + data-component="ActionList.Item.Wrapper" // @ts-ignore: ItemWrapper is polymorphic and the ref type depends on the rendered element ('button' or 'li') ref={forwardedRef} > @@ -347,13 +355,14 @@ const UnwrappedItem = ( > {slots.leadingVisual} + {/* TODO: next-major: change to data-component="ActionList.Item.DividerContainer" next major version */} - + {childrenWithoutSlots} {/* Loading message needs to be in here so it is read with the label */} {/* If the item is inactive, we do not simultaneously announce that it is loading */} diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx index ee9213fcb50..00ef52462a5 100644 --- a/packages/react/src/ActionList/List.tsx +++ b/packages/react/src/ActionList/List.tsx @@ -75,6 +75,7 @@ const UnwrappedList = ( role={listRole} aria-labelledby={ariaLabelledBy} ref={listRef} + data-component="ActionList" data-dividers={showDividers} data-variant={variant} {...restProps} diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx index 933c3a6f584..585a0f4aa14 100644 --- a/packages/react/src/ActionList/TrailingAction.tsx +++ b/packages/react/src/ActionList/TrailingAction.tsx @@ -31,7 +31,11 @@ export type ActionListTrailingActionProps = ElementProps & { export const TrailingAction = forwardRef( ({as = 'button', icon, label, href = null, className, style, loading, ...props}, forwardedRef) => { return ( - + {icon ? ( > = ( export type ActionListLeadingVisualProps = VisualProps export const LeadingVisual: FCWithSlotMarker> = ({className, ...props}) => { return ( - + {props.children} ) @@ -26,7 +30,12 @@ export type ActionListTrailingVisualProps = VisualProps export const TrailingVisual: FCWithSlotMarker> = ({className, ...props}) => { const {trailingVisualId} = React.useContext(ItemContext) return ( - + {props.children} ) diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 9600a6f86b8..3aeeff2dc95 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -86,6 +86,7 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f > { return ( - + {children} ) diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx index a2724d950d2..1ade78f3fbb 100644 --- a/packages/react/src/Button/__tests__/Button.test.tsx +++ b/packages/react/src/Button/__tests__/Button.test.tsx @@ -318,3 +318,63 @@ describe('Button', () => { expect(triggerEl).toHaveAccessibleDescription('Love is all around (command h)') }) }) + +describe('data-component attributes', () => { + describe('Button', () => { + it('should have data-component="Button" on the button element', () => { + const {container} = render() + expect(container.querySelector('[data-component="Button"]')).toBeInTheDocument() + }) + + it('should have data-component="buttonContent" on the content wrapper', () => { + const {container} = render() + expect(container.querySelector('[data-component="buttonContent"]')).toBeInTheDocument() + }) + + it('should have data-component="text" on the text element', () => { + const {container} = render() + expect(container.querySelector('[data-component="text"]')).toBeInTheDocument() + }) + + it('should have data-component="leadingVisual" on leading visual', () => { + const {container} = render() + expect(container.querySelector('[data-component="leadingVisual"]')).toBeInTheDocument() + }) + + it('should have data-component="trailingVisual" on trailing visual', () => { + const {container} = render() + expect(container.querySelector('[data-component="trailingVisual"]')).toBeInTheDocument() + }) + + it('should have data-component="ButtonCounter" on count element', () => { + const {container} = render() + expect(container.querySelector('[data-component="ButtonCounter"]')).toBeInTheDocument() + }) + + it('should have data-component="loadingSpinner" when loading without visuals', () => { + const {container} = render() + expect(container.querySelector('[data-component="loadingSpinner"]')).toBeInTheDocument() + }) + }) + + describe('IconButton', () => { + it('should have data-component="IconButton" on the button element', () => { + const {container} = render() + expect(container.querySelector('[data-component="IconButton"]')).toBeInTheDocument() + }) + }) + + describe('LinkButton', () => { + it('should have data-component="LinkButton" on the link element', () => { + const {container} = render(Link) + expect(container.querySelector('[data-component="LinkButton"]')).toBeInTheDocument() + }) + + it('should have data-component="buttonContent" on the content wrapper', () => { + const {container} = render(Link) + expect( + container.querySelector('[data-component="LinkButton"] [data-component="buttonContent"]'), + ).toBeInTheDocument() + }) + }) +}) diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index 0e24734daa4..1051eac1018 100644 --- a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -4,6 +4,7 @@ exports[`Button > respects block prop 1`] = ` , + }} + items={[]} + placeholder="Select items" + placeholderText="Filter items" + selected={selected} + onSelectedChange={setSelected} + filterValue={filter} + onFilterChange={setFilter} + open={open} + onOpenChange={setOpen} + /> + ) + } + + renderWithProp(, usingRemoveActiveDescendant) + + await user.click(screen.getByText('Select items')) + + expect( + screen.getByRole('dialog').querySelector('[data-component="SelectPanel.MessageAction"]'), + ).toBeInTheDocument() + }) + + it('allows accessing nested ActionList data-component attributes from SelectPanel', async () => { + const user = userEvent.setup() + + const itemsWithLeadingVisual = [ + {text: 'item one', leadingVisual: () => Icon}, + {text: 'item two', leadingVisual: () => Icon}, + ] + + function SelectPanelWithLeadingVisuals() { + const [selected, setSelected] = React.useState([]) + const [filter, setFilter] = React.useState('') + const [open, setOpen] = React.useState(false) + + return ( + + ) + } + + renderWithProp(, usingRemoveActiveDescendant) + + await user.click(screen.getByText('Select items')) + + // Test that you can query for ActionList primitives nested within SelectPanel + expect( + screen.getByRole('dialog').querySelector('[data-component="SelectPanel"] [data-component="ActionList.Item"]'), + ).toBeInTheDocument() + + expect( + screen + .getByRole('dialog') + .querySelector('[data-component="SelectPanel"] [data-component="ActionList.LeadingVisual"]'), + ).toBeInTheDocument() + + expect( + screen + .getByRole('dialog') + .querySelector('[data-component="SelectPanel"] [data-component="ActionList.Item.Label"]'), + ).toBeInTheDocument() + + // Test that you can query for the TextInput nested within SelectPanel + expect( + screen + .getByRole('dialog') + .querySelector('[data-component="SelectPanel"] [data-component="TextInput"] [data-component="input"]'), + ).toBeInTheDocument() + }) + + it('renders SelectPanel.CloseButton with data-component attribute on wide viewports in modal variant', async () => { + await page.viewport(1400, 728) + const user = userEvent.setup() + + renderWithProp( {}} />, usingRemoveActiveDescendant) + + await user.click(screen.getByText('Select items')) + + expect( + screen.getByRole('dialog').querySelector('[data-component="SelectPanel.CloseButton"]'), + ).toBeInTheDocument() + }) + + it('renders SelectPanel.SaveAndCloseButton with data-component attribute on narrow viewports', async () => { + await page.viewport(320, 568) + const user = userEvent.setup() + + function MultiSelectPanelWithoutCancel() { + const [selected, setSelected] = React.useState([]) + const [filter, setFilter] = React.useState('') + const [open, setOpen] = React.useState(false) + + return ( + + + + ) + } + + render() + + await user.click(screen.getByText('Select items')) + + expect( + screen.getByRole('dialog').querySelector('[data-component="SelectPanel.SaveAndCloseButton"]'), + ).toBeInTheDocument() + }) + }) }) describe('Event propagation', () => { diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 04667503618..eae6729337c 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -879,14 +879,14 @@ function Panel({ closeButtonProps={closeButtonProps} displayInViewport={displayInViewport} > -
    -
    +
    +
    - + {title} {subtitle ? ( -
    +
    {subtitle}
    ) : null} @@ -899,6 +899,7 @@ function Panel({ icon={XIcon} aria-label="Cancel and close" className={classes.ResponsiveCloseButton} + data-component="SelectPanel.CloseButton" onClick={() => { onCancel?.() onCancelRequested() @@ -907,7 +908,7 @@ function Panel({ ) : null}
    {notice && ( -
    +
    {footer ? ( -
    {footer}
    +
    + {footer} +
    ) : renderFooter ? (
    -
    +
    {secondaryAction}
    {showPermanentCancelSaveButtons || showResponsiveCancelSaveButtons ? ( @@ -973,6 +981,7 @@ function Panel({ >
    - {variant === 'modal' && open ?
    : null} + {variant === 'modal' && open ?
    : null} ) } const SecondaryButton: React.FC = props => { return ( - ) @@ -1029,7 +1040,7 @@ const SecondaryButton: React.FC = props => { const SecondaryLink: React.FC = props => { return ( - + {props.children} ) diff --git a/packages/react/src/SelectPanel/SelectPanelMessage.tsx b/packages/react/src/SelectPanel/SelectPanelMessage.tsx index 64fc56f1bf0..458c42883be 100644 --- a/packages/react/src/SelectPanel/SelectPanelMessage.tsx +++ b/packages/react/src/SelectPanel/SelectPanelMessage.tsx @@ -36,11 +36,26 @@ export const SelectPanelMessage: React.FC = ({ const IconComponent = CustomIcon || (variant !== 'empty' ? AlertIcon : undefined) return ( -
    - {IconComponent && } - {title} - {children} - {action &&
    {action}
    } +
    + {IconComponent && ( + + )} + + {title} + + + {children} + + {action && ( +
    + {action} +
    + )}
    ) } diff --git a/packages/react/src/TextInput/TextInput.test.tsx b/packages/react/src/TextInput/TextInput.test.tsx index a8928761d79..711e33e20c0 100644 --- a/packages/react/src/TextInput/TextInput.test.tsx +++ b/packages/react/src/TextInput/TextInput.test.tsx @@ -365,4 +365,50 @@ describe('TextInput', () => { expect(srElement?.textContent).toBe('') }) }) + + describe('data-component attributes', () => { + it('renders TextInput with data-component attribute', () => { + const {container} = render() + + expect(container.querySelector('[data-component="TextInput"]')).toBeInTheDocument() + }) + + it('renders input with data-component attribute', () => { + const {container} = render() + + expect(container.querySelector('[data-component="input"]')).toBeInTheDocument() + }) + + it('renders TextInput.LeadingVisual with data-component attribute', () => { + const {container} = render() + + expect(container.querySelector('[data-component="TextInput.LeadingVisual"]')).toBeInTheDocument() + }) + + it('renders TextInput.TrailingVisual with data-component attribute', () => { + const {container} = render() + + expect(container.querySelector('[data-component="TextInput.TrailingVisual"]')).toBeInTheDocument() + }) + + it('renders TextInput.Action with data-component attribute', () => { + const {container} = render( + Clear} />, + ) + + expect(container.querySelector('[data-component="TextInput.Action"]')).toBeInTheDocument() + }) + + it('renders TextInput.Icon with data-component attribute', () => { + const {container} = render() + + expect(container.querySelector('[data-component="TextInput.Icon"]')).toBeInTheDocument() + }) + + it('renders TextInput.CharacterCounter with data-component attribute', () => { + const {container} = render() + + expect(container.querySelector('[data-component="TextInput.CharacterCounter"]')).toBeInTheDocument() + }) + }) }) diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx index 88a4c716226..5c0026ce841 100644 --- a/packages/react/src/TextInput/TextInput.tsx +++ b/packages/react/src/TextInput/TextInput.tsx @@ -248,7 +248,7 @@ const TextInput = React.forwardRef( onClick={focusInput} aria-busy={Boolean(loading)} > - {IconComponent && } + {IconComponent && } ( ? [characterCountStaticMessageId, inputDescribedBy].filter(Boolean).join(' ') || undefined : inputDescribedBy } + // TODO: next-major: Remove in favor of data-component="TextInput.Input" data-component="input" /> {loading && {loaderText}} @@ -306,6 +307,7 @@ const TextInput = React.forwardRef( id={characterCountId} size="small" className={clsx(classes.CharacterCounter, isOverLimit && classes['CharacterCounter--error'])} + data-component="TextInput.CharacterCounter" > {isOverLimit && } {characterCount} diff --git a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap index b491ab7d0bf..0e5938a06cf 100644 --- a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap @@ -5,6 +5,7 @@ exports[`TextInput > renders contrast 1`] = ` renders error 1`] = ` renders monospace 1`] = ` renders placeholder 1`] = ` should render a password input 1`] = ` { fireEvent.keyDown(inputNode, {key: 'a'}) expect(onKeyDownMock).toHaveBeenCalled() }) + + describe('data-component attributes', () => { + it('renders TextInputWithTokens with data-component attribute', () => { + const onRemoveMock = vi.fn() + const {container} = render() + + expect(container.querySelector('[data-component="TextInputWithTokens"]')).toBeInTheDocument() + }) + + it('renders TextInputWithTokens.Input with data-component attribute', () => { + const onRemoveMock = vi.fn() + const {container} = render() + + expect(container.querySelector('[data-component="TextInputWithTokens.Input"]')).toBeInTheDocument() + }) + + it('renders TextInputWithTokens.Token with data-component attribute', () => { + const onRemoveMock = vi.fn() + const {container} = render() + + expect(container.querySelector('[data-component="TextInputWithTokens.Token"]')).toBeInTheDocument() + }) + + it('renders TextInputWithTokens.Icon with data-component attribute', () => { + const onRemoveMock = vi.fn() + const {container} = render() + + expect(container.querySelector('[data-component="TextInputWithTokens.Icon"]')).toBeInTheDocument() + }) + + it('renders TextInputWithTokens.LeadingVisual with data-component attribute', () => { + const onRemoveMock = vi.fn() + const {container} = render( + , + ) + + expect(container.querySelector('[data-component="TextInputWithTokens.LeadingVisual"]')).toBeInTheDocument() + }) + + it('renders TextInputWithTokens.TrailingVisual with data-component attribute', () => { + const onRemoveMock = vi.fn() + const {container} = render( + , + ) + + expect(container.querySelector('[data-component="TextInputWithTokens.TrailingVisual"]')).toBeInTheDocument() + }) + + it('renders TextInputWithTokens.OverflowCount with data-component attribute when tokens are truncated', () => { + const onRemoveMock = vi.fn() + const {container} = render( + , + ) + + expect(container.querySelector('[data-component="TextInputWithTokens.OverflowCount"]')).toBeInTheDocument() + }) + }) }) diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx index 8031d87a4d5..0d3ef273eec 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -294,12 +294,16 @@ function TextInputWithTokensInnerComponent - {IconComponent && !LeadingVisual && } + {IconComponent && !LeadingVisual && ( + + )} {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? : LeadingVisual} @@ -320,6 +324,7 @@ function TextInputWithTokensInnerComponent {shouldExposeSelectedValuesDescription ? ( @@ -341,17 +346,21 @@ function TextInputWithTokensInnerComponent ))} {tokensAreTruncated && tokens.length - visibleTokens.length ? ( - +{tokens.length - visibleTokens.length} + + +{tokens.length - visibleTokens.length} + ) : null}
    {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? : TrailingVisual} diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap index a30da5ee849..09c4096b88e 100644 --- a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -11,6 +11,7 @@ exports[`TextInputWithTokens > renders a leadingVisual and trailingVisual 1`] =
    renders a leadingVisual and trailingVisual 1`] =
    renders a leadingVisual and trailingVisual 1`] = renders a leadingVisual and trailingVisual 1`] = renders a leadingVisual and trailingVisual 1`] = renders a leadingVisual and trailingVisual 1`] = renders a leadingVisual and trailingVisual 1`] = renders a leadingVisual and trailingVisual 1`] = renders a leadingVisual and trailingVisual 1`] = renders a leadingVisual and trailingVisual 1`] =