Updates ActionList's ItemInput type to accept DOM props for divs when…

… renderItem is not provided (#1497) * Updates ActionList's ItemInput type to accept DOM props for divs when renderItem is not provided * Update items type in docs
primer · Oct 5, 2021 · b9d6a66 · b9d6a66
1 parent 9f39518
commit b9d6a66
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/.changeset/silly-spies-cheer.md 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
@@ -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<ItemProps \| (props: ItemProps) => 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<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>) \| ((Partial<ItemProps> & {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
@@ -10,7 +10,9 @@ import {hasActiveDescendantAttribute} from '../behaviors/focusZone'
 
 type RenderItemFn = (props: ItemProps) => React.ReactElement
 
-export type ItemInput = ItemProps | ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})
+export type ItemInput =
+  | (ItemProps & Omit<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>)
+  | ((Partial<ItemProps> & {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
@@ -416,3 +416,22 @@ export function LinkItemStory(): JSX.Element {
   )
 }
 LinkItemStory.storyName = 'List with a link item'
+
+export function DOMPropsStory(): JSX.Element {
+  return (
+    <>
+      <h1>Simple List</h1>
+      <ErsatzOverlay>
+        <ActionList
+          items={[
+            {
+              text: 'One',
+              onClick: () => alert('Hello')
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+DOMPropsStory.storyName = 'List an item input including DOM props'