@patternfly/patternfly 4.181.0 → 4.182.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/components/Masthead/masthead.css +21 -27
- package/components/Masthead/masthead.scss +21 -27
- package/components/MenuToggle/menu-toggle.css +135 -1
- package/components/MenuToggle/menu-toggle.scss +201 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
- package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
- 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 +156 -28
- package/patternfly.css +156 -28
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -249,6 +249,534 @@ cssPrefix: pf-c-menu-toggle
|
|
|
249
249
|
|
|
250
250
|
```
|
|
251
251
|
|
|
252
|
+
### Split button (checkbox)
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled">
|
|
256
|
+
<label class="pf-c-check pf-m-standalone">
|
|
257
|
+
<input
|
|
258
|
+
class="pf-c-check__input"
|
|
259
|
+
type="checkbox"
|
|
260
|
+
id="split-button-checkbox-disabled-example-input"
|
|
261
|
+
name="split-button-checkbox-disabled-example-input"
|
|
262
|
+
aria-label="Standalone input"
|
|
263
|
+
disabled
|
|
264
|
+
/>
|
|
265
|
+
</label>
|
|
266
|
+
<button
|
|
267
|
+
class="pf-c-menu-toggle__button"
|
|
268
|
+
type="button"
|
|
269
|
+
aria-expanded="false"
|
|
270
|
+
id="split-button-checkbox-disabled-example-toggle-button"
|
|
271
|
+
aria-label="Menu toggle"
|
|
272
|
+
disabled
|
|
273
|
+
>
|
|
274
|
+
<span class="pf-c-menu-toggle__controls">
|
|
275
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
276
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
277
|
+
</span>
|
|
278
|
+
</span>
|
|
279
|
+
</button>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div class="pf-c-menu-toggle pf-m-split-button">
|
|
283
|
+
<label class="pf-c-check pf-m-standalone">
|
|
284
|
+
<input
|
|
285
|
+
class="pf-c-check__input"
|
|
286
|
+
type="checkbox"
|
|
287
|
+
id="split-button-checkbox-example-input"
|
|
288
|
+
name="split-button-checkbox-example-input"
|
|
289
|
+
aria-label="Standalone input"
|
|
290
|
+
/>
|
|
291
|
+
</label>
|
|
292
|
+
<button
|
|
293
|
+
class="pf-c-menu-toggle__button"
|
|
294
|
+
type="button"
|
|
295
|
+
aria-expanded="false"
|
|
296
|
+
id="split-button-checkbox-example-toggle-button"
|
|
297
|
+
aria-label="Menu toggle"
|
|
298
|
+
>
|
|
299
|
+
<span class="pf-c-menu-toggle__controls">
|
|
300
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
301
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
302
|
+
</span>
|
|
303
|
+
</span>
|
|
304
|
+
</button>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button">
|
|
308
|
+
<label class="pf-c-check pf-m-standalone">
|
|
309
|
+
<input
|
|
310
|
+
class="pf-c-check__input"
|
|
311
|
+
type="checkbox"
|
|
312
|
+
id="split-button-checkbox-expanded-example-input"
|
|
313
|
+
name="split-button-checkbox-expanded-example-input"
|
|
314
|
+
aria-label="Standalone input"
|
|
315
|
+
/>
|
|
316
|
+
</label>
|
|
317
|
+
<button
|
|
318
|
+
class="pf-c-menu-toggle__button"
|
|
319
|
+
type="button"
|
|
320
|
+
aria-expanded="true"
|
|
321
|
+
id="split-button-checkbox-expanded-example-toggle-button"
|
|
322
|
+
aria-label="Menu toggle"
|
|
323
|
+
>
|
|
324
|
+
<span class="pf-c-menu-toggle__controls">
|
|
325
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
326
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
328
|
+
</span>
|
|
329
|
+
</button>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
### Split button (checkbox with toggle text)
|
|
335
|
+
|
|
336
|
+
```html
|
|
337
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled">
|
|
338
|
+
<label
|
|
339
|
+
class="pf-c-check"
|
|
340
|
+
for="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
341
|
+
>
|
|
342
|
+
<input
|
|
343
|
+
class="pf-c-check__input"
|
|
344
|
+
type="checkbox"
|
|
345
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
346
|
+
name="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
347
|
+
disabled
|
|
348
|
+
/>
|
|
349
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
350
|
+
</label>
|
|
351
|
+
<button
|
|
352
|
+
class="pf-c-menu-toggle__button"
|
|
353
|
+
type="button"
|
|
354
|
+
aria-expanded="false"
|
|
355
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
|
|
356
|
+
aria-label="Menu toggle"
|
|
357
|
+
disabled
|
|
358
|
+
>
|
|
359
|
+
<span class="pf-c-menu-toggle__controls">
|
|
360
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
361
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
362
|
+
</span>
|
|
363
|
+
</span>
|
|
364
|
+
</button>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<div class="pf-c-menu-toggle pf-m-split-button">
|
|
368
|
+
<label
|
|
369
|
+
class="pf-c-check"
|
|
370
|
+
for="split-button-checkbox-with-toggle-text-example-input"
|
|
371
|
+
>
|
|
372
|
+
<input
|
|
373
|
+
class="pf-c-check__input"
|
|
374
|
+
type="checkbox"
|
|
375
|
+
id="split-button-checkbox-with-toggle-text-example-input"
|
|
376
|
+
name="split-button-checkbox-with-toggle-text-example-input"
|
|
377
|
+
/>
|
|
378
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
379
|
+
</label>
|
|
380
|
+
<button
|
|
381
|
+
class="pf-c-menu-toggle__button"
|
|
382
|
+
type="button"
|
|
383
|
+
aria-expanded="false"
|
|
384
|
+
id="split-button-checkbox-with-toggle-text-example-toggle-button"
|
|
385
|
+
aria-label="Menu toggle"
|
|
386
|
+
>
|
|
387
|
+
<span class="pf-c-menu-toggle__controls">
|
|
388
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
389
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
390
|
+
</span>
|
|
391
|
+
</span>
|
|
392
|
+
</button>
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button">
|
|
396
|
+
<label
|
|
397
|
+
class="pf-c-check"
|
|
398
|
+
for="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
399
|
+
>
|
|
400
|
+
<input
|
|
401
|
+
class="pf-c-check__input"
|
|
402
|
+
type="checkbox"
|
|
403
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
404
|
+
name="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
405
|
+
/>
|
|
406
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
407
|
+
</label>
|
|
408
|
+
<button
|
|
409
|
+
class="pf-c-menu-toggle__button"
|
|
410
|
+
type="button"
|
|
411
|
+
aria-expanded="true"
|
|
412
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
|
|
413
|
+
aria-label="Menu toggle"
|
|
414
|
+
>
|
|
415
|
+
<span class="pf-c-menu-toggle__controls">
|
|
416
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
417
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
418
|
+
</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
### Split button, primary
|
|
426
|
+
|
|
427
|
+
```html
|
|
428
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
|
|
429
|
+
<label
|
|
430
|
+
class="pf-c-check"
|
|
431
|
+
for="split-button-checkbox-primary-disabled-example-input"
|
|
432
|
+
>
|
|
433
|
+
<input
|
|
434
|
+
class="pf-c-check__input"
|
|
435
|
+
type="checkbox"
|
|
436
|
+
id="split-button-checkbox-primary-disabled-example-input"
|
|
437
|
+
name="split-button-checkbox-primary-disabled-example-input"
|
|
438
|
+
disabled
|
|
439
|
+
/>
|
|
440
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
441
|
+
</label>
|
|
442
|
+
<button
|
|
443
|
+
class="pf-c-menu-toggle__button"
|
|
444
|
+
type="button"
|
|
445
|
+
aria-expanded="false"
|
|
446
|
+
id="split-button-checkbox-primary-disabled-example-toggle-button"
|
|
447
|
+
aria-label="Menu toggle"
|
|
448
|
+
disabled
|
|
449
|
+
>
|
|
450
|
+
<span class="pf-c-menu-toggle__controls">
|
|
451
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
452
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
453
|
+
</span>
|
|
454
|
+
</span>
|
|
455
|
+
</button>
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-primary">
|
|
459
|
+
<label class="pf-c-check" for="split-button-checkbox-primary-example-input">
|
|
460
|
+
<input
|
|
461
|
+
class="pf-c-check__input"
|
|
462
|
+
type="checkbox"
|
|
463
|
+
id="split-button-checkbox-primary-example-input"
|
|
464
|
+
name="split-button-checkbox-primary-example-input"
|
|
465
|
+
/>
|
|
466
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
467
|
+
</label>
|
|
468
|
+
<button
|
|
469
|
+
class="pf-c-menu-toggle__button"
|
|
470
|
+
type="button"
|
|
471
|
+
aria-expanded="false"
|
|
472
|
+
id="split-button-checkbox-primary-example-toggle-button"
|
|
473
|
+
aria-label="Menu toggle"
|
|
474
|
+
>
|
|
475
|
+
<span class="pf-c-menu-toggle__controls">
|
|
476
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
477
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
478
|
+
</span>
|
|
479
|
+
</span>
|
|
480
|
+
</button>
|
|
481
|
+
</div>
|
|
482
|
+
|
|
483
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
|
|
484
|
+
<label
|
|
485
|
+
class="pf-c-check"
|
|
486
|
+
for="split-button-checkbox-primary-expanded-example-input"
|
|
487
|
+
>
|
|
488
|
+
<input
|
|
489
|
+
class="pf-c-check__input"
|
|
490
|
+
type="checkbox"
|
|
491
|
+
id="split-button-checkbox-primary-expanded-example-input"
|
|
492
|
+
name="split-button-checkbox-primary-expanded-example-input"
|
|
493
|
+
/>
|
|
494
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
495
|
+
</label>
|
|
496
|
+
<button
|
|
497
|
+
class="pf-c-menu-toggle__button"
|
|
498
|
+
type="button"
|
|
499
|
+
aria-expanded="true"
|
|
500
|
+
id="split-button-checkbox-primary-expanded-example-toggle-button"
|
|
501
|
+
aria-label="Menu toggle"
|
|
502
|
+
>
|
|
503
|
+
<span class="pf-c-menu-toggle__controls">
|
|
504
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
505
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
506
|
+
</span>
|
|
507
|
+
</span>
|
|
508
|
+
</button>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
```
|
|
512
|
+
|
|
513
|
+
### Split button, secondary
|
|
514
|
+
|
|
515
|
+
```html
|
|
516
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
|
|
517
|
+
<label
|
|
518
|
+
class="pf-c-check"
|
|
519
|
+
for="split-button-checkbox-secondary-disabled-example-input"
|
|
520
|
+
>
|
|
521
|
+
<input
|
|
522
|
+
class="pf-c-check__input"
|
|
523
|
+
type="checkbox"
|
|
524
|
+
id="split-button-checkbox-secondary-disabled-example-input"
|
|
525
|
+
name="split-button-checkbox-secondary-disabled-example-input"
|
|
526
|
+
disabled
|
|
527
|
+
/>
|
|
528
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
529
|
+
</label>
|
|
530
|
+
<button
|
|
531
|
+
class="pf-c-menu-toggle__button"
|
|
532
|
+
type="button"
|
|
533
|
+
aria-expanded="false"
|
|
534
|
+
id="split-button-checkbox-secondary-disabled-example-toggle-button"
|
|
535
|
+
aria-label="Menu toggle"
|
|
536
|
+
disabled
|
|
537
|
+
>
|
|
538
|
+
<span class="pf-c-menu-toggle__controls">
|
|
539
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
540
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
541
|
+
</span>
|
|
542
|
+
</span>
|
|
543
|
+
</button>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-secondary">
|
|
547
|
+
<label class="pf-c-check" for="split-button-checkbox-secondary-example-input">
|
|
548
|
+
<input
|
|
549
|
+
class="pf-c-check__input"
|
|
550
|
+
type="checkbox"
|
|
551
|
+
id="split-button-checkbox-secondary-example-input"
|
|
552
|
+
name="split-button-checkbox-secondary-example-input"
|
|
553
|
+
/>
|
|
554
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
555
|
+
</label>
|
|
556
|
+
<button
|
|
557
|
+
class="pf-c-menu-toggle__button"
|
|
558
|
+
type="button"
|
|
559
|
+
aria-expanded="false"
|
|
560
|
+
id="split-button-checkbox-secondary-example-toggle-button"
|
|
561
|
+
aria-label="Menu toggle"
|
|
562
|
+
>
|
|
563
|
+
<span class="pf-c-menu-toggle__controls">
|
|
564
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
565
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
566
|
+
</span>
|
|
567
|
+
</span>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
|
|
571
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
|
|
572
|
+
<label
|
|
573
|
+
class="pf-c-check"
|
|
574
|
+
for="split-button-checkbox-secondary-expanded-example-input"
|
|
575
|
+
>
|
|
576
|
+
<input
|
|
577
|
+
class="pf-c-check__input"
|
|
578
|
+
type="checkbox"
|
|
579
|
+
id="split-button-checkbox-secondary-expanded-example-input"
|
|
580
|
+
name="split-button-checkbox-secondary-expanded-example-input"
|
|
581
|
+
/>
|
|
582
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
583
|
+
</label>
|
|
584
|
+
<button
|
|
585
|
+
class="pf-c-menu-toggle__button"
|
|
586
|
+
type="button"
|
|
587
|
+
aria-expanded="true"
|
|
588
|
+
id="split-button-checkbox-secondary-expanded-example-toggle-button"
|
|
589
|
+
aria-label="Menu toggle"
|
|
590
|
+
>
|
|
591
|
+
<span class="pf-c-menu-toggle__controls">
|
|
592
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
593
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
594
|
+
</span>
|
|
595
|
+
</span>
|
|
596
|
+
</button>
|
|
597
|
+
</div>
|
|
598
|
+
|
|
599
|
+
```
|
|
600
|
+
|
|
601
|
+
### Split button (action)
|
|
602
|
+
|
|
603
|
+
```html
|
|
604
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled">
|
|
605
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
606
|
+
<button
|
|
607
|
+
class="pf-c-menu-toggle__button"
|
|
608
|
+
type="button"
|
|
609
|
+
aria-expanded="false"
|
|
610
|
+
id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
|
|
611
|
+
aria-label="Menu toggle"
|
|
612
|
+
disabled
|
|
613
|
+
>
|
|
614
|
+
<span class="pf-c-menu-toggle__controls">
|
|
615
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
616
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
617
|
+
</span>
|
|
618
|
+
</span>
|
|
619
|
+
</button>
|
|
620
|
+
</div>
|
|
621
|
+
|
|
622
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button">
|
|
623
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
624
|
+
<button
|
|
625
|
+
class="pf-c-menu-toggle__button"
|
|
626
|
+
type="button"
|
|
627
|
+
aria-expanded="false"
|
|
628
|
+
id="split-button-checkbox-with-toggle-action-example-toggle-button"
|
|
629
|
+
aria-label="Menu toggle"
|
|
630
|
+
>
|
|
631
|
+
<span class="pf-c-menu-toggle__controls">
|
|
632
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
633
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
634
|
+
</span>
|
|
635
|
+
</span>
|
|
636
|
+
</button>
|
|
637
|
+
</div>
|
|
638
|
+
|
|
639
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button">
|
|
640
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
641
|
+
<button
|
|
642
|
+
class="pf-c-menu-toggle__button"
|
|
643
|
+
type="button"
|
|
644
|
+
aria-expanded="true"
|
|
645
|
+
id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
|
|
646
|
+
aria-label="Menu toggle"
|
|
647
|
+
>
|
|
648
|
+
<span class="pf-c-menu-toggle__controls">
|
|
649
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
650
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
651
|
+
</span>
|
|
652
|
+
</span>
|
|
653
|
+
</button>
|
|
654
|
+
</div>
|
|
655
|
+
|
|
656
|
+
```
|
|
657
|
+
|
|
658
|
+
### Split button, primary (action)
|
|
659
|
+
|
|
660
|
+
```html
|
|
661
|
+
<div
|
|
662
|
+
class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled pf-m-primary"
|
|
663
|
+
>
|
|
664
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
665
|
+
<button
|
|
666
|
+
class="pf-c-menu-toggle__button"
|
|
667
|
+
type="button"
|
|
668
|
+
aria-expanded="false"
|
|
669
|
+
id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
|
|
670
|
+
aria-label="Menu toggle"
|
|
671
|
+
disabled
|
|
672
|
+
>
|
|
673
|
+
<span class="pf-c-menu-toggle__controls">
|
|
674
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
675
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
676
|
+
</span>
|
|
677
|
+
</span>
|
|
678
|
+
</button>
|
|
679
|
+
</div>
|
|
680
|
+
|
|
681
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-primary">
|
|
682
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
683
|
+
<button
|
|
684
|
+
class="pf-c-menu-toggle__button"
|
|
685
|
+
type="button"
|
|
686
|
+
aria-expanded="false"
|
|
687
|
+
id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
|
|
688
|
+
aria-label="Menu toggle"
|
|
689
|
+
>
|
|
690
|
+
<span class="pf-c-menu-toggle__controls">
|
|
691
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
692
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
693
|
+
</span>
|
|
694
|
+
</span>
|
|
695
|
+
</button>
|
|
696
|
+
</div>
|
|
697
|
+
|
|
698
|
+
<div
|
|
699
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button pf-m-primary"
|
|
700
|
+
>
|
|
701
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
702
|
+
<button
|
|
703
|
+
class="pf-c-menu-toggle__button"
|
|
704
|
+
type="button"
|
|
705
|
+
aria-expanded="true"
|
|
706
|
+
id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
|
|
707
|
+
aria-label="Menu toggle"
|
|
708
|
+
>
|
|
709
|
+
<span class="pf-c-menu-toggle__controls">
|
|
710
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
711
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
712
|
+
</span>
|
|
713
|
+
</span>
|
|
714
|
+
</button>
|
|
715
|
+
</div>
|
|
716
|
+
|
|
717
|
+
```
|
|
718
|
+
|
|
719
|
+
### Split button, secondary (action)
|
|
720
|
+
|
|
721
|
+
```html
|
|
722
|
+
<div
|
|
723
|
+
class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
724
|
+
>
|
|
725
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
726
|
+
<button
|
|
727
|
+
class="pf-c-menu-toggle__button"
|
|
728
|
+
type="button"
|
|
729
|
+
aria-expanded="false"
|
|
730
|
+
id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
|
|
731
|
+
aria-label="Menu toggle"
|
|
732
|
+
disabled
|
|
733
|
+
>
|
|
734
|
+
<span class="pf-c-menu-toggle__controls">
|
|
735
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
736
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
737
|
+
</span>
|
|
738
|
+
</span>
|
|
739
|
+
</button>
|
|
740
|
+
</div>
|
|
741
|
+
|
|
742
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-secondary">
|
|
743
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
744
|
+
<button
|
|
745
|
+
class="pf-c-menu-toggle__button"
|
|
746
|
+
type="button"
|
|
747
|
+
aria-expanded="false"
|
|
748
|
+
id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
|
|
749
|
+
aria-label="Menu toggle"
|
|
750
|
+
>
|
|
751
|
+
<span class="pf-c-menu-toggle__controls">
|
|
752
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
753
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
754
|
+
</span>
|
|
755
|
+
</span>
|
|
756
|
+
</button>
|
|
757
|
+
</div>
|
|
758
|
+
|
|
759
|
+
<div
|
|
760
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button pf-m-secondary"
|
|
761
|
+
>
|
|
762
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
763
|
+
<button
|
|
764
|
+
class="pf-c-menu-toggle__button"
|
|
765
|
+
type="button"
|
|
766
|
+
aria-expanded="true"
|
|
767
|
+
id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
|
|
768
|
+
aria-label="Menu toggle"
|
|
769
|
+
>
|
|
770
|
+
<span class="pf-c-menu-toggle__controls">
|
|
771
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
772
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
773
|
+
</span>
|
|
774
|
+
</span>
|
|
775
|
+
</button>
|
|
776
|
+
</div>
|
|
777
|
+
|
|
778
|
+
```
|
|
779
|
+
|
|
252
780
|
### With icon/image and text
|
|
253
781
|
|
|
254
782
|
```html
|
|
@@ -372,26 +900,30 @@ cssPrefix: pf-c-menu-toggle
|
|
|
372
900
|
|
|
373
901
|
### Accessibility
|
|
374
902
|
|
|
375
|
-
| Class | Applied to
|
|
376
|
-
| ------------------------------- |
|
|
377
|
-
| `aria-expanded="true"` | `.pf-c-menu-toggle`
|
|
378
|
-
| `aria-expanded="false"` | `.pf-c-menu-toggle`
|
|
379
|
-
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain`
|
|
380
|
-
| `disabled` | `.pf-c-menu-toggle`
|
|
903
|
+
| Class | Applied to | Outcome |
|
|
904
|
+
| ------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------- |
|
|
905
|
+
| `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
|
|
906
|
+
| `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
|
|
907
|
+
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
|
|
908
|
+
| `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
|
|
381
909
|
|
|
382
910
|
### Usage
|
|
383
911
|
|
|
384
|
-
| Class | Applied
|
|
385
|
-
| -------------------------------- |
|
|
386
|
-
| `.pf-c-menu-toggle` | `<button>`
|
|
387
|
-
| `.pf-c-menu-toggle__icon` | `<span>`
|
|
388
|
-
| `.pf-c-menu-toggle__text` | `<span>`
|
|
389
|
-
| `.pf-c-menu-toggle__count` | `<span>`
|
|
390
|
-
| `.pf-c-menu-toggle__controls` | `<span>`
|
|
391
|
-
| `.pf-c-menu-toggle__toggle-icon` | `<span>`
|
|
392
|
-
| `.pf-
|
|
393
|
-
| `.pf-m-
|
|
394
|
-
| `.pf-m-
|
|
395
|
-
| `.pf-m-
|
|
396
|
-
| `.pf-m-
|
|
397
|
-
| `.pf-m-
|
|
912
|
+
| Class | Applied | Outcome |
|
|
913
|
+
| -------------------------------- | ------------------------------------- | -------------------------------------------------------------------------- |
|
|
914
|
+
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
915
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
|
|
916
|
+
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
917
|
+
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
918
|
+
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
919
|
+
| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
|
|
920
|
+
| `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
|
|
921
|
+
| `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
|
|
922
|
+
| `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
|
|
923
|
+
| `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
|
|
924
|
+
| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
|
|
925
|
+
| `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
|
|
926
|
+
| `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
|
|
927
|
+
| `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
|
|
928
|
+
| `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
|
|
929
|
+
| `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
|
|
@@ -1100,7 +1100,7 @@ section: components
|
|
|
1100
1100
|
</div>
|
|
1101
1101
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1102
1102
|
<div
|
|
1103
|
-
class="pf-c-dropdown"
|
|
1103
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1104
1104
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1105
1105
|
>
|
|
1106
1106
|
<button
|
|
@@ -2179,7 +2179,7 @@ section: components
|
|
|
2179
2179
|
</div>
|
|
2180
2180
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2181
2181
|
<div
|
|
2182
|
-
class="pf-c-dropdown"
|
|
2182
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
2183
2183
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2184
2184
|
>
|
|
2185
2185
|
<button
|
|
@@ -3212,7 +3212,7 @@ section: components
|
|
|
3212
3212
|
</div>
|
|
3213
3213
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
3214
3214
|
<div
|
|
3215
|
-
class="pf-c-dropdown"
|
|
3215
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
3216
3216
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
3217
3217
|
>
|
|
3218
3218
|
<button
|
|
@@ -752,7 +752,7 @@ cssPrefix: pf-d-description-list
|
|
|
752
752
|
</div>
|
|
753
753
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
754
754
|
<div
|
|
755
|
-
class="pf-c-dropdown"
|
|
755
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
756
756
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
757
757
|
>
|
|
758
758
|
<button
|
|
@@ -1735,7 +1735,7 @@ cssPrefix: pf-d-description-list
|
|
|
1735
1735
|
</div>
|
|
1736
1736
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1737
1737
|
<div
|
|
1738
|
-
class="pf-c-dropdown"
|
|
1738
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1739
1739
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1740
1740
|
>
|
|
1741
1741
|
<button
|
|
@@ -3004,7 +3004,7 @@ cssPrefix: pf-d-description-list
|
|
|
3004
3004
|
</div>
|
|
3005
3005
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
3006
3006
|
<div
|
|
3007
|
-
class="pf-c-dropdown"
|
|
3007
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
3008
3008
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
3009
3009
|
>
|
|
3010
3010
|
<button
|
|
@@ -2043,7 +2043,7 @@ wrapperTag: div
|
|
|
2043
2043
|
</div>
|
|
2044
2044
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2045
2045
|
<div
|
|
2046
|
-
class="pf-c-dropdown"
|
|
2046
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
2047
2047
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2048
2048
|
>
|
|
2049
2049
|
<button
|
|
@@ -3004,7 +3004,7 @@ wrapperTag: div
|
|
|
3004
3004
|
</div>
|
|
3005
3005
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
3006
3006
|
<div
|
|
3007
|
-
class="pf-c-dropdown pf-m-expanded"
|
|
3007
|
+
class="pf-c-dropdown pf-m-expanded pf-m-full-height"
|
|
3008
3008
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
3009
3009
|
>
|
|
3010
3010
|
<button
|