diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx index 2761435d16e..f8b5d4a08e1 100644 --- 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: , + button: ( + + ), 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 index a97f804dbe6..f0faafc3ae0 100644 --- 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: , + button: ( + + ), popover: MENU_POPOVER_PROPS, }), [disabled, tooltipPlacement], diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts index af1866124ee..ef9e58fea5c 100644 --- 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 index 3c7092e4d9b..273873d717e 100644 --- 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(null) const [actionIndex, setActionIndex] = useState(-1) const [referenceElement, setReferenceElement] = useState(null) @@ -39,15 +38,11 @@ export function ActionMenuButton(props: ActionMenuButtonProps) { } menu={ diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx index ef21e308559..5811a20b805 100644 --- 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 @@ -18,6 +18,7 @@ const DocumentActionsFlex = styled(Flex)` // This Hidden button prevents this status bar from shifting in height as both // and 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) { {badges && } - - + {showingRevision ? : } diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx index 7df62cd37b9..c3379248945 100644 --- 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 ( - + {firstActionState && ( diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx index d9c4d9427c7..a7a25c95de5 100644 --- 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, - Pick, 'disabled' | 'hidden' | 'onClick'> { - tooltipPlacement?: Placement -} + extends Pick, + Pick, 'disabled' | 'hidden' | 'onClick'> {} export const ContextMenuButton = forwardRef(function ContextMenuButton( props: ContextMenuButtonProps, ref: React.ForwardedRef, ) { - 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'), }} /> )