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

sanity-io · Nov 2, 2023 · c0ac60d · c0ac60d
1 parent c5dc739
commit c0ac60d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 21 deletions.
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -1,13 +1,13 @@
 import {SelectIcon} from '@sanity/icons'
-import {Button, MenuButton, Menu, MenuButtonProps, Box, Label, Stack} from '@sanity/ui'
+import {Button, MenuButton, Menu, MenuButtonProps, Box, Label, Stack, Card} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
 import {useColorScheme} from '../../../colorScheme'
 import {useWorkspaces} from '../../../workspaces'
 import {Tooltip, MenuItem} from '../../../../../ui'
 import {useWorkspaceAuthStates} from './hooks'
-import {WorkspacePreview} from './WorkspacePreview'
+import {STATE_TITLES, WorkspacePreviewIcon} from './WorkspacePreview'
 import {useRouter} from 'sanity/router'
 
 const StyledMenu = styled(Menu)`
@@ -95,21 +95,17 @@ export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
 
                   return (
                     <MenuItem
+                      size="large"
                       key={workspace.name}
                       // eslint-disable-next-line react/jsx-no-bind
                       onClick={handleSelectWorkspace}
                       pressed={workspace.name === activeWorkspace.name}
-                    >
-                      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                      {/* @ts-ignore - Workspace preview hasn't been redesigned for facelift */}
-                      <WorkspacePreview
-                        icon={workspace?.icon}
-                        selected={workspace.name === activeWorkspace.name}
-                        state={state}
-                        subtitle={workspace?.subtitle}
-                        title={workspace?.title || workspace.name}
-                      />
-                    </MenuItem>
+                      selected={workspace.name === activeWorkspace.name}
+                      badgeText={STATE_TITLES[state]}
+                      avatar={<WorkspacePreviewIcon icon={workspace.icon} size="large" />}
+                      text={workspace?.title || workspace.name}
+                      subText={workspace?.subtitle}
+                    />
                   )
                 })}
             </StyledMenu>

diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
@@ -4,22 +4,43 @@ import React, {createElement, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 
-const STATE_TITLES = {
+export const STATE_TITLES = {
   'logged-in': '',
   'logged-out': 'Signed out',
   'no-access': '',
 }
 
-export const MediaCard = styled(Card)`
-  width: 35px;
-  height: 35px;
+type PreviewIconSize = 'small' | 'large'
+interface MediaCardProps {
+  $size: PreviewIconSize
+}
+
+export const MediaCard = styled(Card)<MediaCardProps>`
+  width: ${(props) => (props.$size === 'small' ? '35px' : '41px')};
+  height: ${(props) => (props.$size === 'small' ? '35px' : '41px')};
 
   svg {
     width: 100%;
     height: 100%;
   }
 `
 
+export const WorkspacePreviewIcon = ({
+  icon,
+  size = 'small',
+}: {
+  icon: React.ComponentType | React.ReactNode
+  size: PreviewIconSize
+}) => {
+  const iconComponent = useMemo(() => createIcon(icon), [icon])
+
+  return (
+    <MediaCard radius={2} tone="transparent" $size={size}>
+      {iconComponent}
+    </MediaCard>
+  )
+}
+
 const createIcon = (icon: React.ComponentType | React.ReactNode) => {
   if (isValidElementType(icon)) return createElement(icon)
   if (isValidElement(icon)) return icon
@@ -38,14 +59,11 @@ export interface WorkspacePreviewProps {
 export function WorkspacePreview(props: WorkspacePreviewProps) {
   const {state, subtitle, selected, title, icon, iconRight} = props
 
-  const iconComponent = useMemo(() => createIcon(icon), [icon])
   const iconRightComponent = useMemo(() => createIcon(iconRight), [iconRight])
 
   return (
     <Flex align="center" flex="none" gap={3}>
-      <MediaCard radius={2} tone="transparent">
-        {iconComponent}
-      </MediaCard>
+      <WorkspacePreviewIcon icon={icon} size="small" />
 
       <Stack flex={1} space={2}>
         <Text textOverflow="ellipsis" weight="medium">