@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,55 +1,54 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {box, type BoxStyleProps} from '@sanity/ui/css'
 
-import {useArrayProp} from '../../hooks'
-import {
-  boxStyle,
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveBoxStyle,
-  ResponsiveBoxStyleProps,
-  responsiveGridItemStyle,
-  ResponsiveGridItemStyleProps,
-  responsiveMarginStyle,
-  ResponsiveMarginStyleProps,
-  responsivePaddingStyle,
-  ResponsivePaddingStyleProps,
-} from '../../styles/internal'
-import {
-  ResponsiveBoxProps,
-  ResponsiveFlexItemProps,
-  ResponsiveGridItemProps,
-  ResponsiveMarginProps,
-  ResponsivePaddingProps,
-} from '../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface BoxProps
-  extends ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
-}
+/** @public */
+export const DEFAULT_BOX_ELEMENT = 'div'
 
-const StyledBox = styled.div<
-  FlexItemStyleProps &
-    ResponsiveBoxStyleProps &
-    ResponsiveGridItemStyleProps &
-    ResponsiveMarginStyleProps &
-    ResponsivePaddingStyleProps
->(
-  boxStyle,
-  flexItemStyle,
-  responsiveBoxStyle,
-  responsiveGridItemStyle,
-  responsiveMarginStyle,
-  responsivePaddingStyle,
-)
+/** @public */
+export type BoxOwnProps = BoxStyleProps
+
+/** @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'
+  | 'table'
+  | 'tbody'
+  | 'td'
+  | 'tfoot'
+  | 'th'
+  | 'thead'
+  | 'tr'
+  | '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
@@ -57,18 +56,51 @@ const StyledBox = styled.div<
  *
  * @public
  */
