@patternfly/patternfly 4.180.1 → 4.181.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.
- package/assets/images/status-icon-sprite.svg +38 -0
- package/components/FormControl/form-control.css +26 -0
- package/components/FormControl/form-control.scss +30 -1
- package/components/Menu/menu.css +10 -0
- package/components/Menu/menu.scss +14 -0
- package/docs/components/FormControl/examples/FormControl.md +151 -0
- package/docs/components/Menu/examples/Menu.md +67 -2
- package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
- package/docs/demos/Masthead/examples/Masthead.md +2 -2
- package/docs/demos/Page/examples/Page.md +7 -7
- package/docs/demos/Table/examples/Table.md +13 -13
- package/package.json +1 -1
- package/patternfly-no-reset.css +36 -0
- package/patternfly.css +36 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
|
|
3
|
+
<defs>
|
|
4
|
+
<style><![CDATA[
|
|
5
|
+
.sprite { display: none; }
|
|
6
|
+
.sprite:target { display: inline; }
|
|
7
|
+
]]></style>
|
|
8
|
+
</defs>
|
|
9
|
+
|
|
10
|
+
<g class="sprite" id="success">
|
|
11
|
+
<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="#3e8635" />
|
|
12
|
+
</g>
|
|
13
|
+
|
|
14
|
+
<g class="sprite" id="warning">
|
|
15
|
+
<path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" fill="#f0ab00" />
|
|
16
|
+
</g>
|
|
17
|
+
|
|
18
|
+
<g class="sprite" id="invalid">
|
|
19
|
+
<path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" fill="#c9190b" />
|
|
20
|
+
</g>
|
|
21
|
+
|
|
22
|
+
<g class="sprite" id="select">
|
|
23
|
+
<path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" fill="#151515" />
|
|
24
|
+
</g>
|
|
25
|
+
|
|
26
|
+
<g class="sprite" id="search">
|
|
27
|
+
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" fill="#6a6e73" />
|
|
28
|
+
</g>
|
|
29
|
+
|
|
30
|
+
<g class="sprite" id="calendar">
|
|
31
|
+
<path d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z" fill="#6a6e73" />
|
|
32
|
+
</g>
|
|
33
|
+
|
|
34
|
+
<g class="sprite" id="clock">
|
|
35
|
+
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z" fill="#6a6e73" />
|
|
36
|
+
</g>
|
|
37
|
+
|
|
38
|
+
</svg>
|
|
@@ -118,6 +118,18 @@
|
|
|
118
118
|
--pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
119
119
|
--pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
120
120
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
121
|
+
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#success");
|
|
122
|
+
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#warning");
|
|
123
|
+
--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#invalid");
|
|
124
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#select");
|
|
125
|
+
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#search");
|
|
126
|
+
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#calendar");
|
|
127
|
+
--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#clock");
|
|
128
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
|
|
129
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
|
|
130
|
+
--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
|
|
131
|
+
--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
|
|
132
|
+
--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
|
|
121
133
|
color: var(--pf-global--Color--100);
|
|
122
134
|
width: var(--pf-c-form-control--Width);
|
|
123
135
|
padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
|
|
@@ -231,6 +243,20 @@
|
|
|
231
243
|
.pf-c-form-control.pf-m-icon.pf-m-clock {
|
|
232
244
|
--pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
|
|
233
245
|
}
|
|
246
|
+
.pf-c-form-control.pf-m-icon-sprite {
|
|
247
|
+
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
248
|
+
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
249
|
+
--pf-c-form-control--m-invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl);
|
|
250
|
+
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
251
|
+
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
252
|
+
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|
|
253
|
+
--pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
|
|
254
|
+
--pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
|
|
255
|
+
--pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
|
|
256
|
+
--pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
|
|
257
|
+
--pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
|
|
258
|
+
--pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
|
|
259
|
+
}
|
|
234
260
|
select.pf-c-form-control {
|
|
235
261
|
--pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
|
|
236
262
|
--pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
|
|
@@ -55,7 +55,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
|
|
|
55
55
|
--pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
|
|
56
56
|
--pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100);
|
|
57
57
|
|
|
58
|
-
//
|
|
58
|
+
// expanded
|
|
59
59
|
--pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
60
60
|
--pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
|
|
61
61
|
--pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
|
|
@@ -183,6 +183,20 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
|
|
|
183
183
|
// Textarea invalid
|
|
184
184
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft); // update to use --pf-c-form-control--inset--base at breaking change
|
|
185
185
|
|
|
186
|
+
// Icon sprite
|
|
187
|
+
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#success");
|
|
188
|
+
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#warning");
|
|
189
|
+
--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#invalid");
|
|
190
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#select");
|
|
191
|
+
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#search");
|
|
192
|
+
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#calendar");
|
|
193
|
+
--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("#{$pf-global--image-path}/status-icon-sprite.svg#clock");
|
|
194
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
|
|
195
|
+
--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
|
|
196
|
+
--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
|
|
197
|
+
--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + #{pf-size-prem(1px)});
|
|
198
|
+
--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
|
|
199
|
+
|
|
186
200
|
// This component always needs to be light
|
|
187
201
|
@include pf-t-light;
|
|
188
202
|
|
|
@@ -335,6 +349,21 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
|
|
|
335
349
|
}
|
|
336
350
|
}
|
|
337
351
|
|
|
352
|
+
&.pf-m-icon-sprite {
|
|
353
|
+
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
354
|
+
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
355
|
+
--pf-c-form-control--m-invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl);
|
|
356
|
+
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
357
|
+
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
358
|
+
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|
|
359
|
+
--pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
|
|
360
|
+
--pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
|
|
361
|
+
--pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
|
|
362
|
+
--pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
|
|
363
|
+
--pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
|
|
364
|
+
--pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
|
|
365
|
+
}
|
|
366
|
+
|
|
338
367
|
@at-root select#{&} {
|
|
339
368
|
--pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
|
|
340
369
|
--pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
|
package/components/Menu/menu.css
CHANGED
|
@@ -146,6 +146,7 @@
|
|
|
146
146
|
--pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
|
|
147
147
|
--pf-c-menu__item-description--Color: var(--pf-global--Color--200);
|
|
148
148
|
--pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
|
|
149
|
+
--pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
|
|
149
150
|
--pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
|
|
150
151
|
--pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
|
|
151
152
|
--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
|
|
@@ -508,6 +509,9 @@
|
|
|
508
509
|
.pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
|
|
509
510
|
opacity: 1;
|
|
510
511
|
}
|
|
512
|
+
label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
513
|
+
cursor: pointer;
|
|
514
|
+
}
|
|
511
515
|
|
|
512
516
|
.pf-c-menu__item-main {
|
|
513
517
|
display: flex;
|
|
@@ -552,6 +556,12 @@
|
|
|
552
556
|
margin-right: var(--pf-c-menu__item-icon--MarginRight);
|
|
553
557
|
}
|
|
554
558
|
|
|
559
|
+
.pf-c-menu__item-check {
|
|
560
|
+
display: flex;
|
|
561
|
+
align-items: center;
|
|
562
|
+
margin-right: var(--pf-c-menu__item-check--MarginRight);
|
|
563
|
+
}
|
|
564
|
+
|
|
555
565
|
.pf-c-menu__item-toggle-icon {
|
|
556
566
|
padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
|
|
557
567
|
padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
|
|
@@ -109,6 +109,9 @@
|
|
|
109
109
|
// Icon
|
|
110
110
|
--pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
|
|
111
111
|
|
|
112
|
+
// Check
|
|
113
|
+
--pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
|
|
114
|
+
|
|
112
115
|
// Toggle icon
|
|
113
116
|
--pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
|
|
114
117
|
--pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
|
|
@@ -599,6 +602,10 @@
|
|
|
599
602
|
opacity: 1;
|
|
600
603
|
}
|
|
601
604
|
}
|
|
605
|
+
|
|
606
|
+
@at-root label#{&}:where(:not([disabled], .pf-m-disabled)) {
|
|
607
|
+
cursor: pointer;
|
|
608
|
+
}
|
|
602
609
|
}
|
|
603
610
|
|
|
604
611
|
.pf-c-menu__item-main {
|
|
@@ -648,6 +655,13 @@
|
|
|
648
655
|
margin-right: var(--pf-c-menu__item-icon--MarginRight);
|
|
649
656
|
}
|
|
650
657
|
|
|
658
|
+
// Check
|
|
659
|
+
.pf-c-menu__item-check {
|
|
660
|
+
display: flex;
|
|
661
|
+
align-items: center;
|
|
662
|
+
margin-right: var(--pf-c-menu__item-check--MarginRight);
|
|
663
|
+
}
|
|
664
|
+
|
|
651
665
|
// Toggle icon
|
|
652
666
|
.pf-c-menu__item-toggle-icon {
|
|
653
667
|
padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
|
|
@@ -281,6 +281,156 @@ cssPrefix: pf-c-form-control
|
|
|
281
281
|
|
|
282
282
|
```
|
|
283
283
|
|
|
284
|
+
### Icon sprite
|
|
285
|
+
|
|
286
|
+
**Note:** The icons for the success, invalid, calendar, etc varations in form control elemements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `.pf-m-icon-sprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
|
|
287
|
+
|
|
288
|
+
```html isBeta
|
|
289
|
+
<input
|
|
290
|
+
class="pf-c-form-control pf-m-success pf-m-icon-sprite"
|
|
291
|
+
type="text"
|
|
292
|
+
value="Success"
|
|
293
|
+
id="input-success"
|
|
294
|
+
aria-label="Success state input example"
|
|
295
|
+
/>
|
|
296
|
+
<br />
|
|
297
|
+
<br />
|
|
298
|
+
<input
|
|
299
|
+
class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
|
|
300
|
+
type="text"
|
|
301
|
+
value="Warning"
|
|
302
|
+
id="input-warning"
|
|
303
|
+
aria-label="Warning state input example"
|
|
304
|
+
/>
|
|
305
|
+
<br />
|
|
306
|
+
<br />
|
|
307
|
+
<input
|
|
308
|
+
class="pf-c-form-control pf-m-icon-sprite"
|
|
309
|
+
required
|
|
310
|
+
type="text"
|
|
311
|
+
value="Error"
|
|
312
|
+
id="input-error"
|
|
313
|
+
aria-invalid="true"
|
|
314
|
+
aria-label="Error state input example"
|
|
315
|
+
/>
|
|
316
|
+
<br />
|
|
317
|
+
<br />
|
|
318
|
+
<input
|
|
319
|
+
class="pf-c-form-control pf-m-search pf-m-icon-sprite"
|
|
320
|
+
type="search"
|
|
321
|
+
value="Search"
|
|
322
|
+
id="input-search"
|
|
323
|
+
name="search-input"
|
|
324
|
+
aria-label="Search input example"
|
|
325
|
+
/>
|
|
326
|
+
<br />
|
|
327
|
+
<br />
|
|
328
|
+
<input
|
|
329
|
+
class="pf-c-form-control pf-m-icon pf-m-calendar pf-m-icon-sprite"
|
|
330
|
+
type="text"
|
|
331
|
+
value="Calendar"
|
|
332
|
+
id="input-calendar"
|
|
333
|
+
name="input-calendar"
|
|
334
|
+
aria-label="Calendar input example"
|
|
335
|
+
/>
|
|
336
|
+
<br />
|
|
337
|
+
<br />
|
|
338
|
+
<input
|
|
339
|
+
class="pf-c-form-control pf-m-icon pf-m-clock pf-m-icon-sprite"
|
|
340
|
+
type="text"
|
|
341
|
+
value="Clock"
|
|
342
|
+
id="input-clock"
|
|
343
|
+
name="input-clock"
|
|
344
|
+
aria-label="Clock input example"
|
|
345
|
+
/>
|
|
346
|
+
<br />
|
|
347
|
+
<br />
|
|
348
|
+
<select
|
|
349
|
+
class="pf-c-form-control pf-m-success pf-m-icon-sprite"
|
|
350
|
+
id="select-group-success"
|
|
351
|
+
name="select-group-success"
|
|
352
|
+
aria-label="Success state select group example"
|
|
353
|
+
>
|
|
354
|
+
<option value>Valid option</option>
|
|
355
|
+
<optgroup label="Group 1">
|
|
356
|
+
<option value="Option 1">The first option</option>
|
|
357
|
+
<option value="Option 2">The second option</option>
|
|
358
|
+
</optgroup>
|
|
359
|
+
<optgroup label="Group 2">
|
|
360
|
+
<option value="Option 3">The third option</option>
|
|
361
|
+
<option value="Option 4">The fourth option</option>
|
|
362
|
+
</optgroup>
|
|
363
|
+
</select>
|
|
364
|
+
<br />
|
|
365
|
+
<br />
|
|
366
|
+
<select
|
|
367
|
+
class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
|
|
368
|
+
id="select-group-warning"
|
|
369
|
+
name="select-group-warning"
|
|
370
|
+
aria-label="Warning state select group example"
|
|
371
|
+
>
|
|
372
|
+
<option value>Warning option</option>
|
|
373
|
+
<optgroup label="Group 1">
|
|
374
|
+
<option value="Option 1">The first option</option>
|
|
375
|
+
<option value="Option 2">The second option</option>
|
|
376
|
+
</optgroup>
|
|
377
|
+
<optgroup label="Group 2">
|
|
378
|
+
<option value="Option 3">The third option</option>
|
|
379
|
+
<option value="Option 4">The fourth option</option>
|
|
380
|
+
</optgroup>
|
|
381
|
+
</select>
|
|
382
|
+
<br />
|
|
383
|
+
<br />
|
|
384
|
+
<select
|
|
385
|
+
class="pf-c-form-control"
|
|
386
|
+
required
|
|
387
|
+
aria-invalid="true"
|
|
388
|
+
id="select-group-error"
|
|
389
|
+
name="select-group-error"
|
|
390
|
+
aria-label="Error state select group example"
|
|
391
|
+
>
|
|
392
|
+
<option value>Invalid option</option>
|
|
393
|
+
<optgroup label="Group 1">
|
|
394
|
+
<option value="Option 1">The first option</option>
|
|
395
|
+
<option value="Option 2">The second option</option>
|
|
396
|
+
</optgroup>
|
|
397
|
+
<optgroup label="Group 2">
|
|
398
|
+
<option value="Option 3">The third option</option>
|
|
399
|
+
<option value="Option 4">The fourth option</option>
|
|
400
|
+
</optgroup>
|
|
401
|
+
</select>
|
|
402
|
+
<br />
|
|
403
|
+
<br />
|
|
404
|
+
<textarea
|
|
405
|
+
class="pf-c-form-control pf-m-success pf-m-icon-sprite"
|
|
406
|
+
name="textarea-success"
|
|
407
|
+
id="textarea-success"
|
|
408
|
+
aria-label="Success state textarea example"
|
|
409
|
+
>Success
|
|
410
|
+
</textarea>
|
|
411
|
+
<br />
|
|
412
|
+
<br />
|
|
413
|
+
<textarea
|
|
414
|
+
class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
|
|
415
|
+
name="textarea-warning"
|
|
416
|
+
id="textarea-warning"
|
|
417
|
+
aria-label="Warning state textarea example"
|
|
418
|
+
>Warning
|
|
419
|
+
</textarea>
|
|
420
|
+
<br />
|
|
421
|
+
<br />
|
|
422
|
+
<textarea
|
|
423
|
+
class="pf-c-form-control"
|
|
424
|
+
required
|
|
425
|
+
name="textarea-error"
|
|
426
|
+
id="textarea-error"
|
|
427
|
+
aria-label="Error state textarea example"
|
|
428
|
+
aria-invalid="true"
|
|
429
|
+
>Error
|
|
430
|
+
</textarea>
|
|
431
|
+
|
|
432
|
+
```
|
|
433
|
+
|
|
284
434
|
## Documentation
|
|
285
435
|
|
|
286
436
|
### Accessibility
|
|
@@ -301,6 +451,7 @@ cssPrefix: pf-c-form-control
|
|
|
301
451
|
| `.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. |
|
|
302
452
|
| `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
|
|
303
453
|
| `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
|
|
454
|
+
| `.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. |
|
|
304
455
|
| `.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. |
|
|
305
456
|
| `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
|
|
306
457
|
| `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
|
|
@@ -94,6 +94,70 @@ cssPrefix: pf-c-menu
|
|
|
94
94
|
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
+
### With checkbox
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<div class="pf-c-menu">
|
|
101
|
+
<div class="pf-c-menu__content">
|
|
102
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
103
|
+
<li class="pf-c-menu__list-item" role="menuitem">
|
|
104
|
+
<label class="pf-c-menu__item" for="with-checkbox-example-check-1">
|
|
105
|
+
<span class="pf-c-menu__item-main">
|
|
106
|
+
<span class="pf-c-menu__item-check">
|
|
107
|
+
<span class="pf-c-check pf-m-standalone">
|
|
108
|
+
<input
|
|
109
|
+
class="pf-c-check__input"
|
|
110
|
+
type="checkbox"
|
|
111
|
+
id="with-checkbox-example-check-1"
|
|
112
|
+
name="with-checkbox-example-check-1"
|
|
113
|
+
/>
|
|
114
|
+
</span>
|
|
115
|
+
</span>
|
|
116
|
+
<span class="pf-c-menu__item-text">Checkbox 1</span>
|
|
117
|
+
</span>
|
|
118
|
+
</label>
|
|
119
|
+
</li>
|
|
120
|
+
<li class="pf-c-menu__list-item" role="menuitem">
|
|
121
|
+
<label class="pf-c-menu__item" for="with-checkbox-example-check-2">
|
|
122
|
+
<span class="pf-c-menu__item-main">
|
|
123
|
+
<span class="pf-c-menu__item-check">
|
|
124
|
+
<span class="pf-c-check pf-m-standalone">
|
|
125
|
+
<input
|
|
126
|
+
class="pf-c-check__input"
|
|
127
|
+
type="checkbox"
|
|
128
|
+
id="with-checkbox-example-check-2"
|
|
129
|
+
name="with-checkbox-example-check-2"
|
|
130
|
+
/>
|
|
131
|
+
</span>
|
|
132
|
+
</span>
|
|
133
|
+
<span class="pf-c-menu__item-text">Checkbox 2</span>
|
|
134
|
+
</span>
|
|
135
|
+
</label>
|
|
136
|
+
</li>
|
|
137
|
+
<li class="pf-c-menu__list-item pf-m-disabled" role="menuitem">
|
|
138
|
+
<label class="pf-c-menu__item" for="with-checkbox-example-check-3">
|
|
139
|
+
<span class="pf-c-menu__item-main">
|
|
140
|
+
<span class="pf-c-menu__item-check">
|
|
141
|
+
<span class="pf-c-check pf-m-standalone">
|
|
142
|
+
<input
|
|
143
|
+
class="pf-c-check__input"
|
|
144
|
+
type="checkbox"
|
|
145
|
+
id="with-checkbox-example-check-3"
|
|
146
|
+
name="with-checkbox-example-check-3"
|
|
147
|
+
disabled
|
|
148
|
+
/>
|
|
149
|
+
</span>
|
|
150
|
+
</span>
|
|
151
|
+
<span class="pf-c-menu__item-text">Checkbox 3</span>
|
|
152
|
+
</span>
|
|
153
|
+
</label>
|
|
154
|
+
</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
|
|
97
161
|
### Scrollable
|
|
98
162
|
|
|
99
163
|
```html
|
|
@@ -5967,7 +6031,7 @@ cssPrefix: pf-c-menu
|
|
|
5967
6031
|
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
5968
6032
|
| `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
|
|
5969
6033
|
| `disabled` | `button.pf-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
|
|
5970
|
-
| `role="menuitem"` | `.pf-c-menu__item`
|
|
6034
|
+
| `role="menuitem"` | `.pf-c-menu__item`, `.pf-c-menu__list-item` (checkbox) | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu. |
|
|
5971
6035
|
| `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
|
|
5972
6036
|
| `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
5973
6037
|
| `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
@@ -5986,9 +6050,10 @@ cssPrefix: pf-c-menu
|
|
|
5986
6050
|
| `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
|
|
5987
6051
|
| `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
|
|
5988
6052
|
| `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
|
|
5989
|
-
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`
|
|
6053
|
+
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
|
|
5990
6054
|
| `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
|
|
5991
6055
|
| `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
|
|
6056
|
+
| `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
|
|
5992
6057
|
| `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
|
|
5993
6058
|
| `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
|
|
5994
6059
|
| `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
|
|
@@ -370,7 +370,7 @@ section: components
|
|
|
370
370
|
<button
|
|
371
371
|
class="pf-c-app-launcher__toggle"
|
|
372
372
|
type="button"
|
|
373
|
-
id="-button"
|
|
373
|
+
id="-icon-group--app-launcher-button"
|
|
374
374
|
aria-expanded="false"
|
|
375
375
|
aria-label="Application launcher"
|
|
376
376
|
>
|
|
@@ -1449,7 +1449,7 @@ section: components
|
|
|
1449
1449
|
<button
|
|
1450
1450
|
class="pf-c-app-launcher__toggle"
|
|
1451
1451
|
type="button"
|
|
1452
|
-
id="-button"
|
|
1452
|
+
id="-icon-group--app-launcher-button"
|
|
1453
1453
|
aria-expanded="false"
|
|
1454
1454
|
aria-label="Application launcher"
|
|
1455
1455
|
>
|
|
@@ -2535,7 +2535,7 @@ section: components
|
|
|
2535
2535
|
<button
|
|
2536
2536
|
class="pf-c-app-launcher__toggle"
|
|
2537
2537
|
type="button"
|
|
2538
|
-
id="-button"
|
|
2538
|
+
id="context-selector-in-page-content-demo-masthead-icon-group--app-launcher-button"
|
|
2539
2539
|
aria-expanded="false"
|
|
2540
2540
|
aria-label="Application launcher"
|
|
2541
2541
|
>
|