@sanity/ui 2.0.0-alpha.8 → 2.0.0-beta.1

package/src/{components → core/components}/dialog/__workshop__/activate.tsx

@@ -17,7 +17,6 @@ export default function LayeringFocusStory() {
           <Button
             text="Open dialog 1"
             onClick={() => setFirstDialogOpen(true)}
-            tone="primary"
             id="open-dialog-1-button"
           />
 

package/src/{components → core/components}/dialog/__workshop__/layering.tsx

@@ -33,5 +33,9 @@ export default function LayeringStory() {
 function DebugLayer() {
   const layer = useLayer()
 
-  return <Code language="json">{JSON.stringify(layer, null, 2)}</Code>
+  return (
+    <Code language="json" size={1}>
+      {JSON.stringify(layer, null, 2)}
+    </Code>
+  )
 }

package/src/{components → core/components}/dialog/__workshop__/panes.tsx

@@ -46,12 +46,7 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
       <PortalProvider element={portalElement}>
         <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
           <Box padding={4}>
-            <Button
-              onClick={() => setDialogOpen(true)}
-              selected={dialogOpen}
-              text="Open dialog"
-              tone="primary"
-            />
+            <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
           </Box>
 
           <PanePortal ref={setPortalElement} />
@@ -67,7 +62,7 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
           >
             <Box padding={4}>
               <MenuButton
-                button={<Button text="Open menu" tone="primary" />}
+                button={<Button text="Open menu" />}
                 id={`${id}-menu`}
                 menu={
                   <Menu>

package/src/{components → core/components}/dialog/dialog.tsx

@@ -1,4 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {
@@ -8,14 +9,15 @@ import {
   isHTMLElement,
 } from '../../helpers'
 import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
-import {Box, Button, Card, CardProps, Container, Flex, Text} from '../../primitives'
+import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {ThemeColorSchemeKey, cssVars, useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
-import {BORDER_OFFSET_X} from './constants'
 import {
+  animationDialogStyle,
+  AnimationDialogStyleProps,
   dialogStyle,
   responsiveDialogPositionStyle,
   ResponsiveDialogPositionStyleProps,
@@ -48,6 +50,13 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey
   zOffset?: number | number[]
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 interface DialogCardProps extends ResponsiveWidthProps {
@@ -72,15 +81,6 @@ interface DialogCardProps extends ResponsiveWidthProps {
   shadow: number | number[]
 }
 
-interface DialogHeaderProps extends CardProps {
-  $hasScrolledFromTop: boolean
-  $isContentScrollable: boolean
-}
-interface DialogFooterProps extends CardProps {
-  $hasScrolledToBottom: boolean
-  $isContentScrollable: boolean
-}
-
 function isTargetWithinScope(
   boundaryElement: HTMLElement | null,
   portalElement: HTMLElement | null,
@@ -94,11 +94,9 @@ function isTargetWithinScope(
   )
 }
 
-const Root = styled(Layer)<ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps>(
-  responsivePaddingStyle,
-  dialogStyle,
-  responsiveDialogPositionStyle,
-)
+const Root = styled(Layer)<
+  ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
+>(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
 
 const DialogContainer = styled(Container)`
   &:not([hidden]) {
@@ -128,22 +126,9 @@ const DialogLayout = styled(Flex)`
   width: 100%;
 `
 
-const DialogHeader = styled(Card)<DialogHeaderProps>`
+const DialogHeader = styled(Box)`
   position: relative;
   z-index: 2;
-
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: ${BORDER_OFFSET_X}px;
-    right: ${BORDER_OFFSET_X}px;
-    bottom: -1px;
-    border-bottom: 1px solid ${cssVars.default['border-base']};
-    width: auto;
-    opacity: ${(props) => (props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0)};
-    transition: opacity 200ms ease-in;
-  }
 `
 
 const DialogContent = styled(Box)`
@@ -153,22 +138,9 @@ const DialogContent = styled(Box)`
   outline: none;
 `
 
-const DialogFooter = styled(Box)<DialogFooterProps>`
+const DialogFooter = styled(Box)`
   position: relative;
   z-index: 3;
-
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    left: ${BORDER_OFFSET_X}px;
-    right: ${BORDER_OFFSET_X}px;
-    top: -1px;
-    border-top: 1px solid ${cssVars.default['border-base']};
-    width: auto;
-    opacity: ${(props) => (props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0)};
-    transition: opacity 200ms ease-in;
-  }
 `
 
 const DialogCard = forwardRef(function DialogCard(
@@ -205,9 +177,6 @@ const DialogCard = forwardRef(function DialogCard(
   const labelId = `${id}_label`
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton
-  const [isContentScrollable, setIsContentScrollable] = useState(false)
-  const [hasScrolledFromTop, setHasScrolledFromTop] = useState(false)
-  const [hasScrolledToBottom, setHasScrolledToBottom] = useState(false)
 
   useEffect(() => {
     if (!autoFocus) return
@@ -276,57 +245,29 @@ const DialogCard = forwardRef(function DialogCard(
     [contentRef],
   )
 
-  const handleContentUpdate = useCallback(() => {
-    if (localContentRef.current) {
-      setIsContentScrollable(
-        localContentRef.current.clientHeight < localContentRef.current.scrollHeight,
-      )
-      setHasScrolledFromTop(localContentRef.current.scrollTop > 0)
-      setHasScrolledToBottom(
-        localContentRef.current.scrollTop >=
-          localContentRef.current.scrollHeight - localContentRef.current.clientHeight,
-      )
-    }
-  }, [])
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(handleContentUpdate)
-
-    if (localContentRef.current) {
-      resizeObserver.observe(localContentRef.current)
-    }
-
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [contentRef, handleContentUpdate])
-
   return (
     <DialogContainer data-ui="DialogCard" width={width}>
       <DialogCardRoot radius={radius} ref={setRef} scheme={scheme} shadow={shadow}>
         <DialogLayout direction="column">
           {showHeader && (
-            <DialogHeader
-              $isContentScrollable={isContentScrollable}
-              $hasScrolledFromTop={hasScrolledFromTop}
-            >
-              <Flex>
-                <Box flex={1} padding={4}>
+            <DialogHeader>
+              <Flex align="center" padding={3}>
+                <Box flex={1} padding={2}>
                   {header && (
-                    <Text id={labelId} size={1} weight="medium">
+                    <Text id={labelId} size={1} weight="semibold">
                       {header}
                     </Text>
                   )}
                 </Box>
                 {showCloseButton && (
-                  <Box padding={2}>
+                  <Box flex="none">
                     <Button
                       aria-label="Close dialog"
                       disabled={!onClose}
                       icon={CloseIcon}
                       mode="bleed"
                       onClick={onClose}
-                      padding={3}
+                      padding={2}
                     />
                   </Box>
                 )}
@@ -334,18 +275,11 @@ const DialogCard = forwardRef(function DialogCard(
             </DialogHeader>
           )}
 
-          <DialogContent flex={1} ref={setContentRef} tabIndex={-1} onScroll={handleContentUpdate}>
+          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
             {children}
           </DialogContent>
 
-          {footer && (
-            <DialogFooter
-              $isContentScrollable={isContentScrollable}
-              $hasScrolledToBottom={hasScrolledToBottom}
-            >
-              {footer}
-            </DialogFooter>
-          )}
+          {footer && <DialogFooter>{footer}</DialogFooter>}
         </DialogLayout>
       </DialogCardRoot>
     </DialogContainer>
@@ -353,6 +287,8 @@ const DialogCard = forwardRef(function DialogCard(
 })
 
 /**
+ * The Dialog component.
+ *
  * @public
  */
 export const Dialog = forwardRef(function Dialog(
@@ -360,12 +296,12 @@ export const Dialog = forwardRef(function Dialog(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const dialog = useDialog()
-  const theme = useTheme()
+  const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius: cardRadiusProp = 3,
-    cardShadow = 4,
+    cardRadius: cardRadiusProp = 4,
+    cardShadow = 3,
     children,
     contentRef,
     footer,
@@ -375,12 +311,13 @@ export const Dialog = forwardRef(function Dialog(
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 4,
+    padding: paddingProp = 3,
     portal: portalProp,
     position: positionProp = dialog.position || 'fixed',
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
+    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    animate = false,
     ...restProps
   } = props
   const portal = usePortal()
@@ -469,6 +406,7 @@ export const Dialog = forwardRef(function Dialog(
         ref={ref}
         role="dialog"
         zOffset={zOffset}
+        animate={animate}
       >
         <div ref={preDivRef} tabIndex={0} />
         <DialogCard

package/src/core/components/dialog/styles.ts

@@ -0,0 +1,76 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+import {_responsive, ThemeProps} from '../../styles'
+import {DialogPosition} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveDialogPositionStyleProps {
+  $position: DialogPosition[]
+}
+
+export function dialogStyle({theme}: ThemeProps): CSSObject {
+  const {color} = getTheme_v2(theme)
+
+  return {
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    background: color.backdrop,
+  }
+}
+
+export function responsiveDialogPositionStyle(
+  props: ResponsiveDialogPositionStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$position, (position) => ({'&&': {position}}))
+}
+
+/**
+ * @internal
+ */
+export interface AnimationDialogStyleProps {
+  animate: boolean
+}
+
+export function animationDialogStyle(props: AnimationDialogStyleProps): ReturnType<typeof css> {
+  if (!props.animate) return css``
+
+  return css`
+    @keyframes zoomIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    animation: fadeIn 200ms ease-out;
+    // Animates the dialog card.
+    & > [data-ui='DialogCard'] {
+      animation: zoomIn 200ms ease-out;
+    }
+  `
+}

package/src/{components → core/components}/hotkeys/hotkeys.tsx

@@ -16,10 +16,12 @@ export interface HotkeysProps {
 }
 
 const Root = styled.kbd`
+  font: inherit;
+  padding: 1px;
+
   &:not([hidden]) {
     display: block;
   }
-  font: inherit;
 `
 
 const Key = styled(KBD)`
@@ -29,13 +31,15 @@ const Key = styled(KBD)`
 `
 
 /**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
  * @public
  */
 export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.Ref<HTMLElement>,
 ) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 1, ...restProps} = props
+  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
   const space = useArrayProp(spaceProp)
 
   if (!keys || keys.length === 0) {

package/src/{components → core/components}/menu/__workshop__/asComponent.tsx

@@ -24,16 +24,16 @@ export default function AsComponentStory() {
         id="test"
         menu={
           <Menu>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 1</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 2</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 3</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 3</Text>
             </MenuItem>
           </Menu>

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -0,0 +1,50 @@
+import {UsersIcon} from '@sanity/icons'
+import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
+import {Hotkeys} from '../../hotkeys'
+import {Menu} from '../menu'
+import {MenuButton} from '../menuButton'
+import {MenuItem} from '../menuItem'
+
+export default function AvatarMenuStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <MenuButton
+        button={<Button icon={UsersIcon} />}
+        id="avatar-menu"
+        menu={
+          <Menu>
+            <MenuItem padding={0}>
+              <Flex align="center" padding={1}>
+                <Box flex="none">
+                  <Avatar color="purple" initials="JS" />
+                </Box>
+                <Box flex={1} padding={2}>
+                  <Text size={1}>Jane Smith</Text>
+                </Box>
+                <Box padding={1}>
+                  <Badge>Me</Badge>
+                </Box>
+                <Box padding={1}>
+                  <Hotkeys keys={['Cmd', '1']} />
+                </Box>
+              </Flex>
+            </MenuItem>
+            <MenuItem padding={0}>
+              <Flex align="center" padding={1}>
+                <Box flex="none">
+                  <Avatar color="magenta" initials="JS" />
+                </Box>
+                <Box flex={1} padding={2}>
+                  <Text size={1}>John Doe</Text>
+                </Box>
+                <Box padding={1}>
+                  <Hotkeys keys={['Cmd', '2']} />
+                </Box>
+              </Flex>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

package/src/{components → core/components}/menu/__workshop__/closableMenuButton.tsx

@@ -1,5 +1,5 @@
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack, cssVars} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
 import {useRef} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -23,7 +23,7 @@ export default function ClosableMenuButtonStory() {
                 <MenuItem text="Item 3" />
                 <MenuItem text="Item 4" />
               </Stack>
-              <Stack padding={1} style={{borderTop: `1px solid ${cssVars.default['border-base']}`}}>
+              <Stack padding={1} style={{borderTop: '1px solid var(--card-border-color)'}}>
                 <Button
                   icon={AddIcon}
                   onClick={() => {

package/src/{components → core/components}/menu/__workshop__/customMenuItem.tsx

@@ -8,7 +8,9 @@ export default function CustomMenuItemStory() {
           <Menu>
             <MenuItem padding={3}>
               <Stack space={3}>
-                <Text weight="semibold">First option</Text>
+                <Text weight="medium" size={1}>
+                  First option
+                </Text>
                 <Text muted size={1}>
                   Description
                 </Text>
@@ -16,7 +18,9 @@ export default function CustomMenuItemStory() {
             </MenuItem>
             <MenuItem padding={3}>
               <Stack space={3}>
-                <Text weight="semibold">Second option</Text>
+                <Text weight="medium" size={1}>
+                  Second option
+                </Text>
                 <Text muted size={1}>
                   Description
                 </Text>
@@ -25,7 +29,9 @@ export default function CustomMenuItemStory() {
             <MenuDivider />
             <MenuItem padding={3} tone="critical">
               <Stack space={3}>
-                <Text weight="semibold">Dangerous option</Text>
+                <Text weight="medium" size={1}>
+                  Dangerous option
+                </Text>
                 <Text muted size={1}>
                   Description
                 </Text>

package/src/{components → core/components}/menu/__workshop__/disableFocusOnClose.tsx

@@ -1,4 +1,4 @@
-import {SelectIcon} from '@sanity/icons'
+import {ChevronDownIcon} from '@sanity/icons'
 import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
@@ -16,7 +16,7 @@ export default function DisableFocusOnCloseStory() {
         __unstable_disableRestoreFocusOnClose={disableRestoreFocusOnClose}
         button={
           <Button
-            iconRight={SelectIcon}
+            iconRight={ChevronDownIcon}
             mode="ghost"
             text={
               disableRestoreFocusOnClose

package/src/{components → core/components}/menu/__workshop__/index.ts

@@ -75,5 +75,10 @@ export default defineScope({
       title: 'Menu with shouldFocus',
       component: lazy(() => import('./shouldFocus')),
     },
+    {
+      name: 'avatar',
+      title: 'Avatar menu',
+      component: lazy(() => import('./avatarMenu')),
+    },
   ],
 })

package/src/{components → core/components}/menu/__workshop__/menuButton.tsx

@@ -34,7 +34,7 @@ export default function MenuButtonStory() {
           <Button id="prev-button" mode="ghost" text="Prev" />
           <LayerProvider>
             <MenuButton
-              button={<Button tone="primary" text="Open" />}
+              button={<Button text="Open" />}
               id="menu-button"
               menu={
                 <Menu>

package/src/{components → core/components}/menu/menu.test.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 

package/src/{components → core/components}/menu/menu.tsx

@@ -35,6 +35,8 @@ const Root = styled(Box)`
 `
 
 /**
+ * The `Menu` component is a building block for application menus.
+ *
  * @public
  */
 export const Menu = forwardRef(function Menu(

package/src/{components → core/components}/menu/menuButton.tsx

@@ -1,7 +1,7 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {cloneElement, forwardRef, useCallback, useMemo, useState, useEffect, useRef} from 'react'
 import {isElement} from 'react-is'
 import {Popover, PopoverProps} from '../../primitives'
-import {ThemeColorSchemeKey} from '../../theme'
 import {Placement, Radius} from '../../types'
 import {MenuProps} from './menu'
 
@@ -47,6 +47,8 @@ export interface MenuButtonProps {
 }
 
 /**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
  * @public
  */
 export const MenuButton = forwardRef(function MenuButton(

package/src/{components → core/components}/menu/menuDivider.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import {cssVars} from '../../theme'
 
 /**
  * @public
@@ -7,6 +6,6 @@ import {cssVars} from '../../theme'
 export const MenuDivider = styled.hr`
   height: 1px;
   border: 0;
-  background: ${cssVars.default['border-base']};
+  background: var(--card-hairline-soft-color);
   margin: 0;
 `

package/src/{components → core/components}/menu/menuGroup.tsx

@@ -4,7 +4,7 @@ import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
@@ -45,8 +45,8 @@ export function MenuGroup(
     tone = 'default',
     ...restProps
   } = props
-  const {scheme} = useToneContext()
   const menu = useMenu()
+  const {scheme} = useRootTheme()
   const {
     activeElement,
     mount,