[desk-tool] Add custom dropdown button for version select menus

packages/@sanity/desk-tool/src/components/DropdownButton.css

@@ -0,0 +1,69 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+:root {
+  --dropdown-button-color: var(--default-button-color);
+
+  /* :enabled */
+  --dropdown-button-bg: transparent;
+  --dropdown-button-text: color(var(--dropdown-button-color) lightness(- 10%));
+
+  /* :hover */
+  --dropdown-button-hover-bg: color(var(--dropdown-button-color) alpha(10%));
+  --dropdown-button-hover-text: color(var(--dropdown-button-color) lightness(- 20%));
+
+  /* :selected */
+  --dropdown-button-selected-bg: color(var(--selected-item-color) alpha(15%));
+  --dropdown-button-selected-text: var(--selected-item-color);
+}
+
+.root {
+  appearance: none;
+  font: inherit;
+  border: 0;
+  padding: var(--small-padding);
+  border-radius: var(--border-radius-medium);
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  outline: none;
+  background-color: var(--dropdown-button-bg);
+  color: var(--dropdown-button-text);
+
+  @media (hover: hover) {
+    @nest &:hover {
+      background-color: var(--dropdown-button-hover-bg);
+      color: var(--dropdown-button-hover-text);
+    }
+  }
+
+  @nest &.selected {
+    background-color: var(--dropdown-button-selected-bg);
+    color: var(--dropdown-button-selected-text);
+  }
+
+  @nest &:focus-visible {
+    box-shadow: 0 0 0 2px var(--focus-color);
+  }
+}
+
+.content {
+  display: block;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  font-weight: 600;
+  margin: -3px 0.5em -2px 0;
+}
+
+.iconContainer {
+  display: block;
+  margin: -5px;
+
+  @nest & > svg {
+    display: flex;
+    font-size: calc(21 / 16 * 1rem);
+
+    @nest & path {
+      stroke-width: 1.5 !important;
+    }
+  }
+}

packages/@sanity/desk-tool/src/components/DropdownButton.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames'
+import ChevronDownIcon from 'part:@sanity/base/chevron-down-icon'
+import React from 'react'
+
+import styles from './DropdownButton.css'
+
+interface DropdownButtonProps {
+  children: React.ReactNode
+}
+
+export function DropdownButton(
+  props: DropdownButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'type'>
+) {
+  const {children, selected, ...restProps} = props
+
+  return (
+    <button
+      {...restProps}
+      className={classNames(styles.root, selected && styles.selected)}
+      type="button"
+    >
+      <span className={styles.content}>{children}</span>
+      <span className={styles.iconContainer}>
+        <ChevronDownIcon />
+      </span>
+    </button>
+  )
+}

packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx

@@ -17,6 +17,7 @@ import {AvatarStack} from 'part:@sanity/components/avatar'
 import {ScrollContainer} from 'part:@sanity/components/scroll'
 import {TooltipProvider} from 'part:@sanity/components/tooltip'
 import React, {useCallback, useRef} from 'react'
+import {DropdownButton} from '../../../components/DropdownButton'
 import {useDocumentHistory} from '../documentHistory'
 import {formatTimelineEventLabel} from '../timeline'
 import {LoadingContent} from './content/loading'
@@ -94,13 +95,10 @@ export function ChangesPanel({
         <div className={styles.versionSelectContainer}>
           <div className={styles.changesSinceSelectContainer}>
             <div ref={changesSinceSelectRef}>
-              <Button
-                kind="simple"
+              <DropdownButton
                 onMouseUp={ignoreClickOutside}
                 onClick={onTimelineOpen}
-                padding="small"
                 selected={isTimelineOpen && timelineMode === 'since'}
-                size="small"
               >
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {menuOpen ? (
@@ -109,9 +107,8 @@ export function ChangesPanel({
                   <SinceText since={since} />
                 ) : (
                   <>Since unknown version</>
-                )}{' '}
-                &darr;
-              </Button>
+                )}
+              </DropdownButton>
             </div>
           </div>
 

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx

@@ -1,16 +1,17 @@
 import {useTimeAgo} from '@sanity/base/hooks'
 import {MenuItem, MenuItemGroup} from '@sanity/components'
 import {Chunk} from '@sanity/field/diff'
+import {Path} from '@sanity/types'
 import classNames from 'classnames'
 import {negate, upperFirst} from 'lodash'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import SplitHorizontalIcon from 'part:@sanity/base/split-horizontal-icon'
 import Button from 'part:@sanity/components/buttons/default'
 import LanguageFilter from 'part:@sanity/desk-tool/language-select-component?'
 import React, {useCallback, useState} from 'react'
+import {DropdownButton} from '../../../../components/DropdownButton'
 import {useDeskToolFeatures} from '../../../../features'
 import {formatTimelineEventLabel} from '../../timeline'
-import {Path} from '@sanity/types'
 import {DocumentView} from '../../types'
 import {DocumentPanelContextMenu} from './contextMenu'
 import {DocumentHeaderTabs} from './tabs'
@@ -179,13 +180,10 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
 
           {showVersionMenu && (
             <div className={styles.versionSelectContainer} ref={versionSelectRef}>
-              <Button
-                kind="simple"
+              <DropdownButton
                 onMouseUp={ignoreClickOutside}
                 onClick={onTimelineOpen}
-                padding="small"
                 selected={isTimelineOpen && timelineMode === 'rev'}
-                size="small"
               >
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {menuOpen ? (
@@ -194,9 +192,8 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
                   <TimelineButtonLabel rev={rev} />
                 ) : (
                   <>Current version</>
-                )}{' '}
-                &darr;
-              </Button>
+                )}
+              </DropdownButton>
             </div>
           )}
         </div>