@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/primitives/badge/__workshop__/within-button.tsx

@@ -0,0 +1,36 @@
+import {Badge, Box, Button, Text} from '@sanity/ui'
+
+import {CardWrapper} from '$workshop'
+
+export default function WithinButtonStory(): React.JSX.Element {
+  return (
+    <CardWrapper gap={4} width={0}>
+      <Box display="flex" justifyContent="center">
+        <Button mode="default" padding={2}>
+          <Box flex={1} padding={1}>
+            <Text size={1}>Button</Text>
+          </Box>
+          <Badge tone="suggest">Badge</Badge>
+        </Button>
+      </Box>
+
+      <Box display="flex" justifyContent="center">
+        <Button mode="ghost" padding={2}>
+          <Box flex={1} padding={1}>
+            <Text size={1}>Button</Text>
+          </Box>
+          <Badge tone="suggest">Badge</Badge>
+        </Button>
+      </Box>
+
+      <Box display="flex" justifyContent="center">
+        <Button mode="bleed" padding={2}>
+          <Box flex={1} padding={1}>
+            <Text size={1}>Button</Text>
+          </Box>
+          <Badge tone="suggest">Badge</Badge>
+        </Button>
+      </Box>
+    </CardWrapper>
+  )
+}

package/src/primitives/box/Box.tsx

