fix(core): bring back subtitle in workspace list view (#5788)

* fix(core): bring back subtitle in workspace list view * fix(core): reduce spacing and subtitle size * fix(core): fix aligning of text to icon * fix(core): align menuitem title with menubutton title * fix(core): update test snapshots * fix(core): add subtitle prop to MenuItem StudioUI component * fix(core): add space prop to menuitem * fix(core): add unstable prefix to props, add comments * fix(ui-components): enforce menuitem text prop to be string
sanity-io · Feb 20, 2024 · 2202e3c · 2202e3c
1 parent e2f26c4
commit 2202e3c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 18 deletions.
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -45,7 +45,7 @@ describe('Studio', () => {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
 
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-eXNUIU epyZiw\\"><div data-ui=\\"Spinner\\" class=\\"sc-irLvIq kqiGuJ sc-ktwOfi bQiRGJ sc-cgyULZ eaOuUM\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-cgyULZ dvXoSs\\"><div data-ui=\\"Spinner\\" class=\\"sc-irLvIq kqiGuJ sc-ktwOfi bQiRGJ sc-kxJlZZ hpxhyL\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-eXNUIU epyZiw\\"><div data-ui=\\"Spinner\\" class=\\"sc-irLvIq kqiGuJ sc-ktwOfi bQiRGJ sc-cgyULZ eaOuUM\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-cgyULZ dvXoSs\\"><div data-ui=\\"Spinner\\" class=\\"sc-irLvIq kqiGuJ sc-ktwOfi bQiRGJ sc-kxJlZZ hpxhyL\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-eXNUIU epyZiw\\"><div data-ui=\\"Spinner\\" class=\\"sc-irLvIq kqiGuJ sc-ktwOfi bQiRGJ sc-cgyULZ eaOuUM\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-cgyULZ dvXoSs\\"><div data-ui=\\"Spinner\\" class=\\"sc-irLvIq kqiGuJ sc-ktwOfi bQiRGJ sc-kxJlZZ hpxhyL\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 

diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -98,15 +98,9 @@ export function WorkspaceMenuButton() {
                   pressed={isSelected}
                   preview={<WorkspacePreviewIcon icon={workspace.icon} size="small" />}
                   selected={isSelected}
+                  __unstable_subtitle={workspace.subtitle}
+                  __unstable_space={1}
                   text={workspace?.title || workspace.name}
-                  tooltipProps={
-                    workspace?.subtitle
-                      ? {
-                          content: workspace.subtitle,
-                          placement: 'right',
-                        }
-                      : undefined
-                  }
                 />
               )
             })}

diff --git a/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx
@@ -88,23 +88,29 @@ export default function MenuItemStory() {
             <MenuItem icon={CircleIcon} text={text} hotkeys={HOTKEYS} badgeText={'badge'} />
             <Box paddingX={2} paddingTop={2}>
               <Text muted size={1}>
-                Don't use everything at once
+                Subtitle and spacing is not recommended
               </Text>
             </Box>
             <MenuItem
               icon={CircleIcon}
               text={text}
-              hotkeys={HOTKEYS}
-              badgeText={'badge'}
               iconRight={CheckmarkIcon}
+              __unstable_subtitle="With a subtitle"
+              __unstable_space={1}
             />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use everything at once
+              </Text>
+            </Box>
             <MenuItem
               preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
               icon={CircleIcon}
               text={text}
               hotkeys={HOTKEYS}
               badgeText={'badge'}
               iconRight={CheckmarkIcon}
+              __unstable_subtitle="With a subtitle"
             />
           </Menu>
         </Card>

diff --git a/packages/sanity/src/ui-components/menuItem/MenuItem.tsx b/packages/sanity/src/ui-components/menuItem/MenuItem.tsx
@@ -21,11 +21,17 @@ import {
 } from '../conditionalWrapper'
 
 const FONT_SIZE = 1
+const SUBTITLE_FONT_SIZE = 0
+
+/* Using px value here to make title/subtitles align with icon */
+const SubtitleText = styled(Text)`
+  margin-top: 2px;
+`
 
 /** @internal */
 export type MenuItemProps = Pick<
   UIMenuItemProps,
-  'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'text' | 'tone' | 'hotkeys'
+  'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'tone' | 'hotkeys'
 > & {
   badgeText?: string
   /**
@@ -40,7 +46,18 @@ export type MenuItemProps = Pick<
    * Optional render callback which receives menu item content.
    */
   renderMenuItem?: (menuItemContent: React.JSX.Element) => React.ReactNode
+  text?: string
   tooltipProps?: TooltipProps | null
+  /**
+   * Optional subtitle prop for the menu item.
+   * While not recommended, it is utilized for the workspace menu button.
+   */
+  __unstable_subtitle?: string
+  /**
+   * An optional property to adjust spacing in the preview between the icon and the text.
+   * Not recommended, but is applied to the workspace menu button..
+   */
+  __unstable_space?: number
 }
 
 const PreviewWrapper = styled(Box)`
@@ -53,6 +70,9 @@ const PreviewWrapper = styled(Box)`
  * Customized Sanity UI <MenuItem> that restricts usage of `children` to encourage simple,
  * single line menu items.
  *
+ * The workspace menu button needed a subtitle - hence, the StudioUI MenuIten now takes a subtitle prop.
+ * This is only an escape hatch for the workspace menu button and is not recommended for general use.
+ *
  * It also accepts a prop to attach tooltips as well as custom badges too.
  *
  * @internal
@@ -69,6 +89,8 @@ export const MenuItem = forwardRef(function MenuItem(
     renderMenuItem,
     text,
     tooltipProps,
+    __unstable_subtitle,
+    __unstable_space,
     ...rest
   }: MenuItemProps &
     Omit<
@@ -81,7 +103,10 @@ export const MenuItem = forwardRef(function MenuItem(
     return (
       <Flex align="center" gap={2}>
         {preview && (
-          <PreviewWrapper style={{opacity: disabled ? 0.25 : undefined}}>
+          <PreviewWrapper
+            style={{opacity: disabled ? 0.25 : undefined}}
+            paddingRight={__unstable_space ? 1 : 0}
+          >
             <Flex align="center" height="fill" justify="center">
               {preview}
             </Flex>
@@ -96,10 +121,19 @@ export const MenuItem = forwardRef(function MenuItem(
           </Box>
         )}
         {text && (
-          <Stack flex={1} space={2}>
+          <Stack
+            flex={1}
+            space={__unstable_subtitle ? 1 : 2}
+            paddingLeft={__unstable_subtitle ? 1 : 0}
+          >
             <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
               {text}
             </Text>
+            {__unstable_subtitle && (
+              <SubtitleText size={SUBTITLE_FONT_SIZE} textOverflow="ellipsis" weight="medium" muted>
+                {__unstable_subtitle}
+              </SubtitleText>
+            )}
           </Stack>
         )}
         {(badgeText || hotkeys || iconRight) && (
@@ -122,7 +156,17 @@ export const MenuItem = forwardRef(function MenuItem(
         )}
       </Flex>
     )
-  }, [badgeText, disabled, hotkeys, icon, iconRight, preview, text])
+  }, [
+    preview,
+    disabled,
+    __unstable_space,
+    icon,
+    text,
+    __unstable_subtitle,
+    badgeText,
+    hotkeys,
+    iconRight,
+  ])
 
   const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(
     (children) => {