-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(inputfeedback): Cleanup of InputFeedback, Select, and Textarea d…
…ocs. Move more realistic example of InputFeedback from Input. Remove the console.logs from Select and Textarea.
- Loading branch information
1 parent
3bf3780
commit 37f0714
Showing
6 changed files
with
79 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,69 @@ | ||
| ### Minimal usage | ||
| ### Standalone usage | ||
|
|
||
| InputFeedback displays a feedback box. Its primary use is to facilitate feedback states for other Form components such as [Input](#input) or [Checkbox](#checkbox). Rather than basic text, you may use [Typography](#typography) components as well as other components to customize your feedback message. | ||
| While its primary use is to facilitate feedback states for other form components such as [Input](#input), you may use it standalone. | ||
|
|
||
| ```jsx | ||
| ``` | ||
| <InputFeedback> | ||
| <Paragraph>Provide a brief description of your issue</Paragraph> | ||
| </InputFeedback> | ||
| ``` | ||
|
|
||
| ```jsx | ||
| <InputFeedback> | ||
| <Text block size="small"> | ||
| <Box between={2}> | ||
| <Paragraph size="small" bold>Be sure to include your:</Paragraph> | ||
| <UnorderedList> | ||
| <UnorderedList.Item>Name</UnorderedList.Item> | ||
| <UnorderedList.Item>Address</UnorderedList.Item> | ||
| <UnorderedList.Item>Country</UnorderedList.Item> | ||
| </UnorderedList> | ||
| </Box> | ||
| </Text> | ||
| </InputFeedback> | ||
| ### Advanced use with form components | ||
|
|
||
| Passing a function that returns an `InputFeedback` to the `helper` prop of form components gives you more control over the | ||
| contents of the `InputFeedback` component by giving you access to the `feedback` state of the form field and the current `value`. | ||
|
|
||
| As an example, enter a value into the field below, then click away to lose focus. If you enter less than the 16 | ||
| character minimum the helper will show as an error. Enter 16 or more characters to receive the success feedback. | ||
|
|
||
| ``` | ||
| initialState = { | ||
| value: '', | ||
| status: undefined, | ||
| }; | ||
| const updateValue = (event) => { | ||
| setState({ value: event.target.value }) | ||
| }; | ||
| const validate = (event) => { | ||
| const value = event.target.value | ||
| if (value.length < 16) { | ||
| setState({ status: 'error' }) | ||
| } | ||
| else { | ||
| setState({ status: 'success' }) | ||
| } | ||
| }; | ||
| const passwordRequirements = (feedback) => { | ||
| let listStyle | ||
| switch(feedback) { | ||
| case 'success': listStyle = 'checkmark'; break; | ||
| case 'error': listStyle = 'x'; break; | ||
| default: listStyle = 'circle' | ||
| } | ||
| return ( | ||
| <InputFeedback feedback={feedback}> | ||
| <Box between={2}> | ||
| <Paragraph size="small" bold>Your password must be:</Paragraph> | ||
| <UnorderedList listStyle={listStyle}> | ||
| <UnorderedList.Item>16 characters or longer</UnorderedList.Item> | ||
| <UnorderedList.Item>Not repeated from previous password</UnorderedList.Item> | ||
| </UnorderedList> | ||
| </Box> | ||
| </InputFeedback> | ||
| ); | ||
| }; | ||
| <Input | ||
| label="Password" type="password" id="password-2" | ||
| value={state.value} feedback={state.status} | ||
| onChange={updateValue} onBlur={validate} | ||
| helper={passwordRequirements} | ||
| /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,13 @@ | ||
| ### Usage criteria | ||
|
|
||
| * Selects should be used sparingly where possible or need to reduce space on forms etc. (Work with design for specifics) | ||
| * Selects should have instructions such as "Please select…" as a default option but not able to be selected. | ||
| * Selects are most appropriate when there are 4 or more choice. Less than 4, checkboxes or radios are more appropriate. | ||
| * Include a `placeholder` to provide instructions such as "Please select…" as an unselectabale option (recommended) | ||
| * Selects are most appropriate when there are at least 4 choices. Checkboxes or radio groups are more appropriate for | ||
| less than 4. | ||
|
|
||
| ``` | ||
| const info = ( | ||
| <Text> | ||
| We have special promotions in <Text bold>British Columbia, Ontario and Quebec</Text>. | ||
| </Text> | ||
| ); | ||
| <Select | ||
| label="Select your province" | ||
| placeholder="Please select your province..." | ||
| helper={info} | ||
| options={[{text: 'British Columbia', value: 'BC'}, {text: 'Ontario', value: 'ON'}, {text: 'Quebec', value: 'QC'}]} | ||
| onChange={e => console.log(e.target.value)} | ||
| label="Province" | ||
| placeholder="Please select..." | ||
| options={[{text: 'Alberta', value: 'AB'}, {text: 'British Columbia', value: 'BC'}, {text: 'Ontario', value: 'ON'}, {text: 'Quebec', value: 'QC'}]} | ||
| /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| ### Minimal usage | ||
|
|
||
| When a form requests detailed content from the user, such as product feedback or support queries, then the Textarea component can be used to gather long-form information. | ||
| Use the Textarea component to collect long-form information such as product feedback or support queries. | ||
|
|
||
| ``` | ||
| <Textarea label="Enter some comments" onChange={e => console.log(e.target.value)}/> | ||
| <Textarea label="Enter your feedback" /> | ||
| ``` |