@sanity/ui 0.37.15 → 0.37.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/dts/src/primitives/textArea/textArea.d.ts.map +1 -1
- package/lib/dts/src/primitives/textInput/textInput.d.ts.map +1 -1
- package/lib/dts/src/styles/input/textInputStyle.d.ts +3 -1
- package/lib/dts/src/styles/input/textInputStyle.d.ts.map +1 -1
- package/lib/sanity-ui.js +11 -3
- package/lib/sanity-ui.js.map +1 -1
- package/lib/sanity-ui.modern.mjs +13 -5
- package/lib/sanity-ui.modern.mjs.map +1 -1
- package/lib/sanity-ui.module.js +11 -3
- package/lib/sanity-ui.module.js.map +1 -1
- package/package.json +2 -2
- package/src/primitives/textArea/textArea.tsx +2 -0
- package/src/primitives/textInput/__workshop__/tones.tsx +222 -105
- package/src/primitives/textInput/textInput.tsx +5 -1
- package/src/styles/input/textInputStyle.ts +7 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sanity/ui",
|
|
3
|
-
"version": "0.37.
|
|
3
|
+
"version": "0.37.16",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"exports": {
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "4650efb5fc7f539f42465ae515ad1b8312826091"
|
|
76
76
|
}
|
|
@@ -80,6 +80,7 @@ export const TextArea = forwardRef(function TextArea(
|
|
|
80
80
|
{...restProps}
|
|
81
81
|
$fontSize={useArrayProp(fontSize)}
|
|
82
82
|
$padding={useArrayProp(padding)}
|
|
83
|
+
$scheme={rootTheme.scheme}
|
|
83
84
|
$space={useArrayProp(0)}
|
|
84
85
|
$tone={rootTheme.tone}
|
|
85
86
|
$weight={weight}
|
|
@@ -89,6 +90,7 @@ export const TextArea = forwardRef(function TextArea(
|
|
|
89
90
|
<Presentation
|
|
90
91
|
$border={border}
|
|
91
92
|
$radius={useArrayProp(radius)}
|
|
93
|
+
$scheme={rootTheme.scheme}
|
|
92
94
|
$tone={rootTheme.tone}
|
|
93
95
|
data-tone={rootTheme.tone}
|
|
94
96
|
/>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Box, Card, Container, Stack, Text, TextInput} from '@sanity/ui'
|
|
1
|
+
import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
|
|
2
2
|
import {useBoolean} from '@sanity/ui-workshop'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
|
|
@@ -10,114 +10,231 @@ export default function TonesStory() {
|
|
|
10
10
|
const criticalTone = useBoolean('Critical', true)
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
13
|
+
<Card height="fill" tone="transparent">
|
|
14
|
+
<Flex align="center" height="fill" justify="center">
|
|
15
|
+
<Container width={1}>
|
|
16
|
+
<Flex>
|
|
17
|
+
<Card flex={1} scheme="light">
|
|
18
|
+
<Stack padding={[3, 4, 5]} space={4}>
|
|
19
|
+
<Card padding={3}>
|
|
20
|
+
<TextInput
|
|
21
|
+
placeholder="default"
|
|
22
|
+
prefix={
|
|
23
|
+
<Box padding={3}>
|
|
24
|
+
<Text>prefix</Text>
|
|
25
|
+
</Box>
|
|
26
|
+
}
|
|
27
|
+
suffix={
|
|
28
|
+
<Box padding={3}>
|
|
29
|
+
<Text>suffix</Text>
|
|
30
|
+
</Box>
|
|
31
|
+
}
|
|
32
|
+
/>
|
|
33
|
+
</Card>
|
|
30
34
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
35
|
+
{transparentTone && (
|
|
36
|
+
<Card padding={3} tone="transparent">
|
|
37
|
+
<TextInput
|
|
38
|
+
placeholder="transparent"
|
|
39
|
+
prefix={
|
|
40
|
+
<Box padding={3}>
|
|
41
|
+
<Text>prefix</Text>
|
|
42
|
+
</Box>
|
|
43
|
+
}
|
|
44
|
+
suffix={
|
|
45
|
+
<Box padding={3}>
|
|
46
|
+
<Text>suffix</Text>
|
|
47
|
+
</Box>
|
|
48
|
+
}
|
|
49
|
+
/>
|
|
50
|
+
</Card>
|
|
51
|
+
)}
|
|
48
52
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
{primaryTone && (
|
|
54
|
+
<Card padding={3} tone="primary">
|
|
55
|
+
<TextInput
|
|
56
|
+
placeholder="primary"
|
|
57
|
+
prefix={
|
|
58
|
+
<Box padding={3}>
|
|
59
|
+
<Text>prefix</Text>
|
|
60
|
+
</Box>
|
|
61
|
+
}
|
|
62
|
+
suffix={
|
|
63
|
+
<Box padding={3}>
|
|
64
|
+
<Text>suffix</Text>
|
|
65
|
+
</Box>
|
|
66
|
+
}
|
|
67
|
+
/>
|
|
68
|
+
</Card>
|
|
69
|
+
)}
|
|
66
70
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
71
|
+
{positiveTone && (
|
|
72
|
+
<Card padding={3} tone="positive">
|
|
73
|
+
<TextInput
|
|
74
|
+
placeholder="positive"
|
|
75
|
+
prefix={
|
|
76
|
+
<Box padding={3}>
|
|
77
|
+
<Text>prefix</Text>
|
|
78
|
+
</Box>
|
|
79
|
+
}
|
|
80
|
+
suffix={
|
|
81
|
+
<Box padding={3}>
|
|
82
|
+
<Text>suffix</Text>
|
|
83
|
+
</Box>
|
|
84
|
+
}
|
|
85
|
+
/>
|
|
86
|
+
</Card>
|
|
87
|
+
)}
|
|
84
88
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
89
|
+
{cautionTone && (
|
|
90
|
+
<Card padding={3} tone="caution">
|
|
91
|
+
<TextInput
|
|
92
|
+
placeholder="caution"
|
|
93
|
+
prefix={
|
|
94
|
+
<Box padding={3}>
|
|
95
|
+
<Text>prefix</Text>
|
|
96
|
+
</Box>
|
|
97
|
+
}
|
|
98
|
+
suffix={
|
|
99
|
+
<Box padding={3}>
|
|
100
|
+
<Text>suffix</Text>
|
|
101
|
+
</Box>
|
|
102
|
+
}
|
|
103
|
+
/>
|
|
104
|
+
</Card>
|
|
105
|
+
)}
|
|
102
106
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
107
|
+
{criticalTone && (
|
|
108
|
+
<Card padding={3} tone="critical">
|
|
109
|
+
<TextInput
|
|
110
|
+
placeholder="critical"
|
|
111
|
+
prefix={
|
|
112
|
+
<Box padding={3}>
|
|
113
|
+
<Text>prefix</Text>
|
|
114
|
+
</Box>
|
|
115
|
+
}
|
|
116
|
+
suffix={
|
|
117
|
+
<Box padding={3}>
|
|
118
|
+
<Text>suffix</Text>
|
|
119
|
+
</Box>
|
|
120
|
+
}
|
|
121
|
+
/>
|
|
122
|
+
</Card>
|
|
123
|
+
)}
|
|
124
|
+
</Stack>
|
|
125
|
+
</Card>
|
|
126
|
+
<Card flex={1} scheme="dark">
|
|
127
|
+
<Stack padding={[3, 4, 5]} space={4}>
|
|
128
|
+
<Card padding={3}>
|
|
129
|
+
<TextInput
|
|
130
|
+
placeholder="default"
|
|
131
|
+
prefix={
|
|
132
|
+
<Box padding={3}>
|
|
133
|
+
<Text>prefix</Text>
|
|
134
|
+
</Box>
|
|
135
|
+
}
|
|
136
|
+
suffix={
|
|
137
|
+
<Box padding={3}>
|
|
138
|
+
<Text>suffix</Text>
|
|
139
|
+
</Box>
|
|
140
|
+
}
|
|
141
|
+
/>
|
|
142
|
+
</Card>
|
|
143
|
+
|
|
144
|
+
{transparentTone && (
|
|
145
|
+
<Card padding={3} tone="transparent">
|
|
146
|
+
<TextInput
|
|
147
|
+
placeholder="transparent"
|
|
148
|
+
prefix={
|
|
149
|
+
<Box padding={3}>
|
|
150
|
+
<Text>prefix</Text>
|
|
151
|
+
</Box>
|
|
152
|
+
}
|
|
153
|
+
suffix={
|
|
154
|
+
<Box padding={3}>
|
|
155
|
+
<Text>suffix</Text>
|
|
156
|
+
</Box>
|
|
157
|
+
}
|
|
158
|
+
/>
|
|
159
|
+
</Card>
|
|
160
|
+
)}
|
|
161
|
+
|
|
162
|
+
{primaryTone && (
|
|
163
|
+
<Card padding={3} tone="primary">
|
|
164
|
+
<TextInput
|
|
165
|
+
placeholder="primary"
|
|
166
|
+
prefix={
|
|
167
|
+
<Box padding={3}>
|
|
168
|
+
<Text>prefix</Text>
|
|
169
|
+
</Box>
|
|
170
|
+
}
|
|
171
|
+
suffix={
|
|
172
|
+
<Box padding={3}>
|
|
173
|
+
<Text>suffix</Text>
|
|
174
|
+
</Box>
|
|
175
|
+
}
|
|
176
|
+
/>
|
|
177
|
+
</Card>
|
|
178
|
+
)}
|
|
179
|
+
|
|
180
|
+
{positiveTone && (
|
|
181
|
+
<Card padding={3} tone="positive">
|
|
182
|
+
<TextInput
|
|
183
|
+
placeholder="positive"
|
|
184
|
+
prefix={
|
|
185
|
+
<Box padding={3}>
|
|
186
|
+
<Text>prefix</Text>
|
|
187
|
+
</Box>
|
|
188
|
+
}
|
|
189
|
+
suffix={
|
|
190
|
+
<Box padding={3}>
|
|
191
|
+
<Text>suffix</Text>
|
|
192
|
+
</Box>
|
|
193
|
+
}
|
|
194
|
+
/>
|
|
195
|
+
</Card>
|
|
196
|
+
)}
|
|
197
|
+
|
|
198
|
+
{cautionTone && (
|
|
199
|
+
<Card padding={3} tone="caution">
|
|
200
|
+
<TextInput
|
|
201
|
+
placeholder="caution"
|
|
202
|
+
prefix={
|
|
203
|
+
<Box padding={3}>
|
|
204
|
+
<Text>prefix</Text>
|
|
205
|
+
</Box>
|
|
206
|
+
}
|
|
207
|
+
suffix={
|
|
208
|
+
<Box padding={3}>
|
|
209
|
+
<Text>suffix</Text>
|
|
210
|
+
</Box>
|
|
211
|
+
}
|
|
212
|
+
/>
|
|
213
|
+
</Card>
|
|
214
|
+
)}
|
|
215
|
+
|
|
216
|
+
{criticalTone && (
|
|
217
|
+
<Card padding={3} tone="critical">
|
|
218
|
+
<TextInput
|
|
219
|
+
placeholder="critical"
|
|
220
|
+
prefix={
|
|
221
|
+
<Box padding={3}>
|
|
222
|
+
<Text>prefix</Text>
|
|
223
|
+
</Box>
|
|
224
|
+
}
|
|
225
|
+
suffix={
|
|
226
|
+
<Box padding={3}>
|
|
227
|
+
<Text>suffix</Text>
|
|
228
|
+
</Box>
|
|
229
|
+
}
|
|
230
|
+
/>
|
|
231
|
+
</Card>
|
|
232
|
+
)}
|
|
233
|
+
</Stack>
|
|
234
|
+
</Card>
|
|
235
|
+
</Flex>
|
|
236
|
+
</Container>
|
|
237
|
+
</Flex>
|
|
238
|
+
</Card>
|
|
122
239
|
)
|
|
123
240
|
}
|
|
@@ -214,7 +214,9 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
214
214
|
$hasPrefix={$hasPrefix}
|
|
215
215
|
$hasSuffix={$hasSuffix}
|
|
216
216
|
$radius={radius}
|
|
217
|
+
$scheme={rootTheme.scheme}
|
|
217
218
|
$tone={rootTheme.tone}
|
|
219
|
+
data-scheme={rootTheme.scheme}
|
|
218
220
|
data-tone={rootTheme.tone}
|
|
219
221
|
>
|
|
220
222
|
{icon && (
|
|
@@ -243,7 +245,7 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
243
245
|
iconRight,
|
|
244
246
|
padding,
|
|
245
247
|
radius,
|
|
246
|
-
rootTheme
|
|
248
|
+
rootTheme,
|
|
247
249
|
$hasClearButton,
|
|
248
250
|
$hasPrefix,
|
|
249
251
|
$hasSuffix,
|
|
@@ -334,12 +336,14 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
334
336
|
<InputRoot>
|
|
335
337
|
<Input
|
|
336
338
|
data-as="input"
|
|
339
|
+
data-scheme={rootTheme.scheme}
|
|
337
340
|
data-tone={rootTheme.tone}
|
|
338
341
|
{...restProps}
|
|
339
342
|
$fontSize={fontSize}
|
|
340
343
|
$iconLeft={$hasIcon}
|
|
341
344
|
$iconRight={$hasIconRight || $hasClearButton}
|
|
342
345
|
$padding={padding}
|
|
346
|
+
$scheme={rootTheme.scheme}
|
|
343
347
|
$space={space}
|
|
344
348
|
$tone={rootTheme.tone}
|
|
345
349
|
$weight={weight}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
|
|
2
|
-
import {ThemeFontWeightKey} from '../../theme'
|
|
2
|
+
import {ThemeColorSchemeKey, ThemeFontWeightKey} from '../../theme'
|
|
3
3
|
import {CardTone} from '../../types'
|
|
4
4
|
import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
|
|
5
5
|
import {rem, _responsive} from '../helpers'
|
|
@@ -10,6 +10,7 @@ import {ThemeProps} from '../types'
|
|
|
10
10
|
*/
|
|
11
11
|
export interface TextInputInputStyleProps {
|
|
12
12
|
$fontSize: number[]
|
|
13
|
+
$scheme: ThemeColorSchemeKey
|
|
13
14
|
$tone: CardTone
|
|
14
15
|
$weight?: ThemeFontWeightKey
|
|
15
16
|
}
|
|
@@ -21,6 +22,7 @@ export interface TextInputRepresentationStyleProps {
|
|
|
21
22
|
$border?: boolean
|
|
22
23
|
$hasPrefix?: boolean
|
|
23
24
|
$hasSuffix?: boolean
|
|
25
|
+
$scheme: ThemeColorSchemeKey
|
|
24
26
|
$tone: CardTone
|
|
25
27
|
}
|
|
26
28
|
|
|
@@ -39,7 +41,7 @@ export function textInputRootStyle(): FlattenSimpleInterpolation {
|
|
|
39
41
|
export function textInputBaseStyle(
|
|
40
42
|
props: TextInputInputStyleProps & ThemeProps
|
|
41
43
|
): FlattenSimpleInterpolation {
|
|
42
|
-
const {theme, $tone, $weight} = props
|
|
44
|
+
const {theme, $scheme, $tone, $weight} = props
|
|
43
45
|
const font = theme.sanity.fonts.text
|
|
44
46
|
const color = theme.sanity.color.input
|
|
45
47
|
|
|
@@ -79,7 +81,7 @@ export function textInputBaseStyle(
|
|
|
79
81
|
color: var(--input-placeholder-color);
|
|
80
82
|
}
|
|
81
83
|
|
|
82
|
-
&[data-tone='${$tone}'] {
|
|
84
|
+
&[data-scheme='${$scheme}'][data-tone='${$tone}'] {
|
|
83
85
|
--input-fg-color: ${color.default.enabled.fg};
|
|
84
86
|
--input-placeholder-color: ${color.default.enabled.placeholder};
|
|
85
87
|
|
|
@@ -127,7 +129,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
|
|
|
127
129
|
export function textInputRepresentationStyle(
|
|
128
130
|
props: TextInputRepresentationStyleProps & ThemeProps
|
|
129
131
|
): FlattenSimpleInterpolation {
|
|
130
|
-
const {$border, $hasPrefix, $hasSuffix, $tone, theme} = props
|
|
132
|
+
const {$border, $hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
|
|
131
133
|
const {focusRing, input} = theme.sanity
|
|
132
134
|
const color = theme.sanity.color.input
|
|
133
135
|
|
|
@@ -151,7 +153,7 @@ export function textInputRepresentationStyle(
|
|
|
151
153
|
border-top-right-radius: ${$hasSuffix ? 0 : undefined};
|
|
152
154
|
border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
|
|
153
155
|
|
|
154
|
-
&[data-tone='${$tone}'] {
|
|
156
|
+
&[data-scheme='${$scheme}'][data-tone='${$tone}'] {
|
|
155
157
|
--card-bg-color: ${color.default.enabled.bg};
|
|
156
158
|
--card-fg-color: ${color.default.enabled.fg};
|
|
157
159
|
|