@patternfly/patternfly 4.214.0 → 4.214.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/components/ProgressStepper/progress-stepper.css +7 -4
  2. package/components/ProgressStepper/progress-stepper.scss +7 -4
  3. package/docs/components/FileUpload/examples/FileUpload.md +1 -1
  4. package/docs/components/Form/examples/Form.md +52 -50
  5. package/docs/components/Login/examples/Login.md +5 -5
  6. package/docs/components/SearchInput/examples/SearchInput.md +2 -2
  7. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
  8. package/docs/components/Wizard/examples/Wizard.md +5 -5
  9. package/docs/demos/Alert/examples/Alert.md +2 -2
  10. package/docs/demos/Button/examples/Button.md +3 -3
  11. package/docs/demos/Form/examples/BasicForms.md +5 -5
  12. package/docs/demos/HelperText/examples/HelperText.md +1 -1
  13. package/docs/demos/Modal/examples/Modal.md +1 -1
  14. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  15. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  16. package/docs/demos/Wizard/examples/Wizard.md +1960 -748
  17. package/package.json +1 -1
  18. package/patternfly-no-reset.css +7 -4
  19. package/patternfly.css +7 -4
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/components/ProgressStepper/progress-stepper.css CHANGED
@@ -53,8 +53,7 @@
53
53
  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
54
54
  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
55
55
  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
56
- --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
57
- --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
56
+ --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
58
57
  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
59
58
  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
60
59
  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -148,10 +147,11 @@
148
147
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
149
148
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
150
149
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
151
- --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
150
+ --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
151
+ --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
152
152
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
153
153
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
154
- --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
154
+ --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
155
155
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
156
156
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
157
157
  grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
@@ -279,7 +279,10 @@
279
279
  }
280
280
 
281
281
  .pf-c-progress-stepper__step-main {
282
+ min-width: 0;
282
283
  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
284
+ text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
285
+ overflow-wrap: anywhere;
283
286
  }
284
287
  .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
285
288
  position: absolute;
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -124,8 +124,7 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
124
124
  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
125
125
  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
126
126
  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
127
- --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
128
- --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
127
+ --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
129
128
  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
130
129
  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
131
130
 
@@ -201,10 +200,11 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
201
200
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
202
201
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
203
202
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
204
- --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
203
+ --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
204
+ --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
205
205
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
206
206
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
207
- --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
207
+ --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
208
208
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
209
209
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
210
210
 
@@ -366,7 +366,10 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
366
366
 
367
367
  // Step main