@@ -0,0 +1,73 @@
+import {box, BOX_STYLE_PROP_KEYS, type BoxStyleProps} from '@sanity/ui-css'
+
+import {_splitKeys} from '../../core/_keys'
+import type {ComponentType, Props} from '../../core/types'
+
+/** @public */
+export const DEFAULT_BOX_ELEMENT = 'div'
+
+/** @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
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
+  props: BoxProps<E>,
+): React.JSX.Element {
+  const [
+    styleProps,
+    {
+      as: Element = DEFAULT_BOX_ELEMENT,
+      // split DOM props
+      ...domProps
+    },
+  ] = _splitKeys(props as BoxProps<typeof DEFAULT_BOX_ELEMENT>, BOX_STYLE_PROP_KEYS)
+
+  return <Element data-ui="Box" {...domProps} className={box(styleProps)} />
+}

package/src/primitives/box/__workshop__/Props.tsx

@@ -0,0 +1,26 @@
+import {Box, type BoxProps, Text} from '@sanity/ui'
+import {BORDER_STYLE, BORDER_WIDTH, RADIUS, SHADOW, SPACE} from '@sanity/ui/tokens'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function PropsStory(): React.JSX.Element {
+  const boxProps: BoxProps = {
+    border: useSelect('Border', BORDER_STYLE),
+    borderWidth: useSelect('Border Width', BORDER_WIDTH),
+    muted: useBoolean('Muted'),
+    padding: useSelect('Padding', SPACE),
+    radius: useSelect('Radius', RADIUS),
+    shadow: useSelect('Shadow', SHADOW),
+  }
+
+  return (
+    <CardWrapper>
+      <Box {...boxProps}>
+        <Text muted size={1}>
+          Text within box with props
+        </Text>
+      </Box>
+    </CardWrapper>
+  )
+}

package/src/primitives/box/__workshop__/Responsive.tsx

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

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

@@ -0,0 +1,21 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/box',
+  title: 'Box',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./Props')),
+    },
+    {
+      name: 'responsive',
+      title: 'Responsive',
+      component: lazy(() => import('./Responsive')),
+    },
+  ],
+}
+
+export default scope

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

@@ -0,0 +1,30 @@
+import {AddIcon} from '@sanity/icons'
+import {screen} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
+
+import {render} from '$test/utils'
+
+import {Button} from './Button'
+
+describe('atoms/button', () => {
+  it('Axe: should have no violations', async () => {
+    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'light',
+    })
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+
+    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'dark',
+    })
+
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+
+  it('should render text', () => {
+    render(<Button text="Button text" />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+})

package/src/primitives/button/Button.tsx

@@ -0,0 +1,145 @@
+import {
+  button,
+  button_loadingBox,
+  BUTTON_STYLE_PROP_KEYS,
+  type ButtonStyleProps,
+  type ResponsiveProp,
+} from '@sanity/ui-css'
+import type {FontTextSize} from '@sanity/ui-tokens'
+import {isValidElement} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {_splitKeys} from '../../core/_keys'
+import type {ComponentType, Props} from '../../core/types'
+import {Box} from '../box/Box'
+import {Spinner} from '../spinner/Spinner'
+import {Text, type TextOwnProps} from '../text/Text'
+import {Tooltip, type TooltipProps} from '../tooltip/Tooltip'
+
+/** @public */
+export const DEFAULT_BUTTON_ELEMENT = 'button'
+
+/** @public */
+export interface ButtonOwnProps extends ButtonStyleProps {
+  'data-ui'?: string
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  'icon'?: React.ElementType | React.ReactNode
+  'iconRight'?: React.ElementType | React.ReactNode
+  /** @beta Do not use in production, as this might change.*/
+  'loading'?: boolean
+  'muted'?: boolean
+  'selected'?: boolean
+  'textAlign'?: TextOwnProps['align']
+  'text'?: React.ReactNode
+  'textOverflow'?: TextOwnProps['textOverflow']
+  'textWeight'?: TextOwnProps['weight']
+  'tooltip'?: Omit<TooltipProps<'div'>, 'as' | 'children'>
+}
+
+/** @public */
+export type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
+
+/** @public */
+export type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>
+
+/** @public */
+export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
+  props: ButtonProps<E>,
+): React.JSX.Element {
+  const [
+    styleProps,
+    {
+      as: Element = DEFAULT_BUTTON_ELEMENT,
+      children,
+      disabled,
+      fontSize = 1,
+      icon: Icon,
+      iconRight: IconRight,
+      loading,
+      muted,
+      selected,
+      text,
+      textAlign,
+      textOverflow = 'ellipsis',
+      textWeight = 'medium',
+      tooltip,
+      type = 'button',
+      // split DOM props
+      ...domProps
+    },
+  ] = _splitKeys(props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>, BUTTON_STYLE_PROP_KEYS)
+
+  let href: string | undefined = undefined
+
+  if ('href' in domProps) {
+    href = typeof domProps.href === 'string' ? domProps.href : href
+    delete domProps.href
+  }
+
+  const node = (
+    <Element
+      data-ui="Button"
+      {...domProps}
+      className={button(styleProps)}
+      data-disabled={loading || disabled ? '' : props['data-disabled']}
+      data-selected={selected ? '' : props['data-selected']}
+      disabled={Boolean(loading || disabled)}
+      // WORKAROUND: Since `a` elements don't support the `disabled` prop,
+      // we need to remove the `href` prop from the DOM props when the button is disabled.
+      // @ts-expect-error - the default element is a `button` and does not have the `href` prop
+      href={disabled ? undefined : href}
+      type={type}
+    >
+      {Boolean(loading) && (
+        <Box
+          alignItems="center"
+          as="span"
+          className={button_loadingBox()}
+          display="flex"
+          flex={1}
+          justifyContent="center"
+          width="fill"
+        >
+          <Spinner size={fontSize} />
+        </Box>
+      )}
+
+      {Icon && (
+        <Text as="span" flex="none" muted size={fontSize}>
+          {isValidElement(Icon) && Icon}
+          {isValidElementType(Icon) && <Icon />}
+        </Text>
+      )}
+
+      {text && (
+        <Box as="span" maxWidth="auto">
+          <Text
+            align={textAlign}
+            as="span"
+            muted={muted}
+            size={fontSize}
+            textOverflow={textOverflow}
+            weight={textWeight}
+          >
+            {text}
+          </Text>
+        </Box>
+      )}
+
+      {children}
+
+      {IconRight && (
+        <Text as="span" flex="none" muted size={fontSize}>
+          {isValidElement(IconRight) && IconRight}
+          {isValidElementType(IconRight) && <IconRight />}
+        </Text>
+      )}
+    </Element>
+  )
+
+  if (tooltip) {
+    return <Tooltip {...tooltip}>{node}</Tooltip>
+  }
+
+  return node
+}

package/src/primitives/button/__workshop__/Custom.tsx

