@patternfly/patternfly 6.0.0-alpha.207 → 6.0.0-alpha.209

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.
Files changed (10) hide show
  1. package/components/Content/content.css +8 -1
  2. package/components/Content/content.scss +10 -1
  3. package/components/_index.css +8 -1
  4. package/docs/components/Content/examples/Content.md +347 -0
  5. package/docs/components/MenuToggle/examples/MenuToggle.md +107 -58
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +8 -1
  8. package/patternfly.css +8 -1
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -312,21 +312,20 @@ cssPrefix: pf-v6-c-menu-toggle
312
312
 
313
313
  ```
314
314
 
315
- ### Split button (checkbox)
315
+ ### Split toggle with checkbox
316
316
 
317
317
  ```html
318
318
  <div
319
319
  class="pf-v6-c-menu-toggle pf-m-split-button"
320
320
  id="split-button-checkbox-example"
321
321
  >
322
- <label
323
- class="pf-v6-c-check pf-m-standalone"
324
- for="split-button-checkbox-example-input"
325
- >
322
+ <label class="pf-v6-c-check pf-m-standalone">
326
323
  <input
327
324
  class="pf-v6-c-check__input"
328
325
  type="checkbox"
329
- aria-label="Standalone check"
326
+ id="split-button-checkbox-example-input"
327
+ name="split-button-checkbox-example-input"
328
+ aria-label="Select all items"
330
329
  />
331
330
  </label>
332
331
  <button
@@ -348,14 +347,13 @@ cssPrefix: pf-v6-c-menu-toggle
348
347
  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
349
348
  id="split-button-checkbox-expanded-example"
350
349
  >
351
- <label
352
- class="pf-v6-c-check pf-m-standalone"
353
- for="split-button-checkbox-expanded-example-input"
354
- >
350
+ <label class="pf-v6-c-check pf-m-standalone">
355
351
  <input
356
352
  class="pf-v6-c-check__input"
357
353
  type="checkbox"
358
- aria-label="Standalone check"
354
+ id="split-button-checkbox-expanded-example-input"
355
+ name="split-button-checkbox-expanded-example-input"
356
+ aria-label="Select all items"
359
357
  />
360
358
  </label>
361
359
  <button
@@ -377,15 +375,14 @@ cssPrefix: pf-v6-c-menu-toggle
377
375
  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
378
376
  id="split-button-checkbox-disabled-example"
379
377
  >
380
- <label
381
- class="pf-v6-c-check pf-m-standalone"
382
- for="split-button-checkbox-disabled-example-input"
383
- >
378
+ <label class="pf-v6-c-check pf-m-standalone">
384
379
  <input
385
380
  class="pf-v6-c-check__input"
386
381
  type="checkbox"
387
- aria-label="Standalone check"
388
382
  disabled
383
+ id="split-button-checkbox-disabled-example-input"
384
+ name="split-button-checkbox-disabled-example-input"
385
+ aria-label="Select all items"
389
386
  />
390
387
  </label>
391
388
  <button
@@ -406,7 +403,9 @@ cssPrefix: pf-v6-c-menu-toggle
406
403
 
407
404
  ```
408
405
 
409
- ### Split button (checkbox with label)
406
+ ### Split toggle with labeled checkbox
407
+
408
+ To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in `span.pf-v6-c-check__label` as a child to `label.pf-v6-c-check`. Clicking the text will update the checked state of the split toggle's checkbox.
410
409
 
411
410
  ```html
412
411
  <div
@@ -417,8 +416,13 @@ cssPrefix: pf-v6-c-menu-toggle
417
416
  class="pf-v6-c-check"
418
417
  for="split-button-checkbox-with-toggle-text-example-input"
419
418
  >
420
- <input class="pf-v6-c-check__input" type="checkbox" />
421
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
419
+ <input
420
+ class="pf-v6-c-check__input"
421
+ type="checkbox"
422
+ id="split-button-checkbox-with-toggle-text-example-input"
423
+ name="split-button-checkbox-with-toggle-text-example-input"
424
+ />
425
+ <span class="pf-v6-c-check__label">Select all items</span>
422
426
  </label>
423
427
  <button
424
428
  class="pf-v6-c-menu-toggle__button"
@@ -443,8 +447,13 @@ cssPrefix: pf-v6-c-menu-toggle
443
447
  class="pf-v6-c-check"
444
448
  for="split-button-checkbox-with-toggle-text-expanded-example-input"
445
449
  >
446
- <input class="pf-v6-c-check__input" type="checkbox" />
447
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
450
+ <input
451
+ class="pf-v6-c-check__input"
452
+ type="checkbox"
453
+ id="split-button-checkbox-with-toggle-text-expanded-example-input"
454
+ name="split-button-checkbox-with-toggle-text-expanded-example-input"
455
+ />
456
+ <span class="pf-v6-c-check__label">Select all items</span>
448
457
  </label>
449
458
  <button
450
459
  class="pf-v6-c-menu-toggle__button"
@@ -469,8 +478,14 @@ cssPrefix: pf-v6-c-menu-toggle
469
478
  class="pf-v6-c-check"
470
479
  for="split-button-checkbox-with-toggle-text-disabled-example-input"
471
480
  >
472
- <input class="pf-v6-c-check__input" type="checkbox" disabled />
473
- <label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
481
+ <input
482
+ class="pf-v6-c-check__input"
483
+ type="checkbox"
484
+ disabled
485
+ id="split-button-checkbox-with-toggle-text-disabled-example-input"
486
+ name="split-button-checkbox-with-toggle-text-disabled-example-input"
487
+ />
488
+ <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
474
489
  </label>
475
490
  <button
476
491
  class="pf-v6-c-menu-toggle__button"
@@ -490,30 +505,30 @@ cssPrefix: pf-v6-c-menu-toggle
490
505
 
491
506
  ```
492
507
 
493
- ### Split button (checkbox with toggle button text)
508
+ ### Split toggle with checkbox and toggle text
509
+
510
+ To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle.
494
511
 
495
512
  ```html
496
513
  <div
497
- class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
498
- id="split-button-checkbox-with-toggle-button-text-disabled-example"
514
+ class="pf-v6-c-menu-toggle pf-m-split-button"
515
+ id="split-button-checkbox-with-toggle-button-text-example"
499
516
  >
500
517
  <label class="pf-v6-c-check pf-m-standalone">
501
518
  <input
502
519
  class="pf-v6-c-check__input"
503
520
  type="checkbox"
504
- disabled
505
- id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
506
- name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
507
- aria-label="Standalone input"
521
+ id="split-button-checkbox-with-toggle-button-text-example-input"
522
+ name="split-button-checkbox-with-toggle-button-text-example-input"
523
+ aria-label="Select all items"
508
524
  />
509
525
  </label>
510
526
  <button
511
527
  class="pf-v6-c-menu-toggle__button pf-m-text"
512
528
  type="button"
513
529
  aria-expanded="false"
514
- id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
530
+ id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
515
531
  aria-label="Menu toggle"
516
- disabled
517
532
  >
518
533
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
519
534
  <span class="pf-v6-c-menu-toggle__controls">
@@ -524,23 +539,23 @@ cssPrefix: pf-v6-c-menu-toggle
524
539
  </button>
525
540
  </div>&nbsp;
526
541
  <div
527
- class="pf-v6-c-menu-toggle pf-m-split-button"
528
- id="split-button-checkbox-with-toggle-button-text-example"
542
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
543
+ id="split-button-checkbox-with-toggle-button-text-expanded-example"
529
544
  >
530
545
  <label class="pf-v6-c-check pf-m-standalone">
531
546
  <input
532
547
  class="pf-v6-c-check__input"
533
548
  type="checkbox"
534
- id="split-button-checkbox-with-toggle-button-text-example-input"
535
- name="split-button-checkbox-with-toggle-button-text-example-input"
536
- aria-label="Standalone input"
549
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
550
+ name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
551
+ aria-label="Select all items"
537
552
  />
538
553
  </label>
539
554
  <button
