diff --git a/.changeset/curvy-badgers-care.md b/.changeset/curvy-badgers-care.md new file mode 100644 index 00000000000..e728be23b26 --- /dev/null +++ b/.changeset/curvy-badgers-care.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +update SelectPanel default empty state message to be more generic diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-modern-action-list--true-linux.png index 5cb9463c515..06967705847 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-modern-action-list--true-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-modern-action-list--true-linux.png differ diff --git a/packages/react/src/SelectPanel/SelectPanel.docs.json b/packages/react/src/SelectPanel/SelectPanel.docs.json index 3bf0f6125d6..b1ab1a84435 100644 --- a/packages/react/src/SelectPanel/SelectPanel.docs.json +++ b/packages/react/src/SelectPanel/SelectPanel.docs.json @@ -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" }, { diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx index a03914f8c60..51b69d7969e 100644 --- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx @@ -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 } diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx index b1abc653f73..e38f427f74d 100644 --- a/packages/react/src/SelectPanel/SelectPanel.test.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx @@ -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() }) @@ -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 () => { @@ -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 () => { diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 00e6f7a4b71..4543c80111a 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -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 = (