@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.33

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 (37) hide show
  1. package/components/DatePicker/date-picker.css +0 -8
  2. package/components/DatePicker/date-picker.scss +0 -9
  3. package/components/HelperText/helper-text.css +4 -0
  4. package/components/HelperText/helper-text.scss +5 -0
  5. package/components/InputGroup/input-group.css +61 -85
  6. package/components/InputGroup/input-group.scss +55 -61
  7. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  8. package/components/OptionsMenu/options-menu.css +0 -5
  9. package/components/OptionsMenu/options-menu.scss +0 -6
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  11. package/docs/components/DatePicker/examples/DatePicker.md +129 -94
  12. package/docs/components/FileUpload/examples/FileUpload.md +136 -96
  13. package/docs/components/Form/examples/Form.md +94 -73
  14. package/docs/components/HelperText/examples/HelperText.md +13 -24
  15. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  16. package/docs/components/Login/examples/Login.md +67 -30
  17. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  18. package/docs/components/Progress/examples/Progress.md +1 -1
  19. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  20. package/docs/components/Slider/examples/Slider.md +60 -38
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  22. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  23. package/docs/demos/Alert/examples/Alert.md +105 -58
  24. package/docs/demos/DataList/examples/DataList.md +158 -150
  25. package/docs/demos/Form/examples/BasicForms.md +191 -191
  26. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  27. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  29. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +100 -84
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  31. package/docs/demos/Table/examples/Table.md +950 -902
  32. package/docs/demos/Toolbar/examples/Toolbar.md +330 -299
  33. package/package.json +2 -2
  34. package/patternfly-no-reset.css +64 -87
  35. package/patternfly.css +64 -87
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -12,205 +12,255 @@ Use the input group to extend form controls by adding text, buttons, selects, et
12
12
 
