diff --git a/.changeset/wet-glasses-kneel.md b/.changeset/wet-glasses-kneel.md new file mode 100644 index 00000000000..b52a19b2516 --- /dev/null +++ b/.changeset/wet-glasses-kneel.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +UnderlineNav2: Address accessibility feedback and re-style arrow buttons for scroll behaviour diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx index 0c13a2431c3..25298112592 100644 --- a/docs/content/drafts/UnderlineNav2.mdx +++ b/docs/content/drafts/UnderlineNav2.mdx @@ -16,7 +16,7 @@ import {UnderlineNav} from '@primer/react/drafts' ### Simple ```jsx live drafts - + Item 1 Item 2 Item 3 @@ -26,7 +26,7 @@ import {UnderlineNav} from '@primer/react/drafts' ### With Icons ```jsx live drafts - + Code @@ -53,7 +53,7 @@ When overflow occurs, the component first hides icons if present to optimize for #### Items Without Icons ```jsx live drafts - + Code @@ -83,7 +83,7 @@ When overflow occurs, the component first hides icons if present to optimize for If there is still overflow, the component will behave depending on the pointer. ```jsx live drafts - + Code @@ -114,7 +114,7 @@ If there is still overflow, the component will behave depending on the pointer. ### Loading state for counters ```jsx live drafts - + Item 1 @@ -128,9 +128,11 @@ If there is still overflow, the component will behave depending on the pointer. ### UnderlineNav - - - + =8" }, @@ -28133,9 +28134,9 @@ } }, "@primer/octicons-react": { - "version": "17.5.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.5.0.tgz", - "integrity": "sha512-7z/uwKn/3w+DHEMFynEfHLYPHMjFzvsL88plimWhXou1hD4lriCUTvp65uDvdpyLqKyq5luEupnQmU+RiBODog==", + "version": "17.7.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", "requires": {} }, "@primer/primitives": { diff --git a/docs/package.json b/docs/package.json index 0f66abd358a..1725b674459 100644 --- a/docs/package.json +++ b/docs/package.json @@ -14,7 +14,7 @@ }, "dependencies": { "@primer/gatsby-theme-doctocat": "^4.2.0", - "@primer/octicons-react": "^17.5.0", + "@primer/octicons-react": "^17.7.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", "@styled-system/theme-get": "^5.1.0", diff --git a/package-lock.json b/package-lock.json index 47e6c71ed05..b67cef96499 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@primer/behaviors": "^1.1.1", - "@primer/octicons-react": "^17.3.0", + "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.9.0", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", @@ -6366,9 +6366,9 @@ "integrity": "sha512-wvF1PYjyxKNTr6+5w4uR5Gkz53t1fsRDgKjWxDKk7wmlh0cwiILBo4dDFjjVhWRF1mBSjaIxxJGB4WGaP7ct2Q==" }, "node_modules/@primer/octicons-react": { - "version": "17.3.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.3.0.tgz", - "integrity": "sha512-72K4SeDj3WmehiQqVeOS+icvcO5+JHXK12ee3AqbZGqNqgCKdU4zJRKeC7EGMV4lQhoJXbj8OEdppBLa3qFDhw==", + "version": "17.7.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", "engines": { "node": ">=8" }, @@ -46102,9 +46102,9 @@ "integrity": "sha512-wvF1PYjyxKNTr6+5w4uR5Gkz53t1fsRDgKjWxDKk7wmlh0cwiILBo4dDFjjVhWRF1mBSjaIxxJGB4WGaP7ct2Q==" }, "@primer/octicons-react": { - "version": "17.3.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.3.0.tgz", - "integrity": "sha512-72K4SeDj3WmehiQqVeOS+icvcO5+JHXK12ee3AqbZGqNqgCKdU4zJRKeC7EGMV4lQhoJXbj8OEdppBLa3qFDhw==", + "version": "17.7.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", "requires": {} }, "@primer/primitives": { diff --git a/package.json b/package.json index b68750e6e48..125a8d9072e 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@primer/behaviors": "^1.1.1", - "@primer/octicons-react": "^17.3.0", + "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.9.0", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 87cfd0798f2..821eadae4c1 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -1220,6 +1220,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav aria-hidden="true" class="c8" fill="currentColor" + focusable="false" height="16" role="img" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" @@ -1702,6 +1703,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t aria-hidden="true" class="c8" fill="currentColor" + focusable="false" height="16" role="img" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" diff --git a/src/UnderlineNav2/UnderlineNav.test.tsx b/src/UnderlineNav2/UnderlineNav.test.tsx index b85c47bf633..b3345bdc47d 100644 --- a/src/UnderlineNav2/UnderlineNav.test.tsx +++ b/src/UnderlineNav2/UnderlineNav.test.tsx @@ -54,7 +54,7 @@ const ResponsiveUnderlineNav = ({ {navigation: 'Security', icon: ShieldLockIcon} ] return ( - + {items.map(item => ( { it('fires onSelect on click and keypress', async () => { const onSelect = jest.fn() const {getByText} = render( - + Item 1 Item 2 Item 3 diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index e0c67bbee06..5b60b502900 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -21,12 +21,12 @@ import { moreMenuStyles, menuItemStyles } from './styles' -import {LeftArrowButton, RightArrowButton} from './UnderlineNavArrowButton' +import {ArrowButton} from './UnderlineNavArrowButton' import styled from 'styled-components' import {LoadingCounter} from './LoadingCounter' export type UnderlineNavProps = { - label: string + 'aria-label'?: React.AriaAttributes['aria-label'] as?: React.ElementType align?: 'right' sx?: SxProp @@ -68,6 +68,7 @@ const handleArrowBtnsVisibility = ( const scrollOffsets = {scrollLeft, scrollRight} callback(scrollOffsets) } + const overflowEffect = ( navWidth: number, moreMenuWidth: number, @@ -157,7 +158,7 @@ export const UnderlineNav = forwardRef( { as = 'nav', align, - label, + 'aria-label': ariaLabel, sx: sxProp = {}, afterSelect, variant = 'default', @@ -225,6 +226,8 @@ export const UnderlineNav = forwardRef( const [selectedLink, setSelectedLink] = useState | undefined>(undefined) + const [focusedLink, setFocusedLink] = useState | null>(null) + // selectedLinkText is needed to be able set the selected menu item as selectedLink. // This is needed because setSelectedLink only accepts ref but at the time of setting selected menu item as selectedLink, its ref as a list item is not available const [selectedLinkText, setSelectedLinkText] = useState('') @@ -311,14 +314,28 @@ export const UnderlineNav = forwardRef( return () => listEl?.removeEventListener('scroll', scrollOnList) }, [scrollOnList]) - useEffect(() => { - // scroll the selected link into the view (coarse pointer behaviour) - if (isCoarsePointer && selectedLink?.current && listRef.current) { - scrollIntoView(selectedLink.current, listRef.current, underlineNavScrollMargins) + function scrollLinkIntoView(link: RefObject) { + if (link.current && listRef.current) { + scrollIntoView(link.current, listRef.current, underlineNavScrollMargins) return } + } + + useEffect(() => { + // scroll the selected link into the view (coarse pointer behaviour) + selectedLink?.current && isCoarsePointer && scrollLinkIntoView(selectedLink) }, [selectedLink, isCoarsePointer]) + useEffect(() => { + // scroll the focused link into the view (coarse pointer behaviour) + focusedLink?.current && isCoarsePointer && scrollLinkIntoView(focusedLink) + }, [focusedLink, isCoarsePointer]) + + if (!ariaLabel) { + // eslint-disable-next-line no-console + console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology') + } + return ( (getNavStyles(theme, {align}), sxProp)} - aria-label={label} + aria-label={ariaLabel} ref={navRef} > {isCoarsePointer && ( - 0} onScrollWithButton={onScrollWithButton} /> + 0} + onScrollWithButton={onScrollWithButton} + aria-label={ariaLabel} + /> )} (responsiveProps.overflowStyles, ulStyles)} ref={listRef}> @@ -390,7 +414,13 @@ export const UnderlineNav = forwardRef( {isCoarsePointer && ( - 0} onScrollWithButton={onScrollWithButton} /> + 0} + onScrollWithButton={onScrollWithButton} + aria-label={ariaLabel} + /> )} diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx index 569545aa656..81d5822d592 100644 --- a/src/UnderlineNav2/UnderlineNavArrowButton.tsx +++ b/src/UnderlineNav2/UnderlineNavArrowButton.tsx @@ -1,44 +1,66 @@ import React, {useContext} from 'react' import {IconButton} from '../Button/IconButton' import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react' -import {getLeftArrowHiddenBtn, getRightArrowHiddenBtn, getLeftArrowVisibleBtn, getRightArrowVisibleBtn} from './styles' +import {btnWrapperStyles, getArrowBtnStyles} from './styles' import {OnScrollWithButtonEventType} from './types' import {UnderlineNavContext} from './UnderlineNavContext' +import Box from '../Box' -const LeftArrowButton = ({ +const ArrowButton = ({ + scrollValue, + type, show, - onScrollWithButton + onScrollWithButton, + 'aria-label': ariaLabel }: { + scrollValue: number + type: 'left' | 'right' show: boolean onScrollWithButton: OnScrollWithButtonEventType + 'aria-label'?: React.AriaAttributes['aria-label'] }) => { + const leftBtnRef = React.useRef(null) + const rightBtnRef = React.useRef(null) const {theme} = useContext(UnderlineNavContext) - return ( - ) => onScrollWithButton(e, -1)} - icon={ChevronLeftIcon} - sx={show ? getLeftArrowVisibleBtn(theme) : getLeftArrowHiddenBtn(theme)} - /> - ) -} + const direction = type === 'left' ? -1 : 1 + const ARROW_BTN_WIDTH = 44 // Min touch target size is 44px + + // re-trigger focus on the button with aria-disabled=true when it becomes hidden to communicate to screen readers that the button is no longer available + React.useEffect(() => { + const currentBtn = type === 'left' ? leftBtnRef.current : rightBtnRef.current + if (currentBtn?.getAttribute('aria-disabled') === 'true') { + currentBtn.focus() + } else { + // eslint-disable-next-line github/no-blur + currentBtn?.blur() + } + }, [show, type]) + + let translateX = 0 + let display = 'flex' + + // Determine the translateX value to transform for the slide in/out effect + if (scrollValue === 0) { + // If the scrollValue is 0, the buttons should be hidden + translateX = ARROW_BTN_WIDTH * direction + // This is mainly needed for the right arrow button. Because hiding translateX value for it is positive (44px) and this positive value was causing button to be visibly overflowed rathan than hiding. + display = 'none' + } else if (scrollValue <= ARROW_BTN_WIDTH) translateX = (ARROW_BTN_WIDTH - scrollValue) * direction + else translateX = 0 -const RightArrowButton = ({ - show, - onScrollWithButton -}: { - show: boolean - onScrollWithButton: OnScrollWithButtonEventType -}) => { - const {theme} = useContext(UnderlineNavContext) return ( - ) => onScrollWithButton(e, 1)} - icon={ChevronRightIcon} - sx={show ? getRightArrowVisibleBtn(theme) : getRightArrowHiddenBtn(theme)} - /> + + ) => onScrollWithButton(e, direction)} + icon={type === 'left' ? ChevronLeftIcon : ChevronRightIcon} + sx={getArrowBtnStyles(theme, type)} + aria-disabled={!show} + /> + ) } -export {LeftArrowButton, RightArrowButton} +export {ArrowButton} diff --git a/src/UnderlineNav2/UnderlineNavContext.tsx b/src/UnderlineNav2/UnderlineNavContext.tsx index 0e2b79668b2..285810ba36f 100644 --- a/src/UnderlineNav2/UnderlineNavContext.tsx +++ b/src/UnderlineNav2/UnderlineNavContext.tsx @@ -9,6 +9,7 @@ export const UnderlineNavContext = createContext<{ setSelectedLink: (ref: RefObject) => void selectedLinkText: string setSelectedLinkText: React.Dispatch> + setFocusedLink: React.Dispatch | null>> selectEvent: React.MouseEvent | React.KeyboardEvent | null afterSelect?: (event: React.MouseEvent | React.KeyboardEvent) => void variant: 'default' | 'small' @@ -22,6 +23,7 @@ export const UnderlineNavContext = createContext<{ setSelectedLink: () => null, selectedLinkText: '', setSelectedLinkText: () => null, + setFocusedLink: () => null, selectEvent: null, variant: 'default', loadingCounters: false, diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx index 45cfbe6132f..4aa9624cfd5 100644 --- a/src/UnderlineNav2/UnderlineNavItem.tsx +++ b/src/UnderlineNav2/UnderlineNavItem.tsx @@ -71,6 +71,7 @@ export const UnderlineNavItem = forwardRef( setSelectedLink, selectedLinkText, setSelectedLinkText, + setFocusedLink, selectEvent, afterSelect, variant, @@ -153,6 +154,7 @@ export const UnderlineNavItem = forwardRef( sx={merge(getLinkStyles(theme, {variant}, selectedLink, ref), sxProp as SxProp)} {...props} ref={ref} + onFocus={() => setFocusedLink(ref as RefObject)} > {iconsVisible && Icon && ( diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx index 3ff81d87935..04daa680922 100644 --- a/src/UnderlineNav2/examples.stories.tsx +++ b/src/UnderlineNav2/examples.stories.tsx @@ -13,7 +13,7 @@ import { GearIcon } from '@primer/octicons-react' import {Meta} from '@storybook/react' -import {UnderlineNav, UnderlineNavProps} from './index' +import {UnderlineNav} from './index' import {BaseStyles, ThemeProvider} from '..' export default { @@ -31,19 +31,19 @@ export default { ] } as Meta -export const DefaultNav = (args: UnderlineNavProps) => { +export const DefaultNav = () => { return ( - - Item 1 - Item 2 - Item 3 + + Code + Issues + Pull Requests ) } -export const withIcons = (args: UnderlineNavProps) => { +export const withIcons = () => { return ( - + Code Issues @@ -54,14 +54,14 @@ export const withIcons = (args: UnderlineNavProps) => { Discussions - Item 1 + Projects ) } -export const withCounterLabels = (args: UnderlineNavProps) => { +export const withCounterLabels = () => { return ( - + Code @@ -84,11 +84,11 @@ const items: {navigation: string; icon: React.FC; counter?: number}[] {navigation: 'Security', icon: ShieldLockIcon} ] -export const InternalResponsiveNav = (args: UnderlineNavProps) => { +export const InternalResponsiveNav = () => { const [selectedIndex, setSelectedIndex] = React.useState(1) return ( - + {items.map((item, index) => ( { ) } -export const CountersLoadingState = (args: UnderlineNavProps) => { +export const CountersLoadingState = () => { const [selectedIndex, setSelectedIndex] = React.useState(1) return ( - + {items.map((item, index) => ( { const canvas = within(canvasElement) - const item = await canvas.getByText('Item 1') + const item = await canvas.getByText('Code') const aElem = await item.closest('a') - const item2 = await canvas.getByText('Item 2') + const item2 = await canvas.getByText('Issues') const aElem2 = await item2.closest('a') userEvent.click(aElem2 as Element) expect(aElem2).toHaveAttribute('aria-current', 'page') diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts index 71f712bd6de..6f3510a24f0 100644 --- a/src/UnderlineNav2/styles.ts +++ b/src/UnderlineNav2/styles.ts @@ -69,71 +69,54 @@ export const moreBtnStyles = { paddingX: 2 } -export const getArrowBtnStyles = (theme?: Theme) => ({ - fontWeight: 'normal', - boxShadow: 'none', - margin: 0, - border: 0, - borderRadius: 0, - paddingX: 2, - paddingY: 0, - background: theme?.colors.canvas.default, +export const btnWrapperStyles = ( + theme?: Theme, + direction = 'left', + show = false, + translateX = 0, + display = 'flex' +) => ({ position: 'absolute', - opacity: 1, - transition: 'opacity 250ms ease-out', zIndex: 1, - '&:hover:not([disabled]), &:focus-visible': { - background: theme?.colors.canvas.default - } -}) - -export const getLeftArrowHiddenBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - opacity: 0, - top: 0, - bottom: 0, - left: 0 -}) - -export const getRightArrowHiddenBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - opacity: 0, top: 0, bottom: 0, - right: 0 + left: direction === 'left' ? 0 : 'auto', + right: direction === 'right' ? 0 : 'auto', + alignItems: 'center', + background: show + ? `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` + : 'transparent', + transform: `translateX(${translateX}px)`, + display: `${display}` }) -export const getLeftArrowVisibleBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - top: 0, - bottom: 0, - left: 0, - '&::after': { - content: '""', - position: 'absolute', - top: 0, - background: `linear-gradient(to left,#fff0,${theme?.colors.canvas.default})`, - height: '100%', - width: '20px', - right: '-15px', - pointerEvents: 'none' - } -}) +export const getArrowBtnStyles = (theme?: Theme, direction = 'left') => ({ + fontWeight: 'normal', + boxShadow: 'none', + margin: 0, + border: 0, + borderRadius: 2, + paddingX: '14px', + paddingY: 0, + background: 'transparent', + height: '60%', -export const getRightArrowVisibleBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - top: 0, - bottom: 0, - right: 0, - '&::before': { - position: 'absolute', - top: 0, - background: `linear-gradient(to right,#fff0,${theme?.colors.canvas.default})`, - content: '""', - height: '100%', - width: '20px', - left: '-15px', - pointerEvents: 'none' + '&:hover:not([disabled]), &:focus-visible': { + background: theme?.colors.canvas.default + }, + '&:focus:not(:disabled)': { + outline: 0, + boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`, + background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` + }, + // where focus-visible is supported, remove the focus box-shadow + '&:not(:focus-visible)': { + boxShadow: 'none', + background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` + }, + '&:focus-visible:not(:disabled)': { + boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`, + background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` } }) @@ -189,6 +172,12 @@ export const getLinkStyles = ( bg: selectedLink === ref ? theme?.colors.primer.border.active : 'transparent', borderRadius: 0, transform: 'translate(50%, -50%)' + }, + '@media (forced-colors: active)': { + '::after': { + // Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast + bg: selectedLink === ref ? 'LinkText' : 'transparent' + } } }) diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 30a5e138b9e..b326c15a119 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -145,12 +145,8 @@ exports[`ActionMenu renders consistently 1`] = ` diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 6a844ff62e7..5e3bf166f23 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -1266,12 +1266,8 @@ exports[`Autocomplete snapshots renders a menu that contains an item to add to t `; diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap index 0e2da84939a..c1ecf2163bf 100644 --- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -152,12 +152,8 @@ exports[`Dialog renders consistently 1`] = ` @@ -706,12 +715,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` `; @@ -1057,12 +1067,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` @@ -2338,12 +2358,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` @@ -3022,12 +3050,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` @@ -3699,12 +3735,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` @@ -4376,12 +4420,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` @@ -5053,12 +5105,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` @@ -5732,12 +5792,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] @@ -6809,12 +6877,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -7579,12 +7655,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -8305,12 +8389,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -9017,12 +9109,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -9827,12 +9928,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -10637,12 +10747,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -11470,12 +11589,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -11834,12 +11961,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -12644,12 +12780,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -13410,12 +13555,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -14267,12 +14422,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -15117,12 +15282,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -15967,12 +16142,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -17032,12 +17216,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap index e833f881ad0..34f4e562d7d 100644 --- a/src/__tests__/__snapshots__/Token.test.tsx.snap +++ b/src/__tests__/__snapshots__/Token.test.tsx.snap @@ -186,12 +186,8 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` `; @@ -395,12 +396,8 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` `; @@ -604,12 +606,8 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` `; @@ -813,12 +816,8 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` `; @@ -1022,12 +1026,8 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` `; @@ -1442,12 +1447,8 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` `; @@ -1619,12 +1625,8 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` `; @@ -1796,12 +1803,8 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` `; @@ -1973,12 +1981,8 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = ` `; @@ -2150,12 +2159,8 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = ` `; @@ -2327,12 +2337,8 @@ exports[`Token components IssueLabelToken renders all sizes 5`] = ` `; @@ -2587,12 +2598,8 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` `; @@ -2764,12 +2776,8 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` `; @@ -3055,12 +3068,8 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` `; @@ -3221,12 +3235,8 @@ exports[`Token components Token renders all sizes 1`] = ` `; @@ -3387,12 +3402,8 @@ exports[`Token components Token renders all sizes 2`] = ` `; @@ -3553,12 +3569,8 @@ exports[`Token components Token renders all sizes 3`] = ` `; @@ -3719,12 +3736,8 @@ exports[`Token components Token renders all sizes 4`] = ` `; @@ -3885,12 +3903,8 @@ exports[`Token components Token renders all sizes 5`] = ` `; @@ -4323,12 +4342,8 @@ exports[`Token components Token renders with a remove button 1`] = ` `; diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap index e9636959eeb..7223e237738 100644 --- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap @@ -528,12 +528,8 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption