diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md index 94521e3e50..a2765c684e 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md @@ -10,13 +10,13 @@ import '../components.css'; Checkboxes allow users to choose **1 or more items** from a list of options.
-![Example of a form question with mutliple checkbox options stacked vertically.](./img/CB-usage-multi.svg) +![Example of a form question with mutliple checkbox options stacked vertically.](./img/checkbox-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 a single checkbox.](./img/CB-usage-single.svg) +![Example of a single checkbox.](./img/checkbox-usage-single.svg)
### When to use @@ -32,13 +32,13 @@ 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.](./img/CB-alignment.svg) +![Example of a group of checkboxes.](./img/checkbox-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.](./img/CB-nested.svg) +![Example of nested control checkboxes.](./img/checkbox-nested.svg)
### When to use switches vs. checkboxes @@ -47,20 +47,20 @@ The main difference between a switch and a checkbox is that a switch changes an * 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's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-1.svg) + ![Example 1 of do's and don'ts for using a checkbox or a switch.](./img/checkbox-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's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-2.svg) + ![Example 2 of do's and don'ts for using a checkbox or a switch.](./img/checkbox-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's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-3.svg) + ![Example 3 of do's and don'ts for using a checkbox or a switch.](./img/checkbox-vs-switch-3.svg)
## Accessibility diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.png new file mode 100644 index 0000000000..589c0a9a9a Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg deleted file mode 100644 index 9daa03b705..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.png new file mode 100644 index 0000000000..59468906f1 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg deleted file mode 100644 index 67bd5eab50..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.png new file mode 100644 index 0000000000..db55cab847 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg deleted file mode 100644 index 0d3d8e5e68..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.png new file mode 100644 index 0000000000..b7539771a5 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.png new file mode 100644 index 0000000000..1b9b661b1a Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.png new file mode 100644 index 0000000000..08bf38b736 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.png new file mode 100644 index 0000000000..9b6106af29 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg new file mode 100644 index 0000000000..4438b85520 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg new file mode 100644 index 0000000000..6160b07caa --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg new file mode 100644 index 0000000000..181a1b03d1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg similarity index 95% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg index 440b667b5a..d3a3942708 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg @@ -1,6 +1,6 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg similarity index 90% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg index 72d155db3b..239d568701 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg @@ -1,74 +1,74 @@ - + - + - + - + - + - + - + - - - - + + + + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-2.svg similarity index 92% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-2.svg index 88a0a72e0c..30d754530b 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-2.svg @@ -1,53 +1,53 @@ - + - + - - + + - + - - + + - - + + - + - - + + - + - + - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-3.svg similarity index 83% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-3.svg index bc2ca91333..6953ade202 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-3.svg @@ -1,64 +1,64 @@ - + - + - + - + - + - + - + - + - + - - + + - - - + + + - - - + + + - - + + - - + + - - - + + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md b/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md index 0007cf5e9e..a77428e4ec 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md @@ -11,11 +11,13 @@ Form control can be applied to various input components, including text boxes, d ## Usage While form controls are useful in providing feedback on user input, they don't need to be implemented for every input instance. Only use form controls when it is essential to convey information to the user. For example, if any string is valid for a text input, or any selection in a list is acceptable, form controls are not necessary. +Apply the `pf-m-form` modifier to all dropdowns and menu toggles used in a form. The `.pf-m-form` class modifies the menu toggle's border radius to match other form elements. Read more on form controls in the [Form guidelines](/components/forms/form/design-guidelines). + ## 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.
-![Types of form controls.](./img/FC-variations.svg) +![Types of form controls.](./img/form-control-variations.svg)
1. **Default component:** State of the input component before any form control is applied. @@ -30,14 +32,14 @@ Status controls are the most prominent form control. Error, warning, and success 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).
-![A gif showing an example of an input error.](./img/FC-errors.gif) +![A gif showing an example of an input error.](./img/errorcontrols.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.**
-![Example of a successful input.](./img/FC-success.svg) +![Example of a successful input.](./img/form-control-success.svg)
### Grey-out controls @@ -47,7 +49,7 @@ Input fields should be grayed out when the user cannot perform actions. Gray-out 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.
-![Example of a disabled input.](./img/FC-disabled.svg) +![Example of a disabled input.](./img/form-control-disabled.svg)
#### Read only controls @@ -58,21 +60,21 @@ Use the read only state when an input will *never* be editable. This state diffe Use when you don't have the need to copy to clipboard.
-![Example of a plain read-only input with no icon.](./img/FC-read-only-plain.svg) +![Example of a plain read-only input with no icon.](./img/form-control-read-only-plain.svg)
#### Boxed variation Use when you have a need to copy to clipboard.
-![Example of a read-only icon with an icon.](./img/FC-read-only-boxed.svg) +![Example of a read-only icon with an icon.](./img/form-control-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.
-![Example of a custom search input field.](./img/FC-custom-icons.svg) +![Example of a custom search input field.](./img/form-control-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/components/form-control/img/FC-custom-icons.png b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.png new file mode 100644 index 0000000000..7f6553b026 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.png b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.png new file mode 100644 index 0000000000..4365bd77f2 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.svg deleted file mode 100644 index 225e8a159c..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif index 84005300cf..1bdffce9c6 100644 Binary files a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.png b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.png new file mode 100644 index 0000000000..1586fc252c Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.png b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.png new file mode 100644 index 0000000000..89aff5590b Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.png b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.png new file mode 100644 index 0000000000..7ff7459409 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.svg deleted file mode 100644 index beb8a1c6a7..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.png b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.png new file mode 100644 index 0000000000..6c81b69d78 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/errorcontrols.gif b/packages/documentation-site/patternfly-docs/content/components/form-control/img/errorcontrols.gif new file mode 100644 index 0000000000..1bdffce9c6 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/errorcontrols.gif differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-custom-icons.svg similarity index 65% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-custom-icons.svg index d9c0bdd342..d5babe606c 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-custom-icons.svg @@ -1,10 +1,16 @@ - - - + + + + + + - - - + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-disabled.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-disabled.svg new file mode 100644 index 0000000000..063719a0de --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-disabled.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-boxed.svg similarity index 89% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-boxed.svg index b7ce1cec69..91d2610c47 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-boxed.svg @@ -4,7 +4,7 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg similarity index 99% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg index 83594e6cad..86404b4f50 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg @@ -4,6 +4,6 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg new file mode 100644 index 0000000000..1e62488d03 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg similarity index 85% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg index 651761763b..c4d5e4abac 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg @@ -5,7 +5,7 @@ - + @@ -15,10 +15,10 @@ - + - - + + @@ -28,9 +28,9 @@ - - - + + + @@ -38,7 +38,7 @@ - + @@ -50,53 +50,59 @@ - + - + - - - + + + + + + - - - + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/forms.md b/packages/documentation-site/patternfly-docs/content/components/form/forms.md index cd56238f1e..defca9180c 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/forms.md +++ b/packages/documentation-site/patternfly-docs/content/components/form/forms.md @@ -313,7 +313,7 @@ To view an interactive example of field groups, see our [field groups demo](/com Forms may be placed in several contexts including on a page, in a wizard, or in a modal. Your chosen form placement may impact specific spacing considerations, but general form spacing requirements apply across these contexts. ### 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](/foundations-and-styles/spacers#considering-line-height-and-padding). +Add `--pf-t--global--spacer--lg` (24px) of spacing below each form input. If a form input includes helper text, this spacing should start below the helper text. Spacing between data inputs like checkboxes and radio buttons should also be `--pf-t--global--spacer--lg` (24px) when on the same line or stacked on one another. For more spacing information, see the [PatternFly spacer guidelines](/foundations-and-styles/spacers#considering-line-height-and-padding).
![Example of a basic form with spacers to show how elements should be spaced within it.](./img/form-spacing.svg) @@ -322,7 +322,7 @@ Always add 24px of spacing underneath each form input. If a form input includes ### Button spacing -Place submit or cancel buttons on the bottom left of a form, left-aligned with all form fields. Buttons should be placed 16px apart in all contexts. Buttons for actions other than submitting or canceling the form may be placed elsewhere within a form depending on your use case. +Place submit or cancel buttons on the bottom left of a form, left-aligned with all form fields. Buttons should be spaced using `--pf-t--global--spacer--md` (16px) in all contexts. Buttons for actions other than submitting or canceling the form may be placed elsewhere within a form depending on your use case. For more guidance on button placement, see our [button guidelines](/components/button/design-guidelines#button-placement). @@ -332,7 +332,7 @@ For more guidance on button placement, see our [button guidelines](/components/b ### 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. +Left and top align a form within a page’s content area. A minimum of `--pf-t--global--spacer--lg` (24px) padding should separate the form from neighboring elements.
![Example of a form on a page.](./img/form-page-spacing.svg) @@ -348,7 +348,7 @@ To accommodate lengthy input fields, the maximum suggested width is 880px. Use y All input fields in your form will be the same length, except for in a [multi-column form](#multi-column-forms) where you may place two or more adjacent fields in a single line. In a multi-column form, form inputs will share available width on that line. ### Forms in a wizard -Similar to an in-page form, forms in wizards should be left-aligned in the content area and have a minimum of 24px padding separating its content from neighboring elements. +Similar to an in-page form, forms in wizards should be left-aligned in the content area and have a minimum of `--pf-t--global--spacer--lg` (24px) padding separating its content from neighboring elements. 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. @@ -357,7 +357,7 @@ In a wizard, form error validation should occur when or by the time the user cli
### 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. +Forms in a modal should be horizontally centered with the modal background and fill the modal width, leaving `--pf-t--global--spacer--lg` (24px) between the form content and the modal background edges.
![Example of a form in a modal.](./img/form-modal.svg) @@ -468,6 +468,20 @@ Use button text to clearly and specifically communicate the action it triggers. For more button text guidance, see our [button content guidelines](/components/button/design-guidelines#content). +## Best practices + +To ensure your forms are consistent, maintainable, and adaptable across different themes, we recommend following these best practices. + +### Menu toggles and dropdowns in a form + +Apply the `pf-m-form` modifier to all dropdowns and [menu toggles](/components/menus/menu-toggle/html/#usage) used in a form. The `.pf-m-form` class modifies the menu toggle's border radius to match other form elements. + +
+![Do and don't example showing a menu toggle with the pf-m-form modifier applied (square corners) versus without it (pill shape) in a form context.](./img/form-toggle-modifier.svg) +
+ +In the default PatternFly theme, form elements use `--pf-t--global--border--radius--control--form-element` (6px) border radius token. In the [Felt theme](/foundations-and-styles/theming#project-felt-theme), form elements, including input fields, menu toggles, and dropdowns, continue to use the same `--pf-t--global--border--radius--control--form-element` (6px) token, while other non-control components use `--pf-t--global--border--radius--control--default`. Using the `pf-m-form` class ensures that your form elements and menu toggle always match the border radius of the surrounding form fields, regardless of theme. + ## Accessibility This section highlights accessibility considerations to keep in mind when creating forms. For more accessibility guidance, see our [PatternFly accessibility guide](/accessibility/overview). diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.png new file mode 100644 index 0000000000..d8d3755011 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg index 6d5d06b5a4..1734c9b56a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg @@ -1,56 +1,56 @@ - + - + - + - + - - - + + + - + - - - + + + - + - - - - - - + + + + + + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.png new file mode 100644 index 0000000000..d4c0441844 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg index 0fb124537a..a4eba0dfae 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg @@ -1,38 +1,38 @@ - + - + - - - + + + - - - + + + - - - - + + + + - - - + + + - - - - - - + + + + + + - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.png new file mode 100644 index 0000000000..dadc6ea51b Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg index 0a2686f642..24e5bc8b4f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg @@ -2,120 +2,132 @@ - + - + - + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - - - - + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.png new file mode 100644 index 0000000000..1b64b9fe7a Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg index fb387b3627..96cbc288fd 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg @@ -2,122 +2,126 @@ - + - + - + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - + - - + + @@ -125,7 +129,15 @@ - - - + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.png new file mode 100644 index 0000000000..2379c5b6a4 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg index ddd380150c..dafb86d854 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg @@ -6,9 +6,9 @@ - + - + @@ -17,9 +17,9 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.png new file mode 100644 index 0000000000..805a491c9f Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg index fdf119d36c..1f902df8fb 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg @@ -3,9 +3,9 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.png new file mode 100644 index 0000000000..2a7a5956e8 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg index 4478f903c5..950c50ffd7 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg @@ -1,71 +1,76 @@ - - + + - + - - + + - + - + - + - + - + - + - + - + - + - + + + - - - - - - + + + + + + - + - + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.png new file mode 100644 index 0000000000..aacc2b2af2 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg index e90587baf7..0f7caa6029 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg @@ -6,9 +6,9 @@ - + - + @@ -17,9 +17,9 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.png index e4823f9594..f19be13bf4 100644 Binary files a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.png and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg index 207b5a0e08..5b5e3cc949 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg @@ -1,46 +1,46 @@ - + - + - - - - + + + + - + - - - + + + - + - - - - - - + + + + + + - + - - - + + + - + - - - - - - - - - + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.png new file mode 100644 index 0000000000..6ef7922fcd Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg index 340155eebf..f0b9cfe4b3 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg @@ -5,68 +5,78 @@ - - - - + + + + - + - - - - - - - + + + + + + + - + - - - - - - - - + + + + + + + + - + - - - - - - + + + + + + + - + - - - - - - - - - - + + + + + + + + + + + - + - - - + + + - + - - - - - - + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.png new file mode 100644 index 0000000000..a719071ef5 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg index f09c5129c4..7c62ded845 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg @@ -1,29 +1,29 @@ - + - + - + - + - - - - - - - + + + + + + + - + - - - - - - + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.png new file mode 100644 index 0000000000..dea8099835 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg index 7c87f429a8..35afd1557f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg @@ -1,10 +1,10 @@ - + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.png new file mode 100644 index 0000000000..8869b7bb21 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg index 322ed5692f..3f7dc74e20 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg @@ -1,10 +1,10 @@ - + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.png new file mode 100644 index 0000000000..36c0a21b44 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg index 78586f070e..055839fb21 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg @@ -2,61 +2,61 @@ - - - - - - + + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - + + + - + - - - + + + - + - - - + + + - + - - - - - - + + + + + + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.png new file mode 100644 index 0000000000..b57ff74920 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg index c5c9323281..a8382f9a5a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg @@ -4,33 +4,24 @@ - + - - - - - - - - - - - - + + + - - + + - - - + + + - + @@ -41,119 +32,134 @@ - + - + + + - - + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - + + + + + + - - - - - + + + + + - - - + + + - + - - - - - - - + + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - + + + + + - - - + + + - - - - + + + + - - - - + + + + - - - + + + @@ -173,5 +179,8 @@ + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.png new file mode 100644 index 0000000000..a90a6bd647 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg index be8eac6900..4e73223774 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg @@ -4,33 +4,24 @@ - + - - - - - - - - - - - - + + + - - + + - - - + + + - + @@ -41,67 +32,77 @@ - + - + + + - - + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + @@ -126,5 +127,8 @@ + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.png new file mode 100644 index 0000000000..83e54b83fa Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg index f9d1390467..f4055857bc 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg @@ -1,24 +1,24 @@ - + - + - - - - + + + + - + - - - - + + + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.png new file mode 100644 index 0000000000..607e48cccb Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg index ea03c49eb6..efcda898c2 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg @@ -1,24 +1,22 @@ - - - - - + + + - + - - - + + + - - - - + + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.png new file mode 100644 index 0000000000..58841da181 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg index 17c32ad6ac..d28c043886 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg @@ -3,22 +3,22 @@ - + - + - + - - - - + + + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.png new file mode 100644 index 0000000000..d0639caa0f Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg index de90bf6571..7aa20f2a71 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg @@ -1,11 +1,11 @@ - - + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.png new file mode 100644 index 0000000000..4eb0bd8738 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg index 67fefb60c5..a94d91b4b1 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg @@ -1,77 +1,77 @@ - + - + - - - - + + + + - + - - - + + + - + - - - + + + - + - - - + + + - + - - - - - - + + + + + + - - - + + + - - - - - - + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.png index 0dd2413461..395fcf08e3 100644 Binary files a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.png and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg index 62525d8a22..fe09737ca4 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg @@ -3,101 +3,108 @@ - + - - + + - + - - + + - + - - + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - - - + + + + + + + + - + - - - - + + + + - + - - - + + + - + - - + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.png index 391050042e..54896b6caf 100644 Binary files a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.png and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg index 625c9b2dac..774944dce1 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg @@ -1,56 +1,56 @@ - + - + - - - - + + + + - + - - - + + + - + - - - - - - + + + + + + - + - - - + + + - + - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.png new file mode 100644 index 0000000000..bbddb64311 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.svg new file mode 100644 index 0000000000..6ebb5e6680 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.png new file mode 100644 index 0000000000..8f1cfffc1d Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg index 4a5c470f57..a5b8a3132a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg @@ -1,10 +1,10 @@ - + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.png new file mode 100644 index 0000000000..a9326dd6a7 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg index 747250f2df..dc126c047a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg @@ -5,105 +5,110 @@ - - + + - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - + + - - - + + + - - - - - + + + + + + + + + - - - - + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - + - + - - + @@ -113,52 +118,54 @@ - + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - - - - - - - - + + + + + + + + + + + + - - - - - + + + + + - - - - + + + + - - + + - + @@ -172,7 +179,7 @@ - + @@ -193,13 +200,19 @@ - + - + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.png b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.png new file mode 100644 index 0000000000..26420a6042 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg index d4ef2ed186..a37726c206 100644 --- a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg +++ b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg @@ -3,20 +3,20 @@ - + - + - + - - - - + + + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.png b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.png new file mode 100644 index 0000000000..5b83171983 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg index ad51d745e8..db8b98697b 100644 --- a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg +++ b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg @@ -3,8 +3,8 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.png b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.png new file mode 100644 index 0000000000..4c3b1d2e81 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg index 0a4850cb41..6732697a37 100644 --- a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg @@ -1,24 +1,24 @@ - + - + - - - - - - + + + + + + - + - - - - - - + + + + + + @@ -32,16 +32,16 @@ - - - - + + + + - - - + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.png b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.png new file mode 100644 index 0000000000..e3e4a652f7 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.png differ diff --git a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg index 3536e98c54..694e799400 100644 --- a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg +++ b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg @@ -1,14 +1,14 @@ - - + + - + - - - - - - + + + + + +