diff --git a/.changeset/filtered-action-list-item-renderer.md b/.changeset/filtered-action-list-item-renderer.md new file mode 100644 index 00000000000..2b6df6e6066 --- /dev/null +++ b/.changeset/filtered-action-list-item-renderer.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +FilteredActionList: Respect item-level custom renderers diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-colorblind-linux.png index b5dac8804bf..17a6ba23fd7 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-colorblind-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-dimmed-linux.png index 726c00c29d2..7564e2faa9d 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-dimmed-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-high-contrast-linux.png index 7783a492154..4118920c288 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-high-contrast-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-linux.png index b5dac8804bf..17a6ba23fd7 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-tritanopia-linux.png index b5dac8804bf..17a6ba23fd7 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-tritanopia-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-colorblind-linux.png index 127e8b2af7b..cd587221754 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-colorblind-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-high-contrast-linux.png index 4eea763fb04..7d47068fe31 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-high-contrast-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-linux.png index 127e8b2af7b..cd587221754 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-tritanopia-linux.png index 127e8b2af7b..cd587221754 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-tritanopia-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Custom-Item-Rendering-light-tritanopia-linux.png differ diff --git a/packages/react/src/FilteredActionList/FilteredActionList.features.stories.tsx b/packages/react/src/FilteredActionList/FilteredActionList.features.stories.tsx index 5f96f8278bf..795eb3b74f4 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.features.stories.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionList.features.stories.tsx @@ -484,7 +484,7 @@ export function CustomItemRendering() {
Use renderItem to customize how each item is displayed.
{ ).toBeInTheDocument() }) }) + + describe('custom item rendering', () => { + it('uses an item-level renderer', () => { + const renderItem = vi.fn(() =>
  • Custom item
  • ) + + const {getByText} = render( + , + ) + + expect(getByText('Custom item')).toBeInTheDocument() + expect(renderItem).toHaveBeenCalled() + }) + + it('prefers an item-level renderer over the list-level renderer', () => { + const listRenderItem = vi.fn(() =>
  • List renderer
  • ) + const itemRenderItem = vi.fn(() =>
  • Item renderer
  • ) + + const {getByText} = render( + , + ) + + expect(getByText('Item renderer')).toBeInTheDocument() + expect(itemRenderItem).toHaveBeenCalled() + expect(listRenderItem).not.toHaveBeenCalled() + }) + + it('uses an item-level renderer for grouped items', () => { + const itemRenderItem = vi.fn(() =>
  • Item renderer
  • ) + + const {getByText} = render( + , + ) + + expect(getByText('Item renderer')).toBeInTheDocument() + expect(itemRenderItem).toHaveBeenCalled() + }) + }) }) describe('FilteredActionListBodyLoader', () => { diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx index 29c6328f9cb..eb8beec14dd 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx @@ -160,6 +160,7 @@ export function FilteredActionList({ focusPrependedElements, scrollBehavior, virtualized = false, + renderItem: listRenderItem, ...listProps }: FilteredActionListProps): JSX.Element { if (__DEV__) { @@ -449,7 +450,7 @@ export function FilteredActionList({ data-input-focused={isInputFocused ? '' : undefined} data-first-child={index === firstGroupIndex && itemIndex === 0 ? '' : undefined} {...item} - renderItem={listProps.renderItem} + renderItem={'renderItem' in item ? item.renderItem : listRenderItem} /> ) })} @@ -481,7 +482,7 @@ export function FilteredActionList({ transform: `translateY(${virtualItem.start}px)`, }} {...item} - renderItem={listProps.renderItem} + renderItem={'renderItem' in item ? item.renderItem : listRenderItem} /> ) }) @@ -496,7 +497,7 @@ export function FilteredActionList({ data-input-focused={isInputFocused ? '' : undefined} data-first-child={index === 0 ? '' : undefined} {...item} - renderItem={listProps.renderItem} + renderItem={'renderItem' in item ? item.renderItem : listRenderItem} /> ) })