From a610f7d9dcf82a0917695a0ebe853e3beecfbd52 Mon Sep 17 00:00:00 2001 From: Pedro Bonamin Date: Thu, 2 Nov 2023 12:18:15 +0100 Subject: [PATCH] feat(facelift): update StudioUI Menu item props, remove size --- .../PortableText/toolbar/BlockStyleSelect.tsx | 13 +- .../navbar/presence/PresenceMenuItem.tsx | 3 +- .../filter/inputs/string/StringList.tsx | 3 +- .../navbar/workspace/WorkspaceMenuButton.tsx | 13 +- packages/sanity/src/ui/menuItem/MenuItem.tsx | 125 ++++++------------ 5 files changed, 54 insertions(+), 103 deletions(-) diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx index d04e56fe0ce..233a711d819 100644 --- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx +++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx @@ -1,6 +1,14 @@ import React, {memo, useCallback, useMemo} from 'react' import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor' -import {Button, Menu, MenuButton, MenuButtonProps, Text} from '@sanity/ui' +import { + Button, + Menu, + MenuButton, + MenuButtonProps, + Text, + // eslint-disable-next-line no-restricted-imports + MenuItem, +} from '@sanity/ui' import {SelectIcon} from '@sanity/icons' import styled from 'styled-components' import { @@ -13,7 +21,6 @@ import { BlockQuote, Normal, } from '../text/textStyles' -import {MenuItem} from '../../../../../ui' import {useActiveStyleKeys, useFocusBlock} from './hooks' import {BlockStyleItem} from './types' @@ -146,8 +153,6 @@ export const BlockStyleSelect = memo(function BlockStyleSelect( // eslint-disable-next-line react/jsx-no-bind onClick={_disabled ? undefined : () => handleChange(item)} > - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore: This item uses a specific render of the menu item.*/} {renderOption(item.style, item?.title || item.style)} ) diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx index a783c027a6c..e5c60003a84 100644 --- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx +++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx @@ -63,13 +63,12 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi return ( ) } diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx index 9a09c26ce3d..5114dc6b01f 100644 --- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx +++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx @@ -92,22 +92,19 @@ export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) { navigateUrl({path: workspace.basePath}) } } - + const isSelected = workspace.name === activeWorkspace.name return ( } text={workspace?.title || workspace.name} - subText={workspace?.subtitle} + subtitle={workspace?.subtitle} /> ) })} diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx index 4e63e13b7bd..c266391850c 100644 --- a/packages/sanity/src/ui/menuItem/MenuItem.tsx +++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx @@ -2,7 +2,6 @@ import { Flex, MenuItem as UIMenuItem, MenuItemProps as UIMenuItemProps, - Box, Text, Badge, Stack, @@ -12,58 +11,29 @@ import React, {createElement, forwardRef, isValidElement, useMemo} from 'react' import {isValidElementType} from 'react-is' import styled from 'styled-components' -interface LargeMenuItem { - size: 'large' - subText?: string - badgeText?: string - preview?: React.ReactNode - /** - * Hotkeys are only supported in `size="small"` menu items. - */ - hotkeys?: undefined - /** - * Icon is only supported in `size="small"` menu items. - */ - icon?: undefined -} - -interface SmallMenuItem { - size?: 'small' - hotkeys?: UIMenuItemProps['hotkeys'] - /** - * Sub text is only supported in `size="large"` menu items. - */ - subText?: undefined - /** - * Badge text is only supported in `size="large"` menu items. - */ - badgeText?: undefined - /** - * preview is only supported in `size="large"` menu items. - */ - preview?: undefined -} - const FONT_SIZE = 1 /** @internal */ export type MenuItemProps = Pick< UIMenuItemProps, - 'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'text' | 'tone' + 'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'text' | 'tone' | 'hotkeys' > & - (LargeMenuItem | SmallMenuItem) & Omit< React.HTMLProps, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'size' > & { + subtitle?: string + badgeText?: string + /** + * Max allowed size is 41x41. + */ + preview?: React.ReactNode /** * Allows to add wrappers to the menu item, e.g. `Tooltip`. */ renderMenuItem?: (menuItem: React.JSX.Element) => React.ReactNode /** - * Usage of `children` is not recommended but still supported. - * Try using `renderMenuItem` instead. - * To use children opt out with `@ts-ignore`. + * Usage of `children` is not supported, import `MenuItem` from `@sanity/ui` instead. */ children?: undefined } @@ -74,6 +44,7 @@ const PreviewWrapper = styled.div` display: flex; align-items: center; justify-content: center; + overflow: hidden; ` /** * Studio UI . @@ -85,55 +56,22 @@ const PreviewWrapper = styled.div` */ export const MenuItem = forwardRef(function MenuItem( { - size = 'small', badgeText, - subText, + subtitle, text, preview = null, icon, iconRight, hotkeys, children, - ...props + renderMenuItem, + ...rest }: MenuItemProps, ref: React.Ref, ) { const menuItemContent = useMemo(() => { - if (size === 'large') { - return ( - - {preview && {preview}} - {(text || subText) && ( - - {text && ( - - {text} - - )} - {subText && ( - - {subText} - - )} - - )} - {badgeText && ( - - {badgeText} - - )} - {iconRight && ( - - {isValidElement(iconRight) && iconRight} - {isValidElementType(iconRight) && createElement(iconRight)} - - )} - - ) - } - return ( - + {icon && ( {isValidElement(icon) && icon} @@ -141,18 +79,33 @@ export const MenuItem = forwardRef(function MenuItem( )} - {text && ( - - - {text} - - + {preview && {preview}} + + {(text || subtitle) && ( + + {text && ( + + {text} + + )} + {subtitle && ( + + {subtitle} + + )} + )} {hotkeys && ( )} + {badgeText && ( + + {badgeText} + + )} + {iconRight && ( {isValidElement(iconRight) && iconRight} @@ -161,14 +114,12 @@ export const MenuItem = forwardRef(function MenuItem( )} ) - }, [size, icon, text, hotkeys, iconRight, preview, subText, badgeText]) + }, [icon, text, hotkeys, iconRight, preview, subtitle, badgeText]) return ( - - {/* Not recommended, should opt out with ts-ignore to use it. */} - {typeof children !== 'undefined' && children} - {typeof children === 'undefined' && typeof props.renderMenuItem === 'function' - ? props.renderMenuItem(menuItemContent) + + {typeof children === 'undefined' && typeof renderMenuItem === 'function' + ? renderMenuItem(menuItemContent) : menuItemContent} )