13
13
  ```html
14
14
  <div class="pf-c-input-group">
15
- <button
16
- class="pf-c-button pf-m-control"
17
- type="button"
18
- id="textAreaButton1"
19
- >Button</button>
20
- <textarea
21
- class="pf-c-form-control"
22
- name="textarea1"
23
- id="textarea1"
24
- aria-label="Textarea with buttons"
25
- aria-describedby="textAreaButton1"
26
- ></textarea>
27
- <button class="pf-c-button pf-m-control" type="button">Button</button>
15
+ <div class="pf-c-input-group__item">
16
+ <button
17
+ class="pf-c-button pf-m-control"
18
+ type="button"
19
+ id="textAreaButton1"
20
+ >Button</button>
21
+ </div>
22
+ <div class="pf-c-input-group__item pf-m-fill">
23
+ <textarea
24
+ class="pf-c-form-control"
25
+ name="textarea1"
26
+ id="textarea1"
27
+ aria-label="Textarea with buttons"
28
+ aria-describedby="textAreaButton1"
29
+ ></textarea>
30
+ </div>
31
+ <div class="pf-c-input-group__item">
32
+ <button class="pf-c-button pf-m-control" type="button">Button</button>
33
+ </div>
28
34
  </div>
29
35
  <br />
30
36
  <div class="pf-c-input-group">
31
- <textarea
32
- class="pf-c-form-control"
33
- name="textarea2"
34
- id="textarea2"
35
- aria-label="Textarea with button"
36
- aria-describedby="textAreaButton2"
37
- ></textarea>
38
- <button
39
- class="pf-c-button pf-m-control"
40
- type="button"
41
- id="textAreaButton2"
42
- >Button</button>
37
+ <div class="pf-c-input-group__item pf-m-fill">
38
+ <textarea
39
+ class="pf-c-form-control"
40
+ name="textarea2"
41
+ id="textarea2"
42
+ aria-label="Textarea with button"
43
+ aria-describedby="textAreaButton2"
44
+ ></textarea>
45
+ </div>
46
+ <div class="pf-c-input-group__item">
47
+ <button
48
+ class="pf-c-button pf-m-control"
49
+ type="button"
50
+ id="textAreaButton2"
51
+ >Button</button>
52
+ </div>
43
53
  </div>
44
54
  <br />
45
55
  <div class="pf-c-input-group">
46
- <button
47
- class="pf-c-button pf-m-control"
48
- type="button"
49
- id="textAreaButton3"
50
- >Button</button>
51
- <button class="pf-c-button pf-m-control" type="button">Button</button>
52
- <textarea
53
- class="pf-c-form-control"
54
- name="textarea3"
55
- id="textarea3"
56
- aria-label="Textarea with buttons"
57
- aria-describedby="textAreaButton3"
58
- ></textarea>
59
- <button class="pf-c-button pf-m-control" type="button">Button</button>
56
+ <div class="pf-c-input-group__item">
57
+ <button
58
+ class="pf-c-button pf-m-control"
59
+ type="button"
60
+ id="textAreaButton3"
61
+ >Button</button>
62
+ </div>
63
+ <div class="pf-c-input-group__item">
64
+ <button class="pf-c-button pf-m-control" type="button">Button</button>
65
+ </div>
66
+ <div class="pf-c-input-group__item pf-m-fill">
67
+ <textarea
68
+ class="pf-c-form-control"
69
+ name="textarea3"
70
+ id="textarea3"
71
+ aria-label="Textarea with buttons"
72
+ aria-describedby="textAreaButton3"
73
+ ></textarea>
74
+ </div>
75
+ <div class="pf-c-input-group__item">
76
+ <button class="pf-c-button pf-m-control" type="button">Button</button>
77
+ </div>
60
78
  </div>
61
79
  <br />
62
80
  <div class="pf-c-input-group">
63
- <div class="pf-c-select" style="width: 100px;">
64
- <span id="select-example-collapsed1-label" hidden>Choose one</span>
81
+ <div class="pf-c-input-group__item">
82
+ <div class="pf-c-select" style="width: 100px;">
83
+ <span id="select-example-collapsed1-label" hidden>Choose one</span>
84
+
85
+ <button
86
+ class="pf-c-select__toggle"
87
+ type="button"
88
+ id="select-example-collapsed1-toggle"
89
+ aria-haspopup="true"
90
+ aria-expanded="false"
91
+ aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
92
+ >
93
+ <div class="pf-c-select__toggle-wrapper">
94
+ <span class="pf-c-select__toggle-text">Select</span>
95
+ </div>
96
+ <span class="pf-c-select__toggle-arrow">
97
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
98
+ </span>
99
+ </button>
65
100
 
101
+ <ul
102
+ class="pf-c-select__menu"
103
+ role="listbox"
104
+ aria-labelledby="select-example-collapsed1-label"
105
+ hidden
106
+ style="width: 100px;"
107
+ >
108
+ <li role="presentation">
109
+ <button class="pf-c-select__menu-item" role="option">Running</button>
110
+ </li>
111
+ <li role="presentation">
112
+ <button
113
+ class="pf-c-select__menu-item pf-m-selected"
114
+ role="option"
115
+ aria-selected="true"
116
+ >
117
+ Stopped
118
+ <span class="pf-c-select__menu-item-icon">
119
+ <i class="fas fa-check" aria-hidden="true"></i>
120
+ </span>
121
+ </button>
122
+ </li>
123
+ <li role="presentation">
124
+ <button class="pf-c-select__menu-item" role="option">Down</button>
125
+ </li>
126
+ <li role="presentation">
127
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
128
+ </li>
129
+ <li role="presentation">
130
+ <button class="pf-c-select__menu-item" role="option">Needs maintenance</button>
131
+ </li>
132
+ </ul>
133
+ </div>
134
+ </div>
135
+ <div class="pf-c-input-group__item pf-m-fill">
136
+ <input
137
+ class="pf-c-form-control"
138
+ type="text"
139
+ id="textInput4"
140
+ name="textInput4"
141
+ aria-label="Input with select and button"
142
+ aria-describedby="inputSelectButton1"
143
+ />
144
+ </div>
145
+ <div class="pf-c-input-group__item">
66
146
  <button
67
- class="pf-c-select__toggle"
147
+ class="pf-c-button pf-m-control"
68
148
  type="button"
69
- id="select-example-collapsed1-toggle"
70
- aria-haspopup="true"
71
- aria-expanded="false"
72
- aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
73
- >
74
- <div class="pf-c-select__toggle-wrapper">
75
- <span class="pf-c-select__toggle-text">Select</span>
76
- </div>
77
- <span class="pf-c-select__toggle-arrow">
78
- <i class="fas fa-caret-down" aria-hidden="true"></i>
79
- </span>
80
- </button>
81
-
82
- <ul
83
- class="pf-c-select__menu"
84
- role="listbox"
85
- aria-labelledby="select-example-collapsed1-label"
86
- hidden
87
- style="width: 100px;"
88
- >
89
- <li role="presentation">
90
- <button class="pf-c-select__menu-item" role="option">Running</button>
91
- </li>
92
- <li role="presentation">
93
- <button
94
- class="pf-c-select__menu-item pf-m-selected"
95
- role="option"
96
- aria-selected="true"
97
- >
98
- Stopped
99
- <span class="pf-c-select__menu-item-icon">
100
- <i class="fas fa-check" aria-hidden="true"></i>
101
- </span>
102
- </button>
103
- </li>
104
- <li role="presentation">
105
- <button class="pf-c-select__menu-item" role="option">Down</button>
106
- </li>
107
- <li role="presentation">
108
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
109
- </li>
110
- <li role="presentation">
111
- <button class="pf-c-select__menu-item" role="option">Needs maintenance</button>
112
- </li>
113
- </ul>
114
- </div>
115
- <input
116
- class="pf-c-form-control"
117
- type="text"
118
- id="textInput4"
119
- name="textInput4"
120
- aria-label="Input with select and button"
121
- aria-describedby="inputSelectButton1"
122
- />
123
- <button
124
- class="pf-c-button pf-m-control"
125
- type="button"
126
- id="inputSelectButton1"
127
- >Button</button>
149
+ id="inputSelectButton1"
150
+ >Button</button>
151
+ </div>
128
152
  </div>
129
153
  <br />
130
154
  <div class="pf-c-input-group">
131
- <span class="pf-c-input-group__text">
132
- <i class="fas fa-dollar-sign" aria-hidden="true"></i>
133
- </span>
134
- <input
135
- class="pf-c-form-control"
136
- type="number"
137
- id="textInput5"
138
- name="textInput5"
139
- aria-label=" Dollar amount input example"
140
- />
141
- <span class="pf-c-input-group__text">.00</span>
155
+ <div class="pf-c-input-group__item pf-m-box">
156
+ <span class="pf-c-input-group__text">
157
+ <i class="fas fa-dollar-sign" aria-hidden="true"></i>
158
+ </span>
159
+ </div>
160
+ <div class="pf-c-input-group__item pf-m-fill">
161
+ <input
162
+ class="pf-c-form-control"
163
+ type="number"
164
+ id="textInput5"
165
+ name="textInput5"
166
+ aria-label=" Dollar amount input example"
167
+ />
168
+ </div>
169
+ <div class="pf-c-input-group__item pf-m-box">
170
+ <span class="pf-c-input-group__text">.00</span>
171
+ </div>
142
172
  </div>
143
173
  <br />
144
174
  <div class="pf-c-input-group">
145
- <input
146
- class="pf-c-form-control"
147
- type="email"
148
- id="textInput6"
149
- name="textInput6"
150
- aria-label="Email input field"
151
- aria-describedby="email-example"
152
- />
153
- <span class="pf-c-input-group__text" id="email-example">@example.com</span>
175
+ <div class="pf-c-input-group__item pf-m-fill">
176
+ <input
177
+ class="pf-c-form-control"
178
+ type="email"
179
+ id="textInput6"
180
+ name="textInput6"
181
+ aria-label="Email input field"
182
+ aria-describedby="email-example"
183
+ />
184
+ </div>
185
+ <div class="pf-c-input-group__item pf-m-box">
186
+ <span class="pf-c-input-group__text" id="email-example">@example.com</span>
187
+ </div>
154
188
  </div>
155
189
  <br />
156
190
  <div class="pf-c-input-group">
157
- <span class="pf-c-input-group__text">
158
- <i class="fas fa-at" aria-hidden="true"></i>
159
- </span>
160
- <input
161
- class="pf-c-form-control"
162
- required
163
- type="email"
164
- id="textInput7"
165
- name="textInput7"
166
- aria-invalid="true"
167
- aria-label="Error state username example"
168
- />
191
+ <div class="pf-c-input-group__item pf-m-box">
192
+ <span class="pf-c-input-group__text">
193
+ <i class="fas fa-at" aria-hidden="true"></i>
194
+ </span>
195
+ </div>
196
+ <div class="pf-c-input-group__item pf-m-fill">
197
+ <input
198
+ class="pf-c-form-control"
199
+ required
200
+ type="email"
201
+ id="textInput7"
202
+ name="textInput7"
203
+ aria-invalid="true"
204
+ aria-label="Error state username example"
205
+ />
206
+ </div>
169
207
  </div>
170
208
  <br />
171
209
  <div class="pf-c-input-group">
172
- <input
173
- class="pf-c-form-control"
174
- type="text"
175
- id="textInput13"
176
- name="textInput13"
177
- aria-label="Input example with popover"
178
- />
179
- <button
180
- class="pf-c-button pf-m-control"
181
- type="button"
182
- aria-label="Popover for input"
183
- >
184
- <i class="fas fa-question-circle" aria-hidden="true"></i>
185
- </button>
210
+ <div class="pf-c-input-group__item pf-m-fill">
211
+ <input
212
+ class="pf-c-form-control"
213
+ type="text"
214
+ id="textInput13"
215
+ name="textInput13"
216
+ aria-label="Input example with popover"
217
+ />
218
+ </div>
219
+ <div class="pf-c-input-group__item">
220
+ <button
221
+ class="pf-c-button pf-m-control"
222
+ type="button"
223
+ aria-label="Popover for input"
224
+ >
225
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
226
+ </button>
227
+ </div>
186
228
  </div>
187
229
  <br />
188
230
  <div class="pf-c-input-group">
189
- <input
190
- class="pf-c-form-control"
191
- type="text"
192
- id="textInput12"
193
- name="textInput12"
194
- aria-label="Input example with popover"
195
- />
196
- <button
197
- class="pf-c-button pf-m-plain"
198
- type="button"
199
- aria-label="Popover for input"
200
- >
201
- <i class="fas fa-question-circle" aria-hidden="true"></i>
202
- </button>
231
+ <div class="pf-c-input-group__item pf-m-fill">
232
+ <input
233
+ class="pf-c-form-control"
234
+ type="text"
235
+ id="textInput12"
236
+ name="textInput12"
237
+ aria-label="Input example with popover"
238
+ />
239
+ </div>
240
+ <div class="pf-c-input-group__item pf-m-plain">
241
+ <button
242
+ class="pf-c-button pf-m-plain"
243
+ type="button"
244
+ aria-label="Popover for input"
245
+ >
246
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
247
+ </button>
248
+ </div>
203
249
  </div>
204
250
  <br />
205
251
  <div class="pf-c-input-group">
206
- <input
207
- class="pf-c-form-control"
208
- type="number"
209
- id="textInput14"
210
- name="textInput14"
211
- aria-label="Input example with plain unit"
212
- />
213
- <span class="pf-c-input-group__text pf-m-plain">%</span>
252
+ <div class="pf-c-input-group__item pf-m-fill">
253
+ <input
254
+ class="pf-c-form-control"
255
+ type="number"
256
+ id="textInput14"
257
+ name="textInput14"
258
+ aria-label="Input example with plain unit"
259
+ />
260
+ </div>
261
+ <div class="pf-c-input-group__item pf-m-box pf-m-plain">
262
+ <span class="pf-c-input-group__text">%</span>
263
+ </div>
214
264
  </div>
215
265
 
216
266
  ```
