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

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

@@ -1,13 +1,16 @@
+/* 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 {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function CustomStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Stack space={2}>
-        <Grid columns={5} gap={1}>
+        <Grid columns={7} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="ghost" padding={3} tone={tone}>
               <Stack space={2}>
@@ -24,7 +27,7 @@ export default function CustomStory() {
             </Button>
           ))}
         </Grid>
-        <Grid columns={5} gap={1}>
+        <Grid columns={7} gap={1}>
           {tones.map(([title, tone]) => (
             <Button key={tone} mode="default" padding={3} tone={tone}>
               <Stack space={2}>

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

@@ -1,4 +1,5 @@
 import {SquareIcon} from '@sanity/icons'
+
 import {Card} from '../../card/card'
 import {Container} from '../../container/container'
 import {Grid} from '../../grid/grid'

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

@@ -2,15 +2,17 @@ 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 {
   WORKSHOP_BUTTON_MODE_OPTIONS,
   WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,
   WORKSHOP_BUTTON_TONE_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_WEIGHT_OPTIONS,
+} from '../../../../../workshop/constants'
 
 export default function ButtonStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
@@ -28,6 +30,8 @@ export default function ButtonStory() {
   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
 
   return (
     <Flex align="center" height="fill" justify="center">
@@ -46,6 +50,7 @@ export default function ButtonStory() {
         space={space}
         textAlign={textAlign}
         text={textProp}
+        textWeight={textWeight}
         tone={tone}
       />
     </Flex>

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

@@ -2,6 +2,7 @@ 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 {
   WORKSHOP_BUTTON_MODE_OPTIONS,
   WORKSHOP_BUTTON_TONE_OPTIONS,
@@ -9,7 +10,7 @@ import {
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function StackedStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)

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

@@ -3,6 +3,7 @@
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
+
 import {render} from '../../../../test'
 import {Button, ButtonProps} from './button'
 

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

@@ -1,73 +1,92 @@
-import {buttonLoadingBox, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
-import {button} from '@sanity/ui/css'
-import {PaddingStyleProps, RadiusStyleProps} from '@sanity/ui/css'
-import {Width} from '@sanity/ui/css'
+import {
+  button,
+  buttonLoadingBox,
+  ButtonStyleProps,
+  composeClassNames,
+  DisplayStyleProps,
+  FlexStyleProps,
+  GapStyleProps,
+  PaddingStyleProps,
+  ResponsiveProp,
+  Width,
+} from '@sanity/ui/css'
 import {FontTextSize, Space} from '@sanity/ui/theme'
-import {forwardRef, isValidElement, useMemo} from 'react'
+import {ElementType, ForwardedRef, forwardRef, isValidElement, ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
-import {useTheme_v2} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+
+import {useTheme_v2} from '../../_compat'
+import {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
 import {Box} from '../box'
-import {Flex} from '../flex'
 import {Spinner} from '../spinner'
 import {Text, TextProps} from '../text'
 
 /**
  * @public
  */
-export interface ButtonProps extends PaddingStyleProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: ResponsiveProp<FontTextSize>
-  mode?: ButtonMode
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  justify?: ResponsiveProp<FlexJustify>
-  /**
-   * @beta Do not use in production, as this might change.
-   */
-  loading?: boolean
-  selected?: boolean
-  space?: ResponsiveProp<Space>
-  textAlign?: ButtonTextAlign
-  muted?: boolean
-  text?: React.ReactNode
-  textOverflow?: TextProps['textOverflow']
-  textWeight?: TextProps['weight']
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  // width?: ButtonWidth
-  width?: ResponsiveProp<Width>
+export interface ButtonProps
+  extends ButtonStyleProps,
+    DisplayStyleProps,
+    FlexStyleProps,
+    GapStyleProps,
+    PaddingStyleProps {
+  'data-ui'?: string
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  'href'?: string
+  'mode'?: ButtonMode
+  'icon'?: ElementType | ReactNode
+  'iconRight'?: ElementType | ReactNode
+  /** @beta Do not use in production, as this might change.*/
+  'loading'?: boolean
+  'selected'?: boolean
+  /** @deprecated Use `gap` instead. */
+  'space'?: ResponsiveProp<Space>
+  'textAlign'?: ButtonTextAlign
+  'muted'?: boolean
+  'target'?: string
+  'text'?: ReactNode
+  'textOverflow'?: TextProps['textOverflow']
+  'textWeight'?: TextProps['weight']
+  'tone'?: ButtonTone
+  'type'?: 'button' | 'reset' | 'submit'
+  'width'?: ResponsiveProp<Width>
 }
 
 /**
  * @public
  */
 export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width' | 'height' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLButtonElement>,
+  props: Props<ButtonProps, 'button'>,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) {
   const {
+    align = 'center',
     as: As = 'button',
     children,
     className,
+    direction,
     disabled,
+    display = 'inline-flex',
+    flex,
     fontSize = 1,
+    gap = props.space ?? props.padding ?? 3,
+    gapX,
+    gapY,
+    href,
     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,
+    space = props.gap ?? props.space ?? props.padding ?? 3, // eslint-disable-line @typescript-eslint/no-unused-vars
     text,
     textAlign,
     textOverflow = 'ellipsis',
@@ -76,101 +95,106 @@ export const Button = forwardRef(function Button(
     type = 'button',
     muted = false,
     width,
+    wrap,
     ...restProps
   } = props
   const {button: buttonTheme} = 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 (
     <As
       data-ui="Button"
       {...restProps}
-      // $mode={mode}
-      // $radius={radius}
-      // $tone={tone}
-      className={composeClassNames(
-        className,
-        button({
-          mode,
-          radius: radiusProp,
-          tone,
-          width,
-        }),
-      )}
-      data-disabled={Boolean(loading || disabled)}
+      className={composeClassNames(className, button({display, flex, mode, radius, tone, width}))}
+      data-disabled={loading || disabled ? '' : undefined}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
+      href={disabled ? undefined : href}
       ref={ref}
       type={type}
-      // $width={width}
     >
       {Boolean(loading) && (
-        <Box align="center" className={buttonLoadingBox()} display="flex" justify="center">
+        <Box
+          align={align}
+          as="span"
+          className={buttonLoadingBox()}
+          display="flex"
+          flex={1}
+          justify={justify}
+          width="fill"
+        >
           <Spinner size={fontSize} />
         </Box>
       )}
 
       {(IconComponent || text || IconRightComponent) && (
-        <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify} gap={space}>
-            {IconComponent && (
-              <Text as="span" size={fontSize} style={{flex: 'none'}}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            )}
+        <Box
+          as="span"
+          direction={direction}
+          display="flex"
+          flex={1}
+          gap={gap}
+          gapX={gapX}
+          gapY={gapY}
+          justify={justify}
+          padding={padding}
+          paddingX={paddingX}
+          paddingY={paddingY}
+          paddingTop={paddingTop}
+          paddingBottom={paddingBottom}
+          paddingLeft={paddingLeft}
+          paddingRight={paddingRight}
+          width="fill"
+          wrap={wrap}
+        >
+          {IconComponent && (
+            <Text as="span" flex="none" muted size={fontSize}>
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
+            </Text>
+          )}
 
-            {text && (
-              <Box>
-                <Text
-                  as="span"
-                  muted={muted}
-                  align={textAlign}
-                  size={fontSize}
-                  textOverflow={textOverflow}
-                  weight={textWeight ?? buttonTheme.textWeight}
-                >
-                  {text}
-                </Text>
-              </Box>
-            )}
+          {text && (
+            <Text
+              align={textAlign}
+              as="span"
+              flex="none"
+              muted={muted}
+              size={fontSize}
+              textOverflow={textOverflow}
+              weight={textWeight ?? buttonTheme.textWeight}
+            >
+              {text}
+            </Text>
+          )}
 
-            {IconRightComponent && (
-              <Text as="span" size={fontSize} style={{flex: 'none'}}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
-              </Text>
-            )}
-          </Flex>
+          {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"
+          direction={direction}
+          display="flex"
+          flex={1}
+          gap={gap}
+          gapX={gapX}
+          gapY={gapY}
+          padding={padding}
+          paddingX={paddingX}
+          paddingY={paddingY}
+          paddingTop={paddingTop}
+          paddingBottom={paddingBottom}
+          paddingLeft={paddingLeft}
+          paddingRight={paddingRight}
+          width="fill"
+          wrap={wrap}
+        >
           {children}
         </Box>
       )}

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

@@ -1,27 +1,27 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function AllTonesStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
   return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={5}>
-          {tones.map(([title, tone]) => (
-            <Card
-              key={tone}
-              padding={4}
-              radius={2}
-              shadow={4}
-              style={{textAlign: 'center'}}
-              tone={tone}
-            >
-              <Text>{title}</Text>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Flex>
+    <Card height="fill" tone="transparent">
+      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+        <Container width={0}>
+          <Stack space={3}>
+            {THEME_COLOR_CARD_TONES.filter((tone) => tone !== 'transparent').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>
+    </Card>
   )
 }

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

@@ -1,11 +1,12 @@
 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/constants'
 
 export default function AsButtonStory() {
   const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
 
   return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container>
         <Grid columns={3} gap={2}>
           <Box>
@@ -18,14 +19,20 @@ export default function AsButtonStory() {
                   __unstable_focusRing
                   as="button"
                   key={tone}
-                  padding={4}
+                  padding={3}
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -43,14 +50,20 @@ export default function AsButtonStory() {
                   as="button"
                   disabled
                   key={tone}
-                  padding={4}
+                  padding={3}
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text accent size={1}>
+                      Accent
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -63,21 +76,27 @@ export default function AsButtonStory() {
             </Text>
             <Stack marginTop={3} space={2}>
               {tones.map(([title, tone]) => (
-                <div aria-selected key={tone}>
-                  <Card
-                    __unstable_focusRing
-                    as="button"
-                    padding={4}
-                    style={{textAlign: 'center'}}
-                    tone={tone}
-                  >
-                    <Stack space={2}>
-                      <Text weight="medium">{title}</Text>
-                      <Text muted>Muted</Text>
-                      <Text accent>Accent</Text>
-                    </Stack>
-                  </Card>
-                </div>
+                <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>

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

@@ -4,7 +4,7 @@ import {forwardRef} from 'react'
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement {
+): React.JSX.Element {
   const {children, req, ...restProps} = props
 
   return (
@@ -20,7 +20,7 @@ export default function AsComponentStory() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Card as={CustomLink} data-as="a" {...props} padding={3}>
-        <Text>As component</Text>
+        <Text size={1}>As component</Text>
       </Card>
     </Flex>
   )

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

@@ -1,15 +1,25 @@
-import {Card, Flex, Stack} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function CheckeredStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack space={1}>
-        <Card __unstable_checkered border style={{width: 120, height: 60}} />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="transparent" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="primary" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="positive" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="caution" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="critical" />
+        {THEME_COLOR_CARD_TONES.map((tone) => (
+          <Card
+            __unstable_checkered
+            border
+            key={tone}
+            padding={3}
+            sizing="border"
+            style={{width: 120, height: 60}}
+            tone={tone}
+          >
+            <Text muted size={1}>
+              {tone}
+            </Text>
+          </Card>
+        ))}
       </Stack>
     </Flex>
   )

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

@@ -2,13 +2,20 @@ import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function InteractiveCardStory() {
-  const selected = useBoolean('Selected', false, 'Props')
   const pressed = useBoolean('Pressed', false, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <div aria-selected={selected}>
-        <Card __unstable_focusRing aria-pressed={pressed} as="button" padding={3} tabIndex={0}>
+      <div>
+        <Card
+          __unstable_focusRing
+          as="button"
+          padding={3}
+          pressed={pressed}
+          selected={selected}
+          tabIndex={0}
+        >
           <Stack space={3}>
             <Text>
               Text <code>Code</code>