@sanity/ui 2.9.0-corel.0 → 2.9.1

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

@@ -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/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/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/popover.tsx

@@ -366,9 +366,12 @@ export const Popover = memo(
     )
 
     const child = useMemo(() => {
+      // If a reference element is defined, we don't need to clone the child
+      if (referenceElement) return childProp
+
       if (!childProp) return null
 
-      return cloneElement(childProp, {ref: referenceElement ? undefined : setReference})
+      return cloneElement(childProp, {ref: setReference})
     }, [childProp, referenceElement, setReference])
 
     useEffect(() => {
@@ -382,10 +385,8 @@ export const Popover = memo(
     }, [update, updateRef])
 
     useEffect(() => {
-      if (referenceElement) {
-        refs.setReference(referenceElement)
-      }
-    }, [referenceElement, refs, child])
+      if (referenceElement) refs.setReference(referenceElement)
+    }, [referenceElement, refs])
 
     if (disabled) {
       return childProp || <></>

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

@@ -2,8 +2,8 @@ import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function PlainStory() {
-  const checked = useBoolean('Checked?', false, 'Props')
-  const disabled = useBoolean('Disabled?', false, 'Props')
+  const checked = useBoolean('Checked', false, 'Props')
+  const disabled = useBoolean('Disabled', false, 'Props')
   const id = 'radioStory'
   const name = 'radioStory'
   const onBlur = useAction('onBlur')

package/src/core/primitives/select/__workshop__/readOnly.tsx

@@ -9,7 +9,7 @@ export default function ReadOnlyStory() {
             Select
           </Label>
 
-          <Select id="select-example" radius={3} readOnly>
+          <Select id="select-example" readOnly>
             <option value="a">Option A</option>
             <option value="b">Option B</option>
             <option value="c">Option C</option>

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

@@ -1,4 +1,4 @@
-import {Card, Container, Text} from '@sanity/ui'
+import {Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
@@ -11,7 +11,7 @@ export default function TextStory() {
   const accent = useBoolean('Accent', false, 'Props')
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
   const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
   const text = useText('Text', 'Hello, world', 'Props')
 
   const textOverflow =
@@ -20,8 +20,8 @@ export default function TextStory() {
   const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
 
   return (
-    <Container width={0}>
-      <Card padding={4}>
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
         <Text
           accent={accent}
           align={align}
@@ -32,7 +32,7 @@ export default function TextStory() {
         >
           {text}
         </Text>
-      </Card>
-    </Container>
+      </Container>
+    </Flex>
   )
 }

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

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

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

@@ -9,7 +9,6 @@ export function textBaseStyle(
   const {font} = getTheme_v2(props.theme)
 
   return css`
-    min-width: 0;
     color: var(--card-fg-color);
 
     ${$accent &&

package/src/core/primitives/text/text.tsx

@@ -25,7 +25,7 @@ export interface TextProps {
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis' | 'none'
+  textOverflow?: 'ellipsis'
   weight?: ThemeFontWeightKey
 }
 
@@ -67,8 +67,6 @@ export const Text = forwardRef(function Text(
 
   if (textOverflow === 'ellipsis') {
     children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
   }
 
   return (
@@ -82,7 +80,7 @@ export const Text = forwardRef(function Text(
       $size={useArrayProp(size)}
       $weight={weight}
     >
-      {children}
+      <span>{children}</span>
     </Root>
   )
 })

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

@@ -17,7 +17,7 @@ export default function PlainStory() {
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
 

package/src/core/primitives/textInput/__workshop__/index.ts

@@ -35,11 +35,6 @@ export default defineScope({
       title: 'Read only',
       component: lazy(() => import('./readOnly')),
     },
-    {
-      name: 'multiple-tones',
-      title: 'Multiple tones',
-      component: lazy(() => import('./multipleTones')),
-    },
     {
       name: 'states',
       title: 'States',

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

@@ -57,7 +57,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const iconRight = useSelect(
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'close',
+    'cube',
     'Props',
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -83,7 +83,6 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
-      name="email"
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}

package/src/core/primitives/textInput/__workshop__/readOnly.tsx

@@ -1,5 +1,9 @@
-import {TextInput} from '@sanity/ui'
+import {Flex, TextInput} from '@sanity/ui'
 
 export default function ReadOnlyStory() {
-  return <TextInput id="text-input-example" readOnly />
+  return (
+    <Flex padding={4}>
+      <TextInput id="text-input-example" readOnly />
+    </Flex>
+  )
 }

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

@@ -3,7 +3,9 @@ import {useBoolean} from '@sanity/ui-workshop'
 
 export default function TonesStory() {
   const transparentTone = useBoolean('Transparent', true)
+  const neutralTone = useBoolean('Neutral', true)
   const primaryTone = useBoolean('Primary', true)
+  const suggestTone = useBoolean('Suggest', true)
   const positiveTone = useBoolean('Positive', true)
   const cautionTone = useBoolean('Caution', true)
   const criticalTone = useBoolean('Critical', true)
@@ -49,6 +51,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {neutralTone && (
+                  <Card padding={3} tone="neutral">
+                    <TextInput
+                      placeholder="neutral"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {primaryTone && (
                   <Card padding={3} tone="primary">
                     <TextInput
@@ -67,6 +87,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {suggestTone && (
+                  <Card padding={3} tone="suggest">
+                    <TextInput
+                      placeholder="suggest"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {positiveTone && (
                   <Card padding={3} tone="positive">
                     <TextInput

package/src/core/styles/card/_cardColorStyle.ts

@@ -55,10 +55,18 @@ export function _cardColorStyle(
     '--card-badge-default-dot-color': color.badge.default.dot,
     '--card-badge-default-fg-color': color.badge.default.fg,
     '--card-badge-default-icon-color': color.badge.default.icon,
+    '--card-badge-neutral-bg-color': color.badge.neutral?.bg,
+    '--card-badge-neutral-dot-color': color.badge.neutral?.dot,
+    '--card-badge-neutral-fg-color': color.badge.neutral?.fg,
+    '--card-badge-neutral-icon-color': color.badge.neutral?.icon,
     '--card-badge-primary-bg-color': color.badge.primary.bg,
     '--card-badge-primary-dot-color': color.badge.primary.dot,
     '--card-badge-primary-fg-color': color.badge.primary.fg,
     '--card-badge-primary-icon-color': color.badge.primary.icon,
+    '--card-badge-suggest-bg-color': color.badge.suggest?.bg,
+    '--card-badge-suggest-dot-color': color.badge.suggest?.dot,
+    '--card-badge-suggest-fg-color': color.badge.suggest?.fg,
+    '--card-badge-suggest-icon-color': color.badge.suggest?.icon,
     '--card-badge-positive-bg-color': color.badge.positive.bg,
     '--card-badge-positive-dot-color': color.badge.positive.dot,
     '--card-badge-positive-fg-color': color.badge.positive.fg,
@@ -71,14 +79,6 @@ export function _cardColorStyle(
     '--card-badge-critical-dot-color': color.badge.critical.dot,
     '--card-badge-critical-fg-color': color.badge.critical.fg,
     '--card-badge-critical-icon-color': color.badge.critical.icon,
-    '--card-badge-prospect-bg-color': color.badge.prospect.bg,
-    '--card-badge-prospect-dot-color': color.badge.prospect.dot,
-    '--card-badge-prospect-fg-color': color.badge.prospect.fg,
-    '--card-badge-prospect-icon-color': color.badge.prospect.icon,
-    '--card-badge-explore-bg-color': color.badge.explore.bg,
-    '--card-badge-explore-dot-color': color.badge.explore.dot,
-    '--card-badge-explore-fg-color': color.badge.explore.fg,
-    '--card-badge-explore-icon-color': color.badge.explore.icon,
 
     '--card-code-bg-color': color.code.bg,
     '--card-code-fg-color': color.code.fg,