-export const Box = forwardRef(function Box(
-  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
+export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
+  props: BoxProps<E>,
+): React.JSX.Element {
   const {
-    as: asProp = 'div',
-    column,
-    columnStart,
-    columnEnd,
+    alignItems,
+    as: Element = DEFAULT_BOX_ELEMENT,
+    // autoCols,
+    // autoFlow,
+    // autoRows,
+    border = false,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    className,
+    children,
+    // column,
+    // columnStart,
+    // columnEnd,
+    // columns,
     display = 'block',
     flex,
+    flexDirection,
+    flexWrap,
+    gap,
+    gapX,
+    gapY,
+    gridAutoColumns,
+    gridAutoFlow,
+    gridAutoRows,
+    gridColumn,
+    gridColumnEnd,
+    gridColumnStart,
+    gridRow,
+    gridRowEnd,
+    gridRowStart,
+    gridTemplateColumns,
+    gridTemplateRows,
     height,
+    inset,
+    insetBottom,
+    insetLeft,
+    insetRight,
+    insetTop,
+    justifyContent,
     margin = 0,
     marginX,
     marginY,
@@ -76,7 +108,14 @@ export const Box = forwardRef(function Box(
     marginRight,
     marginBottom,
     marginLeft,
+    maxWidth,
+    minHeight = 0,
+    minWidth = 0,
+    muted,
+    outline,
     overflow,
+    overflowX,
+    overflowY,
     padding = 0,
     paddingX,
     paddingY,
@@ -84,48 +123,100 @@ export const Box = forwardRef(function Box(
     paddingRight,
     paddingBottom,
     paddingLeft,
-    row,
-    rowStart,
-    rowEnd,
-    sizing,
-    ...restProps
-  } = props
+    pointerEvents,
+    position,
+    radius,
+    // row,
+    // rows,
+    // rowStart,
+    // rowEnd,
+    shadow,
+    sizing = 'border',
+    textAlign,
+    width,
+    ...rest
+  } = props as BoxProps<typeof DEFAULT_BOX_ELEMENT>
 
   return (
-    <StyledBox
-      data-as={typeof asProp === 'string' ? asProp : undefined}
+    <Element
       data-ui="Box"
-      {...restProps}
-      $column={useArrayProp(column)}
-      $columnStart={useArrayProp(columnStart)}
-      $columnEnd={useArrayProp(columnEnd)}
-      $display={useArrayProp(display)}
-      $flex={useArrayProp(flex)}
-      $height={useArrayProp(height)}
-      $margin={useArrayProp(margin)}
-      $marginX={useArrayProp(marginX)}
-      $marginY={useArrayProp(marginY)}
-      $marginTop={useArrayProp(marginTop)}
-      $marginRight={useArrayProp(marginRight)}
-      $marginBottom={useArrayProp(marginBottom)}
-      $marginLeft={useArrayProp(marginLeft)}
-      $overflow={useArrayProp(overflow)}
-      $padding={useArrayProp(padding)}
-      $paddingX={useArrayProp(paddingX)}
-      $paddingY={useArrayProp(paddingY)}
-      $paddingTop={useArrayProp(paddingTop)}
-      $paddingRight={useArrayProp(paddingRight)}
-      $paddingBottom={useArrayProp(paddingBottom)}
-      $paddingLeft={useArrayProp(paddingLeft)}
-      $row={useArrayProp(row)}
-      $rowStart={useArrayProp(rowStart)}
-      $rowEnd={useArrayProp(rowEnd)}
-      $sizing={useArrayProp(sizing)}
-      as={asProp}
-      ref={ref}
+      {...rest}
+      className={box({
+        className,
+        alignItems,
+        // autoCols,
+        // autoFlow,
+        // autoRows,
+        border,
+        borderTop,
+        borderRight,
+        borderBottom,
+        borderLeft,
+        // column,
+        // columnStart,
+        // columnEnd,
+        // columns,
+        display,
+        flex,
+        flexDirection,
+        flexWrap,
+        gap,
+        gapX,
+        gapY,
+        gridAutoColumns,
+        gridAutoFlow,
+        gridAutoRows,
+        gridColumn,
+        gridColumnEnd,
+        gridColumnStart,
+        gridRow,
+        gridRowEnd,
+        gridRowStart,
+        gridTemplateColumns,
+        gridTemplateRows,
+        height,
+        inset,
+        insetBottom,
+        insetLeft,
+        insetRight,
+        insetTop,
+        justifyContent,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
+        minHeight,
+        minWidth,
+        muted,
+        outline,
+        overflow,
+        overflowX,
+        overflowY,
+        padding,
+        paddingX,
+        paddingY,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        pointerEvents,
+        position,
+        radius,
+        // row,
+        // rows,
+        // rowStart,
+        // rowEnd,
+        shadow,
+        sizing,
+        textAlign,
+        width,
+      })}
     >
-      {props.children}
-    </StyledBox>
+      {children}
+    </Element>
   )
-})
-Box.displayName = 'ForwardRef(Box)'
+}

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

@@ -1,50 +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'
-
-export default function CustomStory() {
-  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-  const len = tones.length
+import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
+import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/theme'
 
+export default function CustomStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Stack space={2}>
-        <Grid columns={len} 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={len} 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}>
+        {BUTTON_MODES.map((mode) => (
+          <Grid gridTemplateColumns={7} gap={1} key={mode}>
+            {ELEMENT_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

@@ -1,12 +1,12 @@
 import {RocketIcon} from '@sanity/icons'
 import {Button, Flex, Inline} from '@sanity/ui'
 
-export default function CustomIconsStory() {
+export default function CustomIconsStory(): React.JSX.Element {
   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

@@ -1,74 +1,54 @@
 import {SquareIcon} from '@sanity/icons'
-
-import {Card} from '../../card/card'
-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, Card, Container, Grid, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
 
 const GAP = 4
 const COLUMNS = 3
 
-const DEFAULT_PROPS: ButtonProps = {
+const DEFAULT_PROPS = {
   icon: SquareIcon,
   iconRight: SquareIcon,
-}
-
-function Layout() {
-  return (
-    <Container width={2}>
-      <Stack space={4}>
-        <Grid columns={COLUMNS} gap={GAP}>
-          <Text size={1} weight="semibold">
-            Default
-          </Text>
-          <Text size={1} weight="semibold">
-            Ghost
-          </Text>
-          <Text size={1} weight="semibold">
-            Bleed
-          </Text>
-        </Grid>
-
-        <Stack space={2}>
-          <Grid columns={COLUMNS} gap={GAP}>
-            <Stack space={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}>
-              <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>
+} as const
 
-            <Stack space={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)" />
-            </Stack>
-          </Grid>
-        </Stack>
-      </Stack>
-    </Container>
-  )
-}
+export default function DisabledButtonStory(): React.JSX.Element {
+  const muted = useBoolean('Muted', false)
 
-export default function DisabledButtonStory() {
   return (
-    <Stack>
-      <Stack space={4}>
-        <Card padding={5} scheme="light">
-          <Layout />
-        </Card>
+    <Card padding={5}>
+      <Container width={2}>
+        <Stack gap={4}>
+          <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
+            <Text size={1} weight="semibold">
+              Default
+            </Text>
+            <Text size={1} weight="semibold">
+              Ghost
+            </Text>
+            <Text size={1} weight="semibold">
+              Bleed
+            </Text>
+          </Grid>
 
-        <Card padding={5} scheme="dark">
-          <Layout />
-        </Card>
-      </Stack>
-    </Stack>
+          <Stack gap={2}>
+            <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="default" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} disabled mode="default" muted={muted} text="Disabled" />
+              </Stack>
+
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="ghost" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} disabled mode="ghost" muted={muted} text="Disabled" />
+              </Stack>
+
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="bleed" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} mode="bleed" disabled muted={muted} text="Disabled" />
+              </Stack>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Container>
+    </Card>
   )
 }

package/src/core/primitives/button/__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/button',
   title: 'Button',
   stories: [
@@ -55,5 +55,12 @@ export default defineScope({
       title: 'Disabled',
       component: lazy(() => import('./disabled')),
     },
+    {
+      name: 'text-overflow',
+      title: 'Text overflow',
+      component: lazy(() => import('./textOverflow')),
+    },
   ],
-})
+}
+
+export default scope

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

@@ -1,7 +1,7 @@
 import {AddIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
 
-export default function MixedChildrenStory() {
+export default function MixedChildrenStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">

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

@@ -9,42 +9,42 @@ 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 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
+export default function ButtonStory(): React.JSX.Element {
+  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}
+        gap={gap}
         icon={icon && icons[icon]}
         iconRight={iconRight && icons[iconRight]}
         justify={justify}
+        loading={loading}
         mode={mode}
         onClick={useAction('onClick')}
         paddingX={paddingX}
         paddingY={paddingY}
         selected={selected}
-        space={space}
         textAlign={textAlign}
         text={textProp}
         textWeight={textWeight}

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

@@ -18,17 +18,17 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     width: stretch;
   }
 
-  & span:nth-child(2) {
+  & > span:nth-child(2) {
     width: 0;
     flex: none;
     padding: 0;
   }
 `
 
-export default function SanityUploadButtonWorkaroundStory() {
+export default function SanityUploadButtonWorkaroundStory(): React.JSX.Element {
   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>