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

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

@@ -1,23 +1,53 @@
-import {
-  box,
+import type {
   BoxStyleProps,
-  composeClassNames,
   GapStyleProps,
   InsetStyleProps,
   PositionStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {_composeClassNames, box} from '@sanity/ui/css'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
+/** @public */
+export const DEFAULT_BOX_ELEMENT = 'div'
+
+/** @public */
+export type BoxOwnProps = BoxStyleProps & GapStyleProps & InsetStyleProps & PositionStyleProps
+
+/** @public */
+export type BoxElementType =
+  | 'a'
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'body'
+  | 'button'
+  | 'details'
+  | 'div'
+  | 'header'
+  | 'fieldset'
+  | 'figure'
+  | 'figcaption'
+  | 'footer'
+  | 'form'
+  | 'html'
+  | 'iframe'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'pre'
+  | 'section'
+  | 'span'
+  | 'summary'
+  | 'ul'
+  | ComponentType
+
+/** @public */
+export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
 
 /**
  * The `Box` component is a basic layout wrapper component which provides utility properties
@@ -25,19 +55,20 @@ export interface BoxProps
  *
  * @public
  */
-export const Box = forwardRef(function Box(
-  props: Props<BoxProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props: BoxProps<E>) {
   const {
     align,
-    as: As = 'div',
-    border,
+    as: Element = DEFAULT_BOX_ELEMENT,
+    autoCols,
+    autoFlow,
+    autoRows,
+    border = false,
     borderTop,
     borderRight,
     borderBottom,
     borderLeft,
     className,
+    children,
     column,
     columnStart,
     columnEnd,
@@ -63,7 +94,13 @@ export const Box = forwardRef(function Box(
     marginBottom,
     marginLeft,
     maxWidth,
+    minHeight = 0,
+    minWidth = 0,
+    muted,
+    outline,
     overflow,
+    overflowX,
+    overflowY,
     padding = 0,
     paddingX,
     paddingY,
@@ -73,26 +110,29 @@ export const Box = forwardRef(function Box(
     paddingLeft,
     pointerEvents,
     position,
-    muted,
     radius,
     row,
     rows,
     rowStart,
     rowEnd,
     sizing = 'border',
+    textAlign,
     width,
     wrap,
-    ...restProps
-  } = props
+    ...rest
+  } = props as BoxProps<typeof DEFAULT_BOX_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="Box"
-      {...restProps}
-      className={composeClassNames(
+      {...rest}
+      className={_composeClassNames(
         className,
         box({
           align,
+          autoCols,
+          autoFlow,
+          autoRows,
           border,
           borderTop,
           borderRight,
@@ -115,7 +155,6 @@ export const Box = forwardRef(function Box(
           insetRight,
           insetTop,
           justify,
-          overflow,
           margin,
           marginX,
           marginY,
@@ -124,7 +163,13 @@ export const Box = forwardRef(function Box(
           marginBottom,
           marginLeft,
           maxWidth,
+          minHeight,
+          minWidth,
           muted,
+          outline,
+          overflow,
+          overflowX,
+          overflowY,
           padding,
           paddingX,
           paddingY,
@@ -140,15 +185,15 @@ export const Box = forwardRef(function Box(
           rowStart,
           rowEnd,
           sizing,
+          textAlign,
           width,
           wrap,
         }),
       )}
-      ref={ref}
     >
-      {props.children}
-    </As>
+      {children}
+    </Element>
   )
-})
+}
 
-Box.displayName = 'ForwardRef(Box)'
+Box.displayName = 'Box'

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

@@ -1,49 +1,26 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 
 export default function CustomStory() {
-  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Stack space={2}>
-        <Grid columns={7} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="ghost" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
-        <Grid columns={7} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="default" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
+      <Stack gap={2}>
+        {THEME_COLOR_BUTTON_MODES.map((mode) => (
+          <Grid columns={7} gap={1} key={mode}>
+            {THEME_COLOR_STATE_TONES.map((tone) => (
+              <Button key={tone} mode={mode} padding={3} tone={tone}>
+                <Stack gap={2}>
+                  <Text>Text</Text>
+                  <Text muted>Muted</Text>
+                  <Text>
+                    <code>Code</code>
+                  </Text>
+                  <Hotkeys keys={['Cmd', 'C']} />
+                </Stack>
+              </Button>
+            ))}
+          </Grid>
+        ))}
       </Stack>
     </Flex>
   )

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

@@ -4,9 +4,9 @@ import {Button, Flex, Inline} from '@sanity/ui'
 export default function CustomIconsStory() {
   return (
     <Flex align="center" height="fill" justify="center">
-      <Inline space={1}>
-        <Button fontSize={1} icon={RocketIcon} padding={2} space={2} text="Rocket" />
-        <Button fontSize={1} icon={CustomIcon} padding={2} space={2} text="Heart" />
+      <Inline gap={1}>
+        <Button fontSize={1} gap={2} icon={RocketIcon} padding={2} text="Rocket" />
+        <Button fontSize={1} gap={2} icon={CustomIcon} padding={2} text="Heart" />
       </Inline>
     </Flex>
   )

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

@@ -5,20 +5,20 @@ import {Container} from '../../container/container'
 import {Grid} from '../../grid/grid'
 import {Stack} from '../../stack/stack'
 import {Text} from '../../text/text'
-import {Button, ButtonProps} from '../button'
+import {Button} from '../button'
 
 const GAP = 4
 const COLUMNS = 3
 
-const DEFAULT_PROPS: ButtonProps = {
+const DEFAULT_PROPS = {
   icon: SquareIcon,
   iconRight: SquareIcon,
-}
+} as const
 
 function Layout() {
   return (
     <Container width={2}>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Grid columns={COLUMNS} gap={GAP}>
           <Text size={1} weight="semibold">
             Default
@@ -31,21 +31,21 @@ function Layout() {
           </Text>
         </Grid>
 
-        <Stack space={2}>
+        <Stack gap={2}>
           <Grid columns={COLUMNS} gap={GAP}>
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
               <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
             </Stack>
 
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
               <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
             </Stack>
 
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
               <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
@@ -60,7 +60,7 @@ function Layout() {
 export default function DisabledButtonStory() {
   return (
     <Stack>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Card padding={5} scheme="light">
           <Layout />
         </Card>

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

@@ -1,6 +1,5 @@
 import {icons} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
@@ -10,34 +9,33 @@ import {
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function ButtonStory() {
-  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 loading = useBoolean('Loading', false, 'Props')
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
-  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 tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
-  const textAlign =
-    useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
-  const textProp = useText('Text', 'Label', 'Props')
-  const textWeight =
-    useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const disabled = useBoolean('Disabled')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
+  const loading = useBoolean('Loading')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
+  const selected = useBoolean('Selected')
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
+  const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
+  const textProp = useText('Text', 'Label')
+  const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center">
       <Button
         disabled={disabled}
-        fontSize={fontSize as FontTextSize}
+        fontSize={fontSize}
+        gap={gap}
         icon={icon && icons[icon]}
         iconRight={iconRight && icons[iconRight]}
         justify={justify}
@@ -47,7 +45,6 @@ export default function ButtonStory() {
         paddingX={paddingX}
         paddingY={paddingY}
         selected={selected}
-        space={space}
         textAlign={textAlign}
         text={textProp}
         textWeight={textWeight}

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()
-  })
 })