package/docs/components/Login/examples/Login.md CHANGED
@@ -50,12 +50,18 @@ wrapperTag: div
50
50
  </header>
51
51
  <div class="pf-c-login__main-body">
52
52
  <form class="pf-c-form" novalidate>
53
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
54
- <span class="pf-c-form__helper-text-icon">
55
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
56
- </span>
57
- Invalid login credentials.
58
- </p>
53
+ <div class="pf-c-form__helper-text" aria-live="polite">
54
+ <div class="pf-c-helper-text pf-m-hidden">
55
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
56
+ <span class="pf-c-helper-text__item-icon">
57
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
58
+ </span>
59
+ <span
60
+ class="pf-c-helper-text__item-text"
61
+ >Invalid login credentials.</span>
62
+ </div>
63
+ </div>
64
+ </div>
59
65
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
60
66
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
61
67
 
@@ -266,12 +272,18 @@ wrapperTag: div
266
272
  </header>
267
273
  <div class="pf-c-login__main-body">
268
274
  <form class="pf-c-form" novalidate>
269
- <p class="pf-c-form__helper-text pf-m-error" aria-live="polite">
270
- <span class="pf-c-form__helper-text-icon">
271
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
272
- </span>
273
- Invalid login credentials.
274
- </p>
275
+ <div class="pf-c-form__helper-text" aria-live="polite">
276
+ <div class="pf-c-helper-text">
277
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
278
+ <span class="pf-c-helper-text__item-icon">
279
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
280
+ </span>
281
+ <span
282
+ class="pf-c-helper-text__item-text"
283
+ >Invalid login credentials.</span>
284
+ </div>
285
+ </div>
286
+ </div>
275
287
  <div class="pf-c-form__group"><label
276
288
  class="pf-c-form__label"
277
289
  for="invalid-login-demo-form-username"
@@ -488,12 +500,18 @@ wrapperTag: div
488
500
  </header>
489
501
  <div class="pf-c-login__main-body">
490
502
  <form class="pf-c-form" novalidate>
491
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
492
- <span class="pf-c-form__helper-text-icon">
493
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
494
- </span>
495
- Invalid login credentials.
496
- </p>
503
+ <div class="pf-c-form__helper-text" aria-live="polite">
504
+ <div class="pf-c-helper-text pf-m-hidden">
505
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
506
+ <span class="pf-c-helper-text__item-icon">
507
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
508
+ </span>
509
+ <span
510
+ class="pf-c-helper-text__item-text"
511
+ >Invalid login credentials.</span>
512
+ </div>
513
+ </div>
514
+ </div>
497
515
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
498
516
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
499
517
 
@@ -715,12 +733,25 @@ wrapperTag: div
715
733
  </header>
716
734
  <div class="pf-c-login__main-body">
717
735
  <form class="pf-c-form" novalidate>
718
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
719
- <span class="pf-c-form__helper-text-icon">
720
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
721
- </span>
736
+ <div class="pf-c-form__helper-text" aria-live="polite">
737
+ <div class="pf-c-helper-text pf-m-hidden">
738
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
739
+ <span class="pf-c-helper-text__item-icon">
740
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
741
+ </span>
742
+ <span
743
+ class="pf-c-helper-text__item-text"
744
+ >Invalid login credentials.</span>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ <div
749
+ class="pf-c-form__helper-text pf-m-error pf-m-hidden"
750
+ aria-live="polite"
751
+ >
752
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
722
753
  Invalid login credentials.
