@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.21",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -44,15 +44,15 @@
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
     "watch": "pkg watch --strict",
-    "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
-    "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
     "@floating-ui/react-dom": "2.0.0",
-    "@sanity/color": "^2.2.5",
+    "@sanity/color": "3.0.0-beta.6",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.2",
@@ -68,7 +68,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^1.2.11",
+    "@sanity/ui-workshop": "^2.0.0",
     "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-docs": "^7.4.5",
     "@storybook/addon-essentials": "^7.4.5",
@@ -100,8 +100,6 @@
     "cypress": "^13.1.0",
     "cypress-real-events": "^1.10.1",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.19.2",
-    "esbuild-register": "^3.4.2",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
@@ -126,7 +124,7 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.5.2",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2"

package/src/components/autocomplete/autocomplete.tsx

@@ -60,6 +60,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   onSelect?: (value: string) => void
   /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
+  /** The options to render. */
   options?: Option[]
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
@@ -68,6 +69,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
+  /** The callback function for rendering each option. */
   renderOption?: (option: Option) => ReactElement
   /** @beta */
   renderPopover?: (
@@ -82,6 +84,7 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
+  /** The current value. */
   value?: string
 }
 
@@ -684,6 +687,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 })
 
 /**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
  * @public
  */
 export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(

package/src/components/dialog/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * Left/right border offsets for header + footer components (in px).
+ */
+export const BORDER_OFFSET_X: number = 12

package/src/components/dialog/dialog.tsx

@@ -8,12 +8,13 @@ import {
   isHTMLElement,
 } from '../../helpers'
 import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
-import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
+import {Box, Button, Card, CardProps, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
+import {BORDER_OFFSET_X} from './constants'
 import {
   dialogStyle,
   responsiveDialogPositionStyle,
@@ -71,6 +72,15 @@ 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,
@@ -118,7 +128,7 @@ const DialogLayout = styled(Flex)`
   width: 100%;
 `
 
-const DialogHeader = styled(Card)`
+const DialogHeader = styled(Box)<DialogHeaderProps>`
   position: relative;
   z-index: 2;
 
@@ -126,10 +136,13 @@ const DialogHeader = styled(Card)`
     content: '';
     display: block;
     position: absolute;
-    left: 0;
-    right: 0;
+    left: ${BORDER_OFFSET_X}px;
+    right: ${BORDER_OFFSET_X}px;
     bottom: -1px;
-    border-bottom: 1px solid var(--card-hairline-soft-color);
+    border-bottom: 1px solid var(--card-border-color);
+    width: auto;
+    opacity: ${(props) => (props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0)};
+    transition: opacity 200ms ease-in;
   }
 `
 
@@ -140,10 +153,22 @@ const DialogContent = styled(Box)`
   outline: none;
 `
 
-const DialogFooter = styled(Box)`
+const DialogFooter = styled(Box)<DialogFooterProps>`
   position: relative;
   z-index: 3;
-  border-top: 1px solid var(--card-hairline-soft-color);
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: ${BORDER_OFFSET_X}px;
+    right: ${BORDER_OFFSET_X}px;
+    top: -1px;
+    border-top: 1px solid var(--card-border-color);
+    width: auto;
+    opacity: ${(props) => (props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0)};
+    transition: opacity 200ms ease-in;
+  }
 `
 
 const DialogCard = forwardRef(function DialogCard(
@@ -180,6 +205,9 @@ 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
@@ -248,29 +276,56 @@ 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>
-              <Flex>
-                <Box flex={1} padding={4}>
+            <DialogHeader
+              $isContentScrollable={isContentScrollable}
+              $hasScrolledFromTop={hasScrolledFromTop}
+            >
+              <Flex align="center">
+                <Box flex={1} margin={1} padding={4}>
                   {header && (
-                    <Text id={labelId} weight="semibold">
+                    <Text id={labelId} size={1} weight="medium">
                       {header}
                     </Text>
                   )}
                 </Box>
                 {showCloseButton && (
-                  <Box padding={2}>
+                  <Box padding={3}>
                     <Button
                       aria-label="Close dialog"
                       disabled={!onClose}
                       icon={CloseIcon}
                       mode="bleed"
                       onClick={onClose}
-                      padding={3}
                     />
                   </Box>
                 )}
@@ -278,11 +333,18 @@ const DialogCard = forwardRef(function DialogCard(
             </DialogHeader>
           )}
 
-          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
+          <DialogContent flex={1} ref={setContentRef} tabIndex={-1} onScroll={handleContentUpdate}>
             {children}
           </DialogContent>
 
-          {footer && <DialogFooter>{footer}</DialogFooter>}
+          {footer && (
+            <DialogFooter
+              $isContentScrollable={isContentScrollable}
+              $hasScrolledToBottom={hasScrolledToBottom}
+            >
+              {footer}
+            </DialogFooter>
+          )}
         </DialogLayout>
       </DialogCardRoot>
     </DialogContainer>
@@ -290,6 +352,8 @@ const DialogCard = forwardRef(function DialogCard(
 })
 
 /**
+ * The Dialog component.
+ *
  * @public
  */
 export const Dialog = forwardRef(function Dialog(

package/src/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/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/menu/menuButton.tsx

@@ -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/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/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/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 {

package/src/components/toast/toast.tsx

@@ -37,6 +37,10 @@ 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(

package/src/primitives/_selectable/style.ts

@@ -22,6 +22,8 @@ export function selectableBaseStyle(): ReturnType<typeof css> {
       font: inherit;
       text-align: inherit;
       border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
       width: stretch;
     }
 
@@ -99,7 +101,6 @@ export function selectableColorStyle(
             &:hover {
               ${_colorVarsStyle(base, tone.hovered)}
             }
-
             &:active {
               ${_colorVarsStyle(base, tone.pressed)}
             }

package/src/primitives/avatar/avatar.tsx

@@ -11,6 +11,8 @@ import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
  * @public
  */
 export interface AvatarProps {
+  /** @beta */
+  __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
@@ -41,6 +43,8 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
 const Initials = styled.div(avatarStyle.initials)
 
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
 export const Avatar = forwardRef(function Avatar(
@@ -48,6 +52,7 @@ export const Avatar = forwardRef(function Avatar(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
+    __unstable_hideInnerStroke,
     as: asProp,
     color: colorKey = 'gray',
     src,
@@ -140,13 +145,15 @@ export const Avatar = forwardRef(function Avatar(
           </defs>
 
           <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
-          <BgStroke
-            cx={_radius}
-            cy={_radius}
-            rx={_radius}
-            ry={_radius}
-            vectorEffect="non-scaling-stroke"
-          />
+          {!__unstable_hideInnerStroke && (
+            <BgStroke
+              cx={_radius}
+              cy={_radius}
+              rx={_radius}
+              ry={_radius}
+              vectorEffect="non-scaling-stroke"
+            />
+          )}
           <Stroke
             cx={_radius}
             cy={_radius}
@@ -161,8 +168,8 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <Text as="span" size={initialsSize}>
-              <strong>{initials}</strong>
+            <Text as="span" size={initialsSize} weight="medium">
+              {initials}
             </Text>
           </Initials>
         </>

package/src/primitives/avatar/avatarCounter.tsx

@@ -36,7 +36,7 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
     background: var(--card-bg-color);
     box-shadow:
       0 0 0 1px var(--card-bg-color),
-      inset 0 0 0 1.5px var(--card-hairline-hard-color);
+      inset 0 0 0 1px var(--card-hairline-hard-color);
     padding: 0 ${rem(theme.sanity.space[2])};
 
     &:not([hidden]) {
@@ -73,8 +73,8 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
 
   return (
     <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Text as="span" size={counterSize}>
-        <strong>{count}</strong>
+      <Text as="span" size={counterSize} weight="medium">
+        {count}
       </Text>
     </Root>
   )

package/src/primitives/avatar/styles.ts

@@ -152,7 +152,7 @@ function avatarBgStrokeStyle(): CSSObject {
 
 function avatarStrokeStyle(): CSSObject {
   return {
-    strokeWidth: '3px',
+    strokeWidth: '2px',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/primitives/badge/badge.tsx

@@ -4,7 +4,7 @@ import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
-import {Label} from '../label'
+import {Text} from '../text'
 import {ResponsiveRadiusProps} from '../types'
 import {badgeStyle} from './styles'
 import {BadgeStyleProps} from './types'
@@ -25,6 +25,8 @@ const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
 )
 
 /**
+ * Badges are used to tag resources.
+ *
  * @public
  */
 export const Badge = forwardRef(function Badge(
@@ -33,7 +35,7 @@ export const Badge = forwardRef(function Badge(
 ) {
   const {
     children,
-    fontSize,
+    fontSize = 1,
     mode = 'default',
     padding = 1,
     radius = 2,
@@ -51,7 +53,9 @@ export const Badge = forwardRef(function Badge(
       padding={useArrayProp(padding)}
       ref={ref}
     >
-      <Label size={fontSize}>{children}</Label>
+      <Text size={fontSize} weight="medium">
+        {children}
+      </Text>
     </Root>
   )
 })

package/src/primitives/box/box.tsx

@@ -51,6 +51,9 @@ const Root = styled.div<
 )
 
 /**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
  * @public
  */
 export const Box = forwardRef(function Box(