@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -18,7 +18,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     width: stretch;
   }
 
-  & span:nth-child(2) {
+  & > span:nth-child(2) {
     width: 0;
     flex: none;
     padding: 0;
@@ -27,8 +27,8 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
 
 export default function SanityUploadButtonWorkaroundStory() {
   return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
-      <SanityUploadButton icon={UploadIcon} tabIndex={0} text="Upload">
+    <Flex align="center" height="fill" justify="center">
+      <SanityUploadButton htmlFor="file" icon={UploadIcon} tabIndex={0} text="Upload">
         <input type="file" />
       </SanityUploadButton>
     </Flex>

package/src/core/primitives/button/__workshop__/stacked.tsx

@@ -1,6 +1,5 @@
 import {icons} from '@sanity/icons'
 import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {
@@ -9,33 +8,34 @@ import {
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
 
 export default function StackedStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default')
   const onClick = useAction('onClick')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3)
+  const selected = useBoolean('Selected', false)
 
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center">
         <Container width={0} style={{textAlign: 'center'}}>
           <Box padding={4}>
-            <Stack space={1}>
+            <Stack gap={1}>
               {tones.map(([title, tone]) => (
                 <Button
                   disabled={disabled}
-                  fontSize={fontSize as FontTextSize}
+                  fontSize={fontSize}
+                  gap={gap}
                   icon={icon && icons[icon]}
                   iconRight={iconRight && icons[iconRight]}
                   justify={justify}
@@ -45,7 +45,6 @@ export default function StackedStory() {
                   paddingX={paddingX}
                   paddingY={paddingY}
                   selected={selected}
-                  space={space}
                   text={title}
                   tone={tone}
                 />

package/src/core/primitives/button/__workshop__/uploadButton.tsx

@@ -11,9 +11,10 @@ export default function UploadButtonStory() {
   }, [])
 
   return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
+    <Flex align="center" height="fill" justify="center">
       <Button
         as="label"
+        htmlFor="file"
         onKeyDown={handleKeyDown}
         tabIndex={0}
         text={

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

@@ -1,11 +1,10 @@
-/** @jest-environment jsdom */
-
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
-import {axe} from 'jest-axe'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
 
 import {render} from '../../../../test'
-import {Button, ButtonProps} from './button'
+import {Button} from './button'
 
 describe('atoms/button', () => {
   it('Axe: should have no violations', async () => {
@@ -27,18 +26,4 @@ describe('atoms/button', () => {
 
     expect(screen.getByText('Button text')).toBeInTheDocument()
   })
-
-  it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
-      return <Button {...buttonProps} />
-    }
-
-    const buttonProps: ButtonProps = {
-      text: 'Button text',
-    }
-
-    render(<WrappedButton button={buttonProps} />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
 })

package/src/core/primitives/button/button.tsx

@@ -1,69 +1,67 @@
-import {
-  button,
-  buttonLoadingBox,
+import type {
+  BoxStyleProps,
   ButtonStyleProps,
-  composeClassNames,
   DisplayStyleProps,
-  FlexStyleProps,
   GapStyleProps,
   PaddingStyleProps,
   ResponsiveProp,
   Width,
 } from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ElementType, ForwardedRef, forwardRef, isValidElement, ReactNode} from 'react'
+import {button, buttonLoadingBox} from '@sanity/ui/css'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
+import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-import {useTheme_v2} from '../../_compat'
-import {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
+import type {ButtonTextAlign, ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
-import {Text, TextProps} from '../text'
+import type {TextOwnProps} from '../text'
+import {Text} from '../text'
 
-/**
- * @public
- */
-export interface ButtonProps
-  extends ButtonStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    GapStyleProps,
-    PaddingStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'href'?: string
-  'mode'?: ButtonMode
-  'icon'?: ElementType | ReactNode
-  'iconRight'?: ElementType | ReactNode
-  /** @beta Do not use in production, as this might change.*/
-  'loading'?: boolean
-  'selected'?: boolean
-  /** @deprecated Use `gap` instead. */
-  'space'?: ResponsiveProp<Space>
-  'textAlign'?: ButtonTextAlign
-  'muted'?: boolean
-  'target'?: string
-  'text'?: ReactNode
-  'textOverflow'?: TextProps['textOverflow']
-  'textWeight'?: TextProps['weight']
-  'tone'?: ButtonTone
-  'type'?: 'button' | 'reset' | 'submit'
-  'width'?: ResponsiveProp<Width>
-}
+/** @public */
+export const DEFAULT_BUTTON_ELEMENT = 'button'
+
+/** @public */
+export type ButtonOwnProps = ButtonStyleProps &
+  DisplayStyleProps &
+  GapStyleProps &
+  PaddingStyleProps & {
+    'align'?: BoxStyleProps['alignItems']
+    'data-ui'?: string
+    'disabled'?: boolean
+    'fontSize'?: ResponsiveProp<FontTextSize>
+    'icon'?: ReactElementType | ReactNode
+    'iconRight'?: ReactElementType | ReactNode
+    'justify'?: BoxStyleProps['justifyContent']
+    /** @beta Do not use in production, as this might change.*/
+    'loading'?: boolean
+    'selected'?: boolean
+    /** @deprecated Use `gap` instead. */
+    'space'?: ResponsiveProp<Space>
+    'textAlign'?: ButtonTextAlign
+    'muted'?: boolean
+    'target'?: string
+    'text'?: ReactNode
+    'textOverflow'?: TextOwnProps['textOverflow']
+    'textWeight'?: TextOwnProps['weight']
+    'width'?: ResponsiveProp<Width>
+  }
+
+/** @public */
+export type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
+
+/** @public */
+export type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>
 
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
-  props: Props<ButtonProps, 'button'>,
-  ref: ForwardedRef<HTMLButtonElement>,
+/** @public */
+export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
+  props: ButtonProps<E>,
 ) {
   const {
     align = 'center',
-    as: As = 'button',
+    as: Element = DEFAULT_BUTTON_ELEMENT,
     children,
     className,
-    direction,
     disabled,
     display = 'inline-flex',
     flex,
@@ -71,7 +69,6 @@ export const Button = forwardRef(function Button(
     gap = props.space ?? props.padding ?? 3,
     gapX,
     gapY,
-    href,
     icon: IconComponent,
     iconRight: IconRightComponent,
     justify = 'center',
@@ -90,36 +87,41 @@ export const Button = forwardRef(function Button(
     text,
     textAlign,
     textOverflow = 'ellipsis',
-    textWeight,
+    textWeight = 'medium',
     tone = 'default',
     type = 'button',
     muted = false,
     width,
-    wrap,
-    ...restProps
-  } = props
-  const {button: buttonTheme} = useTheme_v2()
+    ...rest
+  } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>
+
+  let href: string | undefined = undefined
+
+  if ('href' in rest) {
+    href = typeof rest.href === 'string' ? rest.href : href
+    delete rest.href
+  }
 
   return (
-    <As
+    <Element
       data-ui="Button"
-      {...restProps}
-      className={composeClassNames(className, button({display, flex, mode, radius, tone, width}))}
+      {...rest}
+      className={button({className, display, flex, mode, radius, tone, width})}
       data-disabled={loading || disabled ? '' : undefined}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
+      // @ts-expect-error - TODO: fix this
       href={disabled ? undefined : href}
-      ref={ref}
       type={type}
     >
       {Boolean(loading) && (
         <Box
-          align={align}
+          alignItems="center"
           as="span"
           className={buttonLoadingBox()}
           display="flex"
           flex={1}
-          justify={justify}
+          justifyContent="center"
           width="fill"
         >
           <Spinner size={fontSize} />
@@ -128,14 +130,14 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box
+          alignItems={align}
           as="span"
-          direction={direction}
           display="flex"
           flex={1}
           gap={gap}
           gapX={gapX}
           gapY={gapY}
-          justify={justify}
+          justifyContent={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -143,8 +145,6 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
         >
           {IconComponent && (
             <Text as="span" flex="none" muted size={fontSize}>
@@ -161,7 +161,7 @@ export const Button = forwardRef(function Button(
               muted={muted}
               size={fontSize}
               textOverflow={textOverflow}
-              weight={textWeight ?? buttonTheme.textWeight}
+              weight={textWeight}
             >
               {text}
             </Text>
@@ -179,12 +179,7 @@ export const Button = forwardRef(function Button(
       {children && (
         <Box
           as="span"
-          direction={direction}
-          display="flex"
           flex={1}
-          gap={gap}
-          gapX={gapX}
-          gapY={gapY}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -192,14 +187,10 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
         >
           {children}
         </Box>
       )}
-    </As>
+    </Element>
   )
-})
-
-Button.displayName = 'ForwardRef(Button)'
+}

package/src/core/primitives/card/__workshop__/asButton.tsx

@@ -1,6 +1,6 @@
 import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function AsButtonStory() {
   const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
@@ -8,12 +8,12 @@ export default function AsButtonStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container>
-        <Grid columns={3} gap={2}>
+        <Grid columns={3} gap={1}>
           <Box>
             <Text align="center" size={1} weight="medium">
               Enabled
             </Text>
-            <Stack marginTop={3} space={2}>
+            <Stack marginTop={3} gap={1}>
               {tones.map(([title, tone]) => (
                 <Card
                   __unstable_focusRing
@@ -23,15 +23,15 @@ export default function AsButtonStory() {
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
-                  <Stack space={2}>
+                  <Stack gap={3}>
                     <Text size={1} weight="medium">
                       {title}
                     </Text>
                     <Text muted size={1}>
                       Muted
                     </Text>
-                    <Text accent size={1}>
-                      Accent
+                    <Text size={1}>
+                      <code>Code</code>
                     </Text>
                   </Stack>
                 </Card>
@@ -43,7 +43,7 @@ export default function AsButtonStory() {
             <Text align="center" size={1} weight="medium">
               Disabled
             </Text>
-            <Stack marginTop={3} space={2}>
+            <Stack marginTop={3} gap={1}>
               {tones.map(([title, tone]) => (
                 <Card
                   __unstable_focusRing
@@ -54,15 +54,15 @@ export default function AsButtonStory() {
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
-                  <Stack space={2}>
+                  <Stack gap={3}>
                     <Text size={1} weight="medium">
                       {title}
                     </Text>
                     <Text size={1} muted>
                       Muted
                     </Text>
-                    <Text accent size={1}>
-                      Accent
+                    <Text size={1}>
+                      <code>Code</code>
                     </Text>
                   </Stack>
                 </Card>
@@ -74,7 +74,7 @@ export default function AsButtonStory() {
             <Text align="center" size={1} weight="medium">
               Selected
             </Text>
-            <Stack marginTop={3} space={2}>
+            <Stack marginTop={3} gap={1}>
               {tones.map(([title, tone]) => (
                 <Card
                   __unstable_focusRing
@@ -85,15 +85,15 @@ export default function AsButtonStory() {
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
-                  <Stack space={2}>
+                  <Stack gap={3}>
                     <Text size={1} weight="medium">
                       {title}
                     </Text>
                     <Text size={1} muted>
                       Muted
                     </Text>
-                    <Text accent size={1}>
-                      Accent
+                    <Text size={1}>
+                      <code>Code</code>
                     </Text>
                   </Stack>
                 </Card>

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -5,10 +5,10 @@ const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ): React.JSX.Element {
-  const {children, req, ...restProps} = props
+  const {children, req, ...rest} = props
 
   return (
-    <a data-required={req} {...restProps} ref={ref}>
+    <a data-required={req} {...rest} ref={ref}>
       {children}
     </a>
   )
@@ -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}>
+      <Card as={CustomLink} data-as="a" {...props} padding={3} req="1">
         <Text size={1}>As component</Text>
       </Card>
     </Flex>

package/src/core/primitives/card/__workshop__/checkered.tsx

@@ -4,7 +4,7 @@ import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 export default function CheckeredStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack space={1}>
+      <Stack gap={1}>
         {THEME_COLOR_CARD_TONES.map((tone) => (
           <Card
             __unstable_checkered

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

@@ -8,7 +8,7 @@ export default defineScope({
     {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
     {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
     {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-    {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
+    {name: 'tones', title: 'Tones', component: lazy(() => import('./tones'))},
     {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
     {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
     {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},

package/src/core/primitives/card/__workshop__/interactive.tsx

@@ -2,8 +2,8 @@ import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function InteractiveCardStory() {
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
+  const pressed = useBoolean('Pressed', false)
+  const selected = useBoolean('Selected', false)
 
   return (
     <Flex align="center" height="fill" justify="center">
@@ -16,12 +16,11 @@ export default function InteractiveCardStory() {
           selected={selected}
           tabIndex={0}
         >
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text>
               Text <code>Code</code>
             </Text>
             <Text muted>Muted</Text>
-            <Text accent>Accent</Text>
           </Stack>
         </Card>
       </div>

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -21,7 +21,7 @@ export default function ListNavigationStory() {
 
 function List1() {
   return (
-    <Stack space={1}>
+    <Stack gap={1}>
       <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
         <Preview />
       </Card>
@@ -43,7 +43,7 @@ function List1() {
 
 function List2() {
   return (
-    <Stack space={1}>
+    <Stack gap={1}>
       <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
         <Preview />
       </Card>
@@ -67,7 +67,7 @@ function Preview() {
   return (
     <Flex align="center" gap={2}>
       <Skeleton radius="full" style={{width: 33, height: 33}} />
-      <Stack flex={1} space={2}>
+      <Stack flex={1} gap={2}>
         <Text size={1} weight="medium">
           Preview
         </Text>

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

@@ -1,4 +1,4 @@
-import {Card, Flex, Radius, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {
@@ -7,19 +7,19 @@ import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PropsStory() {
-  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
-  const border = useBoolean('Border', false, 'Props')
-  const checkered = useBoolean('Checkered', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div')
+  const border = useBoolean('Border', false)
+  const checkered = useBoolean('Checkered', false)
+  const muted = useBoolean('Muted', false)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const pressed = useBoolean('Pressed', false)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0)
+  const selected = useBoolean('Selected', false)
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0)
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
@@ -31,12 +31,12 @@ export default function PropsStory() {
         onClick={useAction('onClick')}
         padding={padding}
         pressed={pressed}
-        radius={radius as Radius}
+        radius={radius}
         selected={selected}
         shadow={shadow}
         tone={tone}
       >
-        <Stack space={3}>
+        <Stack gap={3}>
           <Text size={1}>
             Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
             <code>shadow={shadow}</code>.
@@ -45,9 +45,6 @@ export default function PropsStory() {
             Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a href="#">link</a>.
           </Text>
-          <Text accent size={1}>
-            Text with accent color.
-          </Text>
         </Stack>
       </Card>
     </Flex>