@patternfly/patternfly 4.212.1 → 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.
- package/components/FormControl/form-control.css +7 -0
- package/components/FormControl/form-control.scss +11 -0
- package/components/Icon/icon.css +119 -0
- package/components/Icon/icon.scss +149 -0
- package/components/ProgressStepper/progress-stepper.css +7 -4
- package/components/ProgressStepper/progress-stepper.scss +7 -4
- package/components/_all.scss +1 -0
- package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
- package/docs/components/FileUpload/examples/FileUpload.md +1 -1
- package/docs/components/Form/examples/Form.md +52 -50
- package/docs/components/FormControl/examples/FormControl.md +46 -25
- package/docs/components/Icon/examples/Icon.md +255 -0
- package/docs/components/LogViewer/examples/LogViewer.md +28 -28
- package/docs/components/Login/examples/Login.md +5 -5
- package/docs/components/SearchInput/examples/SearchInput.md +2 -2
- package/docs/components/TabContent/examples/TabContent.md +21 -11
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
- package/docs/components/Wizard/examples/Wizard.md +5 -5
- package/docs/demos/Alert/examples/Alert.md +2 -2
- package/docs/demos/Button/examples/Button.md +3 -3
- package/docs/demos/Form/examples/BasicForms.md +5 -5
- package/docs/demos/HelperText/examples/HelperText.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +1 -1
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/docs/demos/Wizard/examples/Wizard.md +1960 -748
- package/package.json +1 -1
- package/patternfly-no-reset.css +134 -4
- package/patternfly.css +134 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1120,7 +1120,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1120
1120
|
<div class="pf-c-log-viewer__header">
|
|
1121
1121
|
<div
|
|
1122
1122
|
class="pf-c-toolbar"
|
|
1123
|
-
id="log-viewer-line-number-example-toolbar"
|
|
1123
|
+
id="log-viewer-line-number-chars-example-toolbar"
|
|
1124
1124
|
role="toolbar"
|
|
1125
1125
|
>
|
|
1126
1126
|
<div class="pf-c-toolbar__content">
|
|
@@ -1128,17 +1128,17 @@ cssPrefix: pf-c-log-viewer
|
|
|
1128
1128
|
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
1129
1129
|
<div class="pf-c-select">
|
|
1130
1130
|
<span
|
|
1131
|
-
id="log-viewer-line-number-example-select-menu-label"
|
|
1131
|
+
id="log-viewer-line-number-chars-example-select-menu-label"
|
|
1132
1132
|
hidden
|
|
1133
1133
|
>Choose one</span>
|
|
1134
1134
|
|
|
1135
1135
|
<button
|
|
1136
1136
|
class="pf-c-select__toggle"
|
|
1137
1137
|
type="button"
|
|
1138
|
-
id="log-viewer-line-number-example-select-menu-toggle"
|
|
1138
|
+
id="log-viewer-line-number-chars-example-select-menu-toggle"
|
|
1139
1139
|
aria-haspopup="true"
|
|
1140
1140
|
aria-expanded="false"
|
|
1141
|
-
aria-labelledby="log-viewer-line-number-example-select-menu-label log-viewer-line-number-example-select-menu-toggle"
|
|
1141
|
+
aria-labelledby="log-viewer-line-number-chars-example-select-menu-label log-viewer-line-number-chars-example-select-menu-toggle"
|
|
1142
1142
|
>
|
|
1143
1143
|
<div class="pf-c-select__toggle-wrapper">
|
|
1144
1144
|
<span class="pf-c-select__toggle-text">System log</span>
|
|
@@ -1150,7 +1150,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1150
1150
|
<ul
|
|
1151
1151
|
class="pf-c-select__menu"
|
|
1152
1152
|
role="listbox"
|
|
1153
|
-
aria-labelledby="log-viewer-line-number-example-select-menu-label"
|
|
1153
|
+
aria-labelledby="log-viewer-line-number-chars-example-select-menu-label"
|
|
1154
1154
|
hidden
|
|
1155
1155
|
>
|
|
1156
1156
|
<li role="presentation">
|
|
@@ -1181,7 +1181,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1181
1181
|
type="button"
|
|
1182
1182
|
aria-label="Show filters"
|
|
1183
1183
|
aria-expanded="false"
|
|
1184
|
-
aria-controls="log-viewer-line-number-example-toolbar-expandable-content"
|
|
1184
|
+
aria-controls="log-viewer-line-number-chars-example-toolbar-expandable-content"
|
|
1185
1185
|
>
|
|
1186
1186
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
1187
1187
|
</button>
|
|
@@ -1221,7 +1221,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1221
1221
|
<div class="pf-c-dropdown">
|
|
1222
1222
|
<button
|
|
1223
1223
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1224
|
-
id="log-viewer-line-number-example-dropdown-button"
|
|
1224
|
+
id="log-viewer-line-number-chars-example-dropdown-button"
|
|
1225
1225
|
aria-expanded="false"
|
|
1226
1226
|
type="button"
|
|
1227
1227
|
aria-label="Actions"
|
|
@@ -1258,13 +1258,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1258
1258
|
<input
|
|
1259
1259
|
class="pf-c-check__input"
|
|
1260
1260
|
type="checkbox"
|
|
1261
|
-
id="log-viewer-line-number-example-desktop-check-wrap-lines"
|
|
1262
|
-
name="log-viewer-line-number-example-desktop-check-wrap-lines"
|
|
1261
|
+
id="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
|
|
1262
|
+
name="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
|
|
1263
1263
|
/>
|
|
1264
1264
|
|
|
1265
1265
|
<label
|
|
1266
1266
|
class="pf-c-check__label"
|
|
1267
|
-
for="log-viewer-line-number-example-desktop-check-wrap-lines"
|
|
1267
|
+
for="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
|
|
1268
1268
|
>Wrap lines</label>
|
|
1269
1269
|
</div>
|
|
1270
1270
|
</span>
|
|
@@ -1281,13 +1281,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1281
1281
|
<input
|
|
1282
1282
|
class="pf-c-check__input"
|
|
1283
1283
|
type="checkbox"
|
|
1284
|
-
id="log-viewer-line-number-example-desktop-check-show-timestamps"
|
|
1285
|
-
name="log-viewer-line-number-example-desktop-check-show-timestamps"
|
|
1284
|
+
id="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
|
|
1285
|
+
name="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
|
|
1286
1286
|
/>
|
|
1287
1287
|
|
|
1288
1288
|
<label
|
|
1289
1289
|
class="pf-c-check__label"
|
|
1290
|
-
for="log-viewer-line-number-example-desktop-check-show-timestamps"
|
|
1290
|
+
for="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
|
|
1291
1291
|
>Show timestamps</label>
|
|
1292
1292
|
</div>
|
|
1293
1293
|
</span>
|
|
@@ -1304,13 +1304,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1304
1304
|
<input
|
|
1305
1305
|
class="pf-c-check__input"
|
|
1306
1306
|
type="checkbox"
|
|
1307
|
-
id="log-viewer-line-number-example-desktop-check-line-number"
|
|
1308
|
-
name="log-viewer-line-number-example-desktop-check-line-number"
|
|
1307
|
+
id="log-viewer-line-number-chars-example-desktop-check-line-number"
|
|
1308
|
+
name="log-viewer-line-number-chars-example-desktop-check-line-number"
|
|
1309
1309
|
/>
|
|
1310
1310
|
|
|
1311
1311
|
<label
|
|
1312
1312
|
class="pf-c-check__label"
|
|
1313
|
-
for="log-viewer-line-number-example-desktop-check-line-number"
|
|
1313
|
+
for="log-viewer-line-number-chars-example-desktop-check-line-number"
|
|
1314
1314
|
>Display line number</label>
|
|
1315
1315
|
</div>
|
|
1316
1316
|
</span>
|
|
@@ -1433,7 +1433,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1433
1433
|
<div class="pf-c-dropdown">
|
|
1434
1434
|
<button
|
|
1435
1435
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1436
|
-
id="log-viewer-line-number-example-settings-dropdown-button"
|
|
1436
|
+
id="log-viewer-line-number-chars-example-settings-dropdown-button"
|
|
1437
1437
|
aria-expanded="false"
|
|
1438
1438
|
type="button"
|
|
1439
1439
|
aria-label="Settings"
|
|
@@ -1442,20 +1442,20 @@ cssPrefix: pf-c-log-viewer
|
|
|
1442
1442
|
</button>
|
|
1443
1443
|
<ul
|
|
1444
1444
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1445
|
-
aria-labelledby="log-viewer-line-number-example-settings-dropdown-button"
|
|
1445
|
+
aria-labelledby="log-viewer-line-number-chars-example-settings-dropdown-button"
|
|
1446
1446
|
hidden
|
|
1447
1447
|
>
|
|
1448
1448
|
<li>
|
|
1449
1449
|
<div class="pf-c-dropdown__menu-item">
|
|
1450
1450
|
<label
|
|
1451
1451
|
class="pf-c-check"
|
|
1452
|
-
for="log-viewer-line-number-example-check-wrap-lines"
|
|
1452
|
+
for="log-viewer-line-number-chars-example-check-wrap-lines"
|
|
1453
1453
|
>
|
|
1454
1454
|
<input
|
|
1455
1455
|
class="pf-c-check__input"
|
|
1456
1456
|
type="checkbox"
|
|
1457
|
-
id="log-viewer-line-number-example-check-wrap-lines"
|
|
1458
|
-
name="log-viewer-line-number-example-check-wrap-lines"
|
|
1457
|
+
id="log-viewer-line-number-chars-example-check-wrap-lines"
|
|
1458
|
+
name="log-viewer-line-number-chars-example-check-wrap-lines"
|
|
1459
1459
|
/>
|
|
1460
1460
|
|
|
1461
1461
|
<span class="pf-c-check__label">Wrap lines</span>
|
|
@@ -1466,13 +1466,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1466
1466
|
<div class="pf-c-dropdown__menu-item">
|
|
1467
1467
|
<label
|
|
1468
1468
|
class="pf-c-check"
|
|
1469
|
-
for="log-viewer-line-number-example-check-show-timestamps"
|
|
1469
|
+
for="log-viewer-line-number-chars-example-check-show-timestamps"
|
|
1470
1470
|
>
|
|
1471
1471
|
<input
|
|
1472
1472
|
class="pf-c-check__input"
|
|
1473
1473
|
type="checkbox"
|
|
1474
|
-
id="log-viewer-line-number-example-check-show-timestamps"
|
|
1475
|
-
name="log-viewer-line-number-example-check-show-timestamps"
|
|
1474
|
+
id="log-viewer-line-number-chars-example-check-show-timestamps"
|
|
1475
|
+
name="log-viewer-line-number-chars-example-check-show-timestamps"
|
|
1476
1476
|
/>
|
|
1477
1477
|
|
|
1478
1478
|
<span class="pf-c-check__label">Show timestamps</span>
|
|
@@ -1483,13 +1483,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1483
1483
|
<div class="pf-c-dropdown__menu-item">
|
|
1484
1484
|
<label
|
|
1485
1485
|
class="pf-c-check"
|
|
1486
|
-
for="log-viewer-line-number-example-check-line-number"
|
|
1486
|
+
for="log-viewer-line-number-chars-example-check-line-number"
|
|
1487
1487
|
>
|
|
1488
1488
|
<input
|
|
1489
1489
|
class="pf-c-check__input"
|
|
1490
1490
|
type="checkbox"
|
|
1491
|
-
id="log-viewer-line-number-example-check-line-number"
|
|
1492
|
-
name="log-viewer-line-number-example-check-line-number"
|
|
1491
|
+
id="log-viewer-line-number-chars-example-check-line-number"
|
|
1492
|
+
name="log-viewer-line-number-chars-example-check-line-number"
|
|
1493
1493
|
/>
|
|
1494
1494
|
|
|
1495
1495
|
<span class="pf-c-check__label">Display line number</span>
|
|
@@ -1530,7 +1530,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1530
1530
|
</div>
|
|
1531
1531
|
<div
|
|
1532
1532
|
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
1533
|
-
id="log-viewer-line-number-example-toolbar-expandable-content"
|
|
1533
|
+
id="log-viewer-line-number-chars-example-toolbar-expandable-content"
|
|
1534
1534
|
hidden
|
|
1535
1535
|
>
|
|
1536
1536
|
<div
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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>
|
|
@@ -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
|
|
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
|
|
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
|
|
@@ -7,12 +7,17 @@ cssPrefix: pf-c-tab-content
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<section
|
|
10
|
+
<section
|
|
11
|
+
class="pf-c-tab-content"
|
|
12
|
+
id="basic-tab1-panel"
|
|
13
|
+
role="tabpanel"
|
|
14
|
+
tabindex="0"
|
|
15
|
+
>
|
|
11
16
|
<div class="pf-c-tab-content__body">Panel 1</div>
|
|
12
17
|
</section>
|
|
13
18
|
<section
|
|
14
19
|
class="pf-c-tab-content"
|
|
15
|
-
id="tab2-panel"
|
|
20
|
+
id="basic-tab2-panel"
|
|
16
21
|
role="tabpanel"
|
|
17
22
|
tabindex="0"
|
|
18
23
|
hidden
|
|
@@ -21,7 +26,7 @@ cssPrefix: pf-c-tab-content
|
|
|
21
26
|
</section>
|
|
22
27
|
<section
|
|
23
28
|
class="pf-c-tab-content"
|
|
24
|
-
id="tab3-panel"
|
|
29
|
+
id="basic-tab3-panel"
|
|
25
30
|
role="tabpanel"
|
|
26
31
|
tabindex="0"
|
|
27
32
|
hidden
|
|
@@ -30,7 +35,7 @@ cssPrefix: pf-c-tab-content
|
|
|
30
35
|
</section>
|
|
31
36
|
<section
|
|
32
37
|
class="pf-c-tab-content"
|
|
33
|
-
id="tab4-panel"
|
|
38
|
+
id="basic-tab4-panel"
|
|
34
39
|
role="tabpanel"
|
|
35
40
|
tabindex="0"
|
|
36
41
|
hidden
|
|
@@ -43,12 +48,17 @@ cssPrefix: pf-c-tab-content
|
|
|
43
48
|
### Padding
|
|
44
49
|
|
|
45
50
|
```html
|
|
46
|
-
<section
|
|
51
|
+
<section
|
|
52
|
+
class="pf-c-tab-content"
|
|
53
|
+
id="tab1-panel-with-padding"
|
|
54
|
+
role="tabpanel"
|
|
55
|
+
tabindex="0"
|
|
56
|
+
>
|
|
47
57
|
<div class="pf-c-tab-content__body pf-m-padding">Panel 1</div>
|
|
48
58
|
</section>
|
|
49
59
|
<section
|
|
50
60
|
class="pf-c-tab-content"
|
|
51
|
-
id="tab2-panel"
|
|
61
|
+
id="tab2-panel-with-padding"
|
|
52
62
|
role="tabpanel"
|
|
53
63
|
tabindex="0"
|
|
54
64
|
hidden
|
|
@@ -57,7 +67,7 @@ cssPrefix: pf-c-tab-content
|
|
|
57
67
|
</section>
|
|
58
68
|
<section
|
|
59
69
|
class="pf-c-tab-content"
|
|
60
|
-
id="tab3-panel"
|
|
70
|
+
id="tab3-panel-with-padding"
|
|
61
71
|
role="tabpanel"
|
|
62
72
|
tabindex="0"
|
|
63
73
|
hidden
|
|
@@ -66,7 +76,7 @@ cssPrefix: pf-c-tab-content
|
|
|
66
76
|
</section>
|
|
67
77
|
<section
|
|
68
78
|
class="pf-c-tab-content"
|
|
69
|
-
id="tab4-panel"
|
|
79
|
+
id="tab4-panel-with-padding"
|
|
70
80
|
role="tabpanel"
|
|
71
81
|
tabindex="0"
|
|
72
82
|
hidden
|
|
@@ -89,7 +99,7 @@ cssPrefix: pf-c-tab-content
|
|
|
89
99
|
</section>
|
|
90
100
|
<section
|
|
91
101
|
class="pf-c-tab-content pf-m-light-300"
|
|
92
|
-
id="tab2-panel"
|
|
102
|
+
id="light-300-tab2-panel"
|
|
93
103
|
role="tabpanel"
|
|
94
104
|
tabindex="0"
|
|
95
105
|
hidden
|
|
@@ -98,7 +108,7 @@ cssPrefix: pf-c-tab-content
|
|
|
98
108
|
</section>
|
|
99
109
|
<section
|
|
100
110
|
class="pf-c-tab-content pf-m-light-300"
|
|
101
|
-
id="tab3-panel"
|
|
111
|
+
id="light-300-tab3-panel"
|
|
102
112
|
role="tabpanel"
|
|
103
113
|
tabindex="0"
|
|
104
114
|
hidden
|
|
@@ -107,7 +117,7 @@ cssPrefix: pf-c-tab-content
|
|
|
107
117
|
</section>
|
|
108
118
|
<section
|
|
109
119
|
class="pf-c-tab-content pf-m-light-300"
|
|
110
|
-
id="tab4-panel"
|
|
120
|
+
id="light-300-tab4-panel"
|
|
111
121
|
role="tabpanel"
|
|
112
122
|
tabindex="0"
|
|
113
123
|
hidden
|
|
@@ -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
|
|
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
|
|
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
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
@@ -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
|
|
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
|
|
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"
|
|
@@ -7,7 +7,7 @@ cssPrefix: pf-d-button
|
|
|
7
7
|
### Progress button - initial
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<form
|
|
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
|
|
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
|
|
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
|
|
@@ -6,7 +6,7 @@ section: components
|
|
|
6
6
|
### Basic
|
|
7
7
|
|
|
8
8
|
```html
|
|
9
|
-
<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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
@@ -7,7 +7,7 @@ section: components
|
|
|
7
7
|
### Helper text on a form
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<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">
|
|
@@ -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
|
|
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">
|
|
@@ -6,7 +6,7 @@ section: demos
|
|
|
6
6
|
### Provide a generated password
|
|
7
7
|
|
|
8
8
|
```html
|
|
9
|
-
<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">
|
|
@@ -7,7 +7,7 @@ section: demos
|
|
|
7
7
|
### Initial state
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<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
|
|
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
|
|
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
|
|
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">
|