@patternfly/patternfly 4.180.1 → 4.182.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/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/Masthead/masthead.css +21 -27
- package/components/Masthead/masthead.scss +21 -27
- package/components/Menu/menu.css +10 -0
- package/components/Menu/menu.scss +14 -0
- package/components/MenuToggle/menu-toggle.css +135 -1
- package/components/MenuToggle/menu-toggle.scss +201 -2
- package/docs/components/FormControl/examples/FormControl.md +151 -0
- package/docs/components/Menu/examples/Menu.md +67 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
- package/docs/components/Table/examples/Table.md +137 -48
- package/docs/demos/ContextSelector/examples/ContextSelector.md +6 -6
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
- package/docs/demos/Masthead/examples/Masthead.md +4 -4
- package/docs/demos/Page/examples/Page.md +14 -14
- package/docs/demos/Table/examples/Table.md +26 -26
- package/package.json +1 -1
- package/patternfly-no-reset.css +192 -28
- package/patternfly.css +192 -28
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -111,6 +111,45 @@
|
|
|
111
111
|
--pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
|
|
112
112
|
--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
|
|
113
113
|
|
|
114
|
+
// Split button
|
|
115
|
+
--pf-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
116
|
+
|
|
117
|
+
// Split button, child
|
|
118
|
+
--pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
119
|
+
--pf-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-global--Color--dark-200);
|
|
120
|
+
--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
121
|
+
--pf-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-global--spacer--sm);
|
|
122
|
+
--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
|
|
123
|
+
|
|
124
|
+
// Split button, action
|
|
125
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
|
|
126
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-global--BorderColor--300);
|
|
127
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--Left: 0;
|
|
128
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
129
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-global--BorderColor--200);
|
|
130
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
131
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
|
|
132
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
133
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
|
|
134
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
135
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor: var(--pf-global--active-color--100);
|
|
136
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-global--BorderRadius--sm);
|
|
137
|
+
|
|
138
|
+
// Split button action, primary
|
|
139
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
|
|
140
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
|
|
141
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
|
|
142
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
|
|
143
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
|
|
144
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
|
|
145
|
+
|
|
146
|
+
// Split button action, secondary
|
|
147
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
|
|
148
|
+
|
|
149
|
+
// Split button, controls, check
|
|
150
|
+
--pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
|
|
151
|
+
--pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
|
|
152
|
+
|
|
114
153
|
position: relative;
|
|
115
154
|
display: inline-flex;
|
|
116
155
|
align-items: center;
|
|
@@ -154,7 +193,6 @@
|
|
|
154
193
|
--pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
|
|
155
194
|
--pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
|
|
156
195
|
|
|
157
|
-
|
|
158
196
|
&,
|
|
159
197
|
&::before {
|
|
160
198
|
border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
|
|
@@ -246,7 +284,8 @@
|
|
|
246
284
|
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
|
|
247
285
|
}
|
|
248
286
|
|
|
249
|
-
&:disabled
|
|
287
|
+
&:disabled,
|
|
288
|
+
&.pf-m-disabled {
|
|
250
289
|
--pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
|
|
251
290
|
--pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
|
|
252
291
|
--pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
|
|
@@ -274,6 +313,166 @@
|
|
|
274
313
|
|
|
275
314
|
height: 100%;
|
|
276
315
|
}
|
|
316
|
+
|
|
317
|
+
&.pf-m-split-button {
|
|
318
|
+
--pf-c-menu-toggle__toggle-icon--MarginRight: 0;
|
|
319
|
+
|
|
320
|
+
padding: 0; // pass padding to children
|
|
321
|
+
|
|
322
|
+
> * {
|
|
323
|
+
position: relative;
|
|
324
|
+
padding: var(--pf-c-menu-toggle--PaddingTop) var(--pf-c-menu-toggle--PaddingRight) var(--pf-c-menu-toggle--PaddingBottom) var(--pf-c-menu-toggle--PaddingLeft);
|
|
325
|
+
|
|
326
|
+
&:first-child {
|
|
327
|
+
padding-right: var(--pf-c-menu-toggle--m-split-button--first-child--PaddingRight);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
&:where(:not(.pf-m-action)) {
|
|
332
|
+
> :last-child {
|
|
333
|
+
padding-left: var(--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft);
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
> .pf-c-check {
|
|
338
|
+
--pf-c-menu-toggle--PaddingRight: 0;
|
|
339
|
+
--pf-c-check__input--MarginTop: 0;
|
|
340
|
+
--pf-c-check__label--Color: var(--pf-c-check__label--Color, inherit);
|
|
341
|
+
|
|
342
|
+
align-items: center;
|
|
343
|
+
align-self: stretch;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
// Split button, active
|
|
347
|
+
&.pf-m-action {
|
|
348
|
+
// stylelint-disable max-nesting-depth
|
|
349
|
+
&:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > * {
|
|
350
|
+
&::after {
|
|
351
|
+
position: absolute;
|
|
352
|
+
top: 0;
|
|
353
|
+
right: 0;
|
|
354
|
+
bottom: 0;
|
|
355
|
+
left: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--Left);
|
|
356
|
+
pointer-events: none;
|
|
357
|
+
content: "";
|
|
358
|
+
border-bottom: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
&:hover {
|
|
362
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth);
|
|
363
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
&:focus {
|
|
367
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth);
|
|
368
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
&:active,
|
|
372
|
+
&.pf-m-active {
|
|
373
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth);
|
|
374
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor);
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
// stylelint-enable
|
|
378
|
+
|
|
379
|
+
// Split button, primary
|
|
380
|
+
&.pf-m-primary {
|
|
381
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor);
|
|
382
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
|
|
383
|
+
|
|
384
|
+
// stylelint-disable max-nesting-depth, selector-max-class
|
|
385
|
+
> :where(:not(.pf-m-disabled):not([disabled])) {
|
|
386
|
+
background-color: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
|
|
387
|
+
|
|
388
|
+
&:hover {
|
|
389
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
&:focus {
|
|
393
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
&:active,
|
|
397
|
+
&.pf-m-active {
|
|
398
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor);
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
&.pf-m-expanded {
|
|
403
|
+
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor);
|
|
404
|
+
}
|
|
405
|
+
// stylelint-enable
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
// Split button, secondary
|
|
409
|
+
&.pf-m-secondary {
|
|
410
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor);
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
&.pf-m-primary,
|
|
414
|
+
&.pf-m-secondary {
|
|
415
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
|
|
416
|
+
|
|
417
|
+
// stylelint-disable max-nesting-depth
|
|
418
|
+
> :first-child {
|
|
419
|
+
border-top-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
420
|
+
border-bottom-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
> :last-child {
|
|
424
|
+
border-top-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
425
|
+
border-bottom-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
// enable-disable
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
// all subsequent buttons
|
|
432
|
+
> :not(:first-child) {
|
|
433
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--after--Left: calc(var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) * -1);
|
|
434
|
+
|
|
435
|
+
border-left: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
&:not(.pf-m-expanded) {
|
|
439
|
+
--pf-c-menu-toggle--after--BorderBottomColor: transparent; // leave bottom border unchanged for expanded state
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
// disable accent border
|
|
444
|
+
&.pf-m-disabled,
|
|
445
|
+
&:disabled {
|
|
446
|
+
--pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
447
|
+
--pf-c-menu-toggle--m-split-button--child--Color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
448
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
|
|
449
|
+
|
|
450
|
+
&::before,
|
|
451
|
+
&::after {
|
|
452
|
+
content: none;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
// disabled styles for children
|
|
457
|
+
> .pf-m-disabled,
|
|
458
|
+
> :disabled {
|
|
459
|
+
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
|
|
460
|
+
|
|
461
|
+
color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
|
|
462
|
+
background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.pf-c-menu-toggle__button {
|
|
468
|
+
color: inherit;
|
|
469
|
+
border: 0;
|
|
470
|
+
|
|
471
|
+
.pf-c-menu-toggle__controls {
|
|
472
|
+
padding-left: 0;
|
|
473
|
+
margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
|
|
474
|
+
margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
|
|
475
|
+
}
|
|
277
476
|
}
|
|
278
477
|
|
|
279
478
|
.pf-c-menu-toggle__icon {
|
|
@@ -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. |
|