@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -8,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() {
+export default function StackedStory(): React.JSX.Element {
   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}
+                  gap={gap}
                   icon={icon && icons[icon]}
                   iconRight={iconRight && icons[iconRight]}
                   justify={justify}
@@ -44,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__/styled1.tsx

@@ -8,7 +8,7 @@ const StyledButton1 = styled.a`
   }
 `
 
-export default function StyledButton1Story() {
+export default function StyledButton1Story(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <Button as={StyledButton1} href="#" text="Test" />

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

@@ -8,7 +8,7 @@ const StyledButton2 = styled(Button)<{$color?: boolean}>`
   }
 `
 
-export default function StyledButton2Story() {
+export default function StyledButton2Story(): React.JSX.Element {
   const props = {href: '#', text: 'Test'}
 
   return (

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

@@ -0,0 +1,13 @@
+import {Button, Flex} from '@sanity/ui'
+import {useText} from '@sanity/ui-workshop'
+
+export default function TextOverflowStory(): React.JSX.Element {
+  const text = useText('Text', 'Long text that should overflow')
+
+  return (
+    <Flex gap={1} padding={4}>
+      <Button flex={1} text={text} />
+      <Button mode="bleed" text="Cancel" />
+    </Flex>
+  )
+}

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

@@ -1,7 +1,7 @@
 import {Button, Flex} from '@sanity/ui'
 import {useCallback, useRef} from 'react'
 
-export default function UploadButtonStory() {
+export default function UploadButtonStory(): React.JSX.Element {
   const inputRef = useRef<HTMLInputElement | null>(null)
 
   const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
@@ -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,11 @@
-/** @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/utils'
 
-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 +27,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,187 +1,193 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, isValidElement, useMemo} from 'react'
+import type {
+  BoxStyleProps,
+  ButtonStyleProps,
+  DisplayStyleProps,
+  GapStyleProps,
+  PaddingStyleProps,
+  ResponsiveProp,
+  Width,
+} from '@sanity/ui/css'
+import {button, buttonLoadingBox} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
+import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
-import {ThemeProps} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {useTheme_v2} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
-import {Box} from '../box'
-import {Flex} from '../flex'
-import {Spinner} from '../spinner'
-import {Text} from '../text'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
-import {buttonBaseStyles, buttonColorStyles} from './styles'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Spinner} from '../spinner/spinner'
+import {Text, type TextOwnProps} from '../text/text'
+import type {ButtonTextAlign} from './types'
 
-/**
- * @public
- */
-export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  mode?: ButtonMode
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  justify?: FlexJustify | FlexJustify[]
-  /**
-   * @beta Do not use in production, as this might change.
-   */
-  loading?: boolean
-  selected?: boolean
-  space?: number | number[]
-  muted?: boolean
-  text?: React.ReactNode
-  textAlign?: ButtonTextAlign
-  textWeight?: ThemeFontWeightKey
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
-}
+/** @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
+    'textAlign'?: ButtonTextAlign
+    'muted'?: boolean
+    'target'?: string
+    'text'?: ReactNode
+    'textOverflow'?: TextOwnProps['textOverflow']
+    'textWeight'?: TextOwnProps['weight']
+    'width'?: ResponsiveProp<Width>
+  }
 
-const StyledButton = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
-    ThemeProps
->(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
+/** @public */
+export type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
 
-const LoadingBox = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`
+/** @public */
+export type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>
 
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
+/** @public */
+export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
+  props: ButtonProps<E>,
+): React.JSX.Element {
   const {
+    align = 'center',
+    as: Element = DEFAULT_BUTTON_ELEMENT,
     children,
+    className,
     disabled,
+    flex,
     fontSize = 1,
+    gap = props.padding ?? 3,
+    gapX,
+    gapY,
     icon: IconComponent,
     iconRight: IconRightComponent,
-    justify: justifyProp = 'center',
+    justify = 'center',
     loading,
     mode = 'default',
-    padding: paddingProp = 3,
-    paddingX: paddingXProp,
-    paddingY: paddingYProp,
-    paddingTop: paddingTopProp,
-    paddingBottom: paddingBottomProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    radius: radiusProp = 2,
+    padding = 3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    radius = 2,
     selected,
-    space: spaceProp = 3,
     text,
     textAlign,
-    textWeight,
+    textOverflow = 'ellipsis',
+    textWeight = 'medium',
     tone = 'default',
     type = 'button',
     muted = false,
     width,
-    ...restProps
-  } = props
-  const {button} = useTheme_v2()
+    ...rest
+  } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>
 
-  const justify = useArrayProp(justifyProp)
-  const padding = useArrayProp(paddingProp)
-  const paddingX = useArrayProp(paddingXProp)
-  const paddingY = useArrayProp(paddingYProp)
-  const paddingTop = useArrayProp(paddingTopProp)
-  const paddingBottom = useArrayProp(paddingBottomProp)
-  const paddingLeft = useArrayProp(paddingLeftProp)
-  const paddingRight = useArrayProp(paddingRightProp)
-  const radius = useArrayProp(radiusProp)
-  const space = useArrayProp(spaceProp)
+  let href: string | undefined = undefined
 
-  const boxProps = useMemo(
-    () => ({
-      // flex: 1,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-    }),
-    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
-  )
+  if ('href' in rest) {
+    href = typeof rest.href === 'string' ? rest.href : href
+    delete rest.href
+  }
 
   return (
-    <StyledButton
+    <Element
       data-ui="Button"
-      {...restProps}
-      $mode={mode}
-      $radius={radius}
-      $tone={tone}
-      data-disabled={Boolean(loading || disabled)}
+      {...rest}
+      className={button({className, flex, mode, radius, tone, width})}
+      data-disabled={loading || disabled ? '' : undefined}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
-      ref={ref}
+      // @ts-expect-error - TODO: fix this
+      href={disabled ? undefined : href}
       type={type}
-      $width={width}
     >
       {Boolean(loading) && (
-        <LoadingBox>
-          <Spinner />
-        </LoadingBox>
+        <Box
+          alignItems="center"
+          as="span"
+          className={buttonLoadingBox()}
+          display="flex"
+          flex={1}
+          justifyContent="center"
+          width="fill"
+        >
+          <Spinner size={fontSize} />
+        </Box>
       )}
 
       {(IconComponent || text || IconRightComponent) && (
-        <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify} gap={space}>
-            {IconComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            )}
-
-            {text && (
-              <Box>
-                <Text
-                  muted={muted}
-                  align={textAlign}
-                  size={fontSize}
-                  textOverflow="ellipsis"
-                  weight={textWeight ?? button.textWeight}
-                >
-                  {text}
-                </Text>
-              </Box>
-            )}
+        <Box
+          alignItems={align}
+          as="span"
+          display="flex"
+          flex={1}
+          gap={gap}
+          gapX={gapX}
+          gapY={gapY}
+          justifyContent={justify}
+          padding={padding}
+          paddingX={paddingX}
+          paddingY={paddingY}
+          paddingTop={paddingTop}
+          paddingBottom={paddingBottom}
+          paddingLeft={paddingLeft}
+          paddingRight={paddingRight}
+        >
+          {IconComponent && (
+            <Text as="span" flex="none" muted size={fontSize}>
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
+            </Text>
+          )}
 
-            {IconRightComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
+          {text && (
+            <Box as="span" maxWidth="auto">
+              <Text
+                align={textAlign}
+                as="span"
+                muted={muted}
+                size={fontSize}
+                textOverflow={textOverflow}
+                weight={textWeight}
+              >
+                {text}
               </Text>
-            )}
-          </Flex>
+            </Box>
+          )}
+
+          {IconRightComponent && (
+            <Text as="span" flex="none" muted size={fontSize}>
+              {isValidElement(IconRightComponent) && IconRightComponent}
+              {isValidElementType(IconRightComponent) && <IconRightComponent />}
+            </Text>
+          )}
         </Box>
       )}
 
       {children && (
-        <Box as="span" {...boxProps}>
+        <Box
+          as="span"
+          flex={1}
+          padding={padding}
+          paddingX={paddingX}
+          paddingY={paddingY}
+          paddingTop={paddingTop}
+          paddingBottom={paddingBottom}
+          paddingLeft={paddingLeft}
+          paddingRight={paddingRight}
+        >
           {children}
         </Box>
       )}
-    </StyledButton>
+    </Element>
   )
-})
-Button.displayName = 'ForwardRef(Button)'
+}

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

@@ -0,0 +1,2 @@
+/** @public */
+export type ButtonTextAlign = 'left' | 'right' | 'center'

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

@@ -1,19 +1,19 @@
 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() {
+export default function AsButtonStory(): React.JSX.Element {
   const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container>
-        <Grid columns={3} gap={2}>
+        <Grid gridTemplateColumns={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,21 +5,21 @@ 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>
   )
 })
 
-export default function AsComponentStory() {
+export default function AsComponentStory(): React.JSX.Element {
   const props = {href: '#'}
 
   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

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

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

@@ -1,18 +1,20 @@
-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/card',
   title: 'Card',
   stories: [
     {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'))},
     {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
     {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
   ],
-})
+}
+
+export default scope