@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.31

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 {
@@ -11,10 +12,12 @@ import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {
+  animationDialogStyle,
+  AnimationDialogStyleProps,
   dialogStyle,
   responsiveDialogPositionStyle,
   ResponsiveDialogPositionStyleProps,
@@ -47,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 {
@@ -84,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]) {
@@ -118,19 +126,9 @@ const DialogLayout = styled(Flex)`
   width: 100%;
 `
 
-const DialogHeader = styled(Card)`
+const DialogHeader = styled(Box)`
   position: relative;
   z-index: 2;
-
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -1px;
-    border-bottom: 1px solid var(--card-hairline-soft-color);
-  }
 `
 
 const DialogContent = styled(Box)`
@@ -143,7 +141,6 @@ const DialogContent = styled(Box)`
 const DialogFooter = styled(Box)`
   position: relative;
   z-index: 3;
-  border-top: 1px solid var(--card-hairline-soft-color);
 `
 
 const DialogCard = forwardRef(function DialogCard(
@@ -254,23 +251,23 @@ const DialogCard = forwardRef(function DialogCard(
         <DialogLayout direction="column">
           {showHeader && (
             <DialogHeader>
-              <Flex>
-                <Box flex={1} padding={4}>
+              <Flex align="center" padding={3}>
+                <Box flex={1} padding={2}>
                   {header && (
-                    <Text id={labelId} weight="semibold">
+                    <Text id={labelId} size={1} weight="medium">
                       {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>
                 )}
@@ -290,6 +287,8 @@ const DialogCard = forwardRef(function DialogCard(
 })
 
 /**
+ * The Dialog component.
+ *
  * @public
  */
 export const Dialog = forwardRef(function Dialog(
@@ -312,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,
+    animate = false,
     ...restProps
   } = props
   const portal = usePortal()
@@ -406,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/{components → core/components}/dialog/styles.ts

@@ -1,6 +1,7 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {css} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
-import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
@@ -36,3 +37,41 @@ export function responsiveDialogPositionStyle(
 
   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

@@ -29,6 +29,8 @@ const Key = styled(KBD)`
 `
 
 /**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
  * @public
  */
 export const Hotkeys = forwardRef(function Hotkeys(

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/{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__/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/menuGroup.tsx

@@ -4,6 +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 {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
@@ -33,7 +34,7 @@ export function MenuGroup(
   const {
     as = 'button',
     children,
-    fontSize,
+    fontSize = 1,
     icon,
     onClick,
     padding = 3,
@@ -45,6 +46,7 @@ export function MenuGroup(
     ...restProps
   } = props
   const menu = useMenu()
+  const {scheme} = useRootTheme()
   const {
     activeElement,
     mount,
@@ -166,6 +168,7 @@ export function MenuGroup(
         data-selected={!withinMenu && active ? '' : undefined}
         $radius={useArrayProp(radius)}
         $tone={tone}
+        $scheme={scheme}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onMouseEnter={handleMouseEnter}
@@ -173,28 +176,24 @@ export function MenuGroup(
         tabIndex={-1}
         type={as === 'button' ? 'button' : undefined}
       >
-        <Box padding={padding}>
-          <Flex>
-            {icon && (
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-            )}
-
-            <Box flex={1} marginLeft={icon ? space : undefined}>
-              <Text size={fontSize} textOverflow="ellipsis">
-                {text}
-              </Text>
-            </Box>
-
-            <Box marginLeft={space}>
-              <Text size={fontSize}>
-                <ChevronRightIcon />
-              </Text>
-            </Box>
-          </Flex>
-        </Box>
+        <Flex gap={space} padding={padding}>
+          {icon && (
+            <Text size={fontSize}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          )}
+
+          <Box flex={1}>
+            <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+              {text}
+            </Text>
+          </Box>
+
+          <Text size={fontSize}>
+            <ChevronRightIcon />
+          </Text>
+        </Flex>
       </Selectable>
     </Popover>
   )

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

@@ -12,6 +12,7 @@ import {useArrayProp, useForwardedRef} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
+import {useRootTheme} from '../../theme'
 import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
@@ -44,7 +45,7 @@ export const MenuItem = forwardRef(function MenuItem(
     as = 'button',
     children,
     disabled,
-    fontSize = 2,
+    fontSize = 1,
     hotkeys,
     icon,
     iconRight,
@@ -64,6 +65,7 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
+  const {scheme} = useRootTheme()
   const menu = useMenu()
   const {
     activeElement,
@@ -120,7 +122,8 @@ export const MenuItem = forwardRef(function MenuItem(
       forwardedAs={as}
       $radius={useArrayProp(radius)}
       $padding={useArrayProp(0)}
-      $tone={tone}
+      $tone={disabled ? 'default' : tone}
+      $scheme={scheme}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
@@ -131,43 +134,34 @@ export const MenuItem = forwardRef(function MenuItem(
       type={as === 'button' ? 'button' : undefined}
     >
       {(icon || text || iconRight) && (
-        <Box as="span" {...paddingProps}>
-          <Flex as="span">
-            {icon && (
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-            )}
+        <Flex as="span" gap={space} align="center" {...paddingProps}>
+          {icon && (
+            <Text size={fontSize}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          )}
 
-            {text && (
-              <Box
-                flex={1}
-                marginLeft={icon ? space : undefined}
-                marginRight={iconRight ? space : undefined}
-              >
-                <Text size={fontSize} textOverflow="ellipsis">
-                  {text}
-                </Text>
-              </Box>
-            )}
+          {text && (
+            <Box flex={1}>
+              <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+                {text}
+              </Text>
+            </Box>
+          )}
 
-            {hotkeys && (
-              <Box marginLeft={space} style={{marginTop: -4, marginBottom: -4}}>
-                <Hotkeys fontSize={fontSize} keys={hotkeys} />
-              </Box>
-            )}
+          {hotkeys && (
+            <Hotkeys fontSize={fontSize} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
+          )}
 
-            {iconRight && (
-              <Text size={fontSize}>
-                {isValidElement(iconRight) && iconRight}
-                {isValidElementType(iconRight) && createElement(iconRight)}
-              </Text>
-            )}
-          </Flex>
-        </Box>
+          {iconRight && (
+            <Text size={fontSize}>
+              {isValidElement(iconRight) && iconRight}
+              {isValidElementType(iconRight) && createElement(iconRight)}
+            </Text>
+          )}
+        </Flex>
       )}
-
       {children && (
         <Box as="span" {...paddingProps}>
           {children}

package/src/{components → core/components}/skeleton/textSkeleton.tsx

@@ -1,8 +1,8 @@
+import {Theme, ThemeFontKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {_responsive} from '../../styles'
-import {Theme, ThemeFontKey} from '../../theme'
 import {Skeleton, SkeletonProps} from './skeleton'
 
 const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(({

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

@@ -31,7 +31,10 @@ const CustomButton = styled(Button)`
  */
 export const Tab = forwardRef(function Tab(
   props: TabProps &
-    Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'label' | 'type'>,
+    Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
+    >,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -88,7 +91,6 @@ export const Tab = forwardRef(function Tab(
       onBlur={handleBlur}
       onFocus={handleFocus}
       padding={padding}
-      radius="full"
       ref={setRef}
       role="tab"
       selected={selected}

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

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
 import {useToast} from './useToast'

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

@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 import styled from 'styled-components'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ThemeColorToneKey} from '../../theme'
 
 /**
  * @public
@@ -10,6 +10,7 @@ export interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
+  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
@@ -37,12 +38,16 @@ const TextBox = styled(Flex)`
 `
 
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
  * @public
  */
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
 ): React.ReactElement {
-  const {closable, description, onClose, title, status, ...restProps} = props
+  const {closable, description, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
@@ -52,14 +57,18 @@ export function Toast(
       role={role}
       {...restProps}
       marginTop={3}
-      radius={2}
+      radius={radius}
       shadow={2}
       tone={cardTone}
     >
       <Flex align="flex-start">
         <TextBox flex={1} padding={3}>
           <Stack space={3}>
-            {title && <Text weight="semibold">{title}</Text>}
+            {title && (
+              <Text size={1} weight="medium">
+                {title}
+              </Text>
+            )}
             {description && (
               <Text muted size={1}>
                 {description}

package/src/{components → core/components}/tree/__workshop__/tabFromElement.tsx

@@ -26,7 +26,7 @@ export default function BasicStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Box paddingY={3}>
-        <Text>
+        <Text muted size={1}>
           This example is to demonstrate that when you tab from an outside element (using the
           keyboard to navigate), you can still access the tree and tree item. Press the input
           beneath and start tabbing / using the arrow.

package/src/{components → core/components}/tree/style.ts

@@ -9,6 +9,9 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
       cursor: default;
       border-radius: 3px;
 
+      background-color: var(--card-bg-color);
+      color: var(--treeitem-fg-color);
+
       &:focus {
         position: relative;
       }
@@ -20,6 +23,9 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
       & > div {
         cursor: default;
         border-radius: 3px;
+
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
       }
 
       &:focus > div {
@@ -41,9 +47,6 @@ export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css
     &[role='none'] {
       & > [role='treeitem'] {
         ${_colorVarsStyle(base, tone.enabled)}
-
-        background-color: var(--card-bg-color);
-        color: var(--treeitem-fg-color);
       }
 
       &[data-selected] > [role='treeitem'] {
@@ -65,9 +68,6 @@ export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css
     &[role='treeitem'] {
       & > [data-ui='TreeItem__box'] {
         ${_colorVarsStyle(base, tone.enabled)}
-
-        background-color: var(--card-bg-color);
-        color: var(--card-fg-color);
       }
 
       &[data-selected] > [data-ui='TreeItem__box'] {

package/src/{components → core/components}/tree/treeItem.tsx

@@ -1,8 +1,8 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
-import {ThemeFontWeightKey} from '../../theme'
 import {
   treeItemRootStyle,
   treeItemRootColorStyle,
@@ -50,14 +50,14 @@ export const TreeItem = memo(function TreeItem(
   const {
     children,
     expanded: expandedProp = false,
-    fontSize,
+    fontSize = 1,
     href,
     icon,
     id: idProp,
     linkAs,
     muted,
     onClick,
-    padding = 3,
+    padding = 2,
     selected = false,
     space = 2,
     text,