Merge pull request #17789 from cocco3/toolbar-dynamic-title

Toolbars: Add dynamicTitle option

addons/toolbars/src/components/ToolbarMenuList.tsx

@@ -3,7 +3,7 @@ import { useGlobals } from '@storybook/api';
 import { WithTooltip, TooltipLinkList } from '@storybook/components';
 import { ToolbarMenuButton } from './ToolbarMenuButton';
 import { withKeyboardCycle, WithKeyboardCycleProps } from '../hoc/withKeyboardCycle';
-import { getSelectedIcon } from '../utils/get-selected-icon';
+import { getSelectedIcon, getSelectedTitle } from '../utils/get-selected';
 import { ToolbarMenuProps } from '../types';
 import { ToolbarMenuListItem } from './ToolbarMenuListItem';
 
@@ -22,7 +22,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
     id,
     name,
     description,
-    toolbar: { icon: _icon, items, title: _title, showName, preventDynamicIcon },
+    toolbar: { icon: _icon, items, title: _title, showName, preventDynamicIcon, dynamicTitle },
   }) => {
     const [globals, updateGlobals] = useGlobals();
 
@@ -40,6 +40,10 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
       title = name;
     }
 
+    if (dynamicTitle) {
+      title = getSelectedTitle({ currentValue, items }) || title;
+    }
+
     const handleItemClick = useCallback(
       (value: string) => {
         updateGlobals({ [id]: value });

addons/toolbars/src/types.ts

@@ -33,6 +33,8 @@ export interface NormalizedToolbarConfig {
   shortcuts?: ToolbarShortcuts;
   /** @deprecated "name" no longer dual purposes as title - use "title" if a title is wanted */
   showName?: boolean;
+  /** Change title based on selected value */
+  dynamicTitle?: boolean;
 }
 
 export type NormalizedToolbarArgType = ArgType & {

addons/toolbars/src/utils/get-selected-icon.ts

@@ -1,13 +0,0 @@
-import { ToolbarItem } from '../types';
-
-interface GetSelectedIconProps {
-  currentValue: string | null;
-  items: ToolbarItem[];
-}
-
-export const getSelectedIcon = ({ currentValue, items }: GetSelectedIconProps) => {
-  const selectedItem = currentValue != null && items.find((item) => item.value === currentValue);
-  const selectedIcon = selectedItem && selectedItem.icon;
-
-  return selectedIcon;
-};

addons/toolbars/src/utils/get-selected.ts

@@ -0,0 +1,21 @@
+import { ToolbarItem } from '../types';
+
+interface GetSelectedItemProps {
+  currentValue: string | null;
+  items: ToolbarItem[];
+}
+
+export const getSelectedItem = ({ currentValue, items }: GetSelectedItemProps) => {
+  const selectedItem = currentValue != null && items.find((item) => item.value === currentValue);
+  return selectedItem;
+};
+
+export const getSelectedIcon = ({ currentValue, items }: GetSelectedItemProps) => {
+  const selectedItem = getSelectedItem({ currentValue, items });
+  return selectedItem?.icon;
+};
+
+export const getSelectedTitle = ({ currentValue, items }: GetSelectedItemProps) => {
+  const selectedItem = getSelectedItem({ currentValue, items });
+  return selectedItem?.title;
+};

docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx

@@ -12,6 +12,8 @@ export const globalTypes = {
       items: ['light', 'dark'],
       // Property that specifies if the name of the item will be displayed
       showName: true,
+      // Change title based on selected value
+      dynamicTitle: true,
     },
   },
 };

examples/cra-ts-essentials/.storybook/preview.tsx

@@ -26,6 +26,7 @@ export const globalTypes = {
     description: 'Internationalization locale',
     defaultValue: 'en',
     toolbar: {
+      dynamicTitle: true,
       icon: 'globe',
       items: [
         { value: 'en', right: '🇺🇸', title: 'English' },
@@ -35,4 +36,19 @@ export const globalTypes = {
       ],
     },
   },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      dynamicTitle: true,
+      icon: 'circlehollow',
+      title: 'Theme',
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'Light' },
+        { value: 'dark', icon: 'circle', title: 'Dark' },
+        { value: 'side-by-side', icon: 'sidebar', title: 'Side by side' },
+        { value: 'stacked', icon: 'bottombar', title: 'Stacked' },
+      ],
+    },
+  },
 };