@patternfly/patternfly 5.0.0-alpha.10 → 5.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +17 -0
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pficon.scss +6 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/_chart-globals.scss +0 -4
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/components/CalendarMonth/calendar-month.css +1 -1
- package/components/CalendarMonth/calendar-month.scss +1 -1
- package/components/ChipGroup/chip-group.css +1 -3
- package/components/ChipGroup/chip-group.scss +1 -4
- package/components/Content/content.css +6 -0
- package/components/Content/content.scss +8 -0
- package/components/Pagination/pagination.css +0 -108
- package/components/Pagination/pagination.scss +0 -6
- package/components/Popover/popover.css +1 -1
- package/components/Popover/themes/dark/popover.scss +1 -1
- package/components/Tabs/tabs.css +0 -4
- package/components/Tabs/tabs.scss +0 -7
- package/components/Tooltip/themes/dark/tooltip.scss +1 -8
- package/components/Tooltip/tooltip.css +7 -9
- package/components/Tooltip/tooltip.scss +6 -3
- package/docs/components/Check/examples/Check.md +2 -6
- package/docs/components/ChipGroup/examples/ChipGroup.md +10 -339
- package/docs/components/Content/examples/Content.md +28 -0
- package/docs/components/DataList/examples/DataList.md +104 -65
- package/docs/components/Dropdown/examples/Dropdown.md +73 -49
- package/docs/components/LabelGroup/examples/LabelGroup.md +2 -14
- package/docs/components/Menu/examples/Menu.md +1 -1
- package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
- package/docs/components/Table/examples/Table.md +1117 -700
- package/docs/components/Tabs/examples/Tabs.md +102 -102
- package/docs/components/Toolbar/examples/Toolbar.md +48 -30
- package/docs/demos/Banner/examples/Banner.md +0 -1
- package/docs/demos/CardView/examples/CardView.md +8 -5
- package/docs/demos/DataList/examples/DataList.md +136 -85
- package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -1
- package/docs/demos/HelperText/examples/HelperText.md +0 -1
- package/docs/demos/Page/examples/Page.md +1 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +0 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +8 -5
- package/docs/demos/Table/examples/Table.md +421 -265
- package/docs/demos/Tabs/examples/Tabs.md +48 -30
- package/docs/demos/Toolbar/examples/Toolbar.md +80 -50
- package/docs/demos/Wizard/examples/Wizard.md +179 -171
- package/icons/pf-icons.json +1 -0
- package/package.json +5 -5
- package/patternfly-base-no-reset.css +5 -1
- package/patternfly-base.css +5 -1
- package/patternfly-no-reset.css +21 -127
- package/patternfly.css +21 -127
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -568,335 +568,6 @@ cssPrefix: pf-c-chip-group
|
|
|
568
568
|
|
|
569
569
|
```
|
|
570
570
|
|
|
571
|
-
### Legacy chip group examples without main element
|
|
572
|
-
|
|
573
|
-
```html
|
|
574
|
-
<div class="pf-c-chip-group">
|
|
575
|
-
<ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
|
|
576
|
-
<li class="pf-c-chip-group__list-item">
|
|
577
|
-
<div class="pf-c-chip">
|
|
578
|
-
<span
|
|
579
|
-
class="pf-c-chip__text"
|
|
580
|
-
id="legacy-simplechip_one_select_collapsed"
|
|
581
|
-
>Chip one</span>
|
|
582
|
-
<button
|
|
583
|
-
class="pf-c-button pf-m-plain"
|
|
584
|
-
type="button"
|
|
585
|
-
aria-labelledby="legacy-simpleremove_chip_one_select_collapsed legacy-simplechip_one_select_collapsed"
|
|
586
|
-
aria-label="Remove"
|
|
587
|
-
id="legacy-simpleremove_chip_one_select_collapsed"
|
|
588
|
-
>
|
|
589
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
590
|
-
</button>
|
|
591
|
-
</div>
|
|
592
|
-
</li>
|
|
593
|
-
<li class="pf-c-chip-group__list-item">
|
|
594
|
-
<div class="pf-c-chip">
|
|
595
|
-
<span
|
|
596
|
-
class="pf-c-chip__text"
|
|
597
|
-
id="legacy-simplechip_two_select_collapsed"
|
|
598
|
-
>Chip two</span>
|
|
599
|
-
<button
|
|
600
|
-
class="pf-c-button pf-m-plain"
|
|
601
|
-
type="button"
|
|
602
|
-
aria-labelledby="legacy-simpleremove_chip_two_select_collapsed legacy-simplechip_two_select_collapsed"
|
|
603
|
-
aria-label="Remove"
|
|
604
|
-
id="legacy-simpleremove_chip_two_select_collapsed"
|
|
605
|
-
>
|
|
606
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
607
|
-
</button>
|
|
608
|
-
</div>
|
|
609
|
-
</li>
|
|
610
|
-
<li class="pf-c-chip-group__list-item">
|
|
611
|
-
<div class="pf-c-chip">
|
|
612
|
-
<span
|
|
613
|
-
class="pf-c-chip__text"
|
|
614
|
-
id="legacy-simplechip_three_select_collapsed"
|
|
615
|
-
>Chip three</span>
|
|
616
|
-
<button
|
|
617
|
-
class="pf-c-button pf-m-plain"
|
|
618
|
-
type="button"
|
|
619
|
-
aria-labelledby="legacy-simpleremove_chip_three_select_collapsed legacy-simplechip_three_select_collapsed"
|
|
620
|
-
aria-label="Remove"
|
|
621
|
-
id="legacy-simpleremove_chip_three_select_collapsed"
|
|
622
|
-
>
|
|
623
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
624
|
-
</button>
|
|
625
|
-
</div>
|
|
626
|
-
</li>
|
|
627
|
-
</ul>
|
|
628
|
-
</div>
|
|
629
|
-
|
|
630
|
-
<br />
|
|
631
|
-
<br />
|
|
632
|
-
|
|
633
|
-
<div class="pf-c-chip-group">
|
|
634
|
-
<ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
|
|
635
|
-
<li class="pf-c-chip-group__list-item">
|
|
636
|
-
<div class="pf-c-chip">
|
|
637
|
-
<span
|
|
638
|
-
class="pf-c-chip__text"
|
|
639
|
-
id="legacy-simple-removablechip_one_toolbar"
|
|
640
|
-
>Chip one</span>
|
|
641
|
-
<button
|
|
642
|
-
class="pf-c-button pf-m-plain"
|
|
643
|
-
type="button"
|
|
644
|
-
aria-labelledby="legacy-simple-removableremove_chip_one_toolbar legacy-simple-removablechip_one_toolbar"
|
|
645
|
-
aria-label="Remove"
|
|
646
|
-
id="legacy-simple-removableremove_chip_one_toolbar"
|
|
647
|
-
>
|
|
648
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
649
|
-
</button>
|
|
650
|
-
</div>
|
|
651
|
-
</li>
|
|
652
|
-
<li class="pf-c-chip-group__list-item">
|
|
653
|
-
<div class="pf-c-chip">
|
|
654
|
-
<span
|
|
655
|
-
class="pf-c-chip__text"
|
|
656
|
-
id="legacy-simple-removablechip_two_toolbar"
|
|
657
|
-
>Chip two</span>
|
|
658
|
-
<button
|
|
659
|
-
class="pf-c-button pf-m-plain"
|
|
660
|
-
type="button"
|
|
661
|
-
aria-labelledby="legacy-simple-removableremove_chip_two_toolbar legacy-simple-removablechip_two_toolbar"
|
|
662
|
-
aria-label="Remove"
|
|
663
|
-
id="legacy-simple-removableremove_chip_two_toolbar"
|
|
664
|
-
>
|
|
665
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
666
|
-
</button>
|
|
667
|
-
</div>
|
|
668
|
-
</li>
|
|
669
|
-
<li class="pf-c-chip-group__list-item">
|
|
670
|
-
<div class="pf-c-chip">
|
|
671
|
-
<span
|
|
672
|
-
class="pf-c-chip__text"
|
|
673
|
-
id="legacy-simple-removablechip_three_toolbar"
|
|
674
|
-
>Chip three</span>
|
|
675
|
-
<button
|
|
676
|
-
class="pf-c-button pf-m-plain"
|
|
677
|
-
type="button"
|
|
678
|
-
aria-labelledby="legacy-simple-removableremove_chip_three_toolbar legacy-simple-removablechip_three_toolbar"
|
|
679
|
-
aria-label="Remove"
|
|
680
|
-
id="legacy-simple-removableremove_chip_three_toolbar"
|
|
681
|
-
>
|
|
682
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
683
|
-
</button>
|
|
684
|
-
</div>
|
|
685
|
-
</li>
|
|
686
|
-
<li class="pf-c-chip-group__list-item">
|
|
687
|
-
<div class="pf-c-chip">
|
|
688
|
-
<span
|
|
689
|
-
class="pf-c-chip__text"
|
|
690
|
-
id="legacy-simple-removablechip_four_toolbar"
|
|
691
|
-
>Chip four</span>
|
|
692
|
-
<button
|
|
693
|
-
class="pf-c-button pf-m-plain"
|
|
694
|
-
type="button"
|
|
695
|
-
aria-labelledby="legacy-simple-removableremove_chip_four_toolbar legacy-simple-removablechip_four_toolbar"
|
|
696
|
-
aria-label="Remove"
|
|
697
|
-
id="legacy-simple-removableremove_chip_four_toolbar"
|
|
698
|
-
>
|
|
699
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
700
|
-
</button>
|
|
701
|
-
</div>
|
|
702
|
-
</li>
|
|
703
|
-
<li class="pf-c-chip-group__list-item">
|
|
704
|
-
<div class="pf-c-chip">
|
|
705
|
-
<span
|
|
706
|
-
class="pf-c-chip__text"
|
|
707
|
-
id="legacy-simple-removablechip_five_toolbar"
|
|
708
|
-
>Chip five</span>
|
|
709
|
-
<button
|
|
710
|
-
class="pf-c-button pf-m-plain"
|
|
711
|
-
type="button"
|
|
712
|
-
aria-labelledby="legacy-simple-removableremove_chip_five_toolbar legacy-simple-removablechip_five_toolbar"
|
|
713
|
-
aria-label="Remove"
|
|
714
|
-
id="legacy-simple-removableremove_chip_five_toolbar"
|
|
715
|
-
>
|
|
716
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
717
|
-
</button>
|
|
718
|
-
</div>
|
|
719
|
-
</li>
|
|
720
|
-
<li class="pf-c-chip-group__list-item">
|
|
721
|
-
<div class="pf-c-chip">
|
|
722
|
-
<span
|
|
723
|
-
class="pf-c-chip__text"
|
|
724
|
-
id="legacy-simple-removablechip_six_toolbar"
|
|
725
|
-
>Chip six</span>
|
|
726
|
-
<button
|
|
727
|
-
class="pf-c-button pf-m-plain"
|
|
728
|
-
type="button"
|
|
729
|
-
aria-labelledby="legacy-simple-removableremove_chip_six_toolbar legacy-simple-removablechip_six_toolbar"
|
|
730
|
-
aria-label="Remove"
|
|
731
|
-
id="legacy-simple-removableremove_chip_six_toolbar"
|
|
732
|
-
>
|
|
733
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
734
|
-
</button>
|
|
735
|
-
</div>
|
|
736
|
-
</li>
|
|
737
|
-
</ul>
|
|
738
|
-
<div class="pf-c-chip-group__close">
|
|
739
|
-
<button
|
|
740
|
-
class="pf-c-button pf-m-plain"
|
|
741
|
-
type="button"
|
|
742
|
-
aria-labelledby="legacy-simple-removable-button legacy-simple-removable-label"
|
|
743
|
-
aria-label="Close chip group"
|
|
744
|
-
id="legacy-simple-removable-button"
|
|
745
|
-
>
|
|
746
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
747
|
-
</button>
|
|
748
|
-
</div>
|
|
749
|
-
</div>
|
|
750
|
-
|
|
751
|
-
<br />
|
|
752
|
-
<br />
|
|
753
|
-
|
|
754
|
-
<div class="pf-c-chip-group pf-m-category">
|
|
755
|
-
<span
|
|
756
|
-
class="pf-c-chip-group__label"
|
|
757
|
-
aria-hidden="true"
|
|
758
|
-
id="legacy-category-label"
|
|
759
|
-
>Category one</span>
|
|
760
|
-
<ul
|
|
761
|
-
class="pf-c-chip-group__list"
|
|
762
|
-
role="list"
|
|
763
|
-
aria-labelledby="legacy-category-label"
|
|
764
|
-
>
|
|
765
|
-
<li class="pf-c-chip-group__list-item">
|
|
766
|
-
<div class="pf-c-chip">
|
|
767
|
-
<span
|
|
768
|
-
class="pf-c-chip__text"
|
|
769
|
-
id="legacy-categorychip_one_toolbar_collapsed"
|
|
770
|
-
>Chip one</span>
|
|
771
|
-
<button
|
|
772
|
-
class="pf-c-button pf-m-plain"
|
|
773
|
-
type="button"
|
|
774
|
-
aria-labelledby="legacy-categoryremove_chip_one_toolbar_collapsed legacy-categorychip_one_toolbar_collapsed"
|
|
775
|
-
aria-label="Remove"
|
|
776
|
-
id="legacy-categoryremove_chip_one_toolbar_collapsed"
|
|
777
|
-
>
|
|
778
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
779
|
-
</button>
|
|
780
|
-
</div>
|
|
781
|
-
</li>
|
|
782
|
-
<li class="pf-c-chip-group__list-item">
|
|
783
|
-
<div class="pf-c-chip">
|
|
784
|
-
<span
|
|
785
|
-
class="pf-c-chip__text"
|
|
786
|
-
id="legacy-categorychip_two_toolbar_collapsed"
|
|
787
|
-
>Chip two</span>
|
|
788
|
-
<button
|
|
789
|
-
class="pf-c-button pf-m-plain"
|
|
790
|
-
type="button"
|
|
791
|
-
aria-labelledby="legacy-categoryremove_chip_two_toolbar_collapsed legacy-categorychip_two_toolbar_collapsed"
|
|
792
|
-
aria-label="Remove"
|
|
793
|
-
id="legacy-categoryremove_chip_two_toolbar_collapsed"
|
|
794
|
-
>
|
|
795
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
796
|
-
</button>
|
|
797
|
-
</div>
|
|
798
|
-
</li>
|
|
799
|
-
<li class="pf-c-chip-group__list-item">
|
|
800
|
-
<div class="pf-c-chip">
|
|
801
|
-
<span
|
|
802
|
-
class="pf-c-chip__text"
|
|
803
|
-
id="legacy-categorychip_three_toolbar_collapsed"
|
|
804
|
-
>Chip three</span>
|
|
805
|
-
<button
|
|
806
|
-
class="pf-c-button pf-m-plain"
|
|
807
|
-
type="button"
|
|
808
|
-
aria-labelledby="legacy-categoryremove_chip_three_toolbar_collapsed legacy-categorychip_three_toolbar_collapsed"
|
|
809
|
-
aria-label="Remove"
|
|
810
|
-
id="legacy-categoryremove_chip_three_toolbar_collapsed"
|
|
811
|
-
>
|
|
812
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
813
|
-
</button>
|
|
814
|
-
</div>
|
|
815
|
-
</li>
|
|
816
|
-
</ul>
|
|
817
|
-
</div>
|
|
818
|
-
|
|
819
|
-
<br />
|
|
820
|
-
<br />
|
|
821
|
-
|
|
822
|
-
<div class="pf-c-chip-group pf-m-category">
|
|
823
|
-
<span
|
|
824
|
-
class="pf-c-chip-group__label"
|
|
825
|
-
aria-hidden="true"
|
|
826
|
-
id="legacy-category-removable-label"
|
|
827
|
-
>Category one</span>
|
|
828
|
-
<ul
|
|
829
|
-
class="pf-c-chip-group__list"
|
|
830
|
-
role="list"
|
|
831
|
-
aria-labelledby="legacy-category-removable-label"
|
|
832
|
-
>
|
|
833
|
-
<li class="pf-c-chip-group__list-item">
|
|
834
|
-
<div class="pf-c-chip">
|
|
835
|
-
<span
|
|
836
|
-
class="pf-c-chip__text"
|
|
837
|
-
id="legacy-category-removablechip_one_toolbar_collapsed"
|
|
838
|
-
>Chip one</span>
|
|
839
|
-
<button
|
|
840
|
-
class="pf-c-button pf-m-plain"
|
|
841
|
-
type="button"
|
|
842
|
-
aria-labelledby="legacy-category-removableremove_chip_one_toolbar_collapsed legacy-category-removablechip_one_toolbar_collapsed"
|
|
843
|
-
aria-label="Remove"
|
|
844
|
-
id="legacy-category-removableremove_chip_one_toolbar_collapsed"
|
|
845
|
-
>
|
|
846
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
847
|
-
</button>
|
|
848
|
-
</div>
|
|
849
|
-
</li>
|
|
850
|
-
<li class="pf-c-chip-group__list-item">
|
|
851
|
-
<div class="pf-c-chip">
|
|
852
|
-
<span
|
|
853
|
-
class="pf-c-chip__text"
|
|
854
|
-
id="legacy-category-removablechip_two_toolbar_collapsed"
|
|
855
|
-
>Chip two</span>
|
|
856
|
-
<button
|
|
857
|
-
class="pf-c-button pf-m-plain"
|
|
858
|
-
type="button"
|
|
859
|
-
aria-labelledby="legacy-category-removableremove_chip_two_toolbar_collapsed legacy-category-removablechip_two_toolbar_collapsed"
|
|
860
|
-
aria-label="Remove"
|
|
861
|
-
id="legacy-category-removableremove_chip_two_toolbar_collapsed"
|
|
862
|
-
>
|
|
863
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
864
|
-
</button>
|
|
865
|
-
</div>
|
|
866
|
-
</li>
|
|
867
|
-
<li class="pf-c-chip-group__list-item">
|
|
868
|
-
<div class="pf-c-chip">
|
|
869
|
-
<span
|
|
870
|
-
class="pf-c-chip__text"
|
|
871
|
-
id="legacy-category-removablechip_three_toolbar_collapsed"
|
|
872
|
-
>Chip three</span>
|
|
873
|
-
<button
|
|
874
|
-
class="pf-c-button pf-m-plain"
|
|
875
|
-
type="button"
|
|
876
|
-
aria-labelledby="legacy-category-removableremove_chip_three_toolbar_collapsed legacy-category-removablechip_three_toolbar_collapsed"
|
|
877
|
-
aria-label="Remove"
|
|
878
|
-
id="legacy-category-removableremove_chip_three_toolbar_collapsed"
|
|
879
|
-
>
|
|
880
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
881
|
-
</button>
|
|
882
|
-
</div>
|
|
883
|
-
</li>
|
|
884
|
-
</ul>
|
|
885
|
-
<div class="pf-c-chip-group__close">
|
|
886
|
-
<button
|
|
887
|
-
class="pf-c-button pf-m-plain"
|
|
888
|
-
type="button"
|
|
889
|
-
aria-labelledby="legacy-category-removable-button legacy-category-removable-label"
|
|
890
|
-
aria-label="Close chip group"
|
|
891
|
-
id="legacy-category-removable-button"
|
|
892
|
-
>
|
|
893
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
894
|
-
</button>
|
|
895
|
-
</div>
|
|
896
|
-
</div>
|
|
897
|
-
|
|
898
|
-
```
|
|
899
|
-
|
|
900
571
|
### Overview
|
|
901
572
|
|
|
902
573
|
A chip group is constrained to the width of its container and will wrap when it exceeds that width. An overflow value can be set and when the number of chips exceeds that value, additional chips will be hidden by default. The default overflow value will be set to 3 chips but this can be adjusted per application needs. The toggle button after the last chip allows the group to be expanded (or collapsed).
|
|
@@ -917,13 +588,13 @@ The chip group requires the [chip component](/components/chip).
|
|
|
917
588
|
|
|
918
589
|
### Usage
|
|
919
590
|
|
|
920
|
-
| Class | Applied to | Outcome
|
|
921
|
-
| ----------------------------- | ---------------------------------- |
|
|
922
|
-
| `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.**
|
|
923
|
-
| `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.**
|
|
924
|
-
| `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.**
|
|
925
|
-
| `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group.
|
|
926
|
-
| `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group.
|
|
927
|
-
| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. |
|
|
928
|
-
| `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group.
|
|
929
|
-
| `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling.
|
|
591
|
+
| Class | Applied to | Outcome |
|
|
592
|
+
| ----------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
593
|
+
| `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
|
|
594
|
+
| `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
|
|
595
|
+
| `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
|
|
596
|
+
| `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
|
|
597
|
+
| `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
|
|
598
|
+
| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
|
|
599
|
+
| `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
|
|
600
|
+
| `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling. |
|
|
@@ -75,6 +75,33 @@ cssPrefix: pf-c-content
|
|
|
75
75
|
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
|
|
76
76
|
</p>
|
|
77
77
|
<hr />
|
|
78
|
+
<h3>Plain list example</h3>
|
|
79
|
+
<ol class="pf-m-plain">
|
|
80
|
+
<li>Donec blandit a lorem id convallis.</li>
|
|
81
|
+
<li>Cras gravida arcu at diam gravida gravida.</li>
|
|
82
|
+
<li>Integer in volutpat libero.</li>
|
|
83
|
+
<li>Donec a diam tellus.</li>
|
|
84
|
+
<li>
|
|
85
|
+
Etiam auctor nisl et.
|
|
86
|
+
<ul>
|
|
87
|
+
<li>Regular list</li>
|
|
88
|
+
<li>Donec blandit a lorem id convallis.</li>
|
|
89
|
+
<li>Cras gravida arcu at diam gravida gravida.</li>
|
|
90
|
+
<li>
|
|
91
|
+
Integer in volutpat libero.
|
|
92
|
+
<ol class="pf-m-plain">
|
|
93
|
+
<li>Nested plain list</li>
|
|
94
|
+
<li>Donec blandit a lorem id convallis.</li>
|
|
95
|
+
<li>Cras gravida arcu at diam gravida gravida.</li>
|
|
96
|
+
</ol>
|
|
97
|
+
</li>
|
|
98
|
+
</ul>
|
|
99
|
+
</li>
|
|
100
|
+
<li>Aenean nec tortor orci.</li>
|
|
101
|
+
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
|
102
|
+
<li>Vivamus maximus ultricies pulvinar.</li>
|
|
103
|
+
</ol>
|
|
104
|
+
<hr />
|
|
78
105
|
<h3>Visited link example</h3>
|
|
79
106
|
<p>
|
|
80
107
|
<a class="pf-m-visited" href>Visited link</a>
|
|
@@ -152,3 +179,4 @@ This component is an exception to the variable system since we style type select
|
|
|
152
179
|
| --------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
|
|
153
180
|
| `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements. |
|
|
154
181
|
| `.pf-m-visited` | `.pf-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
|
|
182
|
+
| `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |
|
|
@@ -127,11 +127,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
127
127
|
<div class="pf-c-data-list__item-row">
|
|
128
128
|
<div class="pf-c-data-list__item-control">
|
|
129
129
|
<div class="pf-c-data-list__check">
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
130
|
+
<div class="pf-c-check pf-m-standalone">
|
|
131
|
+
<input
|
|
132
|
+
class="pf-c-check__input"
|
|
133
|
+
type="checkbox"
|
|
134
|
+
name="data-list-checkboxes-actions-addl-cells-item-1-checkbox"
|
|
135
|
+
aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
|
|
136
|
+
/>
|
|
137
|
+
</div>
|
|
135
138
|
</div>
|
|
136
139
|
</div>
|
|
137
140
|
<div class="pf-c-data-list__item-content">
|
|
@@ -209,11 +212,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
209
212
|
<div class="pf-c-data-list__item-row">
|
|
210
213
|
<div class="pf-c-data-list__item-control">
|
|
211
214
|
<div class="pf-c-data-list__check">
|
|
212
|
-
<
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
215
|
+
<div class="pf-c-check pf-m-standalone">
|
|
216
|
+
<input
|
|
217
|
+
class="pf-c-check__input"
|
|
218
|
+
type="checkbox"
|
|
219
|
+
name="data-list-checkboxes-actions-addl-cells-item-2-checkbox"
|
|
220
|
+
aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
|
|
221
|
+
/>
|
|
222
|
+
</div>
|
|
217
223
|
</div>
|
|
218
224
|
</div>
|
|
219
225
|
<div class="pf-c-data-list__item-content">
|
|
@@ -286,11 +292,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
286
292
|
<div class="pf-c-data-list__item-row">
|
|
287
293
|
<div class="pf-c-data-list__item-control">
|
|
288
294
|
<div class="pf-c-data-list__check">
|
|
289
|
-
<
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
295
|
+
<div class="pf-c-check pf-m-standalone">
|
|
296
|
+
<input
|
|
297
|
+
class="pf-c-check__input"
|
|
298
|
+
type="checkbox"
|
|
299
|
+
name="data-list-checkboxes-actions-addl-cells-item-3-checkbox"
|
|
300
|
+
aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
|
|
301
|
+
/>
|
|
302
|
+
</div>
|
|
294
303
|
</div>
|
|
295
304
|
</div>
|
|
296
305
|
<div class="pf-c-data-list__item-content">
|
|
@@ -1414,11 +1423,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1414
1423
|
<div class="pf-c-data-list__item-row">
|
|
1415
1424
|
<div class="pf-c-data-list__item-control">
|
|
1416
1425
|
<div class="pf-c-data-list__check">
|
|
1417
|
-
<
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1426
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1427
|
+
<input
|
|
1428
|
+
class="pf-c-check__input"
|
|
1429
|
+
type="checkbox"
|
|
1430
|
+
name="data-list-compact-item-1-checkbox"
|
|
1431
|
+
aria-labelledby="data-list-compact-item-1"
|
|
1432
|
+
/>
|
|
1433
|
+
</div>
|
|
1422
1434
|
</div>
|
|
1423
1435
|
</div>
|
|
1424
1436
|
<div class="pf-c-data-list__item-content">
|
|
@@ -1491,11 +1503,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1491
1503
|
<div class="pf-c-data-list__item-row">
|
|
1492
1504
|
<div class="pf-c-data-list__item-control">
|
|
1493
1505
|
<div class="pf-c-data-list__check">
|
|
1494
|
-
<
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1506
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1507
|
+
<input
|
|
1508
|
+
class="pf-c-check__input"
|
|
1509
|
+
type="checkbox"
|
|
1510
|
+
name="data-list-compact-item-2-checkbox"
|
|
1511
|
+
aria-labelledby="data-list-compact-item-2"
|
|
1512
|
+
/>
|
|
1513
|
+
</div>
|
|
1499
1514
|
</div>
|
|
1500
1515
|
</div>
|
|
1501
1516
|
<div class="pf-c-data-list__item-content">
|
|
@@ -1563,11 +1578,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1563
1578
|
<div class="pf-c-data-list__item-row">
|
|
1564
1579
|
<div class="pf-c-data-list__item-control">
|
|
1565
1580
|
<div class="pf-c-data-list__check">
|
|
1566
|
-
<
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1581
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1582
|
+
<input
|
|
1583
|
+
class="pf-c-check__input"
|
|
1584
|
+
type="checkbox"
|
|
1585
|
+
name="data-list-compact-item-3-checkbox"
|
|
1586
|
+
aria-labelledby="data-list-compact-item-3"
|
|
1587
|
+
/>
|
|
1588
|
+
</div>
|
|
1571
1589
|
</div>
|
|
1572
1590
|
</div>
|
|
1573
1591
|
<div class="pf-c-data-list__item-content">
|
|
@@ -1678,11 +1696,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1678
1696
|
<div class="pf-c-data-list__item-row">
|
|
1679
1697
|
<div class="pf-c-data-list__item-control">
|
|
1680
1698
|
<div class="pf-c-data-list__check">
|
|
1681
|
-
<
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1699
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1700
|
+
<input
|
|
1701
|
+
class="pf-c-check__input"
|
|
1702
|
+
type="checkbox"
|
|
1703
|
+
name="data-list-default-fitting-item-1-checkbox"
|
|
1704
|
+
aria-labelledby="data-list-default-fitting-item-1"
|
|
1705
|
+
/>
|
|
1706
|
+
</div>
|
|
1686
1707
|
</div>
|
|
1687
1708
|
</div>
|
|
1688
1709
|
<div class="pf-c-data-list__item-content">
|
|
@@ -1716,11 +1737,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1716
1737
|
<div class="pf-c-data-list__item-row">
|
|
1717
1738
|
<div class="pf-c-data-list__item-control">
|
|
1718
1739
|
<div class="pf-c-data-list__check">
|
|
1719
|
-
<
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1740
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1741
|
+
<input
|
|
1742
|
+
class="pf-c-check__input"
|
|
1743
|
+
type="checkbox"
|
|
1744
|
+
name="data-list-flex-modifiers-item-1-checkbox"
|
|
1745
|
+
aria-labelledby="data-list-flex-modifiers-item-1"
|
|
1746
|
+
/>
|
|
1747
|
+
</div>
|
|
1724
1748
|
</div>
|
|
1725
1749
|
</div>
|
|
1726
1750
|
<div class="pf-c-data-list__item-content">
|
|
@@ -1816,11 +1840,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1816
1840
|
</div>
|
|
1817
1841
|
|
|
1818
1842
|
<div class="pf-c-data-list__check">
|
|
1819
|
-
<
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1843
|
+
<div class="pf-c-check pf-m-standalone">
|
|
1844
|
+
<input
|
|
1845
|
+
class="pf-c-check__input"
|
|
1846
|
+
type="checkbox"
|
|
1847
|
+
name="data-list-flex-modifiers-2-item-1-checkbox"
|
|
1848
|
+
aria-labelledby="data-list-flex-modifiers-2-item-1"
|
|
1849
|
+
/>
|
|
1850
|
+
</div>
|
|
1824
1851
|
</div>
|
|
1825
1852
|
</div>
|
|
1826
1853
|
<div class="pf-c-data-list__item-content">
|
|
@@ -2203,11 +2230,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2203
2230
|
</span>
|
|
2204
2231
|
</button>
|
|
2205
2232
|
<div class="pf-c-data-list__check">
|
|
2206
|
-
<
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2233
|
+
<div class="pf-c-check pf-m-standalone">
|
|
2234
|
+
<input
|
|
2235
|
+
class="pf-c-check__input"
|
|
2236
|
+
type="checkbox"
|
|
2237
|
+
name="data-list-draggable-item-1-checkbox"
|
|
2238
|
+
aria-labelledby="data-list-draggable-item-1"
|
|
2239
|
+
/>
|
|
2240
|
+
</div>
|
|
2211
2241
|
</div>
|
|
2212
2242
|
</div>
|
|
2213
2243
|
<div class="pf-c-data-list__item-content">
|
|
@@ -2238,11 +2268,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2238
2268
|
</span>
|
|
2239
2269
|
</button>
|
|
2240
2270
|
<div class="pf-c-data-list__check">
|
|
2241
|
-
<
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2271
|
+
<div class="pf-c-check pf-m-standalone">
|
|
2272
|
+
<input
|
|
2273
|
+
class="pf-c-check__input"
|
|
2274
|
+
type="checkbox"
|
|
2275
|
+
name="data-list-draggable-item-2-checkbox"
|
|
2276
|
+
aria-labelledby="data-list-draggable-item-2"
|
|
2277
|
+
/>
|
|
2278
|
+
</div>
|
|
2246
2279
|
</div>
|
|
2247
2280
|
</div>
|
|
2248
2281
|
<div class="pf-c-data-list__item-content">
|
|
@@ -2277,11 +2310,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2277
2310
|
</span>
|
|
2278
2311
|
</button>
|
|
2279
2312
|
<div class="pf-c-data-list__check">
|
|
2280
|
-
<
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2313
|
+
<div class="pf-c-check pf-m-standalone">
|
|
2314
|
+
<input
|
|
2315
|
+
class="pf-c-check__input"
|
|
2316
|
+
type="checkbox"
|
|
2317
|
+
name="data-list-draggable-item-3-checkbox"
|
|
2318
|
+
aria-labelledby="data-list-draggable-item-3"
|
|
2319
|
+
/>
|
|
2320
|
+
</div>
|
|
2285
2321
|
</div>
|
|
2286
2322
|
</div>
|
|
2287
2323
|
<div class="pf-c-data-list__item-content">
|
|
@@ -2312,11 +2348,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
2312
2348
|
</span>
|
|
2313
2349
|
</button>
|
|
2314
2350
|
<div class="pf-c-data-list__check">
|
|
2315
|
-
<
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2351
|
+
<div class="pf-c-check pf-m-standalone">
|
|
2352
|
+
<input
|
|
2353
|
+
class="pf-c-check__input"
|
|
2354
|
+
type="checkbox"
|
|
2355
|
+
name="data-list-draggable-item-4-checkbox"
|
|
2356
|
+
aria-labelledby="data-list-draggable-item-4"
|
|
2357
|
+
/>
|
|
2358
|
+
</div>
|
|
2320
2359
|
</div>
|
|
2321
2360
|
</div>
|
|
2322
2361
|
<div class="pf-c-data-list__item-content">
|