@sanity/ui 3.0.0-static.9 → 3.0.0

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

@@ -0,0 +1,58 @@
+import {icons} from '@sanity/icons'
+import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_BUTTON_MODE_OPTIONS,
+  WORKSHOP_BUTTON_TONE_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+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 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')
+
+  return (
+    <Card height="fill">
+      <Flex align="center" height="fill" justify="center">
+        <Container width={0} style={{textAlign: 'center'}}>
+          <Box padding={4}>
+            <Stack space={1}>
+              {tones.map(([title, tone]) => (
+                <Button
+                  disabled={disabled}
+                  fontSize={fontSize}
+                  icon={icon && icons[icon]}
+                  iconRight={iconRight && icons[iconRight]}
+                  justify={justify}
+                  key={tone}
+                  mode={mode}
+                  onClick={onClick}
+                  paddingX={paddingX}
+                  paddingY={paddingY}
+                  selected={selected}
+                  space={space}
+                  text={title}
+                  tone={tone}
+                />
+              ))}
+            </Stack>
+          </Box>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

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

@@ -0,0 +1,187 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {forwardRef, isValidElement, useMemo} 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'
+
+/**
+ * @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
+}
+
+const StyledButton = styled.button<
+  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
+    ThemeProps
+>(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
+
+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 const Button = forwardRef(function Button(
+  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    children,
+    disabled,
+    fontSize = 1,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    justify: justifyProp = 'center',
+    loading,
+    mode = 'default',
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
+    selected,
+    space: spaceProp = 3,
+    text,
+    textAlign,
+    textWeight,
+    tone = 'default',
+    type = 'button',
+    muted = false,
+    width,
+    ...restProps
+  } = props
+  const {button} = useTheme_v2()
+
+  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)
+
+  const boxProps = useMemo(
+    () => ({
+      // flex: 1,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    }),
+    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
+  )
+
+  return (
+    <StyledButton
+      data-ui="Button"
+      {...restProps}
+      $mode={mode}
+      $radius={radius}
+      $tone={tone}
+      data-disabled={Boolean(loading || disabled)}
+      data-selected={selected ? '' : undefined}
+      disabled={Boolean(loading || disabled)}
+      ref={ref}
+      type={type}
+      $width={width}
+    >
+      {Boolean(loading) && (
+        <LoadingBox>
+          <Spinner />
+        </LoadingBox>
+      )}
+
+      {(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>
+            )}
+
+            {IconRightComponent && (
+              <Text size={fontSize}>
+                {isValidElement(IconRightComponent) && IconRightComponent}
+                {isValidElementType(IconRightComponent) && <IconRightComponent />}
+              </Text>
+            )}
+          </Flex>
+        </Box>
+      )}
+
+      {children && (
+        <Box as="span" {...boxProps}>
+          {children}
+        </Box>
+      )}
+    </StyledButton>
+  )
+})
+Button.displayName = 'ForwardRef(Button)'

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

@@ -0,0 +1,117 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+
+import {ThemeProps} from '../../styles'
+import {_cardColorStyle} from '../../styles/card'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
+
+/**
+ * @internal
+ */
+export function buttonBaseStyles(
+  props: {$width?: ButtonWidth} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$width} = props
+  const {style} = getTheme_v2(props.theme)
+
+  return css`
+    ${style?.button};
+
+    -webkit-font-smoothing: inherit;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    border: 0;
+    outline: none;
+    user-select: none;
+    text-decoration: none;
+    border: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    white-space: nowrap;
+    text-align: left;
+    position: relative;
+    vertical-align: top;
+
+    ${$width === 'fill' &&
+    css`
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
+
+    & > span {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      border-radius: inherit;
+    }
+
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+  `
+}
+
+function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
+  return boxShadows.filter(Boolean).join(',')
+}
+
+/**
+ * @internal
+ */
+export function buttonColorStyles(
+  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
+): CSSObject[] {
+  const {$mode} = props
+  const {button, color: baseColor, style} = getTheme_v2(props.theme)
+  const shadow = props.$mode === 'ghost'
+  const mode = baseColor.button[$mode] || baseColor.button.default
+  const color = mode[props.$tone] || mode.default
+  const border = {
+    width: button.border.width,
+    color: 'var(--card-border-color)',
+  }
+  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
+  const defaultBoxShadow = undefined
+
+  return [
+    _cardColorStyle(baseColor, color.enabled),
+    {
+      'backgroundColor': 'var(--card-bg-color)',
+      'color': 'var(--card-fg-color)',
+      'boxShadow': focusRingBorderStyle(border),
+      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
+      "&:not([data-disabled='true'])": {
+        'boxShadow': combineBoxShadow(
+          focusRingBorderStyle(border),
+          shadow ? defaultBoxShadow : undefined,
+        ),
+        '&:focus': {
+          boxShadow: focusRingStyle({
+            base: baseColor,
+            border: {width: 2, color: baseColor.bg},
+            focusRing: button.focusRing,
+          }),
+        },
+        '&:focus:not(:focus-visible)': {
+          boxShadow: combineBoxShadow(
+            focusRingBorderStyle(border),
+            shadow ? defaultBoxShadow : undefined,
+          ),
+        },
+        '@media (hover: hover)': {
+          '&:hover': _cardColorStyle(baseColor, color.hovered),
+          '&:active': _cardColorStyle(baseColor, color.pressed),
+          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
+        },
+        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
+      },
+    },
+    style?.button?.root,
+  ].filter(Boolean) as CSSObject[]
+}

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

@@ -0,0 +1,25 @@
+import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+
+export default function AllTonesStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Stack space={3}>
+          {THEME_COLOR_CARD_TONES.map((tone) => (
+            <Card
+              key={tone}
+              padding={3}
+              radius={2}
+              shadow={2}
+              style={{textAlign: 'center'}}
+              tone={tone}
+            >
+              <Text size={1}>{tone}</Text>
+            </Card>
+          ))}
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,107 @@
+import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function AsButtonStory() {
+  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}>
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Enabled
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Disabled
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  disabled
+                  key={tone}
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Selected
+            </Text>
+            <Stack marginTop={3} space={2}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  selected
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack space={2}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,53 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_CARD_AS_OPTIONS,
+  WORKSHOP_CARD_TONE_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SHADOW_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+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 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')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Card
+        __unstable_checkered={checkered}
+        as={as}
+        border={border}
+        muted={muted}
+        onClick={useAction('onClick')}
+        padding={padding}
+        radius={radius}
+        selected={selected}
+        shadow={shadow}
+        tone={tone}
+      >
+        <Stack space={3}>
+          <Text size={1}>
+            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
+            <code>shadow={shadow}</code>.
+          </Text>
+          <Text size={1}>
+            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>
+  )
+}

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

@@ -0,0 +1,94 @@
+import {EditIcon, PublishIcon} from '@sanity/icons'
+import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
+import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {useBoolean} from '@sanity/ui-workshop'
+import {css, styled} from 'styled-components'
+
+const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
+  props: {
+    $tone: ThemeColorStateToneKey
+  } & ThemeProps,
+) => {
+  const {$tone} = props
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.button.default[$tone]
+
+  return css`
+    &:not([data-selected]) {
+      --card-fg-color: ${tone.enabled.bg};
+      --card-muted-fg-color: ${tone.enabled.bg};
+    }
+
+    [data-ui='Card']:disabled & {
+      --card-fg-color: inherit;
+      --card-muted-fg-color: inherit;
+    }
+  `
+})
+
+export default function SelectedStory() {
+  const disabled = useBoolean('Disabled', false) || false
+  const selected = useBoolean('Selected', false) || false
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
+        <Stack space={1}>
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+          >
+            <Preview selected={selected} />
+          </Card>
+
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+            tone="critical"
+          >
+            <Preview selected={selected} />
+          </Card>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}
+
+function Preview({selected}: {selected: boolean}) {
+  const rootTheme = useRootTheme()
+
+  return (
+    <Flex>
+      <Box flex={1}>
+        <Text size={1}>Title</Text>
+      </Box>
+      <Inline space={3}>
+        <TextWithTone
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          weight="medium"
+          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
+        >
+          <EditIcon />
+        </TextWithTone>
+        <TextWithTone
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+        >
+          <PublishIcon />
+        </TextWithTone>
+      </Inline>
+    </Flex>
+  )
+}