diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index faa74d8091e..d37578f4164 100644
--- 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())
expect(html).toMatchInlineSnapshot(
- `""`,
+ `""`,
)
} finally {
sheet.seal()
@@ -62,7 +62,7 @@ describe('Studio', () => {
try {
const html = renderToString(sheet.collectStyles())
expect(html).toMatchInlineSnapshot(
- `""`,
+ `""`,
)
} finally {
sheet.seal()
@@ -82,7 +82,7 @@ describe('Studio', () => {
const html = renderToString(sheet.collectStyles())
node.innerHTML = html
expect(html).toMatchInlineSnapshot(
- `""`,
+ `""`,
)
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
index 01f10713769..bbf35b1774f 100644
--- 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={}
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
index 4bb39c54d2b..e1fa4810b1e 100644
--- a/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx
+++ b/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx
@@ -88,16 +88,21 @@ export default function MenuItemStory() {
- Don't use everything at once
+ Subtitle and spacing is not recommended
+
+
+ Don't use everything at once
+
+
}
icon={CircleIcon}
@@ -105,6 +110,7 @@ export default function MenuItemStory() {
hotkeys={HOTKEYS}
badgeText={'badge'}
iconRight={CheckmarkIcon}
+ __unstable_subtitle="With a subtitle"
/>
diff --git a/packages/sanity/src/ui-components/menuItem/MenuItem.tsx b/packages/sanity/src/ui-components/menuItem/MenuItem.tsx
index f80ed6628b0..acb8a87457e 100644
--- 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