@@ -0,0 +1,29 @@
+import {Avatar, Badge, Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
+import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/tokens'
+
+export default function CustomStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Stack gap={2}>
+        {BUTTON_MODES.map((mode) => (
+          <Grid key={mode} gap={1} gridTemplateColumns={7}>
+            {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={['mod', 'c']} />
+                  <Avatar />
+                  <Badge>Badge</Badge>
+                </Stack>
+              </Button>
+            ))}
+          </Grid>
+        ))}
+      </Stack>
+    </Flex>
+  )
+}

package/src/primitives/button/__workshop__/CustomIcons.tsx

@@ -0,0 +1,38 @@
+import {RocketIcon} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+import {BUTTON_MODES} from '@sanity/ui/tokens'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function CustomIconsStory(): React.JSX.Element {
+  const mode = useSelect('Mode', BUTTON_MODES, 'default')
+
+  return (
+    <CardWrapper>
+      <Flex align="center" gap={2} height="fill" justify="center">
+        {/* <Inline gap={1}> */}
+        <Button fontSize={1} icon={RocketIcon} mode={mode} text="Rocket" />
+        <Button fontSize={1} icon={CustomIcon} mode={mode} text="Heart" />
+        {/* </Inline> */}
+      </Flex>
+    </CardWrapper>
+  )
+}
+
+function CustomIcon() {
+  return (
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>
+    </svg>
+  )
+}

package/src/primitives/button/__workshop__/DataProps.tsx

@@ -0,0 +1,19 @@
+import {Button} from '@sanity/ui'
+import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/tokens'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  const mode = useSelect('Mode', [undefined, ...BUTTON_MODES], 'default')
+  const tone = useSelect('Tone', [undefined, ...ELEMENT_TONES], 'default')
+
+  return (
+    <CardWrapper gap={3}>
+      <Button data-enabled="" mode={mode} text="Button" tone={tone} />
+      <Button data-hovered="" mode={mode} text="Button" tone={tone} />
+      <Button data-pressed="" mode={mode} text="Button" tone={tone} />
+      <Button data-selected="" mode={mode} text="Button" tone={tone} />
+    </CardWrapper>
+  )
+}

package/src/primitives/button/__workshop__/Disabled.tsx

@@ -0,0 +1,43 @@
+import {ArrowLeftIcon, ArrowRightIcon} from '@sanity/icons'
+import {Button, type ButtonProps, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+const sharedProps: ButtonProps<'button'> = {
+  icon: ArrowLeftIcon,
+  iconRight: ArrowRightIcon,
+  justify: 'space-between',
+}
+
+export default function DisabledButtonStory(): React.JSX.Element {
+  const muted = useBoolean('Muted', false)
+
+  return (
+    <CardWrapper gap={5} width={0}>
+      <Stack gap={3}>
+        <Text size={1} weight="medium">
+          Default button
+        </Text>
+        <Button {...sharedProps} mode="default" muted={muted} text="Enabled" />
+        <Button {...sharedProps} disabled mode="default" muted={muted} text="Disabled" />
+      </Stack>
+
+      <Stack gap={3}>
+        <Text size={1} weight="medium">
+          Ghost button
+        </Text>
+        <Button {...sharedProps} mode="ghost" muted={muted} text="Enabled" />
+        <Button {...sharedProps} disabled mode="ghost" muted={muted} text="Disabled" />
+      </Stack>
+
+      <Stack gap={3}>
+        <Text size={1} weight="medium">
+          Bleed button
+        </Text>
+        <Button {...sharedProps} mode="bleed" muted={muted} text="Enabled" />
+        <Button {...sharedProps} disabled mode="bleed" muted={muted} text="Disabled" />
+      </Stack>
+    </CardWrapper>
+  )
+}

package/src/primitives/button/__workshop__/MixedChildren.tsx

@@ -0,0 +1,12 @@
+import {AddIcon} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+
+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">
+        <span style={{display: 'none'}}>test</span>
+      </Button>
+    </Flex>
+  )
+}

package/src/primitives/button/__workshop__/Props.tsx