723
- </p>
754
+ </div>
724
755
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
725
756
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
726
757
 
@@ -988,12 +1019,18 @@ wrapperTag: div
988
1019
  </header>
989
1020
  <div class="pf-c-login__main-body">
990
1021
  <form class="pf-c-form" novalidate>
991
- <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
992
- <span class="pf-c-form__helper-text-icon">
993
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
994
- </span>
995
- Invalid login credentials.
996
- </p>
1022
+ <div class="pf-c-form__helper-text" aria-live="polite">
1023
+ <div class="pf-c-helper-text pf-m-hidden">
1024
+ <div class="pf-c-helper-text__item pf-m-error" id="-helper">
1025
+ <span class="pf-c-helper-text__item-icon">
1026
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1027
+ </span>
1028
+ <span
1029
+ class="pf-c-helper-text__item-text"
1030
+ >Invalid login credentials.</span>
1031
+ </div>
1032
+ </div>
1033
+ </div>
997
1034
  <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
998
1035
  <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
999
1036
 
@@ -1176,7 +1213,7 @@ wrapperTag: div
1176
1213
  | `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1177
1214
  | `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1178
1215
  | `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
1179
- | `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
1216
+ | `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden`. **Required** |
1180
1217
  | `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1181
1218
  | `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1182
1219
  | `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |