@sanity/ui 2.10.0-corel.0 → 2.10.0

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

@@ -5,7 +5,7 @@ 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 +18,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 +49,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 +75,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.ReactElement<any> {
   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>

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

@@ -64,10 +64,12 @@ function List2() {
 
 function Preview() {
   return (
-    <Flex align="center">
-      <Skeleton marginRight={2} radius={2} style={{width: 35, height: 35}} />
+    <Flex align="center" gap={2}>
+      <Skeleton radius="full" style={{width: 33, height: 33}} />
       <Stack flex={1} space={2}>
-        <Text>Preview</Text>
+        <Text size={1} weight="medium">
+          Preview
+        </Text>
         <Text muted size={1}>
           Preview
         </Text>

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

@@ -13,14 +13,14 @@ export default function PropsStory() {
   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, 0, '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">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Card
         __unstable_checkered={checkered}
         as={as}
@@ -34,14 +34,16 @@ export default function PropsStory() {
         tone={tone}
       >
         <Stack space={3}>
-          <Text>
+          <Text size={1}>
             Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
             <code>shadow={shadow}</code>.
           </Text>
-          <Text>
+          <Text size={1}>
             Text with <a>link</a>.
           </Text>
-          <Text accent>Accented text.</Text>
+          <Text accent size={1}>
+            Text with accent color.
+          </Text>
         </Stack>
       </Card>
     </Flex>

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

@@ -68,12 +68,14 @@ function Preview({selected}: {selected: boolean}) {
   return (
     <Flex>
       <Box flex={1}>
-        <Text>Title</Text>
+        <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 />
@@ -81,6 +83,7 @@ function Preview({selected}: {selected: boolean}) {
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
+          size={1}
           $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />

package/src/core/primitives/checkbox/__workshop__/tones.tsx

@@ -4,9 +4,15 @@ export default function MultipleTonesStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack>
+        <Card padding={3} tone="neutral">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="primary">
           <Checkbox />
         </Card>
+        <Card padding={3} tone="suggest">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="positive">
           <Checkbox />
         </Card>

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

@@ -8,7 +8,7 @@ import {
 export default function PropsStory() {
   const code = useText('Code', `console.log('Hello, world')`, 'Props')
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/core/primitives/code/code.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import Refractor from 'react-refractor'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'

package/src/core/primitives/container/__workshop__/example.tsx

@@ -9,7 +9,7 @@ export default function PlainStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container onClick={useAction('onClick')} width={width}>
         <Card padding={4} shadow={1}>
-          <Text>
+          <Text size={1}>
             Container with <code>max-width={width}</code>
           </Text>
         </Card>

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -18,15 +18,15 @@ export default function ExampleStory() {
   return (
     <Flex direction={direction} height="fill" style={{width: '100%'}}>
       <DebugCard flex={1}>
-        <Code>1</Code>
+        <Code size={1}>1</Code>
       </DebugCard>
 
       <DebugCard flex={[1, 2, 3]}>
-        <Code>[1,2,3]</Code>
+        <Code size={1}>[1,2,3]</Code>
       </DebugCard>
 
       <DebugCard flex={['none', 'none', 1]}>
-        <Code>['none', 'none', 1]</Code>
+        <Code size={1}>['none', 'none', 1]</Code>
       </DebugCard>
     </Flex>
   )

package/src/core/primitives/flex/flex.tsx

@@ -18,8 +18,6 @@ export interface FlexProps
     ResponsiveFlexProps,
     ResponsiveFlexItemProps {
   gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
 }
 
 const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
@@ -36,7 +34,7 @@ export const Flex = forwardRef(function Flex(
   props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {align, as, direction = 'row', gap, gapX, gapY, justify, wrap, ...restProps} = props
+  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
 
   return (
     <Root
@@ -45,8 +43,6 @@ export const Flex = forwardRef(function Flex(
       $align={useArrayProp(align)}
       $direction={useArrayProp(direction)}
       $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
       $justify={useArrayProp(justify)}
       $wrap={useArrayProp(wrap)}
       forwardedAs={as}

package/src/core/primitives/grid/__workshop__/responsive.tsx

@@ -11,40 +11,40 @@ export default function ResponsiveStory() {
           rows={[1, 2, 3, 4, 5, 6, 7]}
           style={{textAlign: 'center'}}
         >
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>1</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>2</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>3</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>4</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>5</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>6</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>7</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>8</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>9</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>10</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>11</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>12</Code>
           </Card>
         </Grid>

package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -6,55 +6,43 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={5}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={5}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={4}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={4}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={3}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={3}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={2}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={2}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={1}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={1}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={0}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={0}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="neutral">
             <Heading accent>
               <AddCircleIcon />
             </Heading>

package/src/core/primitives/heading/heading.tsx

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {
@@ -26,7 +26,7 @@ export interface HeadingProps {
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis' | 'none'
+  textOverflow?: 'ellipsis'
   weight?: ThemeFontWeightKey
 }
 

package/src/core/primitives/inline/__workshop__/plain.tsx

@@ -10,15 +10,15 @@ export default function PlainStory() {
         space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
       >
         <Card padding={1} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
 
         <Card padding={2} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
 
         <Card padding={3} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
       </Inline>
     </Flex>

package/src/core/primitives/inline/inline.tsx

@@ -37,7 +37,6 @@ export const Inline = forwardRef(function Inline(
       {...restProps}
       $space={useArrayProp(space)}
       forwardedAs={as}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={ref as any}
     >
       {children}

package/src/core/primitives/kbd/kbd.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled, css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'

package/src/core/primitives/label/__workshop__/opticalAlignment.tsx

@@ -6,37 +6,37 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={4}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={3}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={2}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={1}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={0}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="suggest">
             <Label>
               <AddCircleIcon />
             </Label>

package/src/core/primitives/label/label.tsx

@@ -1,5 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -24,7 +24,7 @@ export default function AlignedStory() {
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
 
   const content = (
-    <Text>
+    <Text size={1}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
       hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
       quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -11,8 +11,8 @@ export default function MatchReferenceWidthStory() {
       <Popover
         arrow={arrow}
         content={
-          <Box padding={2}>
-            <Text>Content</Text>
+          <Box padding={3}>
+            <Text size={1}>Content</Text>
           </Box>
         }
         matchReferenceWidth
@@ -22,7 +22,7 @@ export default function MatchReferenceWidthStory() {
       >
         <Container width={0}>
           <Stack>
-            <Button fontSize={3} text="Button" />
+            <Button fontSize={1} mode="ghost" selected text="Button" />
           </Stack>
         </Container>
       </Popover>

package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx

@@ -3,7 +3,7 @@ import {Button, Card, Popover, Text} from '@sanity/ui'
 export default function OpenOnMountStory() {
   return (
     <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text>popover content</Text>} open padding={3}>
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -48,7 +48,7 @@ export default function PlainStory() {
               arrow={arrow}
               boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
               constrainSize={constrainSize}
-              content={<Text>popover content</Text>}
+              content={<Text size={1}>popover content</Text>}
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -18,7 +18,7 @@ const SIDE_PANEL_WIDTH = {
 export default function SidePanelStory() {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
-  const updateRef = useRef<PopoverUpdateCallback>()
+  const updateRef = useRef<PopoverUpdateCallback>(undefined)
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])