540
555
  class="pf-v6-c-menu-toggle__button pf-m-text"
541
556
  type="button"
542
- aria-expanded="false"
543
- id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
557
+ aria-expanded="true"
558
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
544
559
  aria-label="Menu toggle"
545
560
  >
546
561
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
@@ -552,24 +567,26 @@ cssPrefix: pf-v6-c-menu-toggle
552
567
  </button>
553
568
  </div>&nbsp;
554
569
  <div
555
- class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
556
- id="split-button-checkbox-with-toggle-button-text-expanded-example"
570
+ class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
571
+ id="split-button-checkbox-with-toggle-button-text-disabled-example"
557
572
  >
558
573
  <label class="pf-v6-c-check pf-m-standalone">
559
574
  <input
560
575
  class="pf-v6-c-check__input"
561
576
  type="checkbox"
562
- id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
563
- name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
564
- aria-label="Standalone input"
577
+ disabled
578
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
579
+ name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
580
+ aria-label="Select all items"
565
581
  />
566
582
  </label>
567
583
  <button
568
584
  class="pf-v6-c-menu-toggle__button pf-m-text"
569
585
  type="button"
570
- aria-expanded="true"
571
- id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
586
+ aria-expanded="false"
587
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
572
588
  aria-label="Menu toggle"
589
+ disabled
573
590
  >
574
591
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
575
592
  <span class="pf-v6-c-menu-toggle__controls">
@@ -677,8 +694,13 @@ cssPrefix: pf-v6-c-menu-toggle
677
694
  class="pf-v6-c-check"
678
695
  for="split-button-checkbox-primary-example-input"
679
696
  >
680
- <input class="pf-v6-c-check__input" type="checkbox" />
681
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
697
+ <input
698
+ class="pf-v6-c-check__input"
699
+ type="checkbox"
700
+ id="split-button-checkbox-primary-example-input"
701
+ name="split-button-checkbox-primary-example-input"
702
+ />
703
+ <span class="pf-v6-c-check__label">Select all items</span>
682
704
  </label>
683
705
  <button
684
706
  class="pf-v6-c-menu-toggle__button"
@@ -703,8 +725,13 @@ cssPrefix: pf-v6-c-menu-toggle
703
725
  class="pf-v6-c-check"
704
726
  for="split-button-checkbox-primary-expanded-example-input"
705
727
  >
706
- <input class="pf-v6-c-check__input" type="checkbox" />
707
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
728
+ <input
729
+ class="pf-v6-c-check__input"
730
+ type="checkbox"
731
+ id="split-button-checkbox-primary-expanded-example-input"
732
+ name="split-button-checkbox-primary-expanded-example-input"
733
+ />
734
+ <span class="pf-v6-c-check__label">Select all items</span>
708
735
  </label>
709
736
  <button
710
737
  class="pf-v6-c-menu-toggle__button"
@@ -729,8 +756,14 @@ cssPrefix: pf-v6-c-menu-toggle
729
756
  class="pf-v6-c-check"
730
757
  for="split-button-checkbox-primary-disabled-example-input"
731
758
  >
732
- <input class="pf-v6-c-check__input" type="checkbox" disabled />
733
- <label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
759
+ <input
760
+ class="pf-v6-c-check__input"
761
+ type="checkbox"
762
+ disabled
763
+ id="split-button-checkbox-primary-disabled-example-input"
764
+ name="split-button-checkbox-primary-disabled-example-input"
765
+ />
766
+ <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
734
767
  </label>
735
768
  <button
736
769
  class="pf-v6-c-menu-toggle__button"
@@ -761,8 +794,13 @@ cssPrefix: pf-v6-c-menu-toggle
761
794
  class="pf-v6-c-check"
762
795
  for="split-button-checkbox-secondary-example-input"
763
796
  >
764
- <input class="pf-v6-c-check__input" type="checkbox" />
765
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
797
+ <input
798
+ class="pf-v6-c-check__input"
799
+ type="checkbox"
800
+ id="split-button-checkbox-secondary-example-input"
801
+ name="split-button-checkbox-secondary-example-input"
802
+ />
803
+ <span class="pf-v6-c-check__label">Select all items</span>
766
804
  </label>
