@patternfly/patternfly 4.213.0 → 4.215.0

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 (28) hide show
  1. package/components/Banner/banner.css +6 -6
  2. package/components/Banner/banner.scss +8 -4
  3. package/components/Banner/themes/dark/banner.scss +5 -1
  4. package/components/FormControl/form-control.css +7 -0
  5. package/components/FormControl/form-control.scss +11 -0
  6. package/components/ProgressStepper/progress-stepper.css +7 -4
  7. package/components/ProgressStepper/progress-stepper.scss +7 -4
  8. package/docs/components/Banner/examples/Banner.md +91 -19
  9. package/docs/components/FileUpload/examples/FileUpload.md +1 -1
  10. package/docs/components/Form/examples/Form.md +52 -50
  11. package/docs/components/FormControl/examples/FormControl.md +34 -13
  12. package/docs/components/Login/examples/Login.md +5 -5
  13. package/docs/components/SearchInput/examples/SearchInput.md +2 -2
  14. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
  15. package/docs/components/Wizard/examples/Wizard.md +5 -5
  16. package/docs/demos/Alert/examples/Alert.md +2 -2
  17. package/docs/demos/Button/examples/Button.md +3 -3
  18. package/docs/demos/Form/examples/BasicForms.md +5 -5
  19. package/docs/demos/HelperText/examples/HelperText.md +1 -1
  20. package/docs/demos/Modal/examples/Modal.md +1 -1
  21. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  22. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  23. package/docs/demos/Wizard/examples/Wizard.md +1960 -748
  24. package/package.json +1 -1
  25. package/patternfly-no-reset.css +20 -10
  26. package/patternfly.css +20 -10
  27. package/patternfly.min.css +1 -1
  28. package/patternfly.min.css.map +1 -1
package/components/Banner/banner.css CHANGED
@@ -1,4 +1,4 @@
1
- .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info {
1
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
2
2
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
3
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
4
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -78,17 +78,17 @@
78
78
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
79
79
  }
80
80
  }
81
- .pf-c-banner.pf-m-info {
81
+ .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
82
82
  color: var(--pf-global--Color--100);
83
83
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
84
84
  }
85
- .pf-c-banner.pf-m-danger {
85
+ .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
86
86
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
87
87
  }
88
- .pf-c-banner.pf-m-success {
88
+ .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
89
89
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
90
90
  }
91
- .pf-c-banner.pf-m-warning {
91
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
92
92
  color: var(--pf-global--Color--100);
93
93
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
94
94
  }
@@ -156,6 +156,6 @@
156
156
  :where(.pf-theme-dark) .pf-c-banner {
157
157
  color: var(--pf-global--Color--100);
158
158
  }
159
- :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
159
+ :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-blue, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-red, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-green, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning, :where(.pf-theme-dark) .pf-c-banner.pf-m-gold {
160
160
  color: var(--pf-global--palette--black-900);
161
161
  }
package/components/Banner/banner.scss CHANGED
@@ -40,21 +40,25 @@
40
40
  white-space: nowrap;
41
41
  background-color: var(--pf-c-banner--BackgroundColor);
42
42
 
