-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Remove top level link/doc and add more sublevel items - give described form group its own page - move compressed forms to this section - remove "in a popover" example from form rows - compressed forms already have this example and explicitly state non-compressed forms should not be used in popovers - remove guideline CTA to its own page??
- Loading branch information
Showing
7 changed files
with
789 additions
and
922 deletions.
There are no files selected for viewing
5 changes: 2 additions & 3 deletions
5
packages/website/docs/components/forms/form_layouts/_category_.yml
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,3 +1,2 @@ | ||
| link: | ||
| type: doc | ||
| id: forms_form_layouts | ||
| label: Form layouts | ||
| position: 1 |
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
195 changes: 195 additions & 0 deletions
195
packages/website/docs/components/forms/form_layouts/described_form_group.mdx
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 |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| --- | ||
| slug: /forms/layouts/described-groups | ||
| id: forms_described_form_group | ||
| sidebar_position: 2 | ||
| --- | ||
|
|
||
| # Described form groups | ||
|
|
||
| Use **EuiDescribedFormGroup** component to create sections of associated form controls and rows. It can also simply be used with one **EuiFormRow** as a way to display additional text next to the field (on mobile, it will revert to being stacked). | ||
|
|
||
| Read more about appropriate layout usage of **EuiDescribedFormGroup** in the [forms usage guidelines](../guidelines). | ||
|
|
||
| ```tsx interactive | ||
| import React from 'react'; | ||
| import { | ||
| EuiFieldText, | ||
| EuiForm, | ||
| EuiFormRow, | ||
| EuiDescribedFormGroup, | ||
| EuiFilePicker, | ||
| EuiRange, | ||
| EuiSelect, | ||
| EuiLink, | ||
| useGeneratedHtmlId, | ||
| } from '@elastic/eui'; | ||
|
|
||
| export default () => { | ||
| const describedFormRangeId = useGeneratedHtmlId({ | ||
| prefix: 'describedFormRange', | ||
| }); | ||
|
|
||
| return ( | ||
| <EuiForm component="form"> | ||
| <EuiDescribedFormGroup | ||
| title={<h3>Single text field</h3>} | ||
| description={ | ||
| <p> | ||
| Descriptions are wrapped in a small, subdued{' '} | ||
| <EuiLink href="#/display/text"> | ||
| <strong>EuiTextBlock</strong> | ||
| </EuiLink> | ||
| . It can have links or any other type of content. Be sure to wrap | ||
| nodes in a paragraph tag. | ||
| </p> | ||
| } | ||
| > | ||
| <EuiFormRow label="Text field"> | ||
| <EuiFieldText name="first" aria-label="Example" /> | ||
| </EuiFormRow> | ||
| </EuiDescribedFormGroup> | ||
| <EuiDescribedFormGroup title={<h3>No description</h3>}> | ||
| <EuiFormRow label="Text field"> | ||
| <EuiFieldText name="first" /> | ||
| </EuiFormRow> | ||
| </EuiDescribedFormGroup> | ||
| <EuiDescribedFormGroup | ||
| title={<h3>Multiple fields</h3>} | ||
| description="Here are three form rows. The first form row does not have a label." | ||
| > | ||
| <EuiFormRow | ||
| hasEmptyLabelSpace | ||
| helpText={<span>This is a help text</span>} | ||
| > | ||
| <EuiSelect | ||
| hasNoInitialSelection | ||
| onChange={() => {}} | ||
| options={[ | ||
| { value: 'option_one', text: 'Option one' }, | ||
| { value: 'option_two', text: 'Option two' }, | ||
| { value: 'option_three', text: 'Option three' }, | ||
| ]} | ||
| aria-label="An example of a form element without a visible label" | ||
| /> | ||
| </EuiFormRow> | ||
|
|
||
| <EuiFormRow label="File picker"> | ||
| <EuiFilePicker /> | ||
| </EuiFormRow> | ||
|
|
||
| <EuiFormRow label="Range"> | ||
| <EuiRange | ||
| min={0} | ||
| value={50} | ||
| max={100} | ||
| name="range" | ||
| id={describedFormRangeId} | ||
| /> | ||
| </EuiFormRow> | ||
| </EuiDescribedFormGroup> | ||
| </EuiForm> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ### Sizing described form rows | ||
|
|
||
| By default, **EuiDescribedFormGroup** has a max-width of 800px for best readability. To expand the group to 100%, add the `fullWidth` prop to this, the **EuiFormRow**, **and** the individual fields. | ||
|
|
||
| ```tsx interactive | ||
| import React, { Fragment } from 'react'; | ||
| import { | ||
| EuiFieldText, | ||
| EuiForm, | ||
| EuiFormRow, | ||
| EuiDescribedFormGroup, | ||
| EuiFilePicker, | ||
| } from '@elastic/eui'; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <EuiForm component="form"> | ||
| <EuiDescribedFormGroup | ||
| fullWidth | ||
| title={<h2>Full width</h2>} | ||
| description={ | ||
| <Fragment> | ||
| The title and description will grow to fill the left side column at | ||
| any width. Be mindful that it doesn't get too wide. | ||
| </Fragment> | ||
| } | ||
| > | ||
| <EuiFormRow | ||
| fullWidth | ||
| label="Text field" | ||
| helpText={ | ||
| <span> | ||
| Be sure to add fullWidth to EuiFormRow and nested fields. | ||
| </span> | ||
| } | ||
| > | ||
| <EuiFieldText fullWidth name="first" aria-label="Example" /> | ||
| </EuiFormRow> | ||
|
|
||
| <EuiFormRow fullWidth label="File picker"> | ||
| <EuiFilePicker fullWidth /> | ||
| </EuiFormRow> | ||
| </EuiDescribedFormGroup> | ||
| </EuiForm> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| You can also change the ratio of the width of the description column versus the field column. By default it is `'half'`, but you can also change to `'third'` or `'quarter'` which prioritizes the field column. You will most likely still need to apply `fullWidth` to all the components. The description column does have a minimum readable width applied to it so that it cannot shrink too far. | ||
|
|
||
| Both the description and field columns are simply **EuiFlexItem** wrappers. If you need more customization of these columns you can pass flex item props to `descriptionFlexItemProps` and `fieldFlexItemProps` respectively. | ||
|
|
||
| ```tsx interactive | ||
| import React, { Fragment } from 'react'; | ||
| import { | ||
| EuiFieldText, | ||
| EuiForm, | ||
| EuiFormRow, | ||
| EuiDescribedFormGroup, | ||
| EuiFilePicker, | ||
| } from '@elastic/eui'; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <EuiForm component="form"> | ||
| <EuiDescribedFormGroup | ||
| ratio="third" | ||
| title={<h2>Ratio of thirds</h2>} | ||
| description={ | ||
| <Fragment> | ||
| The title and description will shrink to fit inside the left side | ||
| but retains a readable minimum width. | ||
| </Fragment> | ||
| } | ||
| > | ||
| <EuiFormRow | ||
| fullWidth | ||
| label="Text field" | ||
| helpText={ | ||
| <span> | ||
| Be sure to add fullWidth to EuiFormRow and nested fields. | ||
| </span> | ||
| } | ||
| > | ||
| <EuiFieldText fullWidth name="first" aria-label="Example" /> | ||
| </EuiFormRow> | ||
|
|
||
| <EuiFormRow fullWidth label="File picker"> | ||
| <EuiFilePicker fullWidth /> | ||
| </EuiFormRow> | ||
| </EuiDescribedFormGroup> | ||
| </EuiForm> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| import docgen from '@elastic/eui-docgen/dist/components/form'; | ||
|
|
||
| <PropTable definition={docgen.EuiDescribedFormGroup} /> |
Oops, something went wrong.