@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,77 +1,56 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef, isValidElement} from 'react'
-import {css, styled} from 'styled-components'
-
-import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
+import {avatarStack, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
+
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../box/box'
+import type {AvatarProps} from './avatar'
 import {AvatarCounter} from './avatarCounter'
 
-const BASE_STYLES = css`
-  white-space: nowrap;
-
-  & > div {
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  }
-`
-
-function avatarStackStyle() {
-  return BASE_STYLES
-}
-
-function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {avatar, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$size, (size) => {
-    const avatarSize = avatar.sizes[size]
+/** @public */
+export const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
 
-    if (!avatarSize) return EMPTY_RECORD
+/** @public */
+export type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
 
-    return {
-      '& > div + div': {
-        marginLeft: rem(avatarSize.distance),
-      },
-    }
-  })
+/** @public */
+export type AvatarStackOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
+> & {
+  children: AvatarStackChild | AvatarStackChild[]
+  maxLength?: number
+  size?: ResponsiveProp<AvatarSize>
 }
 
-const StyledAvatarStack = styled.div<{$size: AvatarSize[]}>(
-  responsiveAvatarStackSizeStyle,
-  avatarStackStyle,
-)
+/** @public */
+export type AvatarStackElementType = 'div' | 'span' | ComponentType
 
-/**
- * @public
- */
-export interface AvatarStackProps {
-  children: React.ReactNode
-  maxLength?: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
-}
+/** @public */
+export type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> = Props<
+  AvatarStackOwnProps,
+  E
+>
 
-/**
- * @public
- */
-export const AvatarStack = forwardRef(function AvatarStack(
-  props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
+/** @public */
+export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT>(
+  props: AvatarStackProps<E>,
+): React.JSX.Element {
   const {
+    as = DEFAULT_AVATAR_STACK_ELEMENT,
     children: childrenProp,
+    className,
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
-    ...restProps
-  } = props
-  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
+    ...rest
+  } = props as AvatarStackProps<typeof DEFAULT_AVATAR_STACK_ELEMENT>
+
+  const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
+    AvatarProps<'span'>
+  >[]
   const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(sizeProp)
+  const size = useResponsiveProp(sizeProp)
 
   const len = children.length
   const visibleCount = maxLength - 1
@@ -79,23 +58,22 @@ export const AvatarStack = forwardRef(function AvatarStack(
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
 
   return (
-    <StyledAvatarStack data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
-      {len === 0 && (
-        <div>
-          <AvatarCounter count={len} size={size} />
-        </div>
-      )}
-
-      {len !== 0 && extraCount > 1 && (
-        <div>
-          <AvatarCounter count={extraCount} size={size} />
-        </div>
-      )}
+    <Box
+      data-ui="AvatarStack"
+      {...rest}
+      alignItems="center"
+      as={as}
+      className={avatarStack({className, size})}
+      display="flex"
+      justifyContent="flex-start"
+    >
+      {len === 0 && <AvatarCounter count={len} size={size} />}
+
+      {len !== 0 && extraCount > 1 && <AvatarCounter count={extraCount} size={size} />}
 
       {visibleChildren.map((child, childIndex) => (
-        <div key={String(childIndex)}>{cloneElement(child, {size})}</div>
+        <Fragment key={String(childIndex)}>{cloneElement(child, {size})}</Fragment>
       ))}
-    </StyledAvatarStack>
+    </Box>
   )
-})
-AvatarStack.displayName = 'ForwardRef(AvatarStack)'
+}

package/src/core/primitives/avatar/types.ts

@@ -1,17 +1,2 @@
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-
-import {AvatarSize} from '../../types'
-
-/**
- * @internal
- */
-export interface AvatarRootStyleProps {
-  $color: ThemeColorAvatarColorKey
-}
-
-/**
- * @internal
- */
-export interface ResponsiveAvatarSizeStyleProps {
-  $size: AvatarSize[]
-}
+/** @public */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'

package/src/core/primitives/badge/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/badge',
   title: 'Badge',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./tones')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/badge/__workshop__/props.tsx

@@ -1,28 +1,17 @@
 import {Badge, Flex} from '@sanity/ui'
 import {useAction, useSelect, useText} from '@sanity/ui-workshop'
 
-import {
-  WORKSHOP_BADGE_MODE_OPTIONS,
-  WORKSHOP_BADGE_TONE_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
-export default function PropsStory() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')
-  const textProp = useText('Text', 'Label', 'Props')
+export default function PropsStory(): React.JSX.Element {
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
+  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
+  const textProp = useText('Text', 'Label')
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Badge
-        mode={mode}
-        onClick={useAction('onClick')}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        tone={tone}
-      >
+      <Badge onClick={useAction('onClick')} paddingX={paddingX} paddingY={paddingY} tone={tone}>
         {textProp}
       </Badge>
     </Flex>

package/src/core/primitives/badge/__workshop__/tones.tsx

@@ -1,21 +1,16 @@
-import {Badge, Flex, Inline} from '@sanity/ui'
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function Tones() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
+import {Badge, Flex} from '@sanity/ui'
+import {ELEMENT_TONES} from '@sanity/ui/theme'
 
+export default function Tones(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Inline space={2}>
-        {THEME_COLOR_STATE_TONES.map((tone) => (
-          <Badge key={tone} mode={mode} tone={tone}>
+      <Flex align="center" direction="column" gap={2}>
+        {ELEMENT_TONES.map((tone) => (
+          <Badge key={tone} tone={tone}>
             {tone}
           </Badge>
         ))}
-      </Inline>
+      </Flex>
     </Flex>
   )
 }

package/src/core/primitives/badge/badge.test.tsx

@@ -1,8 +1,8 @@
-/** @jest-environment jsdom */
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
 
-import {axe} from 'jest-axe'
+import {render} from '$test/utils'
 
-import {render} from '../../../../test'
 import {Badge} from './badge'
 
 describe('atoms/badge', () => {

package/src/core/primitives/badge/badge.tsx

@@ -1,62 +1,61 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {
+  badge,
+  type BadgeStyleProps,
+  type FlexStyleProps,
+  type PaddingStyleProps,
+  type RadiusStyleProps,
+} from '@sanity/ui/css'
 
-import {useArrayProp} from '../../hooks'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {BadgeMode, BadgeTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {Text} from '../text'
-import {ResponsiveRadiusProps} from '../types'
-import {badgeStyle} from './styles'
-import {BadgeStyleProps} from './types'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Text} from '../text/text'
 
-/**
- * @public
- */
-export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  tone?: BadgeTone
-}
+/** @public */
+export const DEFAULT_BADGE_ELEMENT = 'span'
 
-const StyledBadge = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  badgeStyle,
-)
+/** @public */
+export type BadgeOwnProps = BadgeStyleProps & FlexStyleProps & PaddingStyleProps & RadiusStyleProps
+
+/** @public */
+export type BadgeElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<BadgeOwnProps, E>
 
 /**
  * Badges are used to tag resources.
  *
  * @public
  */
-export const Badge = forwardRef(function Badge(
-  props: BadgeProps & React.HTMLProps<HTMLDivElement>,
-  ref,
-) {
+export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
+  props: BadgeProps<E>,
+): React.JSX.Element {
   const {
+    as = DEFAULT_BADGE_ELEMENT,
     children,
+    className,
+    flex = 'none',
     fontSize = 1,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    mode: _deprecated_mode,
     padding = 1,
-    radius = 'full',
+    radius = 2,
     tone = 'default',
-    ...restProps
-  } = props
+    ...rest
+  } = props as BadgeProps<typeof DEFAULT_BADGE_ELEMENT>
 
   return (
-    <StyledBadge
+    <Box
       data-ui="Badge"
-      {...restProps}
-      $tone={tone}
-      $radius={useArrayProp(radius)}
-      padding={useArrayProp(padding)}
-      ref={ref}
+      {...rest}
+      as={as}
+      className={badge({className, tone})}
+      flex={flex}
+      display="flex"
+      maxWidth="fill"
+      padding={padding}
+      radius={radius}
+      width="min"
     >
       <Text size={fontSize}>{children}</Text>
-    </StyledBadge>
+    </Box>
   )
-})
-Badge.displayName = 'ForwardRef(Badge)'
+}

package/src/core/primitives/box/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/box',
   title: 'Box',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./responsive')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/box/__workshop__/props.tsx

@@ -1,10 +1,10 @@
 import {Box, Card, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
-export default function PropsStory() {
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+export default function PropsStory(): React.JSX.Element {
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/core/primitives/box/__workshop__/responsive.tsx

@@ -1,6 +1,7 @@
 import {Box, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 
-export default function ResponsiveStory() {
+export default function ResponsiveStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Box
@@ -8,8 +9,7 @@ export default function ResponsiveStory() {
         display={['none', 'block', 'none', 'block', 'none', 'block', 'none']}
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
-        sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
-        style={{outline: '1px solid var(--card-border-color)'}}
+        style={{outline: `1px solid ${vars.color.border}`}}
       >
         <Text align="center" muted>
           This is a box with responsive props