fix: localize document actions button tooltip, update ContextMenuButt…

…on signature
sanity-io · Dec 19, 2023 · 32efb69 · 32efb69
1 parent d680d5f
commit 32efb69
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 25 deletions.
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -121,7 +121,9 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <ContextMenuButton disabled={disabled} tooltipPlacement={tooltipPlacement} />,
+      button: (
+        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
     [disabled, tooltipPlacement],

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -72,7 +72,9 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <ContextMenuButton disabled={disabled} tooltipPlacement={tooltipPlacement} />,
+      button: (
+        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
     [disabled, tooltipPlacement],

diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
@@ -117,6 +117,8 @@ const structureLocaleStrings = defineLocalesResources('structure', {
 
   /** The action menu button aria-label */
   'buttons.action-menu-button.aria-label': 'Open document actions',
+  /** The action menu button tooltip */
+  'buttons.action-menu-button.tooltip': 'Document actions',
 
   /** The aria-label for the split pane button on the document panel header */
   'buttons.split-pane-button.aria-label': 'Split pane right',

diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,7 +1,7 @@
-import {EllipsisHorizontalIcon} from '@sanity/icons'
 import {Menu, MenuButton, PopoverProps, Text} from '@sanity/ui'
-import React, {useCallback, useRef, useState, useMemo, useId} from 'react'
-import {Button, MenuItem, TooltipWithNodes} from '../../../../ui'
+import React, {useCallback, useState, useMemo, useId} from 'react'
+import {MenuItem, TooltipWithNodes} from '../../../../ui'
+import {ContextMenuButton} from '../../../../ui/contextMenuButton'
 import {structureLocaleNamespace} from '../../../i18n'
 import {ActionStateDialog} from './ActionStateDialog'
 import {DocumentActionDescription, LegacyLayerProvider, useTranslation} from 'sanity'
@@ -14,7 +14,6 @@ export interface ActionMenuButtonProps {
 export function ActionMenuButton(props: ActionMenuButtonProps) {
   const {actionStates, disabled} = props
   const idPrefix = useId()
-  const buttonRef = useRef<HTMLButtonElement | null>(null)
   const [actionIndex, setActionIndex] = useState(-1)
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null)
 
@@ -39,15 +38,11 @@ export function ActionMenuButton(props: ActionMenuButtonProps) {
       <MenuButton
         id={`${idPrefix}-action-menu`}
         button={
-          <Button
-            data-testid="action-menu-button"
+          <ContextMenuButton
             aria-label={t('buttons.action-menu-button.aria-label')}
             disabled={disabled}
-            icon={EllipsisHorizontalIcon}
-            mode="bleed"
-            ref={buttonRef}
-            size="large"
-            tooltipProps={{content: 'Document actions'}}
+            data-testid="action-menu-button"
+            tooltipProps={{content: t('buttons.action-menu-button.tooltip')}}
           />
         }
         menu={

diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,11 +1,11 @@
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {Box, Flex} from '@sanity/ui'
+import {Button} from '../../../../ui'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
 import {DocumentSparkline} from './sparkline/DocumentSparkline'
 import {useTimelineSelector} from 'sanity'
-import {Button} from '../../../../ui'
 
 export interface DocumentStatusBarProps {
   actionsBoxRef?: React.Ref<HTMLDivElement>
@@ -18,6 +18,7 @@ const DocumentActionsFlex = styled(Flex)`
 
 // This Hidden button prevents this status bar from shifting in height as both
 // <HistoryStatusBarActions /> and <DocumentStatusBarActions /> can return null.
+// @todo: find a more elegant solve to this layout shift problem
 const SpacerButton = styled(Button)`
   pointer-events: none;
   visibility: hidden;
@@ -37,8 +38,13 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
           <Box flex={[1, 2]}>{badges && <DocumentSparkline />}</Box>
 
           <DocumentActionsFlex flex={1} justify="flex-end" marginLeft={[1, 3]} ref={actionsBoxRef}>
-            <SpacerButton aria-hidden disabled size="large" text="-" />
-
+            <SpacerButton
+              aria-hidden
+              disabled
+              size="large"
+              // eslint-disable-next-line no-attribute-string-literals/no-attribute-string-literals
+              text="-"
+            />
             {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
           </DocumentActionsFlex>
         </Flex>

diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -40,7 +40,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
   }, [firstActionState])
 
   return (
-    <Flex gap={1}>
+    <Flex align="center" gap={2}>
       {firstActionState && (
         <LayerProvider zOffset={200}>
           <TooltipWithNodes disabled={!tooltipContent} content={tooltipContent} placement="top">

diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -1,21 +1,18 @@
 /* eslint-disable no-restricted-imports */
 import {EllipsisHorizontalIcon} from '@sanity/icons'
-import {Placement} from '@sanity/ui'
 import React, {HTMLProps, forwardRef} from 'react'
 import {Button, ButtonProps} from '../button'
 import {useTranslation} from 'sanity'
 
 interface ContextMenuButtonProps
-  extends Pick<ButtonProps, 'mode' | 'tone'>,
-    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {
-  tooltipPlacement?: Placement
-}
+  extends Pick<ButtonProps, 'mode' | 'tone' | 'tooltipProps'>,
+    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'> {}
 
 export const ContextMenuButton = forwardRef(function ContextMenuButton(
   props: ContextMenuButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const {mode = 'bleed', tooltipPlacement, tone, ...rest} = props
+  const {mode = 'bleed', tooltipProps, tone, ...rest} = props
 
   const {t} = useTranslation()
 
@@ -27,8 +24,8 @@ export const ContextMenuButton = forwardRef(function ContextMenuButton(
       ref={ref}
       tone={tone}
       tooltipProps={{
-        content: t('common.context-menu-button.tooltip'),
-        placement: tooltipPlacement,
+        ...tooltipProps,
+        content: tooltipProps?.content || t('common.context-menu-button.tooltip'),
       }}
     />
   )