fix(core): update releases navbar menu spacing and click area (#8928)

Author: pedrobonamin

packages/sanity/src/core/perspective/ReleasesToolLink.tsx

@@ -11,6 +11,7 @@ import {Tooltip} from '../../ui-components/tooltip/Tooltip'
 import {RELEASES_TOOL_NAME} from '../releases/plugin'
 import {useReleasesStore} from '../releases/store/useReleasesStore'
 import {ToolLink} from '../studio/components/navbar/tools/ToolLink'
+import {oversizedButtonStyle} from './styles'
 
 const Dot = styled.div({
   width: 4,
@@ -19,6 +20,10 @@ const Dot = styled.div({
   boxShadow: '0 0 0 1px var(--card-bg-color)',
 })
 
+const OversizedButton = styled(ToolLink)`
+  ${oversizedButtonStyle}
+`
+
 /**
  * represents the calendar icon for the releases tool.
  * It will be hidden if users have turned off releases.
@@ -39,13 +44,12 @@ export function ReleasesToolLink(): React.JSX.Element {
   return (
     <Tooltip content={t('release.navbar.tooltip')}>
       <Button
-        as={ToolLink}
+        as={OversizedButton}
         name={RELEASES_TOOL_NAME}
         data-as="a"
-        className="p-menu-btn"
         icon={CalendarIcon}
         mode="bleed"
-        padding={3}
+        padding={2}
         radius="full"
         data-testid="releases-tool-link"
         selected={activeToolName === RELEASES_TOOL_NAME}

packages/sanity/src/core/perspective/navbar/GlobalPerspectiveMenu.tsx

@@ -6,6 +6,7 @@ import {styled} from 'styled-components'
 
 import {MenuButton} from '../../../ui-components'
 import {CreateReleaseDialog} from '../../releases/components/dialog/CreateReleaseDialog'
+import {oversizedButtonStyle} from '../styles'
 import {type ReleaseId} from '../types'
 import {ReleasesList} from './ReleasesList'
 import {useScrollIndicatorVisibility} from './useScrollIndicatorVisibility'
@@ -14,6 +15,9 @@ const StyledMenu = styled(Menu)`
   min-width: 200px;
   max-width: 320px;
 `
+const OversizedButton = styled(Button)`
+  ${oversizedButtonStyle}
+`
 
 export function GlobalPerspectiveMenu({
   selectedReleaseId,
@@ -36,13 +40,12 @@ export function GlobalPerspectiveMenu({
     <>
       <MenuButton
         button={
-          <Button
+          <OversizedButton
             data-testid="global-perspective-menu-button"
             iconRight={ChevronDownIcon}
             mode="bleed"
-            padding={3}
+            padding={2}
             radius="full"
-            className="p-menu-btn"
           />
         }
         id="releases-menu"

packages/sanity/src/core/perspective/navbar/ReleasesNav.tsx

@@ -1,4 +1,4 @@
-import {Card, Flex} from '@sanity/ui'
+import {Card} from '@sanity/ui'
 import {styled} from 'styled-components'
 
 import {usePerspective} from '../../perspective/usePerspective'
@@ -9,19 +9,13 @@ import {GlobalPerspectiveMenu} from './GlobalPerspectiveMenu'
 
 const ReleasesNavContainer = styled(Card)`
   position: relative;
-  --p-bg-color: var(--card-bg-color);
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 1px solid var(--card-border-color);
-    border-radius: 9999px;
-    pointer-events: none;
-    z-index: 3;
+  display: flex;
+  &:not([hidden]) {
+    display: flex;
   }
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
 
   // The children in button is rendered inside a span, we need to absolutely position the dot for the error.
   span:has(> [data-ui='error-status-icon']) {
@@ -31,40 +25,25 @@ const ReleasesNavContainer = styled(Card)`
     padding: 0;
   }
 
-  .p-menu-btn {
-    margin: -1px;
-    box-shadow: inset 0 0 0 4px var(--p-bg-color) !important;
-  }
-
-  button.p-menu-btn:hover,
-  a.p-menu-btn:hover {
+  a:hover,
+  button:hover {
     position: relative;
     z-index: 2;
   }
-
-  .p-menu-btn:nth-child(2) {
-    margin-left: -6px;
-  }
-
-  .p-menu-btn:nth-child(3) {
-    margin-left: -6px;
-  }
 `
 export function ReleasesNav(): React.JSX.Element {
   const areReleasesEnabled = !!useWorkspace().releases?.enabled
 
   const {selectedPerspective, selectedReleaseId} = usePerspective()
 
   return (
-    <ReleasesNavContainer flex="none" tone="inherit" radius="full" data-ui="ReleasesNav">
-      <Flex>
-        {areReleasesEnabled && <ReleasesToolLink />}
-        <CurrentGlobalPerspectiveLabel selectedPerspective={selectedPerspective} />
-        <GlobalPerspectiveMenu
-          selectedReleaseId={selectedReleaseId}
-          areReleasesEnabled={areReleasesEnabled}
-        />
-      </Flex>
+    <ReleasesNavContainer flex="none" tone="inherit" radius="full" data-ui="ReleasesNav" border>
+      {areReleasesEnabled && <ReleasesToolLink />}
+      <CurrentGlobalPerspectiveLabel selectedPerspective={selectedPerspective} />
+      <GlobalPerspectiveMenu
+        selectedReleaseId={selectedReleaseId}
+        areReleasesEnabled={areReleasesEnabled}
+      />
     </ReleasesNavContainer>
   )
 }

packages/sanity/src/core/perspective/navbar/currentGlobalPerspectiveLabel.tsx

@@ -5,39 +5,56 @@ import {
   type ForwardedRef,
   forwardRef,
   type ReactNode,
+  useCallback,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import {IntentLink} from 'sanity/router'
+import {styled} from 'styled-components'
 
 import {useTranslation} from '../../i18n/hooks/useTranslation'
 import {RELEASES_INTENT} from '../../releases/plugin'
 import {isReleaseDocument, type ReleaseDocument} from '../../releases/store/types'
 import {getReleaseIdFromReleaseDocumentId} from '../../releases/util/getReleaseIdFromReleaseDocumentId'
 import {isDraftPerspective, isPublishedPerspective} from '../../releases/util/util'
+import {oversizedButtonStyle} from '../styles'
 import {type SelectedPerspective} from '../types'
 
+const OversizedButton = styled(IntentLink)`
+  ${oversizedButtonStyle}
+`
+
 function AnimatedTextWidth({children, text}: {children: ReactNode; text: string}) {
   const textRef = useRef<HTMLDivElement>(null)
   const [containerWidth, setContainerWidth] = useState<null | number>(null) // in pixels
+  const [isAnimating, setIsAnimating] = useState(false)
 
   useLayoutEffect(() => {
     if (!textRef.current) return
     const newWidth = textRef.current.offsetWidth
     setContainerWidth(newWidth)
   }, [text])
 
+  const onAnimationStart = useCallback(() => {
+    setIsAnimating(true)
+  }, [])
+  const onAnimationComplete = useCallback(() => {
+    setIsAnimating(false)
+  }, [])
+
   return (
     <motion.div
       style={{
         display: 'inline-block',
-        overflow: 'hidden',
         width: containerWidth === null ? 'auto' : containerWidth, // use auto on first render
+        overflow: isAnimating ? 'hidden' : 'visible',
       }}
       animate={{width: containerWidth || 'auto'}}
       transition={{type: 'spring', bounce: 0, duration: 0.3}}
+      onAnimationStart={onAnimationStart}
+      onAnimationComplete={onAnimationComplete}
     >
       <div ref={textRef} style={{display: 'inline-block', whiteSpace: 'nowrap'}}>
         {children}
@@ -57,14 +74,14 @@ const ReleasesLink = ({selectedPerspective}: {selectedPerspective: ReleaseDocume
         linkRef: ForwardedRef<HTMLAnchorElement>,
       ) {
         return (
-          <IntentLink
+          <OversizedButton
             {...intentProps}
             ref={linkRef}
             intent={RELEASES_INTENT}
             params={{id: getReleaseIdFromReleaseDocumentId(selectedPerspective._id)}}
           >
             {children}
-          </IntentLink>
+          </OversizedButton>
         )
       }),
     [selectedPerspective],
@@ -76,10 +93,9 @@ const ReleasesLink = ({selectedPerspective}: {selectedPerspective: ReleaseDocume
       data-as="a"
       rel="noopener noreferrer"
       mode="bleed"
-      padding={3}
-      className="p-menu-btn small"
+      padding={2}
       radius="full"
-      style={{maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis'}}
+      style={{maxWidth: '180px', textOverflow: 'ellipsis'}}
       text={selectedPerspective.metadata?.title || t('release.placeholder-untitled-release')}
     />
   )
@@ -97,12 +113,7 @@ export function CurrentGlobalPerspectiveLabel({
       text={isReleaseDocument(selectedPerspective) ? selectedPerspective._id : selectedPerspective}
     >
       {isPublishedPerspective(selectedPerspective) || isDraftPerspective(selectedPerspective) ? (
-        <Card
-          tone="inherit"
-          padding={3}
-          className="p-menu-btn"
-          style={{userSelect: 'none', overflow: 'hidden'}}
-        >
+        <Card tone="inherit" padding={2} style={{userSelect: 'none', overflow: 'hidden'}}>
           <Text size={1} textOverflow="ellipsis" weight="medium">
             {isPublishedPerspective(selectedPerspective)
               ? t('release.chip.published')

packages/sanity/src/core/perspective/styles.ts

@@ -0,0 +1,17 @@
+import {css} from 'styled-components'
+
+/**
+ * A CSS helper that extends the clickable area of a component by adding a pseudo-element.
+ * This creates a larger hit area for better usability without affecting the visual size.
+ */
+export const oversizedButtonStyle = css`
+  position: relative;
+  cursor: default;
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    inset: -4px;
+    border-radius: 9999px;
+  }
+`