diff --git a/.changeset/shiny-pianos-wash.md b/.changeset/shiny-pianos-wash.md new file mode 100644 index 00000000000..134bcc4189a --- /dev/null +++ b/.changeset/shiny-pianos-wash.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +ActionList.Item now supports link functionality through href and other anchor attributes, deprecating the separate ActionList.LinkItem component. diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-colorblind-linux.png index dfed2e1ba49..8e823365b77 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-dimmed-linux.png index 74716eeb063..caf93d411ec 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-high-contrast-linux.png index bde0b9c0e65..450e90b9d83 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-linux.png index dfed2e1ba49..8e823365b77 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-tritanopia-linux.png index dfed2e1ba49..8e823365b77 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-colorblind-linux.png index 25e525769e9..cf8024e4aff 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-high-contrast-linux.png index 0441263cc9b..63de13f6be5 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-linux.png index 25e525769e9..cf8024e4aff 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-tritanopia-linux.png index 25e525769e9..cf8024e4aff 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Link-Item-Options-light-tritanopia-linux.png differ diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx index ec560222be0..b3943ce768b 100644 --- a/packages/react/src/ActionList/ActionList.dev.stories.tsx +++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx @@ -2,7 +2,6 @@ import React from 'react' import type {Meta} from '@storybook/react-vite' import {ActionList} from '.' import {Item} from './Item' -import {LinkItem} from './LinkItem' import {Group} from './Group' import {Divider} from './Divider' import {Description} from './Description' @@ -14,7 +13,7 @@ import {AnchoredOverlay} from '../AnchoredOverlay' export default { title: 'Components/ActionList/Dev', component: ActionList, - subcomponents: {Item, LinkItem, Group, Divider, Description}, + subcomponents: {Item, Group, Divider, Description}, } as Meta const users = [ @@ -261,15 +260,15 @@ export const ItemLabelStylesWithMixedDescriptions = () => ( Item with inline description Block description - + Item with inline description Block description - - Item with no description - + + Item with no description + Item with inline description Block description - + diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json index ccaf7865466..f92bf66e956 100644 --- a/packages/react/src/ActionList/ActionList.docs.json +++ b/packages/react/src/ActionList/ActionList.docs.json @@ -108,8 +108,33 @@ "required": false, "description": "id to attach to the root element of the Item", "defaultValue": "" + }, + { + "name": "href", + "type": "string", + "required": false, + "description": "URL to navigate to when the item is clicked. When provided, the item will render as a link.", + "defaultValue": "" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"", + "required": false, + "description": "The underlying element to render." + }, + { + "name": "to", + "type": "string", + "required": false, + "description": "Destination for React Router or other client-side routing libraries. When provided, the item will render as a link.", + "defaultValue": "" } - ] + ], + "passthrough": { + "element": "a", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" + } }, { "name": "ActionList.Heading", @@ -349,4 +374,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/packages/react/src/ActionList/ActionList.examples.stories.tsx b/packages/react/src/ActionList/ActionList.examples.stories.tsx index 8910f107ee3..9f38a340caf 100644 --- a/packages/react/src/ActionList/ActionList.examples.stories.tsx +++ b/packages/react/src/ActionList/ActionList.examples.stories.tsx @@ -51,53 +51,53 @@ export const ListLinkItem = () => ( not a link, just an Item for comparison - + - ActionList.LinkItem - - + ActionList.Item with href + + - ActionList.LinkItem with anchor attributes - - + ActionList.Item with anchor attributes + + as ReactRouterLink - + - + NextJS style Link - + - + With inline description inline description - - + + With block description Block description - - + + Trailing visual ⌘ + L - + ) ListLinkItem.storyName = 'Link Item' diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx index e7ff8b11f50..33affe10126 100644 --- a/packages/react/src/ActionList/ActionList.features.stories.tsx +++ b/packages/react/src/ActionList/ActionList.features.stories.tsx @@ -2,7 +2,6 @@ import React from 'react' import type {Meta} from '@storybook/react-vite' import {ActionList} from '.' import {Item} from './Item' -import {LinkItem} from './LinkItem' import {Group} from './Group' import {Divider} from './Divider' import {Description} from './Description' @@ -35,7 +34,7 @@ import classes from './ActionList.features.stories.module.css' export default { title: 'Components/ActionList/Features', component: ActionList, - subcomponents: {Item, LinkItem, Group, Divider, Description}, + subcomponents: {Item, Group, Divider, Description}, } as Meta export const SimpleList = () => ( @@ -111,36 +110,36 @@ export const WithCustomHeading = () => ( Details - + Readme - - + + MIT License - - + + 1.5k stars - - + + 21 watching - - + + 225 forks - + ) @@ -513,36 +512,36 @@ export const Links = () => ( Details - + Readme - - + + MIT License - - + + 1.5k stars - - + + 21 watching - - + + 225 forks - + ) @@ -909,15 +908,15 @@ export const WithTrailingAction = () => { - + LinkItem 1 with TrailingAction this is a long description and should not cause horizontal scroll on smaller screen sizes - - + + LinkItem 2 with TrailingVisual this is a long description and should not cause horizontal scroll on smaller screen @@ -926,7 +925,7 @@ export const WithTrailingAction = () => { - + Inactive ItemWith TrailingAction diff --git a/packages/react/src/ActionList/ActionList.stories.tsx b/packages/react/src/ActionList/ActionList.stories.tsx index 7d846aaa26c..f431a0ecda7 100644 --- a/packages/react/src/ActionList/ActionList.stories.tsx +++ b/packages/react/src/ActionList/ActionList.stories.tsx @@ -2,7 +2,6 @@ import type {StoryFn, Meta} from '@storybook/react-vite' import type {ActionListProps, ActionListGroupProps} from '.' import {ActionList} from '.' import {Item} from './Item' -import {LinkItem} from './LinkItem' import {Group} from './Group' import {Divider} from './Divider' import {Description} from './Description' @@ -11,7 +10,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} export default { title: 'Components/ActionList', component: ActionList, - subcomponents: {Item, LinkItem, Group, Divider, Description}, + subcomponents: {Item, Group, Divider, Description}, } as Meta export const Default = () => ( @@ -214,11 +213,11 @@ export const LinkItemPlayground = args => { return ( - + {leadingVisual && {leadingVisual}} Action list item {trailingVisual && {trailingVisual}} - + ) } diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx index 0c4361e5b87..a1c24b15810 100644 --- a/packages/react/src/ActionList/ActionList.test.tsx +++ b/packages/react/src/ActionList/ActionList.test.tsx @@ -95,9 +95,9 @@ describe('ActionList', () => { - + Link Item - + Group Heading @@ -177,16 +177,16 @@ describe('ActionList', () => { expect(descriptions[2]).not.toHaveAttribute('title') }) - it('should support size prop on LinkItem', () => { + it('should support size prop on Item', () => { const {container} = HTMLRender( - + Large Link Item - - + + Medium Link Item - - Default Link Item + + Default Link Item , ) diff --git a/packages/react/src/ActionList/Item.test.tsx b/packages/react/src/ActionList/Item.test.tsx index 82bcc2dbb8f..cf54d525212 100644 --- a/packages/react/src/ActionList/Item.test.tsx +++ b/packages/react/src/ActionList/Item.test.tsx @@ -13,9 +13,9 @@ function SimpleActionList(): JSX.Element { Copy link Edit file Delete file - + Link Item - + Inactive item Loading and inactive item @@ -185,9 +185,10 @@ describe('ActionList.Item', () => { const onClick = vi.fn() const component = HTMLRender( - + {/* eslint-disable-next-line primer-react/prefer-action-list-item-onselect */} + Primer React - + , ) const link = await waitFor(() => component.getByRole('link')) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index b25a169bd50..125d4a5cea1 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -5,7 +5,7 @@ import {useSlots} from '../hooks/useSlots' import {ActionListContainerContext} from './ActionListContainerContext' import {Description} from './Description' import {GroupContext} from './Group' -import type {ActionListItemProps, ActionListProps} from './shared' +import type {ActionListItemProps, ActionListProps, LinkProps} from './shared' import {Selection} from './Selection' import {LeadingVisual, TrailingVisual, VisualOrIndicator} from './Visuals' import {ItemContext, ListContext} from './shared' @@ -16,6 +16,7 @@ import VisuallyHidden from '../_VisuallyHidden' import classes from './ActionList.module.css' import {clsx} from 'clsx' import {fixedForwardRef} from '../utils/modern-polymorphic' +import Link from '../Link' type ActionListSubItemProps = { children?: React.ReactNode @@ -47,6 +48,33 @@ const DivItemContainerNoBox = React.forwardRef & + LinkProps & + Pick & { + userOnClick?: (event: React.MouseEvent) => void + as?: React.ElementType + // onClick passed from Item to handle selection logic + onClick?: (event: React.MouseEvent) => void + } + +const LinkItemContainerNoBox = React.forwardRef( + ({children, onClick, userOnClick, inactiveText, as: Component = 'a', ...rest}, forwardedRef) => { + const clickHandler = (event: React.MouseEvent) => { + onClick && onClick(event) + userOnClick && userOnClick(event as React.MouseEvent) + } + if (inactiveText) { + return )}>{children} + } + + return ( + + {children} + + ) + }, +) + const UnwrappedItem = ( { variant = 'default', @@ -64,6 +92,7 @@ const UnwrappedItem = ( groupId: _groupId, renderItem: _renderItem, handleAddItem: _handleAddItem, + ...props }: ActionListItemProps, // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -115,6 +144,11 @@ const UnwrappedItem = ( ? groupSelectionVariant : listSelectionVariant + /** Detect if this should be a link item based on props - needed early for role inference */ + const isLinkItem = Boolean( + props.href || props.to || (typeof props.as === 'string' && props.as.toLowerCase() === 'a') || role === 'link', + ) + /** Infer item role based on the container */ let inferredItemRole: ActionListItemProps['role'] if (container === 'ActionMenu') { @@ -181,7 +215,7 @@ const UnwrappedItem = ( const DefaultItemWrapper = listSemantics ? DivItemContainerNoBox : ButtonItemContainerNoBox - const ItemWrapper = _PrivateItemWrapper || DefaultItemWrapper + const ItemWrapper = _PrivateItemWrapper || (isLinkItem ? LinkItemContainerNoBox : DefaultItemWrapper) // only apply aria-selected and aria-checked to selectable items const selectableRoles = ['menuitemradio', 'menuitemcheckbox', 'option'] @@ -219,18 +253,31 @@ const UnwrappedItem = ( id: itemId, } - const containerProps = _PrivateItemWrapper - ? {role: itemRole ? 'none' : undefined, ...props} - : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - (listSemantics && {...menuItemProps, ...props, ref: forwardedRef}) || {} + // Props distribution depends on which component pattern is being used: + // 1. _PrivateItemWrapper - used by LinkItem, which handles prop splitting internally + // 2. isLinkItem - direct Item usage with link props (href, to, etc.) + // 3. default - regular button/div behavior with ActionListBaseItemProps + + const containerProps = + _PrivateItemWrapper || isLinkItem + ? {role: itemRole ? 'none' : undefined} + : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + (listSemantics && {...menuItemProps, ...props, ref: forwardedRef}) || {} const wrapperProps = _PrivateItemWrapper ? menuItemProps - : !listSemantics && { - ...menuItemProps, - ...props, - ref: forwardedRef, - } + : isLinkItem + ? { + ...props, + ...menuItemProps, + inactiveText, + userOnClick: props.onClick as ((event: React.MouseEvent) => void) | undefined, + } + : !listSemantics && { + ...menuItemProps, + ...props, + ref: forwardedRef, + } return ( ['referrerPolicy'] - className?: string -} +import type {ActionListItemProps, LinkProps} from './shared' // LinkItem does not support selected, loading, variants, etc. export type ActionListLinkItemProps = Pick< diff --git a/packages/react/src/ActionList/index.ts b/packages/react/src/ActionList/index.ts index 71542b10680..b53062183cc 100644 --- a/packages/react/src/ActionList/index.ts +++ b/packages/react/src/ActionList/index.ts @@ -28,7 +28,7 @@ export const ActionList = Object.assign(List, { /** An actionable or selectable `Item` */ Item, - /** A `Item` that renders a full-size anchor inside ListItem */ + /** @deprecated Use `ActionList.Item` with `href` and other anchor attributes instead. */ LinkItem, /** Visually separates `Item`s or `Group`s in an `ActionList`. */ diff --git a/packages/react/src/ActionList/shared.ts b/packages/react/src/ActionList/shared.ts index f652cf1b19c..143351caa0c 100644 --- a/packages/react/src/ActionList/shared.ts +++ b/packages/react/src/ActionList/shared.ts @@ -6,7 +6,10 @@ import type {PolymorphicProps} from '../utils/modern-polymorphic' // eslint-disable-next-line @typescript-eslint/no-explicit-any type ExcludeSelectEventHandler = T extends any ? Omit : never -export type ActionListItemProps = ExcludeSelectEventHandler< +/** + * Base props for ActionList.Item without link-specific props + */ +export type ActionListBaseItemProps = ExcludeSelectEventHandler< PolymorphicProps > & { /** @@ -63,12 +66,26 @@ export type ActionListItemProps = ExcludeSe groupId?: string renderItem?: (item: React.FC>) => React.ReactNode handleAddItem?: (item: React.FC>) => void - /** - * @deprecated `as` prop has no effect on `ActionList.Item`, only `ActionList.LinkItem` - */ + as?: As } +/** + * ActionList.Item props including link-specific props (href, to, etc.) + */ +export type ActionListItemProps = ActionListBaseItemProps & LinkProps + +export type LinkProps = { + download?: string + href?: string + hrefLang?: string + media?: string + ping?: string + rel?: string + target?: string + referrerPolicy?: React.AnchorHTMLAttributes['referrerPolicy'] +} + type MenuItemProps = { onClick?: (event: React.MouseEvent) => void onKeyPress?: (event: React.KeyboardEvent) => void diff --git a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx index 3f2095e8b79..2c41eff3874 100644 --- a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -250,7 +250,7 @@ export const ShortcutMenu = () => { Edit comment ⌘E - View file + View file Delete file @@ -297,7 +297,7 @@ export const ContextMenu = () => { Edit comment ⌘E - View file + View file Delete file @@ -571,12 +571,12 @@ export const OnlyInactiveItems = () => ( - + Settings - + alert('Make a copy clicked')} inactiveText="Unavailable due to an outage"> Make a copy @@ -586,24 +586,24 @@ export const OnlyInactiveItems = () => ( Github projects - + What's new - - + + Give feedback - - + + GitHub Docs - + diff --git a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx index 59df6701597..ef0c3ab0eeb 100644 --- a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx @@ -33,12 +33,12 @@ export const LinksAndActions = () => ( - + Settings - + alert('Make a copy clicked')}> Make a copy @@ -48,24 +48,24 @@ export const LinksAndActions = () => ( GitHub projects - + What's new - - + + Give feedback - - + + GitHub Docs - + @@ -153,12 +153,12 @@ export const InactiveItems = () => ( - + Settings - + alert('Make a copy clicked')} inactiveText="Unavailable due to an outage"> Make a copy @@ -168,24 +168,24 @@ export const InactiveItems = () => ( Github projects - + What's new - - + + Give feedback - - + + GitHub Docs - + @@ -218,24 +218,24 @@ export const LoadingItems = () => ( Github projects - + What's new - - + + Give feedback - - + + GitHub Docs - + @@ -301,12 +301,12 @@ export const DisabledItems = () => ( - + Settings - + Make a copy @@ -316,24 +316,24 @@ export const DisabledItems = () => ( Github projects - + What's new - - + + Give feedback - - + + GitHub Docs - + diff --git a/packages/react/src/ActionMenu/ActionMenu.test.tsx b/packages/react/src/ActionMenu/ActionMenu.test.tsx index 9b25545f718..21963dbdd47 100644 --- a/packages/react/src/ActionMenu/ActionMenu.test.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.test.tsx @@ -23,9 +23,9 @@ function Example(): JSX.Element { event.preventDefault()}> Delete file - + Github - + @@ -404,9 +404,9 @@ describe('ActionMenu', () => { event.preventDefault()}> Delete file - + Github - + @@ -433,9 +433,9 @@ describe('ActionMenu', () => { event.preventDefault()}> Delete file - + Github - + @@ -607,9 +607,9 @@ describe('ActionMenu', () => { event.preventDefault()}> Delete file - + Github - + @@ -633,9 +633,9 @@ describe('ActionMenu', () => { event.preventDefault()}> Delete file - + Github - + diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index 6e69095ca79..fa0a7138645 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx @@ -121,14 +121,14 @@ const BreadcrumbsMenuItem = React.forwardRef {children} - + ) })} diff --git a/packages/react/src/Dialog/Dialog.features.stories.tsx b/packages/react/src/Dialog/Dialog.features.stories.tsx index 7aa688ce18e..08659b14c56 100644 --- a/packages/react/src/Dialog/Dialog.features.stories.tsx +++ b/packages/react/src/Dialog/Dialog.features.stories.tsx @@ -339,10 +339,10 @@ export const NewIssues = () => { title="New issue" renderBody={() => ( - + Item 1 - - Link + + Link )} > diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 8648957d4aa..a48fd3d4868 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -91,15 +91,16 @@ const Item = React.forwardRef( } return ( - {children} - + ) }, ) as PolymorphicForwardRefComponent<'a', NavListItemProps> diff --git a/packages/react/src/PageLayout/PageLayout.examples.stories.tsx b/packages/react/src/PageLayout/PageLayout.examples.stories.tsx index 675119d4ac5..3f30e814712 100644 --- a/packages/react/src/PageLayout/PageLayout.examples.stories.tsx +++ b/packages/react/src/PageLayout/PageLayout.examples.stories.tsx @@ -243,9 +243,9 @@ export const FilterBottomSheet: StoryFn = () => { {isOpen && ( - Red - Vegetables - Animals + Red + Vegetables + Animals )} @@ -326,9 +326,9 @@ export const FilterActionMenu: StoryFn = () => { {isOpen && ( - Red - Vegetables - Animals + Red + Vegetables + Animals )} @@ -543,9 +543,9 @@ export const FiltersBottomSheetTwoLevels: StoryFn = () => { - Categories + Categories {categories.map(category => ( - { } > {category.name} - + ))} - Colors + Colors { handleFilterChange('red') diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx index c72f9c57577..af2910c60f6 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx @@ -386,9 +386,10 @@ export const UnderlineNav = forwardRef( } return ( - | React.KeyboardEvent, ) => { @@ -413,7 +414,7 @@ export const UnderlineNav = forwardRef( ) )} - + ) })}