From 3d950912723da3b55c52c51c68ea7aa6c0808d1e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 May 2023 17:37:40 +0800 Subject: [PATCH 1/4] Toolbars: Fix toolbar title behavior --- .../addons/toolbars/src/components/ToolbarMenuList.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index 82be169c1b39..8d9b43bcbf90 100644 --- 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'; @@ -15,7 +14,6 @@ type ToolbarMenuListProps = ToolbarMenuProps & WithKeyboardCycleProps; export const ToolbarMenuList: FC = withKeyboardCycle( ({ id, - name, description, toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle }, }) => { @@ -31,14 +29,6 @@ export const ToolbarMenuList: FC = 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; } From 15221b5fb7fc9b0884e1740af1400f7599dcd813 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 May 2023 18:30:10 +0800 Subject: [PATCH 2/4] Toolbars: Fix duplicate key warning for reset item --- code/addons/toolbars/src/components/ToolbarMenuListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx index c07a885562dc..8c0ddea7ede7 100644 --- 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 && ; const Item: TooltipLinkListLink = { - id: value || currentValue, + id: value ?? '_reset', active: currentValue === value, right, title, From 755f17a7a9d52519e6a3a6619df4206d5f03d55a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 May 2023 18:31:18 +0800 Subject: [PATCH 3/4] Toolbars: Warn when there is no title or icon --- code/addons/toolbars/src/components/ToolbarMenuList.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index 8d9b43bcbf90..d6c9aa5ff642 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx @@ -14,6 +14,7 @@ type ToolbarMenuListProps = ToolbarMenuProps & WithKeyboardCycleProps; export const ToolbarMenuList: FC = withKeyboardCycle( ({ id, + name, description, toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle }, }) => { @@ -33,6 +34,10 @@ export const ToolbarMenuList: FC = withKeyboardCycle( 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 }); From e516f042bdeac03b79690bacfe3385ce288b51c4 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 May 2023 18:32:28 +0800 Subject: [PATCH 4/4] Toolbars: Fix dynamicTitle showing reset title --- code/addons/toolbars/src/utils/get-selected.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/addons/toolbars/src/utils/get-selected.ts b/code/addons/toolbars/src/utils/get-selected.ts index 5b9e7b15644b..610e1fa9a68f 100644 --- 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; };