@sanity/ui 0.37.20 → 0.37.21

package/src/primitives/textArea/textArea.tsx

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

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

@@ -1,10 +1,7 @@
-import {Box, TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
+import {TextInput} from '@sanity/ui'
 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>) => {
@@ -16,15 +13,12 @@ export default function ClearButtonStory() {
   }, [])
 
   return (
-    <Box padding={4}>
-      <TextInput
-        clearButton
-        customValidity={customValidity}
-        onChange={handleChange}
-        onClear={handleClear}
-        placeholder="Enter text"
-        value={value}
-      />
-    </Box>
+    <TextInput
+      clearButton
+      onChange={handleChange}
+      onClear={handleClear}
+      placeholder="Enter text"
+      value={value}
+    />
   )
 }

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

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

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

@@ -30,33 +30,15 @@ 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, 'search', 'Props') as IconSymbol
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props') as IconSymbol
   const iconRight = useSelect(
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'close',
+    'add-circle',
     'Props'
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -74,24 +56,35 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   )
 
   return (
-    <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}
-    />
+    <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>
   )
 }

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

@@ -1,240 +1,101 @@
-import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
+import {Box, Card, Container, Stack, Text, TextInput} from '@sanity/ui'
 import React from 'react'
 
 export default function TonesStory() {
-  const transparentTone = useBoolean('Transparent', true)
-  const primaryTone = useBoolean('Primary', true)
-  const positiveTone = useBoolean('Positive', true)
-  const cautionTone = useBoolean('Caution', true)
-  const criticalTone = useBoolean('Critical', true)
-
   return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" justify="center">
-        <Container width={1}>
-          <Flex>
-            <Card flex={1} scheme="light">
-              <Stack padding={[3, 4, 5]} space={4}>
-                <Card padding={3}>
-                  <TextInput
-                    placeholder="default"
-                    prefix={
-                      <Box padding={3}>
-                        <Text>prefix</Text>
-                      </Box>
-                    }
-                    suffix={
-                      <Box padding={3}>
-                        <Text>suffix</Text>
-                      </Box>
-                    }
-                  />
-                </Card>
-
-                {transparentTone && (
-                  <Card padding={3} tone="transparent">
-                    <TextInput
-                      placeholder="transparent"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {primaryTone && (
-                  <Card padding={3} tone="primary">
-                    <TextInput
-                      placeholder="primary"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {positiveTone && (
-                  <Card padding={3} tone="positive">
-                    <TextInput
-                      placeholder="positive"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {cautionTone && (
-                  <Card padding={3} tone="caution">
-                    <TextInput
-                      placeholder="caution"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {criticalTone && (
-                  <Card padding={3} tone="critical">
-                    <TextInput
-                      placeholder="critical"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-              </Stack>
-            </Card>
-            <Card flex={1} scheme="dark">
-              <Stack padding={[3, 4, 5]} space={4}>
-                <Card padding={3}>
-                  <TextInput
-                    placeholder="default"
-                    prefix={
-                      <Box padding={3}>
-                        <Text>prefix</Text>
-                      </Box>
-                    }
-                    suffix={
-                      <Box padding={3}>
-                        <Text>suffix</Text>
-                      </Box>
-                    }
-                  />
-                </Card>
-
-                {transparentTone && (
-                  <Card padding={3} tone="transparent">
-                    <TextInput
-                      placeholder="transparent"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {primaryTone && (
-                  <Card padding={3} tone="primary">
-                    <TextInput
-                      placeholder="primary"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {positiveTone && (
-                  <Card padding={3} tone="positive">
-                    <TextInput
-                      placeholder="positive"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {cautionTone && (
-                  <Card padding={3} tone="caution">
-                    <TextInput
-                      placeholder="caution"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {criticalTone && (
-                  <Card padding={3} tone="critical">
-                    <TextInput
-                      placeholder="critical"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-              </Stack>
-            </Card>
-          </Flex>
-        </Container>
-      </Flex>
-    </Card>
+    <Container width={1}>
+      <Stack padding={[3, 4, 5]} space={4}>
+        <Card padding={3}>
+          <TextInput
+            placeholder="default"
+            prefix={
+              <Box padding={3}>
+                <Text>prefix</Text>
+              </Box>
+            }
+            suffix={
+              <Box padding={3}>
+                <Text>suffix</Text>
+              </Box>
+            }
+          />
+        </Card>
+        <Card padding={3} tone="transparent">
+          <TextInput
+            placeholder="transparent"
+            prefix={
+              <Box padding={3}>
+                <Text>prefix</Text>
+              </Box>
+            }
+            suffix={
+              <Box padding={3}>
+                <Text>suffix</Text>
+              </Box>
+            }
+          />
+        </Card>
+        <Card padding={3} tone="primary">
+          <TextInput
+            placeholder="primary"
+            prefix={
+              <Box padding={3}>
+                <Text>prefix</Text>
+              </Box>
+            }
+            suffix={
+              <Box padding={3}>
+                <Text>suffix</Text>
+              </Box>
+            }
+          />
+        </Card>
+        <Card padding={3} tone="positive">
+          <TextInput
+            placeholder="positive"
+            prefix={
+              <Box padding={3}>
+                <Text>prefix</Text>
+              </Box>
+            }
+            suffix={
+              <Box padding={3}>
+                <Text>suffix</Text>
+              </Box>
+            }
+          />
+        </Card>
+        <Card padding={3} tone="caution">
+          <TextInput
+            placeholder="caution"
+            prefix={
+              <Box padding={3}>
+                <Text>prefix</Text>
+              </Box>
+            }
+            suffix={
+              <Box padding={3}>
+                <Text>suffix</Text>
+              </Box>
+            }
+          />
+        </Card>
+        <Card padding={3} tone="critical">
+          <TextInput
+            placeholder="critical"
+            prefix={
+              <Box padding={3}>
+                <Text>prefix</Text>
+              </Box>
+            }
+            suffix={
+              <Box padding={3}>
+                <Text>suffix</Text>
+              </Box>
+            }
+          />
+        </Card>
+      </Stack>
+    </Container>
   )
 }

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

@@ -1,4 +1,4 @@
-import {Box, Container, TextInput} from '@sanity/ui'
+import {TextInput} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '../../../__workshop__/constants'
@@ -12,11 +12,5 @@ export default function TypedStory() {
     setValue(event.currentTarget.value)
   }, [])
 
-  return (
-    <Box padding={4}>
-      <Container width={1}>
-        <TextInput onChange={handleChange} type={type} value={value} />
-      </Container>
-    </Box>
-  )
+  return <TextInput onChange={handleChange} type={type} value={value} />
 }