Skip to content

Commit 8ae7cab

Browse files
LFDanLuLFDanLu
committed
readd placeholder support to S2 components
1 parent 155e361 commit 8ae7cab

File tree

22 files changed

+28
-173
lines changed

22 files changed

+28
-173
lines changed

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,6 @@ export function Migrating() {
133133
<H3>ColorField</H3>
134134
<ul className="sb-unstyled">
135135
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
136-
<li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it has been removed due to accessibility issues)</li>
137136
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
138137
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
139138
</ul>
@@ -155,7 +154,6 @@ export function Migrating() {
155154
<ul className="sb-unstyled">
156155
<li className={style({font: 'body', marginY: 8})}>Change <Code>menuWidth</Code> value from a <Code>DimensionValue</Code> to a pixel value</li>
157156
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
158-
<li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it is no longer supported in Spectrum 2)</li>
159157
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
160158
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
161159
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
@@ -338,7 +336,6 @@ export function Migrating() {
338336

339337
<H3>SearchField</H3>
340338
<ul className="sb-unstyled">
341-
<li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it has been removed due to accessibility issues)</li>
342339
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out icon (it has not been implemented yet)</li>
343340
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
344341
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
@@ -405,7 +402,6 @@ export function Migrating() {
405402
<ul className="sb-unstyled">
406403
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>icon</Code> (it has not been implemented yet)</li>
407404
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
408-
<li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it has been removed due to accessibility issues)</li>
409405
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
410406
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
411407
</ul>
@@ -414,7 +410,6 @@ export function Migrating() {
414410
<ul className="sb-unstyled">
415411
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>icon</Code> (it has not been implemented yet)</li>
416412
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
417-
<li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it has been removed due to accessibility issues)</li>
418413
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
419414
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
420415
</ul>

‎packages/@react-spectrum/s2/src/ColorField.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,11 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
3131
*
3232
* @default 'M'
3333
*/
34-
size?: 'S' | 'M' | 'L' | 'XL'
34+
size?: 'S' | 'M' | 'L' | 'XL',
35+
/**
36+
* Temporary text that occupies the text input when it is empty.
37+
*/
38+
placeholder?: string
3539
}
3640

3741
export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);

‎packages/@react-spectrum/s2/src/ComboBox.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,11 @@ export interface ComboBoxProps<T extends object> extends
101101
/** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
102102
menuWidth?: number,
103103
/** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */
104-
loadingState?: LoadingState
104+
loadingState?: LoadingState,
105+
/**
106+
* Temporary text that occupies the text input when it is empty.
107+
*/
108+
placeholder?: string
105109
}
106110

107111
export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);

‎packages/@react-spectrum/s2/src/NumberField.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,11 @@ export interface NumberFieldProps extends
5151
*
5252
* @default 'M'
5353
*/
54-
size?: 'S' | 'M' | 'L' | 'XL'
54+
size?: 'S' | 'M' | 'L' | 'XL',
55+
/**
56+
* Temporary text that occupies the text input when it is empty.
57+
*/
58+
placeholder?: string
5559
}
5660

5761
export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);

‎packages/@react-spectrum/s2/src/SearchField.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,11 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
3737
*
3838
* @default 'M'
3939
*/
40-
size?: 'S' | 'M' | 'L' | 'XL'
40+
size?: 'S' | 'M' | 'L' | 'XL',
41+
/**
42+
* Temporary text that occupies the text input when it is empty.
43+
*/
44+
placeholder?: string
4145
}
4246

4347
export const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);

‎packages/@react-spectrum/s2/src/TextField.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,12 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
3838
*
3939
* @default 'M'
4040
*/
41-
size?: 'S' | 'M' | 'L' | 'XL'
41+
size?: 'S' | 'M' | 'L' | 'XL',
42+
// TODO: put warning about needing to provide this for cases where the text field is not focused and doesn't have text
43+
/**
44+
* Temporary text that occupies the text input when it is empty.
45+
*/
46+
placeholder?: string
4247
}
4348

4449
export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
@@ -159,7 +164,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
159164

160165
function TextAreaInput() {
161166
// Force re-render when value changes so we update the height.
162-
useSlottedContext(AriaTextAreaContext) ?? {};
167+
let {placeholder} = useSlottedContext(AriaTextAreaContext) ?? {};
163168
let onHeightChange = (input: HTMLTextAreaElement) => {
164169
// TODO: only do this if an explicit height is not given?
165170
if (input) {
@@ -186,7 +191,7 @@ function TextAreaInput() {
186191
ref={onHeightChange}
187192
// Workaround for baseline alignment bug in Safari.
188193
// https://bugs.webkit.org/show_bug.cgi?id=142968
189-
placeholder=" "
194+
placeholder={placeholder ?? ' '}
190195
className={style({
191196
paddingX: 0,
192197
paddingY: centerPadding(),

‎packages/dev/codemods/src/s1-to-s2/UPGRADE.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
4949

5050
## ColorField
5151
- Remove `isQuiet` (it is no longer supported)
52-
- Remove `placeholder` (it has been removed for accessibility reasons)
5352
- Change `validationState=“invalid”` to `isInvalid`
5453
- Remove `validationState=“valid”` (it is no longer supported)
5554

@@ -59,7 +58,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
5958
- Change `menuWidth` value from a `DimensionValue` to a pixel value
6059
- Remove `isQuiet` (it is no longer supported)
6160
- [PENDING] Comment out `loadingState` (it has not been implemented yet)
62-
- Remove `placeholder` (it is no longer supported)
6361
- Change `validationState=“invalid”` to `isInvalid`
6462
- Remove `validationState=“valid”` (it is no longer supported)
6563
- [PENDING] Comment out `onLoadMore` (it has not been implemented yet)
@@ -134,7 +132,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
134132
- Remove `showErrorIcon` (it has been removed for accessibility reasons)
135133

136134
## SearchField
137-
- Remove `placeholder` (it has been removed for accessibility reasons)
138135
- [PENDING] Comment out icon (it has not been implemented yet)
139136
- Remove `isQuiet` (it is no longer supported)
140137
- Change `validationState=“invalid”` to `isInvalid`
@@ -169,14 +166,12 @@ Note that `[PENDING]` indicates that future changes will occur before the final
169166
## TextArea
170167
- [PENDING] Comment out `icon` (it has not been implemented yet)
171168
- Remove `isQuiet` (it is no longer supported)
172-
- Remove `placeholder` (it has been removed for accessibility reasons)
173169
- Change `validationState=“invalid”` to `isInvalid`
174170
- Remove `validationState=“valid”` (it is no longer supported)
175171

176172
## TextField
177173
- [PENDING] Comment out `icon` (it has not been implemented yet)
178174
- Remove `isQuiet` (it is no longer supported)
179-
- Remove `placeholder` (it has been removed for accessibility reasons)
180175
- Change `validationState=“invalid”` to `isInvalid`
181176
- Remove `validationState=“valid”` (it is no longer supported)
182177

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@ exports[`Removes isQuiet 1`] = `
66
<ColorField label="Primary Color" />"
77
`;
88

9-
exports[`Removes placeholder 1`] = `
10-
"import { ColorField } from "@react-spectrum/s2";
11-
12-
<ColorField label="Primary Color" />"
13-
`;
14-
159
exports[`changes validationState to isInvalid or nothing 1`] = `
1610
"import { ColorField } from "@react-spectrum/s2";
1711
let validationState = 'invalid';

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -89,31 +89,6 @@ let props = {isQuiet: true};
8989
</div>"
9090
`;
9191

92-
exports[`Removes placeholder 1`] = `
93-
"import { ComboBoxItem, ComboBox } from "@react-spectrum/s2";
94-
let placeholder = 'is this actually removed?';
95-
let props = {placeholder: 'is this actually removed?'};
96-
<div>
97-
<ComboBox>
98-
<ComboBoxItem>Red Panda</ComboBoxItem>
99-
<ComboBoxItem>Cat</ComboBoxItem>
100-
</ComboBox>
101-
<ComboBox>
102-
<ComboBoxItem>Red Panda</ComboBoxItem>
103-
<ComboBoxItem>Cat</ComboBoxItem>
104-
</ComboBox>
105-
<ComboBox>
106-
<ComboBoxItem>Red Panda</ComboBoxItem>
107-
<ComboBoxItem>Cat</ComboBoxItem>
108-
</ComboBox>
109-
<ComboBox // TODO(S2-upgrade): check this spread for style props
110-
{...props}>
111-
<ComboBoxItem>Red Panda</ComboBoxItem>
112-
<ComboBoxItem>Cat</ComboBoxItem>
113-
</ComboBox>
114-
</div>"
115-
`;
116-
11792
exports[`Static - Converts menuWidth to px value 1`] = `
11893
"import { ComboBoxItem, ComboBox } from "@react-spectrum/s2";
11994
let menuWidth = 'size-10';

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/searchfield.test.ts.snap

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,6 @@ let props = {isQuiet: true};
1515
</div>"
1616
`;
1717

18-
exports[`Removes placeholder 1`] = `
19-
"import { SearchField } from "@react-spectrum/s2";
20-
let placeholder = 'is this actually removed?';
21-
let props = {placeholder: 'is this actually removed?'};
22-
<div>
23-
<SearchField />
24-
<SearchField />
25-
<SearchField />
26-
<SearchField // TODO(S2-upgrade): check this spread for style props
27-
{...props} />
28-
</div>"
29-
`;
30-
3118
exports[`changes validationState to isInvalid or nothing 1`] = `
3219
"import { SearchField } from "@react-spectrum/s2";
3320
let validationState = 'invalid';

0 commit comments

Comments
 (0)