Skip to content

Commit eba6cc0

Browse files
LFDanLudevongovett
LFDanLu
and
devongovett
authored
feat: Support placeholders in S2 components (#8692)
* readd placeholder support to S2 components * progress * adding tests * fix combobox placeholder warning * apply specific color to placeholders * getting rid of unneeded warnings and adding missing placeholders * fix tests * review comments * fix tests * remove placeholder warning * add docs for placeholder and fix docs control for it and other string type props * remove unused tests and fix lint * sigh lint * review comments * update new combobox example * Add more placeholders in docs --------- Co-authored-by: Devon Govett <[email protected]>
1 parent 769cbb0 commit eba6cc0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+189
-273
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/chromatic/Accordion.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const Example: Story = {
4545
People
4646
</DisclosureTitle>
4747
<DisclosurePanel>
48-
<TextField label="Name" styles={style({maxWidth: 176})} />
48+
<TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
4949
</DisclosurePanel>
5050
</Disclosure>
5151
</Accordion>
@@ -107,7 +107,7 @@ export const WithDisabledDisclosure: Story = {
107107
People
108108
</DisclosureTitle>
109109
<DisclosurePanel>
110-
<TextField label="Name" />
110+
<TextField label="Name" placeholder="Enter your name" />
111111
</DisclosurePanel>
112112
</Disclosure>
113113
</Accordion>
@@ -152,7 +152,7 @@ export const WithActionButton: Story = {
152152
<ActionButton><NewIcon aria-label="new icon" /></ActionButton>
153153
</DisclosureHeader>
154154
<DisclosurePanel>
155-
<TextField label="Name" styles={style({maxWidth: 176})} />
155+
<TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
156156
</DisclosurePanel>
157157
</Disclosure>
158158
</Accordion>

‎packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Template = ({combos, ...args}: ColorFieldProps & {combos: any[]}): ReactEl
4545
key = 'default';
4646
}
4747
return (
48-
<ColorField data-testid={fullComboName} defaultValue="#e21" label={key} description="test description" errorMessage="test error" {...c} {...args} />
48+
<ColorField data-testid={fullComboName} defaultValue="#e21" label={key} description="test description" errorMessage="test error" placeholder="######" {...c} {...args} />
4949
);
5050
})}
5151
</div>

