From de1daad04eb25f35066f317e6e7c8090a3e004b9 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 25 Aug 2020 16:23:33 -0400 Subject: [PATCH] Reorder examples --- docs/components/input.md | 98 ++++++++++++++++++------------------- docs/components/tag.md | 2 +- docs/components/textarea.md | 48 +++++++++++------- 3 files changed, 78 insertions(+), 70 deletions(-) diff --git a/docs/components/input.md b/docs/components/input.md index 13649c8d..f131f5ea 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -12,27 +12,7 @@ Inputs collect data from the user. ## Examples -### Labels - -Use the `label` attribute to give the input an accessible label. - -```html preview - -
- -``` - -### Help Text - -Add descriptive help text to an input with the `help-text` slot. - -```html preview - -
What would you like people to call you?
- -``` - -### Placeholder +### Placeholders Use the `placeholder` attribute to add a placeholder. @@ -40,16 +20,24 @@ Use the `placeholder` attribute to add a placeholder. ``` -### Size +### Clearable -Use the `size` attribute to change an input's size. +Add the `clearable` prop to add a clear button when the input has content. ```html preview - + +``` + +### Toggle Password + +Add the `toggle-password` prop to add a toggle button that will show the password when activated. + +```html preview +
- +
- + ``` ### Pill @@ -64,6 +52,30 @@ Use the `pill` prop to give inputs rounded edges. ``` +### Disabled + +Use the `disabled` attribute to disable an input. + +```html preview + +
+ +
+ +``` + +### Sizes + +Use the `size` attribute to change an input's size. + +```html preview + +
+ +
+ +``` + ### Prefix & Suffix Icons Use the `prefix` and `suffix` slots to add icons. @@ -85,40 +97,24 @@ Use the `prefix` and `suffix` slots to add icons. ``` -### Clearable +### Labels -Add the `clearable` prop to add a clear button when the input has content. +Use the `label` attribute to give the input an accessible label. ```html preview - +
- -
- + ``` -### Toggle Password +### Help Text -Add the `toggle-password` prop to add a toggle button that will show the password when activated. +Add descriptive help text to an input with the `help-text` slot. ```html preview - -
- -
- -``` - -### Disabled - -Use the `disabled` attribute to disable an input. - -```html preview - -
- -
- + +
What would you like people to call you?
+ ``` ### Validation diff --git a/docs/components/tag.md b/docs/components/tag.md index 4758fd58..6529eff0 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -14,7 +14,7 @@ Tags are used as labels to organize things or to indicate a selection. ## Examples -### Size +### Sizes Use the `size` prop to change a tab's size. diff --git a/docs/components/textarea.md b/docs/components/textarea.md index aec02a0d..fb29770a 100644 --- a/docs/components/textarea.md +++ b/docs/components/textarea.md @@ -12,24 +12,6 @@ Textareas collect data from the user and allow multiple lines of text. ## Examples -### Labels - -Use the `label` attribute to give the textarea an accessible label. - -```html preview - -``` - -### Help Text - -Add descriptive help text to a textarea with the `help-text` slot. - -```html preview - -
Please tell us what you think.
- -``` - ### Rows Use the `rows` attribute to change the number of text rows that get shown. @@ -54,6 +36,36 @@ Use the `disabled` attribute to disable an input. ``` +### Sizes + +Use the `size` attribute to change a textarea's size. + +```html preview + +
+ +
+ +``` + +### Labels + +Use the `label` attribute to give the textarea an accessible label. + +```html preview + +``` + +### Help Text + +Add descriptive help text to a textarea with the `help-text` slot. + +```html preview + +
Please tell us what you think.
+ +``` + ### Validation Show a valid or invalid state by setting the `valid` and `invalid` attributes, respectively. Help text can be used to provide feedback for validation and will be styled accordingly.