368
368
  .pf-c-progress-stepper__step-main {
369
+ min-width: 0;
369
370
  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
371
+ text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
372
+ overflow-wrap: anywhere;
370
373
 
371
374
  // Draw a new border for vertical alignment using step main
372
375
  .pf-c-progress-stepper__step:not(:last-of-type) > &::before {
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -152,7 +152,7 @@ cssPrefix: pf-c-file-upload
152
152
  ### File upload in form with error
153
153
 
154
154
  ```html
155
- <form novalidate class="pf-c-form">
155
+ <form class="pf-c-form" novalidate>
156
156
  <div class="pf-c-form__group">
157
157
  <div class="pf-c-file-upload">
158
158
  <div class="pf-c-file-upload__file-select">
package/docs/components/Form/examples/Form.md CHANGED
@@ -7,7 +7,7 @@ cssPrefix: pf-c-form
7
7
  ### Vertically aligned labels
8
8
 
9
9
  ```html
10
- <form novalidate class="pf-c-form">
10
+ <form class="pf-c-form" novalidate>
11
11
  <div class="pf-c-form__group">
12
12
  <div class="pf-c-form__group-label">
13
13
  <label class="pf-c-form__label" for="form-vertical-name">
@@ -39,7 +39,7 @@ cssPrefix: pf-c-form
39
39
  ### Horizontally aligned labels
40
40
 
41
41
  ```html
42
- <form novalidate class="pf-c-form pf-m-horizontal">
42
+ <form class="pf-c-form pf-m-horizontal" novalidate>
43
43
  <div class="pf-c-form__group">
44
44
  <div class="pf-c-form__group-label">
45
45
  <label class="pf-c-form__label" for="form-horizontal-name">
@@ -133,7 +133,7 @@ cssPrefix: pf-c-form
133
133
  ### Horizontal layout at a custom breakpoint
134
134
 
135
135
  ```html
136
- <form novalidate class="pf-c-form pf-m-horizontal-on-sm">
136
+ <form class="pf-c-form pf-m-horizontal-on-sm" novalidate>
137
137
  <div class="pf-c-form__group">
138
138
  <div class="pf-c-form__group-label">
139
139
  <label
@@ -168,7 +168,7 @@ cssPrefix: pf-c-form
168
168
  ### Form sections
169
169
 
170
170
  ```html
171
- <form novalidate class="pf-c-form">
171
+ <form class="pf-c-form" novalidate>
172
172
  <section class="pf-c-form__section" role="group">
173
173
  <div class="pf-c-form__group">
174
174
  <div class="pf-c-form__group-label">
@@ -265,7 +265,7 @@ cssPrefix: pf-c-form
265
265
  ### Help text
266
266
 
267
267
  ```html
268
- <form novalidate class="pf-c-form">
268
+ <form class="pf-c-form" novalidate>
269
269
  <div class="pf-c-form__group">
270
270
  <div class="pf-c-form__group-label">
271
271
  <label class="pf-c-form__label" for="form-help-text-name">
@@ -389,7 +389,7 @@ cssPrefix: pf-c-form
389
389
  ### Label with additional info
390
390
 
391
391
  ```html
392
- <form novalidate class="pf-c-form">
392
+ <form class="pf-c-form" novalidate>
393
393
  <div class="pf-c-form__group">
394
394
  <div class="pf-c-form__group-label pf-m-info">
395
395
  <div class="pf-c-form__group-label-main">
@@ -424,7 +424,7 @@ cssPrefix: pf-c-form
424
424
  ### Action group
425
425
 
426
426
  ```html
427
- <form novalidate class="pf-c-form">
427
+ <form class="pf-c-form" novalidate>
428
428
  <div class="pf-c-form__group pf-m-action">
429
429
  <div class="pf-c-form__actions">
430
430
  <button class="pf-c-button pf-m-primary" type="submit">Submit form</button>
@@ -438,7 +438,7 @@ cssPrefix: pf-c-form
438
438
  ### Field group (non-expandable)
439
439
 
440
440
  ```html
441
- <form novalidate class="pf-c-form">
441
+ <form class="pf-c-form" novalidate>
442
442
  <div
443
443
  class="pf-c-form__field-group"
444
444
  role="group"
@@ -526,7 +526,7 @@ cssPrefix: pf-c-form
526
526
  ### Expandable and nested field groups
527
527
 
528
528
  ```html
529
- <form novalidate class="pf-c-form">
529
+ <form class="pf-c-form" novalidate>
530
530
  <div
531
531
  class="pf-c-form__field-group"
532
532
  role="group"
@@ -763,44 +763,46 @@ cssPrefix: pf-c-form
763
763
 
764
764
  ### Usage
765
765
 
766
- | Class | Applied to | Outcome |
767
- | ------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
768
- | `.pf-c-form` | `<form>` | Initiates a standard form. **Required** |
769
- | `.pf-c-form__section` | `<div>, <section>` | Initiates a form section. |
770
- | `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title. |
771
- | `.pf-c-form__group` | `<div>` | Initiates a form group. |
772
- | `.pf-c-form__group-label` | `<div>` | Initiates a form group label. |
773
- | `.pf-c-form__label` | `<label>`, `<span>` | Initiates a form label. **Required** |
774
- | `.pf-c-form__label-text` | `<span>` | Initiates a form label text. **Required** |
775
- | `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
776
- | `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
777
- | `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
778
- | `.pf-c-form__group-label-help` | `<button>` | Initiates a field level help button. |
779
- | `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
780
- | `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
781
- | `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
782
- | `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon. |
783
- | `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
784
- | `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
785
- | `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
786
- | `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
787
- | `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
788
- | `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
789
- | `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
790
- | `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
791
- | `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
792
- | `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
793
- | `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
794
- | `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
795
- | `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
796
- | `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
797
- | `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
798
- | `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
799
- | `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
800
- | `.pf-m-error` | `.pf-c-form__helper-text` | Modifies text color of helper text for error state. |
801
- | `.pf-m-inactive` | `.pf-c-form__helper-text` | Modifies display of helper text to none. |
802
- | `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
803
- | `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
804
- | `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
805
- | `.pf-m-stack` | `.pf-c-form__group-control` | Modifies form group children to be stacked with space between children. |
806
- | `.pf-m-expanded` | `.pf-c-form__field-group` | Modifies an expandable field group for the expanded state. |
766
+ | Class | Applied to | Outcome |
767
+ | ------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
768
+ | `.pf-c-form` | `<form>` | Initiates a standard form. **Required** |
769
+ | `.pf-c-form__section` | `<div>, <section>` | Initiates a form section. |
770
+ | `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title. |
771
+ | `.pf-c-form__group` | `<div>` | Initiates a form group. |
772
+ | `.pf-c-form__group-label` | `<div>` | Initiates a form group label. |
773
+ | `.pf-c-form__label` | `<label>`, `<span>` | Initiates a form label. **Required** |
774
+ | `.pf-c-form__label-text` | `<span>` | Initiates a form label text. **Required** |
775
+ | `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
776
+ | `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
777
+ | `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
778
+ | `.pf-c-form__group-label-help` | `<button>` | Initiates a field level help button. |
779
+ | `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
780
+ | `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
781
+ | `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
782
+ | `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon. |
783
+ | `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
784
+ | `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
785
+ | `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
786
+ | `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
787
+ | `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
788
+ | `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
789
+ | `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
790
+ | `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
791
+ | `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
792
+ | `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
793
+ | `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
794
+ | `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
795
+ | `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
796
+ | `.pf-m-limit-width` | `.pf-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
797
+ | `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
798
+ | `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
799
+ | `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
800
+ | `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
801
+ | `.pf-m-error` | `.pf-c-form__helper-text` | Modifies text color of helper text for error state. |
802
+ | `.pf-m-inactive` | `.pf-c-form__helper-text` | Modifies display of helper text to none. |
803
+ | `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
804
+ | `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
805
+ | `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
806
+ | `.pf-m-stack` | `.pf-c-form__group-control` | Modifies form group children to be stacked with space between children. |
807
+ | `.pf-m-expanded` | `.pf-c-form__field-group` | Modifies an expandable field group for the expanded state. |
808
+ | `--pf-c-form--m-limit-width--MaxWidth` | `.pf-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |
package/docs/components/Login/examples/Login.md CHANGED
@@ -49,7 +49,7 @@ wrapperTag: div
49
49
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
50
50
  </header>
51
51
  <div class="pf-c-login__main-body">
52
- <form novalidate class="pf-c-form">
52
+ <form class="pf-c-form" novalidate>
53
53
  <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
54
54
  <span class="pf-c-form__helper-text-icon">
55
55
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
@@ -271,7 +271,7 @@ wrapperTag: div
271
271
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
272
272
  </header>
273
273
  <div class="pf-c-login__main-body">
274
- <form novalidate class="pf-c-form">
274
+ <form class="pf-c-form" novalidate>
275
275
  <p class="pf-c-form__helper-text pf-m-error" aria-live="polite">
276
276
  <span class="pf-c-form__helper-text-icon">
277
277
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
@@ -499,7 +499,7 @@ wrapperTag: div
499
499
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
500
500
  </header>
501
501
  <div class="pf-c-login__main-body">
502
- <form novalidate class="pf-c-form">
502
+ <form class="pf-c-form" novalidate>
503
503
  <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
504
504
  <span class="pf-c-form__helper-text-icon">
505
505
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
@@ -732,7 +732,7 @@ wrapperTag: div
732
732
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
733
733
  </header>
734
734
  <div class="pf-c-login__main-body">
735
- <form novalidate class="pf-c-form">
735
+ <form class="pf-c-form" novalidate>
736
736
  <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
737
737
  <span class="pf-c-form__helper-text-icon">
738
738
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
@@ -1011,7 +1011,7 @@ wrapperTag: div
1011
1011
  </div>
1012
1012
  </header>
1013
1013
  <div class="pf-c-login__main-body">
1014
- <form novalidate class="pf-c-form">
1014
+ <form class="pf-c-form" novalidate>
1015
1015
  <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
1016
1016
  <span class="pf-c-form__helper-text-icon">
1017
1017
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
package/docs/components/SearchInput/examples/SearchInput.md CHANGED
@@ -250,7 +250,7 @@ cssPrefix: pf-c-search-input
250
250
  </div>
251
251
  <div class="pf-c-search-input__menu">
252
252
  <div class="pf-c-search-input__menu-body">
253
- <form novalidate class="pf-c-form">
253
+ <form class="pf-c-form" novalidate>
254
254
  <div class="pf-c-form__group">
255
255
  <div class="pf-c-form__group-label">
256
256
  <label
@@ -483,7 +483,7 @@ cssPrefix: pf-c-search-input
483
483
  </div>
484
484
  <div class="pf-c-search-input__menu">
485
485
  <div class="pf-c-search-input__menu-body">
486
- <form novalidate class="pf-c-form">
486
+ <form class="pf-c-form" novalidate>
487
487
  <div class="pf-c-form__group">
488
488
  <div class="pf-c-form__group-label">
489
489
  <label
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -798,7 +798,7 @@ cssPrefix: pf-c-text-input-group
798
798
  <div class="pf-c-panel pf-m-raised">
799
799
  <div class="pf-c-panel__main">
800
800
  <div class="pf-c-panel__main-body">
801
- <form novalidate class="pf-c-form">
801
+ <form class="pf-c-form" novalidate>
802
802
  <div class="pf-c-form__group">
803
803
  <div class="pf-c-form__group-label">
804
804
  <label
@@ -1047,7 +1047,7 @@ cssPrefix: pf-c-text-input-group
1047
1047
  <div class="pf-c-panel pf-m-raised">
1048
1048
  <div class="pf-c-panel__main">
1049
1049
  <div class="pf-c-panel__main-body">
1050
- <form novalidate class="pf-c-form">
1050
+ <form class="pf-c-form" novalidate>
1051
1051
  <div class="pf-c-form__group">
1052
1052
  <div class="pf-c-form__group-label">
1053
1053
  <label
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -77,7 +77,7 @@ wrapperTag: div
77
77
  </nav>
78
78
  <main class="pf-c-wizard__main" tabindex="0">
79
79
  <div class="pf-c-wizard__main-body">
80
- <form novalidate class="pf-c-form">
80
+ <form class="pf-c-form pf-m-limit-width" novalidate>
81
81
  <div class="pf-c-form__group">
82
82
  <div class="pf-c-form__group-label">
83
83
  <label class="pf-c-form__label" for="wizard-basic-form-field1">
@@ -304,7 +304,7 @@ wrapperTag: div
304
304
  </nav>
305
305
  <main class="pf-c-wizard__main" tabindex="0">
306
306
  <div class="pf-c-wizard__main-body">
307
- <form novalidate class="pf-c-form">
307
+ <form class="pf-c-form pf-m-limit-width" novalidate>
308
308
  <div class="pf-c-form__group">
309
309
  <div class="pf-c-form__group-label">
310
310
  <label class="pf-c-form__label" for="-form-field1">
@@ -538,7 +538,7 @@ wrapperTag: div
538
538
  class="pf-c-button pf-u-hidden pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
539
539
  type="button"
540
540
  >Open drawer</button>
541
- <form novalidate class="pf-c-form">
541
+ <form class="pf-c-form pf-m-limit-width" novalidate>
542
542
  <div class="pf-c-form__group">
543
543
  <div class="pf-c-form__group-label">
544
544
  <label
@@ -813,7 +813,7 @@ wrapperTag: div
813
813
  </nav>
814
814
  <main class="pf-c-wizard__main" tabindex="0">
815
815
  <div class="pf-c-wizard__main-body">
816
- <form novalidate class="pf-c-form">
816
+ <form class="pf-c-form pf-m-limit-width" novalidate>
817
817
  <div class="pf-c-form__group">
818
818
  <div class="pf-c-form__group-label">
819
819
  <label
@@ -1071,7 +1071,7 @@ wrapperTag: div
1071
1071
  </nav>
1072
1072
  <main class="pf-c-wizard__main" tabindex="0">
1073
1073
  <div class="pf-c-wizard__main-body">
1074
- <form novalidate class="pf-c-form">
1074
+ <form class="pf-c-form pf-m-limit-width" novalidate>
1075
1075
  <div class="pf-c-form__group">
1076
1076
  <div class="pf-c-form__group-label">
1077
1077
  <label
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -1856,7 +1856,7 @@ section: components
1856
1856
  </div>
1857
1857
  </section>
1858
1858
  <section class="pf-c-page__main-section pf-m-light">
1859
- <form novalidate class="pf-c-form pf-m-limit-width pf-m-horizontal">
1859
+ <form class="pf-c-form pf-m-limit-width pf-m-horizontal" novalidate>
1860
1860
  <div class="pf-c-form__alert">
1861
1861
  <div
1862
1862
  class="pf-c-alert pf-m-danger pf-m-inline"
@@ -2888,7 +2888,7 @@ section: components
2888
2888
  </div>
2889
2889
  </section>
2890
2890
  <section class="pf-c-page__main-section pf-m-light">
2891
- <form novalidate class="pf-c-form pf-m-limit-width">
2891
+ <form class="pf-c-form pf-m-limit-width" novalidate>
2892
2892
  <div class="pf-c-form__alert">
2893
2893
  <div
2894
2894
  class="pf-c-alert pf-m-danger pf-m-inline"
package/docs/demos/Button/examples/Button.md CHANGED
@@ -7,7 +7,7 @@ cssPrefix: pf-d-button
7
7
  ### Progress button - initial
8
8
 
9
9
  ```html
10
- <form novalidate class="pf-c-form pf-m-limit-width">
10
+ <form class="pf-c-form pf-m-limit-width" novalidate>
11
11
  <div class="pf-c-form__group">
12
12
  <div class="pf-c-form__group-label">
13
13
  <label class="pf-c-form__label" for="progress-button-example-login">
@@ -59,7 +59,7 @@ cssPrefix: pf-d-button
59
59
  ### Progress button - loading
60
60
 
61
61
  ```html
62
- <form novalidate class="pf-c-form pf-m-limit-width">
62
+ <form class="pf-c-form pf-m-limit-width" novalidate>
63
63
  <div class="pf-c-form__group">
64
64
  <div class="pf-c-form__group-label">
65
65
  <label
@@ -130,7 +130,7 @@ cssPrefix: pf-d-button
130
130
  ### Progress button - complete
131
131
 
132
132
  ```html
133
- <form novalidate class="pf-c-form pf-m-limit-width">
133
+ <form class="pf-c-form pf-m-limit-width" novalidate>
134
134
  <div class="pf-c-form__group">
135
135
  <div class="pf-c-form__group-label">
136
136
  <label
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -6,7 +6,7 @@ section: components
6
6
  ### Basic
7
7
 
8
8
  ```html
9
- <form novalidate class="pf-c-form">
9
+ <form class="pf-c-form" novalidate>
10
10
  <div class="pf-c-form__group">
11
11
  <div class="pf-c-form__group-label">
12
12
  <label class="pf-c-form__label" for="form-demo-basic-name">
@@ -191,7 +191,7 @@ section: components
191
191
  ### Horizontal
192
192
 
193
193
  ```html
194
- <form novalidate class="pf-c-form pf-m-horizontal">
194
+ <form class="pf-c-form pf-m-horizontal" novalidate>
195
195
  <div class="pf-c-form__group -name">
196
196
  <div class="pf-c-form__group-label">
197
197
  <label class="pf-c-form__label" for="form-demo-horizontal">
@@ -324,7 +324,7 @@ section: components
324
324
  ### Grid
325
325
 
326
326
  ```html
327
- <form novalidate class="pf-c-form">
327
+ <form class="pf-c-form" novalidate>
328
328
  <div class="pf-l-grid pf-m-all-6-col-on-md pf-m-gutter">
329
329
  <div class="pf-c-form__group">
330
330
  <div class="pf-c-form__group-label">
@@ -511,7 +511,7 @@ section: components
511
511
  ### Sections with repeatable fields
512
512
 
513
513
  ```html
514
- <form novalidate class="pf-c-form">
514
+ <form class="pf-c-form" novalidate>
515
515
  <section
516
516
  class="pf-c-form__section"
517
517
  role="group"
@@ -762,7 +762,7 @@ section: components
762
762
  ### Complex form
763
763
 
764
764
  ```html
765
- <form novalidate class="pf-c-form">
765
+ <form class="pf-c-form" novalidate>
766
766
  <div class="pf-c-form__group">
767
767
  <div class="pf-c-form__group-label">
768
768
  <label
package/docs/demos/HelperText/examples/HelperText.md CHANGED
@@ -7,7 +7,7 @@ section: components
7
7
  ### Helper text on a form
8
8
 
9
9
  ```html
10
- <form novalidate class="pf-c-form">
10
+ <form class="pf-c-form" novalidate>
11
11
  <div class="pf-c-form__group">
12
12
  <div class="pf-c-form__group-label">
13
13
  <label class="pf-c-form__label" for="helper-text-form-name">
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -5675,7 +5675,7 @@ section: components
5675
5675
  <p>Enter your personal information below to create an account.</p>
5676
5676
  </div>
5677
5677
  <div class="pf-c-modal-box__body">
5678
- <form novalidate class="pf-c-form" id="-form">
5678
+ <form class="pf-c-form" novalidate id="-form">
5679
5679
  <div class="pf-c-form__group">
5680
5680
  <div class="pf-c-form__group-label">
5681
5681
  <label class="pf-c-form__label" for="-form-name">
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -6,7 +6,7 @@ section: demos
6
6
  ### Provide a generated password
7
7
 
8
8
  ```html
9
- <form novalidate class="pf-c-form">
9
+ <form class="pf-c-form" novalidate>
10
10
  <div class="pf-c-form__group">
11
11
  <div class="pf-c-form__group-label pf-m-info">
12
12
  <div class="pf-c-form__group-label-main">
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -7,7 +7,7 @@ section: demos
7
7
  ### Initial state
8
8
 
9
9
  ```html
10
- <form novalidate class="pf-c-form">
10
+ <form class="pf-c-form" novalidate>
11
11
  <div class="pf-c-form__group">
12
12
  <div class="pf-c-form__group-label pf-m-info">
13
13
  <div class="pf-c-form__group-label-main">
@@ -86,7 +86,7 @@ section: demos
86
86
  ### Invalid password
87
87
 
88
88
  ```html
89
- <form novalidate class="pf-c-form">
89
+ <form class="pf-c-form" novalidate>
90
90
  <div class="pf-c-form__group">
91
91
  <div class="pf-c-form__group-label pf-m-info">
92
92
  <div class="pf-c-form__group-label-main">
@@ -165,7 +165,7 @@ section: demos
165
165
  ### Valid, weak password
166
166
 
167
167
  ```html
168
- <form novalidate class="pf-c-form">
168
+ <form class="pf-c-form" novalidate>
169
169
  <div class="pf-c-form__group">
170
170
  <div class="pf-c-form__group-label pf-m-info">
171
171
  <div class="pf-c-form__group-label-main">
@@ -253,7 +253,7 @@ section: demos
253
253
  ### Valid, strong password
254
254
 
255
255
  ```html
256
- <form novalidate class="pf-c-form">
256
+ <form class="pf-c-form" novalidate>
257
257
  <div class="pf-c-form__group">
258
258
  <div class="pf-c-form__group-label pf-m-info">
259
259
  <div class="pf-c-form__group-label-main">