43
- &.pf-m-info {
43
+ &.pf-m-info,
44
+ &.pf-m-blue {
44
45
  @include pf-t-light;
45
46
 
46
47
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
47
48
  }
48
49
 
49
- &.pf-m-danger {
50
+ &.pf-m-danger,
51
+ &.pf-m-red {
50
52
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
51
53
  }
52
54
 
53
- &.pf-m-success {
55
+ &.pf-m-success,
56
+ &.pf-m-green {
54
57
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
55
58
  }
56
59
 
57
- &.pf-m-warning {
60
+ &.pf-m-warning,
61
+ &.pf-m-gold {
58
62
  @include pf-t-light;
59
63
 
60
64
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
package/components/Banner/themes/dark/banner.scss CHANGED
@@ -3,9 +3,13 @@
3
3
  @mixin pf-theme-dark-banner() {
4
4
  .pf-c-banner {
5
5
  &.pf-m-info,
6
+ &.pf-m-blue,
6
7
  &.pf-m-danger,
8
+ &.pf-m-red,
7
9
  &.pf-m-success,
8
- &.pf-m-warning {
10
+ &.pf-m-green,
11
+ &.pf-m-warning,
12
+ &.pf-m-gold {
9
13
  color: var(--pf-global--palette--black-900);
10
14
  }
11
15
 
package/components/FormControl/form-control.css CHANGED
@@ -43,6 +43,8 @@
43
43
  --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
44
44
  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
45
45
  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
46
+ --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
47
+ --pf-c-form-control--readonly--m-plain--inset--base: 0;
46
48
  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
47
49
  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
48
50
  --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
@@ -163,6 +165,11 @@
163
165
  --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
164
166
  --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
165
167
  }
168
+ .pf-c-form-control[readonly].pf-m-plain {
169
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
170
+ --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
171
+ border-color: transparent;
172
+ }
166
173
  .pf-c-form-control:hover {
167
174
  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
168
175
  }
package/components/FormControl/form-control.scss CHANGED
@@ -77,6 +77,10 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
77
77
  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
78
78
  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
79
79
 
80
+ // input readonly plain style
81
+ --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
82
+ --pf-c-form-control--readonly--m-plain--inset--base: 0;
83
+
80
84
  // Input m-success -- rename vars to m-success in breaking change release
81
85
  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
82
86
  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
@@ -241,6 +245,13 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
241
245
  --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
242
246
  }
243
247
  }
248
+
249
+ &.pf-m-plain {
250
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
251
+ --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
252
+
253
+ border-color: transparent;
254
+ }
244
255
  }
245
256
 
246
257
  &:hover {
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/Banner/examples/Banner.md CHANGED
@@ -6,24 +6,26 @@ cssPrefix: pf-c-banner
6
6
 
7
7
  ### Basic
8
8
 
9
+ Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
10
+
9
11
  ```html
10
12
  <div class="pf-c-banner">Default banner</div>
11
13
 
12
14
  <br />
13
15
 
14
- <div class="pf-c-banner pf-m-info">Info banner</div>
16
+ <div class="pf-c-banner pf-m-blue">Blue banner</div>
15
17
 
16
18
  <br />
17
19
 
18
- <div class="pf-c-banner pf-m-danger">Danger banner</div>
20
+ <div class="pf-c-banner pf-m-red">Red banner</div>
19
21
 
20
22
  <br />
21
23
 
22
- <div class="pf-c-banner pf-m-success">Success banner</div>
24
+ <div class="pf-c-banner pf-m-green">Green banner</div>
23
25
 
24
26
  <br />
25
27
 
26
- <div class="pf-c-banner pf-m-warning">Warning banner</div>
28
+ <div class="pf-c-banner pf-m-gold">Gold banner</div>
27
29
 
28
30
  ```
29
31
 
@@ -46,24 +48,24 @@ cssPrefix: pf-c-banner
46
48
  >disabled link</a>
47
49
  </div>
48
50
  <br />
49
- <div class="pf-c-banner pf-m-info">
50
- Info banner with an
51
+ <div class="pf-c-banner pf-m-blue">
52
+ Blue banner with an
51
53
  <button
52
54
  class="pf-c-button pf-m-inline pf-m-link"
53
55
  type="button"
54
56
  >inline link button</button>
55
57
  </div>
56
58
  <br />
57
- <div class="pf-c-banner pf-m-warning">
58
- Warning banner with an
59
+ <div class="pf-c-banner pf-m-gold">
60
+ Gold banner with an
59
61
  <a
60
62
  class="pf-c-button pf-m-inline pf-m-link"
61
63
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
62
64
  >inline link button (anchor)</a>
63
65
  </div>
64
66
  <br />
65
- <div class="pf-c-banner pf-m-danger">
66
- Danger banner with a
67
+ <div class="pf-c-banner pf-m-red">
68
+ Red banner with a
67
69
  <button
68
70
  class="pf-c-button pf-m-link pf-m-inline"
69
71
  type="button"
@@ -73,17 +75,87 @@ cssPrefix: pf-c-banner
73
75
 
74
76
  ```
75
77
 
78
+ ### Status
79
+
80
+ When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-screen-reader` or an equivalent.
81
+
82
+ ```html
83
+ <div class="pf-c-banner">
84
+ <div class="pf-l-flex pf-m-space-items-sm">
85
+ <div class="pf-l-flex__item">
86
+ <span class="pf-screen-reader">Default banner:</span>
87
+
88
+ <i class="fas fa-bell" aria-hidden="true"></i>
89
+ </div>
90
+ <div class="pf-l-flex__item">Default banner</div>
91
+ </div>
92
+ </div>
93
+
94
+ <br />
95
+
96
+ <div class="pf-c-banner pf-m-blue">
97
+ <div class="pf-l-flex pf-m-space-items-sm">
98
+ <div class="pf-l-flex__item">
99
+ <span class="pf-screen-reader">Info banner:</span>
100
+
101
+ <i class="fas fa-info-circle" aria-hidden="true"></i>
102
+ </div>
103
+ <div class="pf-l-flex__item">Info banner</div>
104
+ </div>
105
+ </div>
106
+
107
+ <br />
108
+
109
+ <div class="pf-c-banner pf-m-red">
110
+ <div class="pf-l-flex pf-m-space-items-sm">
111
+ <div class="pf-l-flex__item">
112
+ <span class="pf-screen-reader">Danger banner:</span>
113
+
114
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
115
+ </div>
116
+ <div class="pf-l-flex__item">Danger banner</div>
117
+ </div>
118
+ </div>
119
+
120
+ <br />
121
+
122
+ <div class="pf-c-banner pf-m-green">
123
+ <div class="pf-l-flex pf-m-space-items-sm">
124
+ <div class="pf-l-flex__item">
125
+ <span class="pf-screen-reader">Success banner:</span>
126
+
127
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
128
+ </div>
129
+ <div class="pf-l-flex__item">Success banner</div>
130
+ </div>
131
+ </div>
132
+
133
+ <br />
134
+
135
+ <div class="pf-c-banner pf-m-gold">
136
+ <div class="pf-l-flex pf-m-space-items-sm">
137
+ <div class="pf-l-flex__item">
138
+ <span class="pf-screen-reader">Warning banner:</span>
139
+
140
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
141
+ </div>
142
+ <div class="pf-l-flex__item">Warning banner</div>
143
+ </div>
144
+ </div>
145
+
146
+ ```
147
+
76
148
  ## Documentation
77
149
 
78
- Add a modifier class to the default banner to change the presentation: `.pf-m-info`, `.pf-m-danger`, `.pf-m-success`, or `.pf-m-warning`.
150
+ Add a modifier class to the default banner to change the presentation: `.pf-m-blue`, `.pf-m-red`, `.pf-m-green`, or `.pf-m-gold`.
79
151
 
80
152
  ### Usage
81
153
 
82
- | Class | Applied to | Outcome |
83
- | --------------- | -------------- | --------------------------------------------------------- |
84
- | `.pf-c-banner` | `<div>` | Initiates a banner. **Required** |
85
- | `.pf-m-info` | `.pf-c-banner` | Modifies banner for info styles. |
86
- | `.pf-m-danger` | `.pf-c-banner` | Modifies banner for danger styles. |
87
- | `.pf-m-success` | `.pf-c-banner` | Modifies banner for success styles. |
88
- | `.pf-m-warning` | `.pf-c-banner` | Modifies banner for warning styles. |
89
- | `.pf-m-sticky` | `.pf-c-banner` | Modifies banner to be sticky to the top of its container. |
154
+ | Class | Applied to | Outcome |
155
+ | -------------- | -------------- | --------------------------------------------------------- |
156
+ | `.pf-c-banner` | `<div>` | Initiates a banner. **Required** |
157
+ | `.pf-m-blue` | `.pf-c-banner` | Modifies banner for blue styling. |
158
+ | `.pf-m-red` | `.pf-c-banner` | Modifies banner for red styling. |
159
+ | `.pf-m-green` | `.pf-c-banner` | Modifies banner for green styling. |
160
+ | `.pf-m-gold` | `.pf-c-banner` | Modifies banner for gold styling. |
161
+ | `.pf-m-sticky` | `.pf-c-banner` | Modifies banner to be sticky to the top of its container. |
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/FormControl/examples/FormControl.md CHANGED
@@ -39,6 +39,16 @@ cssPrefix: pf-c-form-control
39
39
  />
40
40
  <br />
41
41
  <br />
42
+ <input
43
+ class="pf-c-form-control pf-m-plain"
44
+ readonly
45
+ type="text"
46
+ value="Readonly plain"
47
+ id="input-readonly-plain"
48
+ aria-label="Readonly plain input example"
49
+ />
50
+ <br />
51
+ <br />
42
52
  <input
43
53
  class="pf-c-form-control"
44
54
  disabled
@@ -266,6 +276,16 @@ cssPrefix: pf-c-form-control
266
276
  </textarea>
267
277
  <br />
268
278
  <br />
279
+ <textarea
280
+ class="pf-c-form-control pf-m-plain"
281
+ readonly
282
+ name="textarea-readonly-plain"
283
+ id="textarea-readonly-plain"
284
+ aria-label="Readonly plain textarea example"
285
+ >Readonly plain
286
+ </textarea>
287
+ <br />
288
+ <br />
269
289
  <textarea
270
290
  class="pf-c-form-control"
271
291
  disabled
@@ -487,16 +507,17 @@ cssPrefix: pf-c-form-control
487
507
 
488
508
  ### Usage
489
509
 
490
- | Class | Applied to | Outcome |
491
- | ------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
492
- | `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
493
- | `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
494
- | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
495
- | `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
496
- | `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
497
- | `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
498
- | `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
499
- | `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
500
- | `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
501
- | `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
502
- | `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
510
+ | Class | Applied to | Outcome |
511
+ | ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
512
+ | `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
513
+ | `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
514
+ | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
515
+ | `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
516
+ | `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
517
+ | `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
518
+ | `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
519
+ | `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
520
+ | `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
521
+ | `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
522
+ | `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
523
+ | `.pf-m-plain` | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |