@patternfly/patternfly 4.214.0 → 4.215.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/RELEASE-NOTES.md +22 -0
- package/components/Banner/banner.css +6 -6
- package/components/Banner/banner.scss +8 -4
- package/components/Banner/themes/dark/banner.scss +5 -1
- package/components/ProgressStepper/progress-stepper.css +7 -4
- package/components/ProgressStepper/progress-stepper.scss +7 -4
- package/docs/components/Banner/examples/Banner.md +91 -19
- package/docs/components/FileUpload/examples/FileUpload.md +1 -1
- package/docs/components/Form/examples/Form.md +52 -50
- package/docs/components/Login/examples/Login.md +5 -5
- package/docs/components/SearchInput/examples/SearchInput.md +2 -2
- 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 +13 -10
- package/patternfly.css +13 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md
CHANGED
|
@@ -3,6 +3,28 @@ id: Release notes
|
|
|
3
3
|
section: developer-resources
|
|
4
4
|
releaseNoteTOC: true
|
|
5
5
|
---
|
|
6
|
+
## 2022.12 release notes (2022-09-14)
|
|
7
|
+
Packages released:
|
|
8
|
+
- [@patternfly/patternfly@v4.215.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.215.1)
|
|
9
|
+
|
|
10
|
+
### Components
|
|
11
|
+
- **Banner:** Added support/docs for status icons and text ([#5075](https://github.com/patternfly/patternfly/pull/5075))
|
|
12
|
+
- **Card:** Updated card title to use RHD font ([#5069](https://github.com/patternfly/patternfly/pull/5069))
|
|
13
|
+
- **Form control:** Added plain read only variant ([#5059](https://github.com/patternfly/patternfly/pull/5059))
|
|
14
|
+
- **Icon:** Added icon component ([#5014](https://github.com/patternfly/patternfly/pull/5014))
|
|
15
|
+
- **Log viewer:** Added support for custom line number col size ([#5068](https://github.com/patternfly/patternfly/pull/5068))
|
|
16
|
+
- **Notification badge:** Added expanded state ([#5048](https://github.com/patternfly/patternfly/pull/5048))
|
|
17
|
+
- **Page:** Set max-height on full height variation ([#5066](https://github.com/patternfly/patternfly/pull/5066))
|
|
18
|
+
- **Progress stepper:** Fixed width and long word wrapping ([#5077](https://github.com/patternfly/patternfly/pull/5077))
|
|
19
|
+
- **Tabs:** Fixed button type for tab link ([#5060](https://github.com/patternfly/patternfly/pull/5060))
|
|
20
|
+
- **Tree view:** Fixed dupe id's between checkbox and selectable examples ([#5061](https://github.com/patternfly/patternfly/pull/5061))
|
|
21
|
+
- **Wizard:** Small docs fixes in wizard demos ([#5078](https://github.com/patternfly/patternfly/pull/5078))
|
|
22
|
+
|
|
23
|
+
### Other
|
|
24
|
+
- **A11y:** Update coverage to include docs ([#5064](https://github.com/patternfly/patternfly/pull/5064))
|
|
25
|
+
- **Docs:** Update hbs id params to be specific to component ([#5062](https://github.com/patternfly/patternfly/pull/5062))
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## 2022.11 release notes (2022-08-25)
|
|
7
29
|
Packages released:
|
|
8
30
|
- [@patternfly/patternfly@v4.210.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.210.2)
|
|
@@ -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
|
}
|
|
@@ -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);
|
|
@@ -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-
|
|
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
|
|
|
@@ -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-
|
|
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-
|
|
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;
|
|
@@ -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-
|
|
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-
|
|
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 {
|
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
50
|
-
|
|
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-
|
|
58
|
-
|
|
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-
|
|
66
|
-
|
|
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-
|
|
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
|
|
83
|
-
|
|
|
84
|
-
| `.pf-c-banner`
|
|
85
|
-
| `.pf-m-
|
|
86
|
-
| `.pf-m-
|
|
87
|
-
| `.pf-m-
|
|
88
|
-
| `.pf-m-
|
|
89
|
-
| `.pf-m-sticky`
|
|
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. |
|
|
@@ -152,7 +152,7 @@ cssPrefix: pf-c-file-upload
|
|
|
152
152
|
### File upload in form with error
|
|
153
153
|
|
|
154
154
|
```html
|
|
155
|
-
<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">
|
|
@@ -7,7 +7,7 @@ cssPrefix: pf-c-form
|
|
|
7
7
|
### Vertically aligned labels
|
|
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="form-vertical-name">
|
|
@@ -39,7 +39,7 @@ cssPrefix: pf-c-form
|
|
|
39
39
|
### Horizontally aligned labels
|
|
40
40
|
|
|
41
41
|
```html
|
|
42
|
-
<form
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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-
|
|
797
|
-
| `.pf-m-
|
|
798
|
-
| `.pf-m-
|
|
799
|
-
| `.pf-m-
|
|
800
|
-
| `.pf-m-
|
|
801
|
-
| `.pf-m-
|
|
802
|
-
| `.pf-m-
|
|
803
|
-
| `.pf-m-
|
|
804
|
-
| `.pf-m-
|
|
805
|
-
| `.pf-m-
|
|
806
|
-
| `.pf-m-
|
|
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. |
|
|
@@ -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
|
|
@@ -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
|