diff --git a/code/core/src/components/components/Select/Select.stories.tsx b/code/core/src/components/components/Select/Select.stories.tsx index 4861d26ae5d1..a6abd2ce3db1 100644 --- a/code/core/src/components/components/Select/Select.stories.tsx +++ b/code/core/src/components/components/Select/Select.stories.tsx @@ -1479,3 +1479,61 @@ export const ResetWithUndefinedOption = meta.story({ }); }, }); + +export const ShowSelectedOptionTitleTrue = meta.story({ + name: 'Show Selected Option Title (prop=true)', + args: { + showSelectedOptionTitle: true, + defaultOptions: 'frog', + }, + play: async ({ canvas, step }) => { + await step('Verify selected option title is shown', async () => { + const selectButton = await canvas.findByRole('button'); + expect(selectButton).toHaveTextContent('Frog'); + }); + }, +}); + +export const ShowSelectedOptionTitleFalse = meta.story({ + name: 'Show Selected Option Title (prop=false)', + args: { + showSelectedOptionTitle: false, + defaultOptions: 'frog', + }, + play: async ({ canvas, step }) => { + await step('Verify default title is shown instead of selected option', async () => { + const selectButton = await canvas.findByRole('button'); + expect(selectButton).toHaveTextContent('Animal'); + }); + }, +}); + +export const ShowSelectedOptionTitleFalseMulti = meta.story({ + name: 'Show Selected Option Title (prop=false, multi)', + args: { + showSelectedOptionTitle: false, + multiSelect: true, + defaultOptions: ['frog', 'tadpole'], + }, + play: async ({ canvas, step }) => { + await step('Verify default title is shown for multi-select', async () => { + const selectButton = await canvas.findByRole('button'); + expect(selectButton).toHaveTextContent('Animal'); + }); + }, +}); + +export const ShowSelectedOptionTitleTrueMulti = meta.story({ + name: 'Show Selected Option Title (prop=true, multi)', + args: { + showSelectedOptionTitle: true, + multiSelect: true, + defaultOptions: ['frog'], + }, + play: async ({ canvas, step }) => { + await step('Verify option count is shown for multi-select', async () => { + const selectButton = await canvas.findByRole('button'); + expect(selectButton).toHaveTextContent('1'); + }); + }, +}); diff --git a/code/core/src/components/components/Select/Select.tsx b/code/core/src/components/components/Select/Select.tsx index 0844cb7ed982..e50c192aedba 100644 --- a/code/core/src/components/components/Select/Select.tsx +++ b/code/core/src/components/components/Select/Select.tsx @@ -78,6 +78,13 @@ export interface SelectProps extends Omit< onSelect?: (option: Value) => void; onDeselect?: (option: Value) => void; onChange?: (selected: Value[]) => void; + /** + * Legacy option for ToolbarMenuSelect. Do not use in new code. Controls whether to show the + * selected option's title. + * + * @default true + */ + showSelectedOptionTitle?: boolean; } function valueToId(parentId: string, { value }: InternalOption | ResetOption): string { @@ -208,6 +215,7 @@ export const Select = forwardRef( onChange, tooltip, ariaLabel, + showSelectedOptionTitle = true, ...props }, ref @@ -522,7 +530,7 @@ export const Select = forwardRef( {!multiSelect && ( <> {icon} - {selectedOptions[0]?.title ?? children} + {(showSelectedOptionTitle && selectedOptions[0]?.title) || children} )} diff --git a/code/core/src/toolbar/components/ToolbarMenuSelect.tsx b/code/core/src/toolbar/components/ToolbarMenuSelect.tsx index 757712a90120..52aee50efbe4 100644 --- a/code/core/src/toolbar/components/ToolbarMenuSelect.tsx +++ b/code/core/src/toolbar/components/ToolbarMenuSelect.tsx @@ -29,7 +29,14 @@ export const ToolbarMenuSelect: FC = ({ id, name, description, - toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle, shortcuts }, + toolbar: { + icon: _icon, + items, + title: _title, + preventDynamicIcon, + dynamicTitle = true, + shortcuts, + }, }) => { const api = useStorybookApi(); const [globals, updateGlobals, storyGlobals] = useGlobals(); @@ -132,6 +139,7 @@ export const ToolbarMenuSelect: FC = ({ onReset={resetItem ? () => updateGlobals({ [id]: resetItem?.value }) : undefined} onSelect={(selected) => updateGlobals({ [id]: selected })} icon={icon && } + showSelectedOptionTitle={dynamicTitle} > {title} diff --git a/docs/_snippets/storybook-preview-configure-globaltypes.md b/docs/_snippets/storybook-preview-configure-globaltypes.md index 651c5a63033a..4f976b95f75a 100644 --- a/docs/_snippets/storybook-preview-configure-globaltypes.md +++ b/docs/_snippets/storybook-preview-configure-globaltypes.md @@ -9,7 +9,7 @@ const preview = { icon: 'circlehollow', // Array of plain string values or MenuItem shape (see below) items: ['light', 'dark'], - // Change title based on selected value + // Change title based on selected value (recommended for consistency with the Storybook UI) dynamicTitle: true, }, }, @@ -36,7 +36,7 @@ const preview: Preview = { icon: 'circlehollow', // Array of plain string values or MenuItem shape (see below) items: ['light', 'dark'], - // Change title based on selected value + // Change title based on selected value (recommended for consistency with the Storybook UI) dynamicTitle: true, }, }, @@ -63,7 +63,7 @@ export default definePreview({ icon: 'circlehollow', // Array of plain string values or MenuItem shape (see below) items: ['light', 'dark'], - // Change title based on selected value + // Change title based on selected value (recommended for consistency with the Storybook UI) dynamicTitle: true, }, }, @@ -90,7 +90,7 @@ export default definePreview({ icon: 'circlehollow', // Array of plain string values or MenuItem shape (see below) items: ['light', 'dark'], - // Change title based on selected value + // Change title based on selected value (recommended for consistency with the Storybook UI) dynamicTitle: true, }, },