@@ -0,0 +1,60 @@
+import {icons} from '@sanity/icons'
+import {Button, Flex, type TooltipProps} from '@sanity/ui'
+import {BUTTON_MODES, ELEMENT_TONES, FONT_TEXT_SIZE, FONT_WEIGHT, SPACE} from '@sanity/ui/tokens'
+import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
+import {
+  CardWrapper,
+  WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+} from '$workshop'
+
+export default function ButtonStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled')
+  const fontSize = useSelect('Font size', [undefined, ...FONT_TEXT_SIZE])
+  const gap = useSelect('Gap', [undefined, ...SPACE])
+  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', [undefined, ...BUTTON_MODES])
+  const paddingX = useSelect('Padding X', [undefined, ...SPACE])
+  const paddingY = useSelect('Padding Y', [undefined, ...SPACE])
+  const selected = useBoolean('Selected')
+  const tone = useSelect('Tone', [undefined, ...ELEMENT_TONES])
+  const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
+  const textProp = useText('Text', 'Text')
+  const textWeight = useSelect('Text weight', [undefined, ...FONT_WEIGHT])
+  const tooltip = useText('Tooltip text', 'Tooltip')
+
+  return (
+    <CardWrapper width={0}>
+      <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}
+          paddingX={paddingX}
+          paddingY={paddingY}
+          selected={selected}
+          text={textProp}
+          textAlign={textAlign}
+          textWeight={textWeight}
+          tone={tone}
+          tooltip={
+            tooltip
+              ? ({hotkeys: ['⌘', 'K'], id: 'test-button-tooltip', text: tooltip} as TooltipProps)
+              : undefined
+          }
+          onClick={useAction('onClick')}
+        />
+      </Flex>
+    </CardWrapper>
+  )
+}

package/src/primitives/button/__workshop__/Stacked.tsx

@@ -0,0 +1,51 @@
+import {icons} from '@sanity/icons'
+import {Box, Button, Container, Flex, Stack} from '@sanity/ui'
+import {BUTTON_MODES, ELEMENT_TONES, FONT_TEXT_SIZE, SPACE} from '@sanity/ui/tokens'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {CardWrapper, WORKSHOP_FLEX_JUSTIFY_OPTIONS, WORKSHOP_ICON_SYMBOL_OPTIONS} from '$workshop'
+
+export default function StackedStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
+  const gap = useSelect('Gap', SPACE)
+  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 mode = useSelect('Mode', BUTTON_MODES)
+  const onClick = useAction('onClick')
+  const paddingX = useSelect('Padding X', SPACE)
+  const paddingY = useSelect('Padding Y', SPACE)
+  const selected = useBoolean('Selected', false)
+
+  return (
+    <CardWrapper>
+      <Flex align="center" height="fill" justify="center">
+        <Container style={{textAlign: 'center'}} width={0}>
+          <Box padding={4}>
+            <Stack gap={1}>
+              {ELEMENT_TONES.map((tone) => (
+                <Button
+                  key={tone}
+                  disabled={disabled}
+                  fontSize={fontSize}
+                  gap={gap}
+                  icon={icon && icons[icon]}
+                  iconRight={iconRight && icons[iconRight]}
+                  justify={justify}
+                  mode={mode}
+                  paddingX={paddingX}
+                  paddingY={paddingY}
+                  selected={selected}
+                  text={tone}
+                  tone={tone}
+                  onClick={onClick}
+                />
+              ))}
+            </Stack>
+          </Box>
+        </Container>
+      </Flex>
+    </CardWrapper>
+  )
+}

package/src/primitives/button/__workshop__/Styled1.css.ts

@@ -0,0 +1,7 @@
+import {style} from '@vanilla-extract/css'
+
+export const styledButton1: string = style({
+  ':hover': {
+    backgroundColor: 'red',
+  },
+})

package/src/primitives/button/__workshop__/Styled1.tsx

@@ -0,0 +1,11 @@
+import {Button, Flex} from '@sanity/ui'
+
+import {styledButton1} from './Styled1.css'
+
+export default function StyledButton1Story(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button as="a" className={styledButton1} href="#" text="Test" />
+    </Flex>
+  )
+}

package/src/primitives/button/__workshop__/TextOverflow.tsx

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