feat(facelift): update StudioUI Menu item props, remove size

sanity-io · Nov 2, 2023 · a610f7d · a610f7d
1 parent 71ec3f9
commit a610f7d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 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
@@ -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)}
             </StyledMenuItem>
           )

diff --git 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 (
     <MenuItem
-      size="large"
       as={lastActiveLocation ? LinkComponent : 'div'}
       data-as={lastActiveLocation ? 'a' : 'div'}
       onFocus={handleFocus}
       ref={setMenuItemElement}
       text={presence.user.displayName}
-      subText={hasLink ? undefined : 'Not in a document'}
+      subtitle={hasLink ? undefined : 'Not in a document'}
       preview={
         <UserAvatar
           size={1}

diff --git a/...re/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx b/...re/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
@@ -29,12 +29,11 @@ function CustomMenuItem({
 
   return (
     <MenuItem
-      size="large"
       onClick={handleClick}
       pressed={selected}
       tone="default"
       text={title}
-      subText={value ? `${value}` : undefined}
+      subtitle={value ? `${value}` : undefined}
     />
   )
 }

diff --git 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 (
                     <MenuItem
-                      size="large"
                       key={workspace.name}
                       // eslint-disable-next-line react/jsx-no-bind
                       onClick={handleSelectWorkspace}
-                      pressed={workspace.name === activeWorkspace.name}
-                      selected={workspace.name === activeWorkspace.name}
-                      iconRight={
-                        workspace.name === activeWorkspace.name ? CheckmarkIcon : undefined
-                      }
+                      pressed={isSelected}
+                      selected={isSelected}
+                      iconRight={isSelected ? CheckmarkIcon : undefined}
                       badgeText={STATE_TITLES[state]}
                       preview={<WorkspacePreviewIcon icon={workspace.icon} size="large" />}
                       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
@@ -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<HTMLDivElement>,
     '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 <MenuItem>.
@@ -85,74 +56,56 @@ 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<HTMLDivElement>,
 ) {
   const menuItemContent = useMemo(() => {
-    if (size === 'large') {
-      return (
-        <Flex gap={3} align="center">
-          {preview && <PreviewWrapper>{preview}</PreviewWrapper>}
-          {(text || subText) && (
-            <Stack flex={1} space={2}>
-              {text && (
-                <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
-                  {text}
-                </Text>
-              )}
-              {subText && (
-                <Text size={FONT_SIZE} textOverflow="ellipsis" weight={'regular'} muted>
-                  {subText}
-                </Text>
-              )}
-            </Stack>
-          )}
-          {badgeText && (
-            <Badge fontSize={FONT_SIZE} mode="default">
-              {badgeText}
-            </Badge>
-          )}
-          {iconRight && (
-            <Text size={FONT_SIZE}>
-              {isValidElement(iconRight) && iconRight}
-              {isValidElementType(iconRight) && createElement(iconRight)}
-            </Text>
-          )}
-        </Flex>
-      )
-    }
-
     return (
-      <Flex as="span" gap={3} align="center">
+      <Flex gap={3} align="center">
         {icon && (
           <Text size={FONT_SIZE}>
             {isValidElement(icon) && icon}
             {isValidElementType(icon) && createElement(icon)}
           </Text>
         )}
 
-        {text && (
-          <Box flex={1}>
-            <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
-              {text}
-            </Text>
-          </Box>
+        {preview && <PreviewWrapper>{preview}</PreviewWrapper>}
+
+        {(text || subtitle) && (
+          <Stack flex={1} space={2}>
+            {text && (
+              <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
+                {text}
+              </Text>
+            )}
+            {subtitle && (
+              <Text size={FONT_SIZE} textOverflow="ellipsis" weight={'regular'} muted>
+                {subtitle}
+              </Text>
+            )}
+          </Stack>
         )}
 
         {hotkeys && (
           <Hotkeys fontSize={FONT_SIZE} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
         )}
 
+        {badgeText && (
+          <Badge fontSize={FONT_SIZE} mode="default">
+            {badgeText}
+          </Badge>
+        )}
+
         {iconRight && (
           <Text size={FONT_SIZE}>
             {isValidElement(iconRight) && iconRight}
@@ -161,14 +114,12 @@ export const MenuItem = forwardRef(function MenuItem(
         )}
       </Flex>
     )
-  }, [size, icon, text, hotkeys, iconRight, preview, subText, badgeText])
+  }, [icon, text, hotkeys, iconRight, preview, subtitle, badgeText])
 
   return (
-    <UIMenuItem ref={ref} {...props}>
-      {/* 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)
+    <UIMenuItem ref={ref} {...rest}>
+      {typeof children === 'undefined' && typeof renderMenuItem === 'function'
+        ? renderMenuItem(menuItemContent)
         : menuItemContent}
     </UIMenuItem>
   )