refactor(releases): UI polish (#8492)

sanity-io · Feb 4, 2025 · 84190bf · 84190bf
1 parent 716d49d
commit 84190bf
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 46 deletions.
diff --git a/packages/sanity/src/core/releases/components/documentHeader/VersionChip.tsx b/packages/sanity/src/core/releases/components/documentHeader/VersionChip.tsx
@@ -1,7 +1,14 @@
 import {LockIcon} from '@sanity/icons'
-import {type BadgeTone, useClickOutsideEvent, useGlobalKeyDown} from '@sanity/ui'
+import {
+  type BadgeTone,
+  Box,
+  Button, // eslint-disable-line no-restricted-imports
+  Flex,
+  Text,
+  useClickOutsideEvent,
+  useGlobalKeyDown,
+} from '@sanity/ui'
 // eslint-disable-next-line camelcase
-import {getTheme_v2} from '@sanity/ui/theme'
 import {
   memo,
   type MouseEvent,
@@ -14,7 +21,7 @@ import {
 } from 'react'
 import {css, styled} from 'styled-components'
 
-import {Button, Popover, Tooltip} from '../../../../ui-components'
+import {Popover, Tooltip} from '../../../../ui-components'
 import {getVersionId} from '../../../util/draftUtils'
 import {useVersionOperations} from '../../hooks/useVersionOperations'
 import {type ReleaseDocument, type ReleaseState} from '../../store/types'
@@ -28,15 +35,11 @@ interface ChipStyleProps {
   $isArchived?: boolean
 }
 
-const Chip = styled(Button)<ChipStyleProps>(({$isArchived, theme: themeRaw}) => {
-  const theme = getTheme_v2(themeRaw)
-
+const ChipButton = styled(Button)<ChipStyleProps>(({$isArchived}) => {
   return css`
-    border-radius: 9999px !important;
+    flex: none;
     transition: none;
-    text-decoration: none !important;
     cursor: pointer;
-    padding-right: ${theme.space[3]}px;
 
     // target enabled state
     &:not([data-disabled='true']) {
@@ -189,20 +192,27 @@ export const VersionChip = memo(function VersionChip(props: {
       <Tooltip content={tooltipContent} fallbackPlacements={[]} portal placement="bottom">
         {/* This span is needed to make the tooltip work in disabled buttons */}
         <span style={{display: 'inline-flex'}}>
-          <Chip
+          <ChipButton
             ref={chipRef}
             disabled={disabled}
             mode="bleed"
             onClick={onClick}
             selected={selected}
-            style={{flex: 'none'}}
-            text={text}
             tone={tone}
-            icon={<ReleaseAvatar padding={1} tone={tone} />}
             iconRight={locked && LockIcon}
             onContextMenu={contextMenuHandler}
+            padding={1}
+            paddingRight={2}
+            radius="full"
             $isArchived={releaseState === 'archived'}
-          />
+          >
+            <Flex align="center" gap={0}>
+              <ReleaseAvatar padding={1} tone={tone} />
+              <Box flex="none" padding={1}>
+                <Text size={1}>{text}</Text>
+              </Box>
+            </Flex>
+          </ChipButton>
         </span>
       </Tooltip>
 

diff --git a/packages/sanity/src/structure/components/pane/PaneHeader.tsx b/packages/sanity/src/structure/components/pane/PaneHeader.tsx
@@ -88,9 +88,7 @@ export const PaneHeader = forwardRef(function PaneHeader(
                 )}
                 {!loading && (
                   <TitleText size={1} textOverflow="ellipsis" weight="semibold">
-                    <Box flex={1} overflow="auto">
-                      {title}
-                    </Box>
+                    {title}
                   </TitleText>
                 )}
               </TitleCard>

diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
@@ -1,16 +1,9 @@
-import {Flex, Text} from '@sanity/ui'
 import {unstable_useValuePreview as useValuePreview, useTranslation} from 'sanity'
-import {styled} from 'styled-components'
 
 import {structureLocaleNamespace} from '../../../../i18n'
 import {useDocumentPane} from '../../useDocumentPane'
-import {DocumentPerspectiveList} from './perspective/DocumentPerspectiveList'
 
-const TitleContainer = styled(Text)`
-  max-width: 100%;
-  min-width: 0;
-`
-export function DocumentHeaderTitle({collapsed = false}: {collapsed?: boolean}): React.JSX.Element {
+export function DocumentHeaderTitle(): React.JSX.Element {
   const {connectionState, schemaType, title, value: documentValue} = useDocumentPane()
   const subscribed = Boolean(documentValue)
 
@@ -44,24 +37,12 @@ export function DocumentHeaderTitle({collapsed = false}: {collapsed?: boolean}):
   }
 
   return (
-    <Flex flex={1} align="center" gap={collapsed ? 3 : 1} paddingX={collapsed ? 2 : 0} paddingY={1}>
-      {collapsed ? (
-        <TitleContainer
-          muted={!value?.title}
-          size={1}
-          textOverflow="ellipsis"
-          weight={value?.title ? 'semibold' : undefined}
-          title={value?.title}
-        >
-          {value?.title || (
-            <span style={{color: 'var(--card-muted-fg-color)'}}>
-              {t('panes.document-header-title.untitled.text')}
-            </span>
-          )}
-        </TitleContainer>
-      ) : (
-        <DocumentPerspectiveList />
+    <>
+      {value?.title || (
+        <span style={{color: 'var(--card-muted-fg-color)'}}>
+          {t('panes.document-header-title.untitled.text')}
+        </span>
       )}
-    </Flex>
+    </>
   )
 }
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -1,5 +1,5 @@
 import {ArrowLeftIcon, CloseIcon, SplitVerticalIcon} from '@sanity/icons'
-import {Flex} from '@sanity/ui'
+import {Box, Card, Flex} from '@sanity/ui'
 import {
   type ForwardedRef,
   forwardRef,
@@ -30,6 +30,7 @@ import {isRestoreAction} from '../../statusBar/DocumentStatusBarActions'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
+import {DocumentPerspectiveList} from './perspective/DocumentPerspectiveList'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface DocumentPanelHeaderProps {
@@ -121,7 +122,7 @@ export const DocumentPanelHeader = memo(
       [contextMenuNodes, referenceElement],
     )
 
-    const title = useMemo(() => <DocumentHeaderTitle collapsed={collapsed} />, [collapsed])
+    const title = useMemo(() => <DocumentHeaderTitle />, [])
     const tabs = useMemo(() => showTabs && <DocumentHeaderTabs />, [showTabs])
     const backButton = useMemo(
       () =>
@@ -217,6 +218,18 @@ export const DocumentPanelHeader = memo(
 
     return (
       <TooltipDelayGroupProvider>
+        <Card hidden={collapsed} style={{lineHeight: 0}}>
+          <Flex>
+            <Flex flex={1} wrap="wrap" gap={1} padding={3} paddingBottom={0}>
+              <DocumentPerspectiveList />
+            </Flex>
+
+            <Box flex="none" padding={3} paddingBottom={0}>
+              {renderedActions}
+            </Box>
+          </Flex>
+        </Card>
+
         <PaneHeader
           border
           ref={ref}
@@ -225,7 +238,6 @@ export const DocumentPanelHeader = memo(
           tabs={tabs}
           tabIndex={tabIndex}
           backButton={backButton}
-          actions={renderedActions}
         />
       </TooltipDelayGroupProvider>
     )