Skip to content

Commit 884762b

Browse files
devongovettdannify
devongovett
and
dannify
authored
Add docs for ContextualHelp in field labels (#3547)
Co-authored-by: Danni <[email protected]>
1 parent b30804e commit 884762b

File tree

17 files changed

+334
-0
lines changed

17 files changed

+334
-0
lines changed

‎packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,27 @@ function Example() {
258258
}
259259
```
260260

261+
### Contextual help
262+
263+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a CheckboxGroup.
264+
265+
```tsx example
266+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
267+
268+
<CheckboxGroup
269+
label="Favorite genres"
270+
contextualHelp={
271+
<ContextualHelp>
272+
<Heading>What does this do?</Heading>
273+
<Content>Your musical taste is used to train our machine learning recommendation algorithm.</Content>
274+
</ContextualHelp>
275+
}>
276+
<Checkbox value="rock">Rock</Checkbox>
277+
<Checkbox value="pop">Pop</Checkbox>
278+
<Checkbox value="classical">Classical</Checkbox>
279+
</CheckboxGroup>
280+
```
281+
261282
### Disabled
262283
[View guidelines](https://spectrum.adobe.com/page/checkbox/#Disabled)
263284

‎packages/@react-spectrum/color/docs/ColorField.mdx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,24 @@ function Example() {
183183
}
184184
```
185185

186+
### Contextual help
187+
188+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a ColorField.
189+
190+
```tsx example
191+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
192+
193+
<ColorField
194+
label="Accent Color"
195+
defaultValue="#e73623"
196+
contextualHelp={
197+
<ContextualHelp>
198+
<Heading>What is an accent color?</Heading>
199+
<Content>An accent color is the primary foreground color for your theme, used across all components.</Content>
200+
</ContextualHelp>
201+
} />
202+
```
203+
186204
### Custom width
187205

188206
[View guidelines](https://spectrum.adobe.com/page/text-field/#Width)

‎packages/@react-spectrum/color/docs/ColorSlider.mdx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,3 +212,22 @@ function Example() {
212212
<ColorSlider defaultValue="#7f0000" channel="red" width="size-3600" maxWidth="100%" />
213213
</Flex>
214214
```
215+
216+
### Contextual help
217+
218+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a ColorSlider.
219+
220+
```tsx example
221+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
222+
223+
<ColorSlider
224+
label="Accent Color"
225+
channel="hue"
226+
defaultValue="hsl(120, 100%, 50%)"
227+
contextualHelp={
228+
<ContextualHelp>
229+
<Heading>What is an accent color?</Heading>
230+
<Content>An accent color is the primary foreground color for your theme, used across all components.</Content>
231+
</ContextualHelp>
232+
} />
233+
```

‎packages/@react-spectrum/combobox/docs/ComboBox.mdx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -844,6 +844,32 @@ function Example() {
844844
}
845845
```
846846

847+
### Contextual help
848+
849+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a ComboBox.
850+
851+
```tsx example
852+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
853+
854+
<ComboBox
855+
label="Engineering major"
856+
contextualHelp={
857+
<ContextualHelp variant="info">
858+
<Heading>Major changes</Heading>
859+
<Content>Once you have changed your major, you cannot change it back.</Content>
860+
</ContextualHelp>
861+
}>
862+
<Item>Aerospace</Item>
863+
<Item>Mechanical</Item>
864+
<Item>Civil</Item>
865+
<Item>Nuclear</Item>
866+
<Item>Industrial</Item>
867+
<Item>Chemical</Item>
868+
<Item>Agricultural</Item>
869+
<Item>Electrical</Item>
870+
</ComboBox>
871+
```
872+
847873
### Custom widths
848874
[View guidelines](https://spectrum.adobe.com/page/combo-box/#Width)
849875

‎packages/@react-spectrum/datepicker/docs/DateField.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,23 @@ Both a description and an error message can be supplied to a DateField. The desc
295295
<DateField label="Birth date" showFormatHelpText />
296296
```
297297

298+
### Contextual help
299+
300+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a DateField.
301+
302+
```tsx example
303+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
304+
305+
<DateField
306+
label="Appointment date"
307+
contextualHelp={
308+
<ContextualHelp variant="info">
309+
<Heading>Appointment changes</Heading>
310+
<Content>Your appointment date cannot be changed once it is scheduled.</Content>
311+
</ContextualHelp>
312+
} />
313+
```
314+
298315
### Placeholder value
299316

300317
When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys. By default, the `placeholderValue` is the current date at midnight, but you can set it to a more appropriate value if needed.

‎packages/@react-spectrum/datepicker/docs/DatePicker.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,23 @@ Both a description and an error message can be supplied to a DatePicker. The des
319319
<DatePicker label="Birth date" showFormatHelpText />
320320
```
321321

322+
### Contextual help
323+
324+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a DatePicker.
325+
326+
```tsx example
327+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
328+
329+
<DatePicker
330+
label="Appointment date"
331+
contextualHelp={
332+
<ContextualHelp variant="info">
333+
<Heading>Appointment changes</Heading>
334+
<Content>Your appointment date cannot be changed once it is scheduled.</Content>
335+
</ContextualHelp>
336+
} />
337+
```
338+
322339
### Placeholder value
323340

324341
When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys, as well as the default month shown in the calendar popover. By default, the `placeholderValue` is the current date at midnight, but you can set it to a more appropriate value if needed.

‎packages/@react-spectrum/datepicker/docs/DateRangePicker.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,23 @@ Both a description and an error message can be supplied to a `DateRangePicker`.
373373
<DateRangePicker label="Date range" showFormatHelpText />
374374
```
375375

376+
### Contextual help
377+
378+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a DateRangePicker.
379+
380+
```tsx example
381+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
382+
383+
<DateRangePicker
384+
label="Trip dates"
385+
contextualHelp={
386+
<ContextualHelp variant="info">
387+
<Heading>Date changes</Heading>
388+
<Content>Your trip dates cannot be changed once scheduled.</Content>
389+
</ContextualHelp>
390+
} />
391+
```
392+
376393
### Placeholder value
377394

378395
When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys, as well as the default month shown in the calendar popover. By default, the `placeholderValue` is the current date at midnight, but you can set it to a more appropriate value if needed.

‎packages/@react-spectrum/datepicker/docs/TimeField.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,23 @@ By default, the label is positioned above the `TimeField`. The `labelPosition` p
231231

232232
Both a description and an error message can be supplied to a TimeField. The description is always visible unless the `validationState` is “invalid” and an error message is provided. The error message can be used to help the user fix their input quickly and should be specific to the detected error. All strings should be localized. See the [Validation](#validation) section above for an example.
233233

234+
### Contextual help
235+
236+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a TimeField.
237+
238+
```tsx example
239+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
240+
241+
<TimeField
242+
label="Appointment time"
243+
contextualHelp={
244+
<ContextualHelp variant="info">
245+
<Heading>Appointment changes</Heading>
246+
<Content>Your appointment time cannot be changed once it is scheduled.</Content>
247+
</ContextualHelp>
248+
} />
249+
```
250+
234251
### Placeholder value
235252

236253
When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys. By default, the `placeholderValue` is midnight, but you can set it to a more appropriate value if needed.

‎packages/@react-spectrum/labeledvalue/docs/LabeledValue.mdx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,3 +134,21 @@ By default, the label is positioned above the `LabeledValue`. The `labelPosition
134134
```tsx example
135135
<LabeledValue label="File name" value="Onboarding.pdf" labelPosition="side" labelAlign="end" />
136136
```
137+
138+
### Contextual help
139+
140+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a LabeledValue.
141+
142+
```tsx example
143+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
144+
145+
<LabeledValue
146+
label="Aperture"
147+
value="f/1.5"
148+
contextualHelp={
149+
<ContextualHelp>
150+
<Heading>What is the aperture?</Heading>
151+
<Content>The aperture setting controls the amount of light reaching the image sensor.</Content>
152+
</ContextualHelp>
153+
} />
154+
```

‎packages/@react-spectrum/numberfield/docs/NumberField.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,29 @@ function Example() {
338338
}
339339
```
340340

341+
### Contextual help
342+
343+
A [ContextualHelp](ContextualHelp.html) element may be placed next to the label to provide additional information or help about a NumberField.
344+
345+
```tsx example
346+
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
347+
348+
<NumberField
349+
label="Exposure"
350+
formatOptions={{
351+
signDisplay: 'exceptZero',
352+
minimumFractionDigits: 1,
353+
maximumFractionDigits: 2
354+
}}
355+
defaultValue={0}
356+
contextualHelp={
357+
<ContextualHelp>
358+
<Heading>What is exposure?</Heading>
359+
<Content>Exposure adjusts how bright the image is.</Content>
360+
</ContextualHelp>
361+
} />
362+
```
363+
341364
### Custom width
342365

343366
[View guidelines](https://spectrum.adobe.com/page/text-field/#Width)

0 commit comments

Comments
 (0)