Skip to content
5 changes: 5 additions & 0 deletions .changeset/curvy-badgers-care.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

update SelectPanel default empty state message to be more generic
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/react/src/SelectPanel/SelectPanel.docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@
{
"name": "message",
"type": "{title: string | React.ReactElement; variant: 'empty' | 'error' | 'warning'; body: React.ReactNode;}",
"defaultValue": "A default empty message is provided by default if this option is not supplied",
"defaultValue": "A default empty message is provided if this option is not configured. Supply a custom empty message to override the default.",
"description": "Message to display in the panel in case of error or empty results"
},
{
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/SelectPanel/SelectPanel.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ export const Default = () => {
filteredItems.length === 0
? {
variant: 'empty',
title: `No language found for \`${filter}\``,
body: 'Adjust your search term to find other languages',
title: 'No items available',
body: '',
}
: undefined
}
Expand Down
10 changes: 3 additions & 7 deletions packages/react/src/SelectPanel/SelectPanel.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -765,9 +765,7 @@ for (const useModernActionList of [false, true]) {

jest.runAllTimers()
await waitFor(async () => {
expect(getLiveRegion().getMessage('polite')).toBe(
"You haven't created any items yet. Please add or create new items to populate the list.",
)
expect(getLiveRegion().getMessage('polite')).toBe('No items available. ')
})
jest.useRealTimers()
})
Expand Down Expand Up @@ -849,8 +847,7 @@ for (const useModernActionList of [false, true]) {
expect(screen.getAllByRole('option')).toHaveLength(3)

await user.type(document.activeElement!, 'something')
expect(screen.getByText("You haven't created any items yet")).toBeVisible()
expect(screen.getByText('Please add or create new items to populate the list.')).toBeVisible()
expect(screen.getByText('No items available')).toBeVisible()
})

it('should display the default empty state message when there is no item after the initial load (No custom message is provided)', async () => {
Expand All @@ -860,8 +857,7 @@ for (const useModernActionList of [false, true]) {

await waitFor(async () => {
await user.click(screen.getByText('Select items'))
expect(screen.getByText("You haven't created any items yet")).toBeVisible()
expect(screen.getByText('Please add or create new items to populate the list.')).toBeVisible()
expect(screen.getByText('No items available')).toBeVisible()
})
})
it('should display the custom empty state message when there is no matching item after filtering', async () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/SelectPanel/SelectPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ import type {ButtonProps, LinkButtonProps} from '../Button/types'
const SHORT_DELAY_MS = 500
const LONG_DELAY_MS = 1000
const EMPTY_MESSAGE = {
title: "You haven't created any items yet",
description: 'Please add or create new items to populate the list.',
title: 'No items available',
description: '',
}

const DefaultEmptyMessage = (
Expand Down
Loading