‎packages/@react-spectrum/s2/chromatic/Forms.stories.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ type Story = StoryObj<typeof Form>;
6262
export const Example: Story = {
6363
render: (args) => (
6464
<Form {...args}>
65-
<TextField label="First Name" name="firstName" />
66-
<TextField label="Last Name" name="firstName" />
67-
<TextField label="Email" name="email" type="email" description="Enter an email" />
65+
<TextField label="First Name" name="firstName" placeholder="John" />
66+
<TextField label="Last Name" name="lastName" placeholder="Doe" />
67+
<TextField label="Email" name="email" type="email" description="Enter an email" placeholder="[email protected]" />
6868
<CheckboxGroup label="Favorite sports">
6969
<Checkbox value="soccer">Soccer</Checkbox>
7070
<Checkbox value="baseball">Baseball</Checkbox>
@@ -75,10 +75,10 @@ export const Example: Story = {
7575
<Radio value="dog">Dog</Radio>
7676
<Radio value="plant" isDisabled>Plant</Radio>
7777
</RadioGroup>
78-
<TextField label="City" name="city" description="A long description to test help text wrapping." />
79-
<TextField label="A long label to test wrapping behavior" name="long" />
78+
<TextField label="City" name="city" description="A long description to test help text wrapping." placeholder="Some city" />
79+
<TextField label="A long label to test wrapping behavior" name="long" placeholder="looooooooooong" />
8080
<SearchField label="Search" name="search" />
81-
<TextArea label="Comment" name="comment" />
81+
<TextArea label="Comment" name="comment" placeholder="Enter your comment here" />
8282
<Switch>Wi-Fi</Switch>
8383
<Checkbox>I agree to the terms</Checkbox>
8484
<Slider label="Cookies" defaultValue={30} />
@@ -91,9 +91,9 @@ export const Example: Story = {
9191
export const MixedForm: Story = {
9292
render: (args) => (
9393
<Form {...args}>
94-
<TextField label="First Name" name="firstName" />
95-
<TextField label="Last Name" name="firstName" />
96-
<TextField label="Email" name="email" type="email" description="Enter an email" />
94+
<TextField label="First Name" name="firstName" placeholder="John" />
95+
<TextField label="Last Name" name="lastName" placeholder="Doe" />
96+
<TextField label="Email" name="email" type="email" description="Enter an email" placeholder="[email protected]" />
9797
<CheckboxGroup aria-label="Favorite sports">
9898
<Checkbox value="soccer">Soccer</Checkbox>
9999
<Checkbox value="baseball">Baseball</Checkbox>
@@ -143,7 +143,7 @@ const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
143143
<ToggleButton>
144144
Enable color
145145
</ToggleButton>
146-
<ColorField aria-label="Fill color" styles={style({width: 144})} />
146+
<ColorField aria-label="Fill color" styles={style({width: 144})} placeholder="######" />
147147
<ColorSlider channel="alpha" defaultValue="#000" />
148148
</div>
149149
<Divider size="S" />
@@ -152,7 +152,7 @@ const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
152152
<ToggleButton>
153153
Enable search
154154
</ToggleButton>
155-
<TextField aria-label="Query" styles={style({width: 144})} />
155+
<TextField aria-label="Query" styles={style({width: 144})} placeholder="Search here" />
156156
<ComboBox aria-label="Search terms" styles={style({width: 144})}>
157157
<ComboBoxItem>search term 1</ComboBoxItem>
158158
<ComboBoxItem>search term 2</ComboBoxItem>

‎packages/@react-spectrum/s2/chromatic/TextField.stories.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ type Story = StoryObj<typeof TextField>;
3434
export const Example: Story = {
3535
render: (args) => <TextField {...args} />,
3636
args: {
37-
label: 'Name'
37+
label: 'Name',
38+
placeholder: 'Enter your name'
3839
}
3940
};
4041

@@ -57,6 +58,7 @@ export const ContextualHelpExample: Story = {
5758
),
5859
args: {
5960
label: 'Segment',
61+
placeholder: 'Enter your name',
6062
contextualHelp: (
6163
<ContextualHelp>
6264
<Heading>What is a segment?</Heading>
@@ -80,14 +82,16 @@ export const ContextualHelpExample: Story = {
8082
export const TextAreaExample: StoryObj<typeof TextArea> = {
8183
render: (args) => <TextArea {...args} />,
8284
args: {
83-
label: 'Comment'
85+
label: 'Comment',
86+
placeholder: 'Enter your name'
8487
}
8588
};
8689

8790
export const CustomWidth: Story = {
8891
render: (args) => <TextField {...args} styles={style({width: 384})} />,
8992
args: {
90-
label: 'Name'
93+
label: 'Name',
94+
placeholder: 'Enter your name'
9195
},
9296
parameters: {
9397
docs: {
@@ -99,7 +103,8 @@ export const CustomWidth: Story = {
99103
export const SmallWidth: Story = {
100104
render: (args) => <TextField {...args} styles={style({width: 48})} />,
101105
args: {
102-
label: 'Name'
106+
label: 'Name',
107+
placeholder: 'Enter your name'
103108
},
104109
parameters: {
105110
docs: {
@@ -111,7 +116,8 @@ export const SmallWidth: Story = {
111116
export const UNSAFEWidth: Story = {
112117
render: (args) => <TextField {...args} UNSAFE_style={{width: 384}} />,
113118
args: {
114-
label: 'Name'
119+
label: 'Name',
120+
placeholder: 'Enter your name'
115121
},
116122
parameters: {
117123
docs: {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
import {
1414
ColorField as AriaColorField,
1515
ColorFieldProps as AriaColorFieldProps,
16-
ContextValue
16+
ContextValue,
17+
InputProps
1718
} from 'react-aria-components';
1819
import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
1920
import {createFocusableRef} from '@react-spectrum/utils';
@@ -25,7 +26,7 @@ import {style} from '../style' with {type: 'macro'};
2526
import {TextFieldRef} from '@react-types/textfield';
2627
import {useSpectrumContextProps} from './useSpectrumContextProps';
2728

28-
export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
29+
export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
2930
/**
3031
* The size of the color field.
3132
*

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
ComboBoxStateContext,
2222
ContextValue,
2323
InputContext,
24+
InputProps,
2425
ListBox,
2526
ListBoxItem,
2627
ListBoxItemProps,
@@ -83,7 +84,8 @@ export interface ComboBoxProps<T extends object> extends
8384
HelpTextProps,
8485
Pick<ListBoxProps<T>, 'items' | 'dependencies'>,
8586
Pick<AriaPopoverProps, 'shouldFlip'>,
86-
Pick<AsyncLoadable, 'onLoadMore'> {
87+
Pick<AsyncLoadable, 'onLoadMore'>,
88+
Pick<InputProps, 'placeholder'> {
8789
/** The contents of the collection. */
8890
children: ReactNode | ((item: T) => ReactNode),
8991
/**

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,10 @@ export const Input = forwardRef(function Input(props: InputProps, ref: Forwarded
231231
className={UNSAFE_className + mergeStyles(style({
232232
padding: 0,
233233
backgroundColor: 'transparent',
234-
color: 'inherit',
234+
color: {
235+
default: 'inherit',
236+
'::placeholder': 'gray-600'
237+
},
235238
fontFamily: 'inherit',
236239
fontSize: 'inherit',
237240
fontWeight: 'inherit',

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ButtonRenderProps,
2020
ContextValue,
2121
InputContext,
22+
InputProps,
2223
useContextProps
2324
} from 'react-aria-components';
2425
import {baseColor, space, style} from '../style' with {type: 'macro'};
@@ -40,7 +41,8 @@ export interface NumberFieldProps extends
4041
Omit<AriaNumberFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
4142
StyleProps,
4243
SpectrumLabelableProps,
43-
HelpTextProps {
44+
HelpTextProps,
45+
Pick<InputProps, 'placeholder'> {
4446
/**
4547
* Whether to hide the increment and decrement buttons.
4648
* @default false
@@ -173,7 +175,6 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
173175
}
174176
}));
175177

176-
177178
return (
178179
<AriaNumberField
179180
ref={domRef}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
SearchField as AriaSearchField,
1515
SearchFieldProps as AriaSearchFieldProps,
1616
ContextValue,
17+
InputProps,
1718
Provider
1819
} from 'react-aria-components';
1920
import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
@@ -31,7 +32,7 @@ import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
3132
import {TextFieldRef} from '@react-types/textfield';
3233
import {useSpectrumContextProps} from './useSpectrumContextProps';
3334

34-
export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
35+
export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
3536
/**
3637
* The size of the SearchField.
3738
*

0 commit comments

Comments
 (0)