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

package/src/{constants.ts → core/constants.ts}

@@ -10,6 +10,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 
 /**
  * @internal
+ * @deprecated No longer used.
  */
 export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
   top: 'bottom',

package/src/{hooks → core/hooks}/useElementRect/__workshop__/example.tsx

@@ -21,7 +21,9 @@ export default function ExampleStory() {
             <Card scheme="dark" style={{position: 'absolute', ...size}} />
           </div>
 
-          <Code language="json">{JSON.stringify(size)}</Code>
+          <Code language="json" size={1}>
+            {JSON.stringify(size)}
+          </Code>
         </Stack>
       </Container>
     </Box>

package/src/{hooks → core/hooks}/useMediaIndex/__workshop__/test.tsx

@@ -6,7 +6,7 @@ export default function TestStory() {
   return (
     <Card padding={[3, 4, 5]}>
       <Stack space={2}>
-        <Text weight="semibold">The current media index is {mediaIndex}.</Text>
+        <Text weight="medium">The current media index is {mediaIndex}.</Text>
         <Text muted>Try resizing the browser.</Text>
       </Stack>
     </Card>

package/src/{hooks → core/hooks}/useMediaIndex/useMediaIndex.test.tsx

@@ -1,6 +1,7 @@
 /** @jest-environment node */
+import {studioTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {studioTheme, ThemeProvider} from '../../theme'
+import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
 function Log() {

package/src/{index.ts → core/index.ts}

@@ -1,3 +1,5 @@
+export * from './_compat'
+
 export * from './primitives'
 export * from './components'
 export * from './helpers'

package/src/{lib → core/lib}/isRecord.ts

@@ -1,3 +1,3 @@
 export function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === 'object')
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
 }

package/src/{primitives → core/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 → core/primitives}/avatar/avatar.tsx

@@ -1,20 +1,23 @@
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {ThemeColorSpotKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
-import {Text} from '../text'
+import {Label} from '../label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
  * @public
  */
 export interface AvatarProps {
+  /** @beta */
+  __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  color?: ThemeColorSpotKey
+  color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: AvatarSize | AvatarSize[]
@@ -27,7 +30,7 @@ export interface AvatarProps {
   title?: string
 }
 
-const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
+const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
   avatarStyle.root,
 )
@@ -40,7 +43,15 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
 
 const Initials = styled.div(avatarStyle.initials)
 
+const InitialsLabel = styled(Label)({
+  color: 'inherit',
+})
+
+const Image = styled.svg(avatarStyle.image)
+
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
 export const Avatar = forwardRef(function Avatar(
@@ -48,8 +59,9 @@ export const Avatar = forwardRef(function Avatar(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
+    __unstable_hideInnerStroke,
     as: asProp,
-    color: colorKey = 'gray',
+    color = 'gray',
     src,
     title,
     initials,
@@ -63,7 +75,6 @@ export const Avatar = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
   const theme = useTheme()
-  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
 
   // @todo: remove this
   const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
@@ -100,7 +111,7 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s * 2)), [size])
 
   return (
     <Root
@@ -108,8 +119,8 @@ export const Avatar = forwardRef(function Avatar(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Avatar"
       {...restProps}
-      $size={size}
       $color={color}
+      $size={size}
       aria-label={title}
       data-arrow-position={arrowPosition}
       data-status={status}
@@ -126,7 +137,7 @@ export const Avatar = forwardRef(function Avatar(
       </Arrow>
 
       {!imageFailed && src && (
-        <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
               <image
@@ -140,30 +151,33 @@ 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}
             rx={_radius}
             ry={_radius}
-            stroke={color}
             vectorEffect="non-scaling-stroke"
           />
-        </svg>
+        </Image>
       )}
 
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <Text as="span" size={initialsSize}>
-              <strong>{initials}</strong>
-            </Text>
+            <InitialsLabel forwardedAs="span" size={initialsSize}>
+              {initials}
+            </InitialsLabel>
           </Initials>
         </>
       )}

package/src/{primitives → core/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 → core/primitives}/avatar/styles.ts

@@ -1,6 +1,6 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
-import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 export const avatarStyle = {
@@ -9,6 +9,7 @@ export const avatarStyle = {
   bgStroke: avatarBgStrokeStyle,
   stroke: avatarStrokeStyle,
   initials: avatarInitialsStyle,
+  image: avatarImageStyle,
 }
 
 function avatarArrowStyle(): CSSObject {
@@ -60,7 +61,10 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
   const {focusRing} = theme.sanity.avatar
 
   return {
-    backgroundColor: $color,
+    '--avatar-bg-color': theme.sanity.color.avatar?.[$color]?.bg || theme.sanity.color.spot[$color],
+    '--avatar-fg-color': theme.sanity.color.avatar?.[$color]?.fg || 'var(--card-bg-color)',
+
+    backgroundColor: 'var(--avatar-bg-color)',
     position: 'relative',
     boxSizing: 'border-box',
     userSelect: 'none',
@@ -123,14 +127,17 @@ export function responsiveAvatarSizeStyle(
   })
 }
 
-export function avatarInitialsStyle(props: ThemeProps): CSSObject {
-  const {theme} = props
-  const {base} = theme.sanity.color
+export function avatarImageStyle(): CSSObject {
+  return {
+    position: 'relative',
+  }
+}
 
+export function avatarInitialsStyle(): CSSObject {
   return {
     width: '100%',
     height: '100%',
-    color: base.fg,
+    color: 'var(--avatar-fg-color)',
     alignItems: 'center',
     justifyContent: 'center',
     textTransform: 'uppercase',
@@ -152,7 +159,8 @@ function avatarBgStrokeStyle(): CSSObject {
 
 function avatarStrokeStyle(): CSSObject {
   return {
-    strokeWidth: '3px',
+    strokeWidth: '2px',
+    stroke: 'var(--avatar-bg-color)',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/{primitives → core/primitives}/avatar/types.ts

@@ -1,10 +1,11 @@
+import {ThemeColorSpotKey} from '@sanity/ui/theme'
 import {AvatarSize} from '../../types'
 
 /**
  * @internal
  */
 export interface AvatarRootStyleProps {
-  $color: string
+  $color: ThemeColorSpotKey
 }
 
 /**

package/src/{primitives → core/primitives}/badge/badge.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Badge} from './badge'
 
 describe('atoms/badge', () => {

package/src/{primitives → core/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'
@@ -15,6 +15,7 @@ import {BadgeStyleProps} from './types'
 export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
+  /** @deprecated No longer used. */
   mode?: BadgeMode
   tone?: BadgeTone
 }
@@ -25,6 +26,8 @@ const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
 )
 
 /**
+ * Badges are used to tag resources.
+ *
  * @public
  */
 export const Badge = forwardRef(function Badge(
@@ -33,8 +36,9 @@ export const Badge = forwardRef(function Badge(
 ) {
   const {
     children,
-    fontSize,
-    mode = 'default',
+    fontSize = 1,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mode: _deprecated_mode,
     padding = 1,
     radius = 2,
     tone = 'default',
@@ -45,13 +49,14 @@ export const Badge = forwardRef(function Badge(
     <Root
       data-ui="Badge"
       {...restProps}
-      $mode={mode}
       $tone={tone}
       $radius={useArrayProp(radius)}
       padding={useArrayProp(padding)}
       ref={ref}
     >
-      <Label size={fontSize}>{children}</Label>
+      <Text size={fontSize} weight="medium">
+        {children}
+      </Text>
     </Root>
   )
 })

package/src/core/primitives/badge/styles.ts

@@ -0,0 +1,20 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {ThemeProps} from '../../styles'
+import {BadgeStyleProps} from './types'
+
+export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
+  const {$tone, theme} = props
+  const color = theme.sanity.color.badge?.[$tone] || theme.sanity.color.muted[$tone].enabled
+
+  return {
+    '--card-bg-color': color.bg,
+    '--card-fg-color': color.fg,
+
+    backgroundColor: 'var(--card-bg-color)',
+    cursor: 'default',
+
+    '&:not([hidden])': {
+      display: 'inline-block',
+    },
+  }
+}

package/src/{primitives → core/primitives}/badge/types.ts

@@ -1,9 +1,8 @@
-import {BadgeMode, BadgeTone} from '../../types'
+import {BadgeTone} from '../../types'
 
 /**
  * @internal
  */
 export interface BadgeStyleProps {
-  $mode: BadgeMode
   $tone: BadgeTone
 }

package/src/{primitives → core/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(

package/src/{primitives → core/primitives}/button/__workshop__/sanityUploadButton.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {
-    -webkit-appearance: none;
+    appearance: none;
     overflow: hidden;
     overflow: clip;
     top: 0;
@@ -14,6 +14,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     opacity: 0;
     position: absolute;
     max-width: 0;
+    width: -webkit-fill-available;
     width: stretch;
   }
 

package/src/{primitives → core/primitives}/button/__workshop__/stacked.tsx

@@ -25,7 +25,7 @@ export default function StackedStory() {
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
 
   return (
-    <Card height="fill" tone="transparent">
+    <Card height="fill">
       <Flex align="center" height="fill" justify="center">
         <Container width={0} style={{textAlign: 'center'}}>
           <Box padding={4}>

package/src/{primitives → core/primitives}/button/button.test.tsx

@@ -3,7 +3,7 @@
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Button, ButtonProps} from './button'
 
 describe('atoms/button', () => {

package/src/{primitives → core/primitives}/button/button.tsx

@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -34,10 +34,12 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 const Root = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone} & ResponsiveRadiusStyleProps & ThemeProps
+  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
+    ThemeProps
 >(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
 
 const LoadingBox = styled.div`
@@ -59,7 +61,7 @@ const LoadingBox = styled.div`
  * @public
  */
 export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
+  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -70,7 +72,7 @@ export const Button = forwardRef(function Button(
     iconRight,
     justify: justifyProp = 'center',
     loading,
-    mode = 'default',
+    mode = 'ghost',
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
@@ -86,6 +88,7 @@ export const Button = forwardRef(function Button(
     tone = 'default',
     type = 'button',
     muted = false,
+    width,
     ...restProps
   } = props
 
@@ -128,6 +131,7 @@ export const Button = forwardRef(function Button(
       disabled={Boolean(loading || disabled)}
       ref={ref}
       type={type}
+      $width={width}
     >
       {Boolean(loading) && (
         <LoadingBox>

package/src/{primitives → core/primitives}/button/styles.ts

@@ -1,15 +1,22 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {ButtonMode, ButtonTone} from '../../types'
-import {CSSObject} from '../../types/styled'
+import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
 
 /**
  * @internal
  */
-export function buttonBaseStyles(): ReturnType<typeof css> {
+export function buttonBaseStyles({
+  $width,
+  theme,
+}: {$width?: ButtonWidth} & ThemeProps): ReturnType<typeof css> {
+  const {styles} = theme.sanity
+
   return css`
+    ${styles?.button};
+
     -webkit-font-smoothing: inherit;
     appearance: none;
     display: inline-flex;
@@ -26,6 +33,14 @@ export function buttonBaseStyles(): ReturnType<typeof css> {
     white-space: nowrap;
     text-align: left;
     position: relative;
+    vertical-align: top;
+
+    ${$width === 'fill' &&
+    css`
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
 
     & > span {
       display: block;
@@ -41,9 +56,6 @@ export function buttonBaseStyles(): ReturnType<typeof css> {
   `
 }
 
-const buttonTheme = {border: {width: 1}}
-const defaultBoxShadow = '0px 2px 0px 0px rgba(112, 128, 155, 0.19);'
-
 function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
   return boxShadows.filter(Boolean).join(',')
 }
@@ -55,12 +67,17 @@ export function buttonColorStyles(
   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
   const {$mode, theme} = props
-  const {focusRing} = theme.sanity.button
-  const shadow = props.$mode !== 'bleed'
+  const buttonTheme = theme.sanity.button
+  const shadow = props.$mode === 'ghost'
   const base = theme.sanity.color.base
   const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default
   const color = mode[props.$tone] || mode.default
-  const border = {width: buttonTheme.border.width, color: 'var(--card-border-color)'}
+  const border = {
+    width: buttonTheme.border.width,
+    color: 'var(--card-border-color)',
+  }
+  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
+  const defaultBoxShadow = undefined
 
   return [
     _colorVarsStyle(base, color.enabled),
@@ -78,7 +95,7 @@ export function buttonColorStyles(
           boxShadow: focusRingStyle({
             base,
             border: {width: 2, color: base.bg},
-            focusRing,
+            focusRing: buttonTheme.focusRing,
           }),
         },
         '&:focus:not(:focus-visible)': {

package/src/{primitives → core/primitives}/card/__workshop__/asButton.tsx

@@ -9,7 +9,7 @@ export default function AsButtonStory() {
       <Container>
         <Grid columns={3} gap={2}>
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Enabled
             </Text>
             <Stack marginTop={3} space={2}>
@@ -23,7 +23,7 @@ export default function AsButtonStory() {
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
+                    <Text weight="medium">{title}</Text>
                     <Text muted>Muted</Text>
                     <Text accent>Accent</Text>
                   </Stack>
@@ -33,7 +33,7 @@ export default function AsButtonStory() {
           </Box>
 
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Disabled
             </Text>
             <Stack marginTop={3} space={2}>
@@ -48,7 +48,7 @@ export default function AsButtonStory() {
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
+                    <Text weight="medium">{title}</Text>
                     <Text muted>Muted</Text>
                     <Text accent>Accent</Text>
                   </Stack>
@@ -58,7 +58,7 @@ export default function AsButtonStory() {
           </Box>
 
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Selected
             </Text>
             <Stack marginTop={3} space={2}>
@@ -72,7 +72,7 @@ export default function AsButtonStory() {
                     tone={tone}
                   >
                     <Stack space={2}>
-                      <Text weight="semibold">{title}</Text>
+                      <Text weight="medium">{title}</Text>
                       <Text muted>Muted</Text>
                       <Text accent>Accent</Text>
                     </Stack>

package/src/{primitives → core/primitives}/card/__workshop__/asComponent.tsx

@@ -19,7 +19,7 @@ export default function AsComponentStory() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+      <Card as={CustomLink} data-as="a" {...props} padding={3}>
         <Text>As component</Text>
       </Card>
     </Flex>