feat(facelift): create menu item StudioUI (#5090)

* feat(facelift): create menu item StudioUI

* fix(facelift): refactor workspace preview to use large menu item

* fix(facelift): support icon right in large menu item

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

* feat(facelift): add Studio UI menu item stories

* fix(tests): update snapshot

.eslintrc.cjs

@@ -221,7 +221,7 @@ module.exports = {
             paths: [
               {
                 name: '@sanity/ui',
-                importNames: ['Tooltip', 'TooltipProps'],
+                importNames: ['Tooltip', 'TooltipProps', 'MenuItem', 'MenuItemProps'],
                 message:
                   'Please use the (more opinionated) exported components in sanity/src/ui instead.',
               },

dev/test-studio/schema/book.ts

@@ -88,6 +88,18 @@ export default {
         },
       ],
     },
+    {
+      name: 'genre',
+      title: 'Genre',
+      type: 'string',
+      options: {
+        list: [
+          {title: 'Fiction', value: 'fiction'},
+          {title: 'Non Fiction', value: 'nonfiction'},
+          {title: 'Poetry', value: 'poetry'},
+        ],
+      },
+    },
   ],
   orderings: [
     {

packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx

@@ -1,5 +1,6 @@
-import {Menu, MenuButton, MenuButtonProps, MenuDivider, MenuItem} from '@sanity/ui'
+import {Menu, MenuButton, MenuButtonProps, MenuDivider} from '@sanity/ui'
 import React from 'react'
+import {MenuItem} from '../../../ui'
 import {CollapseMenuProps} from './CollapseMenu'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {

packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx

@@ -1,8 +1,9 @@
-import {MenuItem, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {CheckmarkIcon} from '@sanity/icons'
 import {TooltipOfDisabled} from '../../../components'
 import {DocumentFieldActionItem} from '../../../config'
+import {MenuItem} from '../../../../ui'
 
 export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
   const {action} = props
@@ -19,13 +20,10 @@ export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
     <TooltipOfDisabled content={disabledTooltipContent} placement="left">
       <MenuItem
         disabled={Boolean(action.disabled)}
-        fontSize={1}
         icon={action.icon}
         iconRight={action.iconRight || (action.selected ? CheckmarkIcon : undefined)}
         onClick={handleClick}
-        padding={3}
         pressed={action.selected}
-        space={3}
         text={action.title}
         tone={action.tone}
       />

packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx

@@ -1,14 +1,5 @@
 import {EditIcon, LinkIcon, TrashIcon, EyeOpenIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {Box, Button, Flex, Menu, MenuButton, MenuButtonProps, useGlobalKeyDown} from '@sanity/ui'
 import React, {
   forwardRef,
   ReactElement,
@@ -20,6 +11,7 @@ import React, {
   PropsWithChildren,
 } from 'react'
 import {PortableTextBlock, isReference} from '@sanity/types'
+import {MenuItem} from '../../../../../ui'
 import {IntentLink} from 'sanity/router'
 
 interface BlockObjectActionsMenuProps extends PropsWithChildren {

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, MenuItem, 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 {

packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx

@@ -17,7 +17,6 @@ import {
   Menu,
   MenuButton,
   MenuDivider,
-  MenuItem,
   Stack,
   Text,
 } from '@sanity/ui'
@@ -36,6 +35,7 @@ import {AlertStrip} from '../../components/AlertStrip'
 import {FieldActionsProvider, FieldActionsResolver} from '../../field'
 import {DocumentFieldActionNode} from '../../../config'
 import {useFormPublishedId} from '../../useFormPublishedId'
+import {MenuItem} from '../../../../ui'
 import {useReferenceInput} from './useReferenceInput'
 import {useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'

packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx

@@ -8,7 +8,6 @@ import {
   Menu,
   MenuButton,
   MenuDivider,
-  MenuItem,
   Spinner,
   Stack,
   Text,
@@ -36,6 +35,7 @@ import {AlertStrip} from '../../components/AlertStrip'
 import {set, unset} from '../../patch'
 import {createProtoArrayValue} from '../arrays/ArrayOfObjectsInput/createProtoArrayValue'
 import {InsertMenu} from '../arrays/ArrayOfObjectsInput/InsertMenu'
+import {MenuItem} from '../../../../ui'
 import {useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'
 import {useReferenceInput} from './useReferenceInput'

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx

@@ -1,9 +1,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
-import {Box, Button, Grid, Menu, MenuButton, MenuItem, Text, MenuButtonProps} from '@sanity/ui'
+import {Button, Grid, Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
-import {Tooltip} from '../../../../../ui'
+import {MenuItem, Tooltip} from '../../../../../ui'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx

@@ -1,10 +1,11 @@
 import React, {useCallback, useId} from 'react'
 import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Button, Menu, MenuButton} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {useFormCallbacks} from '../../../../studio/contexts/FormCallbacks'
 import {PatchEvent, unset} from '../../../../patch'
 import {CellLayout} from '../../layouts/CellLayout'
+import {MenuItem} from '../../../../../../ui'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx

@@ -1,15 +1,4 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Button, Card, CardTone, Flex, Menu, MenuButton, Spinner, Text} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
@@ -29,6 +18,7 @@ import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {FIXME} from '../../../../../FIXME'
 import {EditPortal} from '../../../../components/EditPortal'
+import {MenuItem} from '../../../../../../ui'
 
 type GridItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
 

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/jsx-no-bind */
 import {SchemaType} from '@sanity/types'
 import React, {ComponentProps, memo} from 'react'
-import {MenuGroup, MenuItem, PopoverProps} from '@sanity/ui'
+import {MenuGroup, PopoverProps} from '@sanity/ui'
 import {InsertAboveIcon, InsertBelowIcon} from '@sanity/icons'
+import {MenuItem} from '../../../../../ui'
 
 interface Props {
   types?: SchemaType[]

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx

@@ -1,6 +1,7 @@
-import React, {useCallback, useId} from 'react'
+import React, {useId} from 'react'
 import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton} from '@sanity/ui'
+import {MenuItem} from '../../../../../../ui'
 import {ArrayItemError} from '../../../../store'
 import {RowLayout} from '../../layouts/RowLayout'
 import {IncompatibleItemType} from './IncompatibleItemType'

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx

@@ -1,15 +1,4 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Button, Card, CardTone, Flex, Menu, MenuButton, Spinner, Text} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
@@ -27,6 +16,7 @@ import {RowLayout} from '../../layouts/RowLayout'
 import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {EditPortal} from '../../../../components/EditPortal'
+import {MenuItem} from '../../../../../../ui'
 
 type PreviewItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
 

packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx

@@ -1,12 +1,13 @@
 import React, {useCallback, useMemo} from 'react'
-import {Box, Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Box, Button, Flex, Menu, MenuButton} from '@sanity/ui'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
 import {FormFieldValidationStatus} from '../../../components/formField'
 import {InsertMenu} from '../ArrayOfObjectsInput/InsertMenu'
 import {PrimitiveItemProps} from '../../../types/itemProps'
 import {RowLayout} from '../layouts/RowLayout'
 import {FieldPresence} from '../../../../presence'
+import {MenuItem} from '../../../../../ui'
 import {getEmptyValue} from './getEmptyValue'
 
 export type DefaultItemProps = Omit<PrimitiveItemProps, 'renderDefault'> & {

packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx

@@ -13,16 +13,7 @@ import {
   UploadState,
 } from '@sanity/types'
 import {ImageIcon, SearchIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Menu,
-  MenuButton,
-  MenuItem,
-  ThemeColorToneKey,
-  ToastParams,
-} from '@sanity/ui'
+import {Box, Button, Card, Menu, MenuButton, ThemeColorToneKey, ToastParams} from '@sanity/ui'
 import {SanityClient} from '@sanity/client'
 import {isFileSource} from '@sanity/asset-utils'
 import {WithReferencedAsset} from '../../../utils/WithReferencedAsset'
@@ -38,6 +29,7 @@ import {InputProps, ObjectInputProps} from '../../../types'
 import {PatchEvent, setIfMissing, unset} from '../../../patch'
 import {MemberField, MemberFieldError, MemberFieldSet} from '../../../members'
 import {ImperativeToast} from '../../../../components'
+import {MenuItem} from '../../../../../ui'
 import {ChangeIndicator} from '../../../../changeIndicators'
 import {CardOverlay, FlexContainer} from './styles'
 import {FileActionsMenu} from './FileActionsMenu'

packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx

@@ -9,7 +9,6 @@ import {
   Menu,
   MenuButton,
   MenuButtonProps,
-  MenuItem,
   Stack,
   ToastParams,
 } from '@sanity/ui'
@@ -52,6 +51,7 @@ import {PresenceOverlay} from '../../../../presence'
 import {FIXME} from '../../../../FIXME'
 import {ImperativeToast} from '../../../../components'
 import {ChangeIndicator} from '../../../../changeIndicators'
+import {MenuItem} from '../../../../../ui'
 import {ImageActionsMenu} from './ImageActionsMenu'
 import {ImagePreview} from './ImagePreview'
 import {InvalidImageWarning} from './InvalidImageWarning'

packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx

@@ -1,7 +1,8 @@
 import React, {MouseEventHandler, useCallback} from 'react'
 
 import {UploadIcon, CopyIcon, ResetIcon, DownloadIcon} from '@sanity/icons'
-import {Box, MenuItem, MenuDivider, Label, useToast} from '@sanity/ui'
+import {Box, MenuDivider, Label, useToast} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui'
 import {FileInputMenuItem} from './FileInputMenuItem/FileInputMenuItem'
 
 interface Props {
@@ -40,7 +41,6 @@ export function ActionsMenu(props: Props) {
         text="Upload"
         data-testid="file-input-upload-button"
         disabled={readOnly || !directUploads}
-        fontSize={2}
       />
       {browse}
 

packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx

@@ -1,5 +1,5 @@
-import {MenuItem} from '@sanity/ui'
 import styled from 'styled-components'
+import {MenuItem} from '../../../../../../ui'
 
 export const FileMenuItem = styled(MenuItem)`
   position: relative;