diff --git a/.changeset/silly-spies-cheer.md b/.changeset/silly-spies-cheer.md new file mode 100644 index 00000000000..4fbcec6bf05 --- /dev/null +++ b/.changeset/silly-spies-cheer.md @@ -0,0 +1,5 @@ +--- +'@primer/components': minor +--- + +Updated ActionList's ItemInput type to accept DOM props for divs when renderItem is not provided diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index e49fe95365b..c44af10a49c 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -91,9 +91,9 @@ An `ActionList` is a list of items which can be activated or selected. `ActionLi ## Props -| Name | Type | Default | Description | -| :--------------- | :------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | -| items | `Array JSX.Element>` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | -| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | -| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | -| showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` | +| Name | Type | Default | Description | +| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | +| items | `(ItemProps & Omit, keyof ItemProps>) \| ((Partial & {renderItem: RenderItemFn}) & {key?: Key})` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | +| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | +| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | +| showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` | diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx index 09493053b9a..df6521c9b94 100644 --- a/src/ActionList/List.tsx +++ b/src/ActionList/List.tsx @@ -10,7 +10,9 @@ import {hasActiveDescendantAttribute} from '../behaviors/focusZone' type RenderItemFn = (props: ItemProps) => React.ReactElement -export type ItemInput = ItemProps | ((Partial & {renderItem: RenderItemFn}) & {key?: Key}) +export type ItemInput = + | (ItemProps & Omit, keyof ItemProps>) + | ((Partial & {renderItem: RenderItemFn}) & {key?: Key}) /** * Contract for props passed to the `List` component. diff --git a/src/stories/ActionList.stories.tsx b/src/stories/ActionList.stories.tsx index 03273eefb15..be7798b176e 100644 --- a/src/stories/ActionList.stories.tsx +++ b/src/stories/ActionList.stories.tsx @@ -416,3 +416,22 @@ export function LinkItemStory(): JSX.Element { ) } LinkItemStory.storyName = 'List with a link item' + +export function DOMPropsStory(): JSX.Element { + return ( + <> +

Simple List

+ + alert('Hello') + } + ]} + /> + + + ) +} +DOMPropsStory.storyName = 'List an item input including DOM props'