767
805
  <button
768
806
  class="pf-v6-c-menu-toggle__button"
@@ -787,8 +825,13 @@ cssPrefix: pf-v6-c-menu-toggle
787
825
  class="pf-v6-c-check"
788
826
  for="split-button-checkbox-secondary-expanded-example-input"
789
827
  >
790
- <input class="pf-v6-c-check__input" type="checkbox" />
791
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
828
+ <input
829
+ class="pf-v6-c-check__input"
830
+ type="checkbox"
831
+ id="split-button-checkbox-secondary-expanded-example-input"
832
+ name="split-button-checkbox-secondary-expanded-example-input"
833
+ />
834
+ <span class="pf-v6-c-check__label">Select all items</span>
792
835
  </label>
793
836
  <button
794
837
  class="pf-v6-c-menu-toggle__button"
@@ -813,8 +856,14 @@ cssPrefix: pf-v6-c-menu-toggle
813
856
  class="pf-v6-c-check"
814
857
  for="split-button-checkbox-secondary-disabled-example-input"
815
858
  >
816
- <input class="pf-v6-c-check__input" type="checkbox" disabled />
817
- <label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
859
+ <input
860
+ class="pf-v6-c-check__input"
861
+ type="checkbox"
862
+ disabled
863
+ id="split-button-checkbox-secondary-disabled-example-input"
864
+ name="split-button-checkbox-secondary-disabled-example-input"
865
+ />
866
+ <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
818
867
  </label>
819
868
  <button
820
869
  class="pf-v6-c-menu-toggle__button"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.207",
4
+ "version": "6.0.0-alpha.209",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -8998,6 +8998,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
8998
8998
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
8999
8999
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
9000
9000
  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
9001
+ --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
9001
9002
  --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
9002
9003
  --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
9003
9004
  --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
@@ -9034,6 +9035,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
9034
9035
  --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
9035
9036
  --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
9036
9037
  --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
9038
+ --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
9037
9039
  --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
9038
9040
  --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
9039
9041
  --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
@@ -9062,11 +9064,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
9062
9064
  --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
9063
9065
  }
9064
9066
 
9065
- .pf-v6-c-content {
9067
+ [class*=pf-v6-c-content] {
9066
9068
  font-size: var(--pf-v6-c-content--FontSize);
9067
9069
  line-height: var(--pf-v6-c-content--LineHeight);
9068
9070
  color: var(--pf-v6-c-content--Color);
9069
9071
  }
9072
+ [class*=pf-v6-c-content].pf-m-editorial {
9073
+ --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize);
9074
+ --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize);
9075
+ }
9076
+
9070
9077
  :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
9071
9078
  color: var(--pf-v6-c-content--a--Color);
9072
9079
  text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
package/patternfly.css CHANGED
@@ -9119,6 +9119,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
9119
9119
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
9120
9120
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
9121
9121
  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
9122
+ --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
9122
9123
  --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
9123
9124
  --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
9124
9125
  --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
@@ -9155,6 +9156,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
9155
9156
  --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
9156
9157
  --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
9157
9158
  --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
9159
+ --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
9158
9160
  --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
9159
9161
  --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
9160
9162
  --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
@@ -9183,11 +9185,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
9183
9185
  --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
9184
9186
  }
9185
9187
 
9186
- .pf-v6-c-content {
9188
+ [class*=pf-v6-c-content] {
9187
9189
  font-size: var(--pf-v6-c-content--FontSize);
9188
9190
  line-height: var(--pf-v6-c-content--LineHeight);
9189
9191
  color: var(--pf-v6-c-content--Color);
9190
9192
  }
9193
+ [class*=pf-v6-c-content].pf-m-editorial {
9194
+ --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize);
9195
+ --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize);
9196
+ }
9197
+
9191
9198
  :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
9192
9199
  color: var(--pf-v6-c-content--a--Color);
9193
9200
  text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);