@sanity/ui 0.37.21 → 0.38.0

package/src/primitives/select/styles.ts

@@ -1,5 +1,5 @@
 import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {
   focusRingBorderStyle,
   focusRingStyle,
@@ -100,17 +100,23 @@ function textSize(size: ThemeFontSize) {
   return {fontSize: rem(size.fontSize), lineHeight: rem(size.lineHeight)}
 }
 
-function inputTextSizeStyle(props: {$fontSize?: number | number[]} & ThemeProps) {
+function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
   const {theme, $fontSize} = props
   const {sizes} = theme.sanity.fonts.text
 
-  return responsive(theme.sanity.media, getResponsiveProp($fontSize), (sizeIndex) =>
+  return _responsive(theme.sanity.media, $fontSize, (sizeIndex) =>
     textSize(sizes[sizeIndex] || sizes[2])
   )
 }
 
 function inputStyle(): Array<
-  | ((props: ResponsiveRadiusStyleProps & ThemeProps) => CSSObject[])
+  | ((
+      props: ResponsiveRadiusStyleProps & {
+        $fontSize: number[]
+        $padding: number[]
+        $space: number[]
+      } & ThemeProps
+    ) => CSSObject[])
   | ((props: ThemeProps) => FlattenSimpleInterpolation)
 > {
   return [

package/src/primitives/stack/stack.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
@@ -27,7 +28,7 @@ export const Stack = forwardRef(function Stack(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={space}
+      $space={useArrayProp(space)}
       forwardedAs={as}
       ref={ref}
     />

package/src/primitives/stack/styles.ts

@@ -1,8 +1,8 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 
 export interface ResponsiveStackSpaceStyleProps {
-  $space?: number | number[]
+  $space: number[]
 }
 
 const BASE_STYLE: CSSObject = {
@@ -26,7 +26,7 @@ export function responsiveStackSpaceStyle(
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$space), (spaceIndex) => ({
+  return _responsive(media, props.$space, (spaceIndex) => ({
     gridGap: rem(space[spaceIndex]),
   }))
 }

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

@@ -8,31 +8,41 @@ export default function OpticalAlignment() {
       <Stack space={1}>
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={4}>Hamburgefonstiv M</Text>
+            <Text accent size={4}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={3}>Hamburgefonstiv M</Text>
+            <Text accent size={3}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={2}>Hamburgefonstiv M</Text>
+            <Text accent size={2}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={1}>Hamburgefonstiv M</Text>
+            <Text accent size={1}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={0}>Hamburgefonstiv M</Text>
+            <Text accent size={0}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 

package/src/primitives/text/text.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -69,10 +70,10 @@ export const Text = forwardRef(function Text(
       data-ui="Text"
       {...restProps}
       $accent={accent}
-      $align={align}
+      $align={useArrayProp(align)}
       $muted={muted}
       ref={ref}
-      $size={size}
+      $size={useArrayProp(size)}
       $weight={weight}
     >
       <span>{children}</span>

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

@@ -1,7 +1,8 @@
-import {Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
+import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import React from 'react'
 import {
+  WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
@@ -9,6 +10,8 @@ import {
 } from '../../../__workshop__/constants'
 
 export default function PlainStory() {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
+
   const border = useBoolean('Border', true, 'Props')
   const customValidity = useText('Custom validity', '', 'Props') || undefined
   const disabled = useBoolean('Disabled', false, 'Props')
@@ -22,23 +25,25 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={3}>
-          <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
-            TextArea
-          </Text>
-          <TextArea
-            border={border}
-            customValidity={customValidity}
-            disabled={disabled}
-            fontSize={fontSize}
-            id="text-area-example"
-            padding={padding}
-            placeholder={placeholder}
-            radius={radius}
-            readOnly={readOnly}
-            weight={weight}
-          />
-        </Stack>
+        <Card padding={3} tone={tone}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
+              TextArea
+            </Text>
+            <TextArea
+              border={border}
+              customValidity={customValidity}
+              disabled={disabled}
+              fontSize={fontSize}
+              id="text-area-example"
+              padding={padding}
+              placeholder={placeholder}
+              radius={radius}
+              readOnly={readOnly}
+              weight={weight}
+            />
+          </Stack>
+        </Card>
       </Container>
     </Flex>
   )

package/src/primitives/textArea/textArea.tsx

@@ -1,6 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -13,7 +13,7 @@ import {
   textInputFontSizeStyle,
   textInputRepresentationStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
+import {ThemeFontWeightKey, useRootTheme} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'
 
 /**
@@ -61,11 +61,14 @@ export const TextArea = forwardRef(function TextArea(
     fontSize = 2,
     padding = 3,
     radius = 1,
+    weight,
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
+  const rootTheme = useRootTheme()
+
   useCustomValidity(ref, customValidity)
 
   return (
@@ -73,13 +76,26 @@ export const TextArea = forwardRef(function TextArea(
       <InputRoot>
         <Input
           data-as="textarea"
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={fontSize}
-          $padding={padding}
+          $fontSize={useArrayProp(fontSize)}
+          $padding={useArrayProp(padding)}
+          $scheme={rootTheme.scheme}
+          $space={useArrayProp(0)}
+          $tone={rootTheme.tone}
+          $weight={weight}
           disabled={disabled}
           ref={ref}
         />
-        <Presentation $border={border} $radius={radius} />
+        <Presentation
+          $border={border}
+          $radius={useArrayProp(radius)}
+          $scheme={rootTheme.scheme}
+          $tone={rootTheme.tone}
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
+        />
       </InputRoot>
     </Root>
   )

package/src/primitives/textInput/__workshop__/clearButton.tsx

@@ -1,7 +1,10 @@
-import {TextInput} from '@sanity/ui'
+import {Box, TextInput} from '@sanity/ui'
+import {useText} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 
 export default function ClearButtonStory() {
+  const customValidity = useText('Custom validitiy')
+
   const [value, setValue] = useState('')
 
   const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -13,12 +16,15 @@ export default function ClearButtonStory() {
   }, [])
 
   return (
-    <TextInput
-      clearButton
-      onChange={handleChange}
-      onClear={handleClear}
-      placeholder="Enter text"
-      value={value}
-    />
+    <Box padding={4}>
+      <TextInput
+        clearButton
+        customValidity={customValidity}
+        onChange={handleChange}
+        onClear={handleClear}
+        placeholder="Enter text"
+        value={value}
+      />
+    </Box>
   )
 }

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

@@ -13,8 +13,8 @@ export default defineScope('primitives/text-input', 'TextInput', [
     component: lazy(() => import('./customValidity')),
   },
   {
-    name: 'types',
-    title: 'Types',
+    name: 'typed',
+    title: 'Typed',
     component: lazy(() => import('./typed')),
   },
   {

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

@@ -30,15 +30,33 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
 export default function PlainStory() {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Stack space={3}>
+          <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
+            TextInput
+          </Text>
+          <Wrapper>
+            <TextInputTest inputRef={ref} />
+          </Wrapper>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}
+
+function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
+  const {inputRef: ref} = props
   const border = useBoolean('Border', true, 'Props')
   const customValidity = useText('Custom validity', '', 'Props') || undefined
   const disabled = useBoolean('Disabled', false, 'Props')
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props') as IconSymbol
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search', 'Props') as IconSymbol
   const iconRight = useSelect(
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'add-circle',
+    'close',
     'Props'
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -56,35 +74,24 @@ export default function PlainStory() {
   )
 
   return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
-            TextInput
-          </Text>
-          <Wrapper>
-            <TextInput
-              border={border}
-              customValidity={customValidity}
-              disabled={disabled}
-              fontSize={fontSize}
-              icon={icon && icons[icon]}
-              iconRight={iconRight && icons[iconRight]}
-              id="text-input-example"
-              name="email"
-              onChange={handleChange}
-              padding={padding}
-              placeholder={placeholder}
-              radius={radius}
-              readOnly={readOnly}
-              ref={ref}
-              space={space}
-              value={value}
-              weight={weight}
-            />
-          </Wrapper>
-        </Stack>
-      </Container>
-    </Flex>
+    <TextInput
+      border={border}
+      customValidity={customValidity}
+      disabled={disabled}
+      fontSize={fontSize}
+      icon={icon && icons[icon]}
+      iconRight={iconRight && icons[iconRight]}
+      id="text-input-example"
+      name="email"
+      onChange={handleChange}
+      padding={padding}
+      placeholder={placeholder}
+      radius={radius}
+      readOnly={readOnly}
+      ref={ref}
+      space={space}
+      value={value}
+      weight={weight}
+    />
   )
 }