Merge pull request #22496 from storybookjs/shilman/toolbars-fix-title

Toolbars: Fix title behavior in UI
storybookjs · May 10, 2023 · fc0e40f · fc0e40f
2 parents b3c9b95 + e516f04
commit fc0e40f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import React, { useState, useCallback } from 'react';
 import { useGlobals } from '@storybook/manager-api';
-import { deprecate } from '@storybook/client-logger';
 import { WithTooltip, TooltipLinkList } from '@storybook/components';
 import { ToolbarMenuButton } from './ToolbarMenuButton';
 import type { WithKeyboardCycleProps } from '../hoc/withKeyboardCycle';
@@ -31,18 +30,14 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
       icon = getSelectedIcon({ currentValue, items }) || icon;
     }
 
-    // Deprecation support for old "name of global arg used as title"
-    if (!title) {
-      title = name;
-      deprecate(
-        '`showName` is deprecated as `name` will stop having dual purposes in the future. Please specify a `title` in `globalTypes` instead.'
-      );
-    }
-
     if (dynamicTitle) {
       title = getSelectedTitle({ currentValue, items }) || title;
     }
 
+    if (!title && !icon) {
+      console.warn(`Toolbar '${name}' has no title or icon`);
+    }
+
     const handleItemClick = useCallback(
       (value: string | undefined) => {
         updateGlobals({ [id]: value });

diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
@@ -21,7 +21,7 @@ export const ToolbarMenuListItem = ({
   const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
 
   const Item: TooltipLinkListLink = {
-    id: value || currentValue,
+    id: value ?? '_reset',
     active: currentValue === value,
     right,
     title,

diff --git a/code/addons/toolbars/src/utils/get-selected.ts b/code/addons/toolbars/src/utils/get-selected.ts
@@ -6,7 +6,9 @@ interface GetSelectedItemProps {
 }
 
 export const getSelectedItem = ({ currentValue, items }: GetSelectedItemProps) => {
-  const selectedItem = currentValue != null && items.find((item) => item.value === currentValue);
+  const selectedItem =
+    currentValue != null &&
+    items.find((item) => item.value === currentValue && item.type !== 'reset');
   return selectedItem;
 };