diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/checkbox.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/checkbox.md index aeb43bc518..861c20cc33 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/checkbox.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/checkbox.md @@ -4,14 +4,20 @@ section: components subsection: forms --- +import '../components.css'; + ## Usage Checkboxes allow users to choose **1 or more items** from a list of options. -Example of form question with checkboxes aligned horizontally +
+![Example of a form question with mutliple checkbox options stacked vertically.](./img/CB-usage-multi.svg) +
You can also use a single checkbox to allow a user to enable or disable a feature or setting, along with a save button. -Example of single checkbox +
+![Example of a single checkbox.](./img/CB-usage-single.svg) +
### When to use @@ -25,23 +31,34 @@ Checkbox labels fall to the right of the checkbox control. If placed vertically, You can use headings to label a group of checkboxes. The placement of headings will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see our [forms documentation](/components/forms/form/design-guidelines). -Example of a group of checkboxes +
+![Example of a group of checkboxes.](./img/CB-alignment.svg) +
You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be enabled or disabled when the user selects or deselects a checkbox. -Example of nested control checkboxes +
+![Example of nested control checkboxes.](./img/CB-nested.svg) +
### When to use switches vs. checkboxes The main difference between a switch and a checkbox is that a switch changes an option and saves it simultaneously, while checkboxes require a separate action such as pressing a “Submit” or “Save” button to save the selection. * Use checkboxes when the options do not save automatically and require the user to perform an additional action to save changes (in this case, pressing the “Save changes” button). - Example 1 of do and don'ts for checkbox vs switch usee +
+ ![Example 1 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-1.svg) +
+ * Use a switch for situations where you are turning a series of one or more independent options on or off. - Example 2 of do and don'ts for checkbox vs switch usee +
+ ![Example 2 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-2.svg) +
* Use checkboxes when you may have an indeterminate state where you can select all, none, or some actions. - Example 3 of do and don'ts for checkbox vs switch usee +
+ ![Example 3 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-3.svg) +
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-alignment.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-alignment.svg new file mode 100644 index 0000000000..9daa03b705 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-alignment.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-nested.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-nested.svg new file mode 100644 index 0000000000..67bd5eab50 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-nested.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-usage-multi.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-usage-multi.svg new file mode 100644 index 0000000000..0d3d8e5e68 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-usage-multi.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-usage-single.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-usage-single.svg new file mode 100644 index 0000000000..440b667b5a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-usage-single.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-1.svg new file mode 100644 index 0000000000..72d155db3b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-1.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-2.svg new file mode 100644 index 0000000000..88a0a72e0c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-2.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-3.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-3.svg new file mode 100644 index 0000000000..bc2ca91333 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/img/CB-vs-switch-3.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/form-control.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/form-control.md index 0253b76989..0007cf5e9e 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/form-control.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/form-control.md @@ -4,6 +4,8 @@ section: components subsection: forms --- +import '../components.css'; + Form control can be applied to various input components, including text boxes, dropdowns/select lists, and text areas. ## Usage @@ -12,7 +14,9 @@ While form controls are useful in providing feedback on user input, they don't n ## Variations While form control styles differ slightly depending on the component, they all use some combination of underlines, color, and icons to give users **feedback** on their inputs and selections. For example, if a user types an invalid string into a text box, the box changes state to indicate the error. -Form control types +
+![Types of form controls.](./img/FC-variations.svg) +
1. **Default component:** State of the input component before any form control is applied. 2. **Status area:** Icon and underline color indicate the status of the input or selection. @@ -25,12 +29,16 @@ Status controls are the most prominent form control. Error, warning, and success #### Error controls Use error controls when a user inputs incorrect information or selects an invalid option from a dropdown menu. Error indicators are often accompanied by helper text to further specify the user error. Read more on error messaging in the [forms guidelines](https://v4-archive.patternfly.org/v4/components/form/design-guidelines#errors-and-validation). -Incorrect input gif +
+![A gif showing an example of an input error.](./img/FC-errors.gif) +
#### Success controls Use success controls to indicate valid user input for fields that require a specific form of input. In the example below, the name entered must be unique, so the success state indicates availability. Alternatively, an error control would be used to indicate a name that is already in use. **Only use success controls if the input must be validated.** -Valid input example +
+![Example of a successful input.](./img/FC-success.svg) +
### Grey-out controls Input fields should be grayed out when the user cannot perform actions. Gray-out controls indicate that a field is either temporarily disabled, or permanently read-only. @@ -38,7 +46,9 @@ Input fields should be grayed out when the user cannot perform actions. Gray-out #### Disable controls Disable controls indicate dependency and can be used to guide the user in a sequential workflow. In the example below, the field Target namespace is disabled, because the user must select a Target provider first. The component is disabled until the user makes the first selection, because namespace options are dependent on the selected provider. Disabled controls should be used over read only controls in scenarios where there is a way for a field to become enabled, for example, in the case of user access/permission restrictions. -Disabled input example +
+![Example of a disabled input.](./img/FC-disabled.svg) +
#### Read only controls @@ -47,16 +57,22 @@ Use the read only state when an input will *never* be editable. This state diffe #### Plain variation Use when you don't have the need to copy to clipboard. -Plain input +
+![Example of a plain read-only input with no icon.](./img/FC-read-only-plain.svg) +
#### Boxed variation Use when you have a need to copy to clipboard. -Boxed input +
+![Example of a read-only icon with an icon.](./img/FC-read-only-boxed.svg) +
### Custom icons Icons can be included within form fields to indicate the type of input required. The most common example is the Search field, shown below. All icons should be right-aligned within the input component. -Search field +
+![Example of a custom search input field.](./img/FC-custom-icons.svg) +
As a designer, you can choose to design input components with custom icons. Make sure that whatever icon you choose informs the user about the type of input that field requires. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-custom-icons.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-custom-icons.svg new file mode 100644 index 0000000000..d9c0bdd342 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-custom-icons.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-disabled.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-disabled.svg new file mode 100644 index 0000000000..225e8a159c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-disabled.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-errors.gif b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-errors.gif new file mode 100644 index 0000000000..84005300cf Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-errors.gif differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-read-only-boxed.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-read-only-boxed.svg new file mode 100644 index 0000000000..b7ce1cec69 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-read-only-boxed.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-read-only-plain.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-read-only-plain.svg new file mode 100644 index 0000000000..83594e6cad --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-read-only-plain.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-success.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-success.svg new file mode 100644 index 0000000000..beb8a1c6a7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-success.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-variations.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-variations.svg new file mode 100644 index 0000000000..651761763b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form-control/img/FC-variations.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md index 61d6fe58b7..d0e07bab52 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md @@ -23,11 +23,15 @@ related: [ ] --- +import '../components.css'; + Use forms to accomplish tasks reliant on user-inputted information like logging in, registering for accounts or services, configuring settings, or completing surveys. ## Elements -Example of a form with four typical form elements called out corresponding to forthcoming elements list +
+![Example of common form elements.](./img/form-elements.svg) +
Most forms contain four basic elements: @@ -43,13 +47,17 @@ Maintain consistent form label alignment throughout your application or interfac #### Top-aligned labels -Top-aligned labels appear above their text input fields +
+![Top-aligned labels are shown above their text input fields.](./img/form-top-labels.svg) +
Top-aligned labels are preferred over left-aligned labels because they provide a closer proximity between a label and its corresponding input and allow the most horizontal space to accommodate long label content. These characteristics support more responsive and scannable form design. #### Left-aligned labels -Left-aligned labels appear beside their text input fields +
+![Left-aligned labels are shown beside their text input fields.](./img/form-left-labels.svg) +
Avoid using left-aligned labels unless you’re working with limited vertical space. @@ -66,7 +74,9 @@ Follow our [text input guidelines](/components/forms/text-input/design-guideline PatternFly provides a variety of input components that enable a user to make a selection. Each component supports a specific use case: -A visual representation of each data input type and their purpose: Switches for toggling between two states, radio buttons for choosing one option from multiple options, checkboxes for choosing any number of items from a list, and select lists for choosing one or more options from a list of more than five options +
+![A visual representation of each data input type and their purpose: Switches for toggling between two states, radio buttons for choosing one option from multiple options, checkboxes for choosing any number of items from a list, and select lists for choosing one or more options from a list of more than five options](./img/form-data-inputs.svg) +
#### Switch @@ -91,17 +101,23 @@ Data inputs can be arranged in 3 different ways depending on space consideration 1. **Horizontal placement:** Use when vertical space is scarce or to arrange three inputs or fewer. - Example of data inputs arranged in a horizontal placement +
+ ![Example of data inputs arranged horizontally.](./img/form-data-horizontal.svg) +
2. **Vertical placement:** Use when quick scanning is ideal or to arrange more than three inputs. - Example of data inputs arranged in a vertical placement +
+ ![Example of data inputs arranged vertically.](./img/form-data-vertical.svg) +
3. **Multi-column grid:** Use when space is constricted and labels are short. - Example of data inputs arranged in a multi-column grid +
+ ![Example of data inputs arranged in a multi-column grid.](./img/form-data-columns.svg) +
### Buttons @@ -127,11 +143,15 @@ Types of user guidance include: Reserve required fields for information vital to user success. Indicate a required field with an asterisk ( * ) to the right of its field label. -Example of field with required field indication +
+![Example of a required input field.](./img/form-required-field.svg) +
If all form fields are required, don’t use an asterisk for each one. Instead, provide a message at the top of the form: “All fields are required.” If all fields are optional, provide a similar message at the top of the form: “All fields are optional." -Example of two forms with an indication at the top of whether all fields are required or all fields are optional +
+![Example of two forms with an indication at the top of whether all fields are required or all fields are optional.](./img/form-required-message.svg) +
#### User help @@ -141,7 +161,9 @@ There are 3 different methods for providing assistance within a form: [placehold ##### Placeholder text -Example of a date placeholder text inside text input field +
+![Example of placeholder text inside an input field.](./img/form-placeholders.svg) +
Within a form field, placeholder text provides an example of the required or recommended format for text input. @@ -156,21 +178,13 @@ Within a form field, placeholder text provides an example of the required or rec If your placeholder text shares an example, precede it with “Example,” followed by a space so that users accessing the form with screen readers will know the difference between the field label and the provided placeholder text. -**Examples:** - -* *Example, John Smith* -* *Example, (555) 555-5555* -* *MM-DD-YYYY* - -Example of a phone number placeholder text inside text input field - -Example of a date placeholder text inside text input field - For more information about writing effective placeholder text, see the [content](#content-considerations) section. ##### Helper text -Example of helper text underneath the text input field +
+![Example of an input field with helpter text underneath.](./img/form-helper-text.svg) +
Helper text is brief, permanent text below a form field that helps a user provide the right information specific to that input, like entering a unique project name or data point. Helper text may wrap to two lines, but it should never extend past the width of its corresponding input field. @@ -184,7 +198,9 @@ For more information about writing effective helper text, see the [content](#con In a form, indicate a popover with an unfilled question mark circle that reveals information when clicked. Place popovers to the right of their corresponding form label. - Example of a popover used in a form field to provide additional context for where a user can find the required information +
+![Example of a popover used in a form field to provide additional context for where a user can find the required information.](./img/form-popovers.svg) +
**Use popovers when:** @@ -199,7 +215,12 @@ For more information about writing effective popovers, see the [content](#conten #### Progressive disclosure Use progressive disclosure to hide and show form fields based on a user’s selection to keep their workflow short and allow them to focus on fields relevant to them. Progressive disclosure also avoids using color to indicate whether or not a field is available, making forms more accessible for users with visual impairments. - Example of progressive disclosure with one radio button selected to only show the inputs associated with that option +
+![Example of progressive disclosure with one radio button selected to only show the inputs associated with that option.](./img/form-progressive-disclosure.svg) +
+ +1. Fields shown because they apply to the selected option. +2. Fields hidden because they apply to an unselected option. ### Errors and validation @@ -214,7 +235,9 @@ After a form error occurs, users won’t have access to placeholder text (replac **Example:** Instead of “Invalid input,” provide an error message that includes the correct format to re-write the input: “Date format must be MM-DD-YYYY.” - Visualized example for right vs. wrong way to write an input error. Do communicate specific format errors; don't just indicate an 'invalid input.' +
+![Visualized example for right vs. wrong way to write an input error. Do communicate specific format errors; don't just indicate an 'invalid input.](./img/form-errors.svg) +
Errors can be validated at two points in the workflow: On loss of focus or on submission. The error state you use depends on whether validation happens on the client side (loss of focus) or server side (on submission). @@ -231,14 +254,18 @@ Validate errors on loss of focus when: An inline Test button can be used as a way to validate the contents of a single input at any stage of a form workflow. For example, if users want to check a link to an external code repository they can use the Test button to confirm access without changing focus to and from the form input or waiting until for final submission. -Example of errors after validation with a test button, including an inline alert at the top, and field level errors +
+![Example of validation with a button.](./img/form-button-validation.svg) +
#### Error validation on submission Validation on submission occurs when a user attempts to submit a form. In this scenario, the user completes the form in its entirety and the page reloads with any errors detected. For validation on submission, supplement field level errors with an [inline alert](/components/alert/design-guidelines#inline-alerts) to make it simple for the user to quickly identify and address areas that need attention. The inline alert should be placed below the form’s header and description, and it should equal the total width of the form. -Example of errors after validation on submission, including an inline alert at the top, and field level errors +
+![Example of errors after validation on submission, including an inline alert at the top and field-level errors.](./img/form-error-validation.svg) +
Learn more about writing error messages in the [content](#content-considerations) section. @@ -252,7 +279,9 @@ Default to grouping data with form sections, especially if all form fields are r To distinguish between form sections, title them based on the reason you grouped their inputs together. You may forego form section titles and solely rely on the added spacing between sections, but don't leave section titles blank if that empty space will confuse your users. If you do decide to forego the form section titles, add an `aria-label` to indicate why you're sectioning each set of form fields together. -Example of form sections used to separate out a form. +
+![Example of a form with sections.](./img/form-sections.svg) +
To view an interactive example of form sections, see our [form sections demo](/components/forms/form). @@ -274,7 +303,9 @@ Because field groups call for more clicks, tabs, and interactions to reach form **Example:** For a form with multiple field groups, distinguish between each one by adding titles that convey each group's unique theme such as *Routing*, *Build configuration*, *Deployment*, or *Scaling*. -Example of nested, expandable field groups in a form. +
+![Example of nested expandable field groups in a form.](./img/form-multi-groups.svg) +
To view an interactive example of field groups, see our [field groups demo](/components/form#field-groups). @@ -284,7 +315,9 @@ Forms may be placed in several contexts including on a page, in a wizard, or in ### General spacing Always add 24px of spacing underneath each form input. If a form input includes helper text, this 24px spacing should start below the helper text. Spacing between data inputs like checkboxes and radio buttons should also be 24px when on the same line or stacked on one another. For more spacing information, consult the [PatternFly spacer guidelines](/design-foundations/spacers#considering-line-height-and-padding). -Basic form example with spacers to demonstrate how elements should be spaced within it +
+![Example of a basic form with spacers to show how elements should be spaced within it.](./img/form-spacing.svg) +
### Button spacing @@ -293,13 +326,17 @@ Place submit or cancel buttons on the bottom left of a form, left-aligned with a For more guidance on button placement, see our [button guidelines](/components/button/design-guidelines#button-placement). -Examples of correct button placement and incorrect button placement in a form +
+![Examples of correct and incorrect button placement in a form.](./img/form-button-spacing.svg) +
### Forms on a page Left and top align a form within a page’s content area. A minimum of 24px padding should separate the form from neighboring elements. -Example of a form on a page +
+![Example of a form on a page.](./img/form-page-spacing.svg) +
When placing a form on a page, its width is customizable to your use case and should reflect factors including: @@ -315,12 +352,16 @@ Similar to an in-page form, forms in wizards should be left-aligned in the conte In a wizard, form error validation should occur when or by the time the user clicks the “Next” button. Don’t wait until the user has completed the whole wizard to notify them of possible errors and their location. -Example of a form in an in-page wizard +
+![Example of a form in an in-page wizard.](./img/form-wizard-spacing.svg) +
### Forms in a modal Forms in a modal should be horizontally centered with the modal background and fill the modal width, leaving 24px between the form content and the modal background edges. -Example of form in a modal +
+![Example of a form in a modal.](./img/form-modal.svg) +
### Multi-column forms @@ -334,11 +375,15 @@ When grouping columns together in a multi-column form, organize them so that fie * City, State, ZIP code * Credit card number, Expiration date, Security code -Example of correct and incorrect multi-column forms +
+![Example of correct and incorrect multi-column forms.](./img/form-columns-rules-1.svg) +
Never design multi-column forms to read like a magazine or newspaper column, where the left column is completed first before moving on to the right. The form itself should still move and be filled line by line from top to bottom, with related fields placed on the same line. -Example of how multi-column forms should be read and presented, demonstrated by arrows that follow a user's path of consumption +
+![Example of how multi-column forms should be read and presented, demonstrated by arrows that follow a user's path of consumption.](./img/form-columns-rules-2.svg) +
## Content considerations diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-button-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-button-spacing.svg new file mode 100644 index 0000000000..6d5d06b5a4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-button-spacing.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-button-validation.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-button-validation.svg new file mode 100644 index 0000000000..0fb124537a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-button-validation.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-columns-rules-1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-columns-rules-1.svg new file mode 100644 index 0000000000..0a2686f642 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-columns-rules-1.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-columns-rules-2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-columns-rules-2.svg new file mode 100644 index 0000000000..fb387b3627 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-columns-rules-2.svg @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-columns.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-columns.svg new file mode 100644 index 0000000000..ddd380150c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-columns.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-horizontal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-horizontal.svg new file mode 100644 index 0000000000..fdf119d36c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-horizontal.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-inputs.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-inputs.svg new file mode 100644 index 0000000000..4478f903c5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-inputs.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-vertical.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-vertical.svg new file mode 100644 index 0000000000..e90587baf7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-data-vertical.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-elements.svg new file mode 100644 index 0000000000..207b5a0e08 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-elements.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-error-validation.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-error-validation.svg new file mode 100644 index 0000000000..340155eebf --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-error-validation.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-errors.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-errors.svg new file mode 100644 index 0000000000..f09c5129c4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-errors.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-helper-text.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-helper-text.svg new file mode 100644 index 0000000000..7c87f429a8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-helper-text.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-left-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-left-labels.svg new file mode 100644 index 0000000000..322ed5692f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-left-labels.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-modal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-modal.svg new file mode 100644 index 0000000000..78586f070e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-modal.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-multi-groups.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-multi-groups.svg new file mode 100644 index 0000000000..c5c9323281 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-multi-groups.svg @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-page-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-page-spacing.svg new file mode 100644 index 0000000000..be8eac6900 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-page-spacing.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-placeholders.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-placeholders.svg new file mode 100644 index 0000000000..f9d1390467 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-placeholders.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-popovers.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-popovers.svg new file mode 100644 index 0000000000..ea03c49eb6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-popovers.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-progressive-disclosure.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-progressive-disclosure.svg new file mode 100644 index 0000000000..17c32ad6ac --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-progressive-disclosure.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-required-field.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-required-field.svg new file mode 100644 index 0000000000..de90bf6571 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-required-field.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-required-message.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-required-message.svg new file mode 100644 index 0000000000..67fefb60c5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-required-message.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-sections.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-sections.svg new file mode 100644 index 0000000000..62525d8a22 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-sections.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-spacing.svg new file mode 100644 index 0000000000..625c9b2dac --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-spacing.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-top-labels.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-top-labels.svg new file mode 100644 index 0000000000..4a5c470f57 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-top-labels.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-wizard-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-wizard-spacing.svg new file mode 100644 index 0000000000..747250f2df --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/img/form-wizard-spacing.svg @@ -0,0 +1,205 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/img/radio-nested.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/img/radio-nested.svg new file mode 100644 index 0000000000..d4ef2ed186 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/img/radio-nested.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/img/radio-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/img/radio-usage.svg new file mode 100644 index 0000000000..ad51d745e8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/img/radio-usage.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/radio.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/radio.md index 593dc432a8..6d39eb259a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/radio.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/radio/radio.md @@ -4,10 +4,14 @@ section: components subsection: forms --- +import '../components.css'; + ## Usage Radio buttons allow users to select **1 item** from a list of options. -Example of radio button options +
+![Example of multiple radio buttons.](./img/radio-usage.svg) +
**General guidelines** @@ -17,7 +21,10 @@ Radio buttons allow users to select **1 item** from a list of options. * Use radio buttons if you’re presenting 5 or fewer options to the user. If you’re presenting more than 5 options, use a [single select list](/components/menus/select/design-guidelines#single-select). * If space is limited, you can also use progressive disclosure by nesting other controls underneath a radio button. - Example of nested control with radio buttons +
+ ![Example of nested control radio buttons.](./img/radio-nested.svg) +
+ ### Labeling and alignment diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/img/text-input-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/img/text-input-elements.svg new file mode 100644 index 0000000000..0a4850cb41 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/img/text-input-elements.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/img/text-input-errors.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/img/text-input-errors.svg new file mode 100644 index 0000000000..3536e98c54 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/img/text-input-errors.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/text-input.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/text-input.md index 62897b0fd2..04db3b9d18 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/text-input.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/text-input/text-input.md @@ -4,9 +4,13 @@ section: components subsection: forms --- +import '../components.css'; + ## Elements -Text input elements +
+![Elements of a text input.](./img/text-input-elements.svg) +
1. **Label:** Indicates what you want the user to input in the text field. 2. **Input field:** Area for user to type in their text input. @@ -38,7 +42,9 @@ For more information about how to provide help content, see the [forms design g ### Errors and validation Wherever possible, use inline errors to notify users where there is an issue with their input. Inline errors help should be short and help users quickly identify and understand what they need to fix and why. -error and validation example +
+![Example of text input errors and validation.](./img/text-input-errors.svg) +
For more information about how to provide errors and validation, see the [forms design guidelines](/components/forms/form/design-guidelines#errors-and-validation).