@patternfly/patternfly 6.0.0-alpha.118 → 6.0.0-alpha.119

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 (7) hide show
  1. package/docs/components/Select/deprecated/Select.md +291 -263
  2. package/docs/components/TextInputGroup/examples/TextInputGroup.md +434 -392
  3. package/docs/components/Toolbar/examples/Toolbar.md +420 -378
  4. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -4
  5. package/docs/demos/Toolbar/examples/Toolbar.css +1 -1
  6. package/docs/demos/Toolbar/examples/Toolbar.md +140 -126
  7. package/package.json +4 -4
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -706,158 +706,172 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
706
706
  <div class="pf-v6-c-toolbar__group pf-m-chip-container">
707
707
  <div class="pf-v6-c-toolbar__group pf-m-grow">
708
708
  <div class="pf-v6-c-toolbar__item">
709
- <div class="pf-v6-c-chip-group" role="group">
710
- <div class="pf-v6-c-chip-group__main">
709
+ <div class="pf-v6-c-label-group pf-m-category">
710
+ <div class="pf-v6-c-label-group__main">
711
711
  <span
712
- class="pf-v6-c-chip-group__label"
713
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
712
+ class="pf-v6-c-label-group__label"
713
+ aria-hidden="true"
714
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-status-label-group-label"
714
715
  >Status</span>
715
716
  <ul
716
- class="pf-v6-c-chip-group__list"
717
+ class="pf-v6-c-label-group__list"
717
718
  role="list"
718
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
719
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-status-label-group-label"
719
720
  >
720
- <li class="pf-v6-c-chip-group__list-item">
721
- <div class="pf-v6-c-chip">
722
- <span class="pf-v6-c-chip__content">
723
- <span
724
- class="pf-v6-c-chip__text"
725
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
726
- >Chip one</span>
727
- </span>
728
- <span class="pf-v6-c-chip__actions">
729
- <button
730
- class="pf-v6-c-button pf-m-plain"
731
- type="button"
732
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
733
- aria-label="Remove"
734
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
735
- >
736
- <i class="fas fa-times" aria-hidden="true"></i>
737
- </button>
721
+ <li class="pf-v6-c-label-group__list-item">
722
+ <span class="pf-v6-c-label pf-m-outline">
723
+ <span class="pf-v6-c-label__content">
724
+ <span class="pf-v6-c-label__content">
725
+ <span
726
+ class="pf-v6-c-label__text"
727
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-one"
728
+ >Label one</span>
729
+ </span>
730
+ <span class="pf-v6-c-label__actions">
731
+ <button
732
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
733
+ type="button"
734
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-one toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-one"
735
+ aria-label="Remove"
736
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-one"
737
+ >
738
+ <i class="fas fa-times" aria-hidden="true"></i>
739
+ </button>
740
+ </span>
738
741
  </span>
739
- </div>
742
+ </span>
740
743
  </li>
741
- <li class="pf-v6-c-chip-group__list-item">
742
- <div class="pf-v6-c-chip">
743
- <span class="pf-v6-c-chip__content">
744
- <span
745
- class="pf-v6-c-chip__text"
746
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
747
- >Chip two</span>
748
- </span>
749
- <span class="pf-v6-c-chip__actions">
750
- <button
751
- class="pf-v6-c-button pf-m-plain"
752
- type="button"
753
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
754
- aria-label="Remove"
755
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
756
- >
757
- <i class="fas fa-times" aria-hidden="true"></i>
758
- </button>
744
+ <li class="pf-v6-c-label-group__list-item">
745
+ <span class="pf-v6-c-label pf-m-outline">
746
+ <span class="pf-v6-c-label__content">
747
+ <span class="pf-v6-c-label__content">
748
+ <span
749
+ class="pf-v6-c-label__text"
750
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-two"
751
+ >Label two</span>
752
+ </span>
753
+ <span class="pf-v6-c-label__actions">
754
+ <button
755
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
756
+ type="button"
757
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-two toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-two"
758
+ aria-label="Remove"
759
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-two"
760
+ >
761
+ <i class="fas fa-times" aria-hidden="true"></i>
762
+ </button>
763
+ </span>
759
764
  </span>
760
- </div>
765
+ </span>
761
766
  </li>
762
- <li class="pf-v6-c-chip-group__list-item">
763
- <div class="pf-v6-c-chip">
764
- <span class="pf-v6-c-chip__content">
765
- <span
766
- class="pf-v6-c-chip__text"
767
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
768
- >Chip three</span>
767
+ <li class="pf-v6-c-label-group__list-item">
768
+ <span class="pf-v6-c-label pf-m-outline">
769
+ <span class="pf-v6-c-label__content">
770
+ <span class="pf-v6-c-label__content">
771
+ <span
772
+ class="pf-v6-c-label__text"
773
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-three"
774
+ >Label three</span>
775
+ </span>
776
+ <span class="pf-v6-c-label__actions">
777
+ <button
778
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
779
+ type="button"
780
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-three toolbar-selected-filters-toggle-group-collapsed-example-label-group-statuslabel-three"
781
+ aria-label="Remove"
782
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-statusremove-label-three"
783
+ >
784
+ <i class="fas fa-times" aria-hidden="true"></i>
785
+ </button>
786
+ </span>
769
787
  </span>
770
- <span class="pf-v6-c-chip__actions">
771
- <button
772
- class="pf-v6-c-button pf-m-plain"
773
- type="button"
774
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
775
- aria-label="Remove"
776
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
777
- >
778
- <i class="fas fa-times" aria-hidden="true"></i>
779
- </button>
780
- </span>
781
- </div>
788
+ </span>
782
789
  </li>
783
790
  </ul>
784
791
  </div>
785
792
  </div>
786
793
  </div>
787
794
  <div class="pf-v6-c-toolbar__item">
788
- <div class="pf-v6-c-chip-group" role="group">
789
- <div class="pf-v6-c-chip-group__main">
795
+ <div class="pf-v6-c-label-group pf-m-category">
796
+ <div class="pf-v6-c-label-group__main">
790
797
  <span
791
- class="pf-v6-c-chip-group__label"
792
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
798
+ class="pf-v6-c-label-group__label"
799
+ aria-hidden="true"
800
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risk-label-group-label"
793
801
  >Risk</span>
794
802
  <ul
795
- class="pf-v6-c-chip-group__list"
803
+ class="pf-v6-c-label-group__list"
796
804
  role="list"
797
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
805
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risk-label-group-label"
798
806
  >
799
- <li class="pf-v6-c-chip-group__list-item">
800
- <div class="pf-v6-c-chip">
801
- <span class="pf-v6-c-chip__content">
802
- <span
803
- class="pf-v6-c-chip__text"
804
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
805
- >Chip one</span>
807
+ <li class="pf-v6-c-label-group__list-item">
808
+ <span class="pf-v6-c-label pf-m-outline">
809
+ <span class="pf-v6-c-label__content">
810
+ <span class="pf-v6-c-label__content">
811
+ <span
812
+ class="pf-v6-c-label__text"
813
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-one"
814
+ >Label one</span>
815
+ </span>
816
+ <span class="pf-v6-c-label__actions">
817
+ <button
818
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
819
+ type="button"
820
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-one toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-one"
821
+ aria-label="Remove"
822
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-one"
823
+ >
824
+ <i class="fas fa-times" aria-hidden="true"></i>
825
+ </button>
826
+ </span>
806
827
  </span>
807
- <span class="pf-v6-c-chip__actions">
808
- <button
809
- class="pf-v6-c-button pf-m-plain"
810
- type="button"
811
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
812
- aria-label="Remove"
813
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
814
- >
815
- <i class="fas fa-times" aria-hidden="true"></i>
816
- </button>
817
- </span>
818
- </div>
828
+ </span>
819
829
  </li>
820
- <li class="pf-v6-c-chip-group__list-item">
821
- <div class="pf-v6-c-chip">
822
- <span class="pf-v6-c-chip__content">
823
- <span
824
- class="pf-v6-c-chip__text"
825
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
826
- >Chip two</span>
830
+ <li class="pf-v6-c-label-group__list-item">
831
+ <span class="pf-v6-c-label pf-m-outline">
832
+ <span class="pf-v6-c-label__content">
833
+ <span class="pf-v6-c-label__content">
834
+ <span
835
+ class="pf-v6-c-label__text"
836
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-two"
837
+ >Label two</span>
838
+ </span>
839
+ <span class="pf-v6-c-label__actions">
840
+ <button
841
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
842
+ type="button"
843
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-two toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-two"
844
+ aria-label="Remove"
845
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-two"
846
+ >
847
+ <i class="fas fa-times" aria-hidden="true"></i>
848
+ </button>
849
+ </span>
827
850
  </span>
828
- <span class="pf-v6-c-chip__actions">
829
- <button
830
- class="pf-v6-c-button pf-m-plain"
831
- type="button"
832
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
833
- aria-label="Remove"
834
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
835
- >
836
- <i class="fas fa-times" aria-hidden="true"></i>
837
- </button>
838
- </span>
839
- </div>
851
+ </span>
840
852
  </li>
841
- <li class="pf-v6-c-chip-group__list-item">
842
- <div class="pf-v6-c-chip">
843
- <span class="pf-v6-c-chip__content">
844
- <span
845
- class="pf-v6-c-chip__text"
846
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
847
- >Chip three</span>
848
- </span>
849
- <span class="pf-v6-c-chip__actions">
850
- <button
851
- class="pf-v6-c-button pf-m-plain"
852
- type="button"
853
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
854
- aria-label="Remove"
855
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
856
- >
857
- <i class="fas fa-times" aria-hidden="true"></i>
858
- </button>
853
+ <li class="pf-v6-c-label-group__list-item">
854
+ <span class="pf-v6-c-label pf-m-outline">
855
+ <span class="pf-v6-c-label__content">
856
+ <span class="pf-v6-c-label__content">
857
+ <span
858
+ class="pf-v6-c-label__text"
859
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-three"
860
+ >Label three</span>
861
+ </span>
862
+ <span class="pf-v6-c-label__actions">
863
+ <button
864
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
865
+ type="button"
866
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-three toolbar-selected-filters-toggle-group-collapsed-example-label-group-risklabel-three"
867
+ aria-label="Remove"
868
+ id="toolbar-selected-filters-toggle-group-collapsed-example-label-group-riskremove-label-three"
869
+ >
870
+ <i class="fas fa-times" aria-hidden="true"></i>
871
+ </button>
872
+ </span>
859
873
  </span>
860
- </div>
874
+ </span>
861
875
  </li>
862
876
  </ul>
863
877
  </div>
@@ -1074,158 +1088,172 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1074
1088
  <div class="pf-v6-c-toolbar__group pf-m-chip-container">
1075
1089
  <div class="pf-v6-c-toolbar__group pf-m-grow">
1076
1090
  <div class="pf-v6-c-toolbar__item">
1077
- <div class="pf-v6-c-chip-group" role="group">
1078
- <div class="pf-v6-c-chip-group__main">
1091
+ <div class="pf-v6-c-label-group pf-m-category">
1092
+ <div class="pf-v6-c-label-group__main">
1079
1093
  <span
1080
- class="pf-v6-c-chip-group__label"
1081
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
1094
+ class="pf-v6-c-label-group__label"
1095
+ aria-hidden="true"
1096
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-status-label-group-label"
1082
1097
  >Status</span>
1083
1098
  <ul
1084
- class="pf-v6-c-chip-group__list"
1099
+ class="pf-v6-c-label-group__list"
1085
1100
  role="list"
1086
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
1101
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-status-label-group-label"
1087
1102
  >
1088
- <li class="pf-v6-c-chip-group__list-item">
1089
- <div class="pf-v6-c-chip">
1090
- <span class="pf-v6-c-chip__content">
1091
- <span
1092
- class="pf-v6-c-chip__text"
1093
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
1094
- >Chip one</span>
1103
+ <li class="pf-v6-c-label-group__list-item">
1104
+ <span class="pf-v6-c-label pf-m-outline">
1105
+ <span class="pf-v6-c-label__content">
1106
+ <span class="pf-v6-c-label__content">
1107
+ <span
1108
+ class="pf-v6-c-label__text"
1109
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-one"
1110
+ >Label one</span>
1111
+ </span>
1112
+ <span class="pf-v6-c-label__actions">
1113
+ <button
1114
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1115
+ type="button"
1116
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-one"
1117
+ aria-label="Remove"
1118
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one"
1119
+ >
1120
+ <i class="fas fa-times" aria-hidden="true"></i>
1121
+ </button>
1122
+ </span>
1095
1123
  </span>
1096
- <span class="pf-v6-c-chip__actions">
1097
- <button
1098
- class="pf-v6-c-button pf-m-plain"
1099
- type="button"
1100
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
1101
- aria-label="Remove"
1102
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one"
1103
- >
1104
- <i class="fas fa-times" aria-hidden="true"></i>
1105
- </button>
1106
- </span>
1107
- </div>
1124
+ </span>
1108
1125
  </li>
1109
- <li class="pf-v6-c-chip-group__list-item">
1110
- <div class="pf-v6-c-chip">
1111
- <span class="pf-v6-c-chip__content">
1112
- <span
1113
- class="pf-v6-c-chip__text"
1114
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
1115
- >Chip two</span>
1116
- </span>
1117
- <span class="pf-v6-c-chip__actions">
1118
- <button
1119
- class="pf-v6-c-button pf-m-plain"
1120
- type="button"
1121
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
1122
- aria-label="Remove"
1123
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two"
1124
- >
1125
- <i class="fas fa-times" aria-hidden="true"></i>
1126
- </button>
1126
+ <li class="pf-v6-c-label-group__list-item">
1127
+ <span class="pf-v6-c-label pf-m-outline">
1128
+ <span class="pf-v6-c-label__content">
1129
+ <span class="pf-v6-c-label__content">
1130
+ <span
1131
+ class="pf-v6-c-label__text"
1132
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-two"
1133
+ >Label two</span>
1134
+ </span>
1135
+ <span class="pf-v6-c-label__actions">
1136
+ <button
1137
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1138
+ type="button"
1139
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-two"
1140
+ aria-label="Remove"
1141
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two"
1142
+ >
1143
+ <i class="fas fa-times" aria-hidden="true"></i>
1144
+ </button>
1145
+ </span>
1127
1146
  </span>
1128
- </div>
1147
+ </span>
1129
1148
  </li>
1130
- <li class="pf-v6-c-chip-group__list-item">
1131
- <div class="pf-v6-c-chip">
1132
- <span class="pf-v6-c-chip__content">
1133
- <span
1134
- class="pf-v6-c-chip__text"
1135
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
1136
- >Chip three</span>
1149
+ <li class="pf-v6-c-label-group__list-item">
1150
+ <span class="pf-v6-c-label pf-m-outline">
1151
+ <span class="pf-v6-c-label__content">
1152
+ <span class="pf-v6-c-label__content">
1153
+ <span
1154
+ class="pf-v6-c-label__text"
1155
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-three"
1156
+ >Label three</span>
1157
+ </span>
1158
+ <span class="pf-v6-c-label__actions">
1159
+ <button
1160
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1161
+ type="button"
1162
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-three"
1163
+ aria-label="Remove"
1164
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three"
1165
+ >
1166
+ <i class="fas fa-times" aria-hidden="true"></i>
1167
+ </button>
1168
+ </span>
1137
1169
  </span>
1138
- <span class="pf-v6-c-chip__actions">
1139
- <button
1140
- class="pf-v6-c-button pf-m-plain"
1141
- type="button"
1142
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
1143
- aria-label="Remove"
1144
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three"
1145
- >
1146
- <i class="fas fa-times" aria-hidden="true"></i>
1147
- </button>
1148
- </span>
1149
- </div>
1170
+ </span>
1150
1171
  </li>
1151
1172
  </ul>
1152
1173
  </div>
1153
1174
  </div>
1154
1175
  </div>
1155
1176
  <div class="pf-v6-c-toolbar__item">
1156
- <div class="pf-v6-c-chip-group" role="group">
1157
- <div class="pf-v6-c-chip-group__main">
1177
+ <div class="pf-v6-c-label-group pf-m-category">
1178
+ <div class="pf-v6-c-label-group__main">
1158
1179
  <span
1159
- class="pf-v6-c-chip-group__label"
1160
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-risk-chip-group-label"
1180
+ class="pf-v6-c-label-group__label"
1181
+ aria-hidden="true"
1182
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risk-label-group-label"
1161
1183
  >Risk</span>
1162
1184
  <ul
1163
- class="pf-v6-c-chip-group__list"
1185
+ class="pf-v6-c-label-group__list"
1164
1186
  role="list"
1165
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-risk-chip-group-label"
1187
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-risk-label-group-label"
1166
1188
  >
1167
- <li class="pf-v6-c-chip-group__list-item">
1168
- <div class="pf-v6-c-chip">
1169
- <span class="pf-v6-c-chip__content">
1170
- <span
1171
- class="pf-v6-c-chip__text"
1172
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
1173
- >Chip one</span>
1174
- </span>
1175
- <span class="pf-v6-c-chip__actions">
1176
- <button
1177
- class="pf-v6-c-button pf-m-plain"
1178
- type="button"
1179
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
1180
- aria-label="Remove"
1181
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one"
1182
- >
1183
- <i class="fas fa-times" aria-hidden="true"></i>
1184
- </button>
1189
+ <li class="pf-v6-c-label-group__list-item">
1190
+ <span class="pf-v6-c-label pf-m-outline">
1191
+ <span class="pf-v6-c-label__content">
1192
+ <span class="pf-v6-c-label__content">
1193
+ <span
1194
+ class="pf-v6-c-label__text"
1195
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-one"
1196
+ >Label one</span>
1197
+ </span>
1198
+ <span class="pf-v6-c-label__actions">
1199
+ <button
1200
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1201
+ type="button"
1202
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-one"
1203
+ aria-label="Remove"
1204
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one"
1205
+ >
1206
+ <i class="fas fa-times" aria-hidden="true"></i>
1207
+ </button>
1208
+ </span>
1185
1209
  </span>
1186
- </div>
1210
+ </span>
1187
1211
  </li>
1188
- <li class="pf-v6-c-chip-group__list-item">
1189
- <div class="pf-v6-c-chip">
1190
- <span class="pf-v6-c-chip__content">
1191
- <span
1192
- class="pf-v6-c-chip__text"
1193
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
1194
- >Chip two</span>
1195
- </span>
1196
- <span class="pf-v6-c-chip__actions">
1197
- <button
1198
- class="pf-v6-c-button pf-m-plain"
1199
- type="button"
1200
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
1201
- aria-label="Remove"
1202
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two"
1203
- >
1204
- <i class="fas fa-times" aria-hidden="true"></i>
1205
- </button>
1212
+ <li class="pf-v6-c-label-group__list-item">
1213
+ <span class="pf-v6-c-label pf-m-outline">
1214
+ <span class="pf-v6-c-label__content">
1215
+ <span class="pf-v6-c-label__content">
1216
+ <span
1217
+ class="pf-v6-c-label__text"
1218
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-two"
1219
+ >Label two</span>
1220
+ </span>
1221
+ <span class="pf-v6-c-label__actions">
1222
+ <button
1223
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1224
+ type="button"
1225
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-two"
1226
+ aria-label="Remove"
1227
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two"
1228
+ >
1229
+ <i class="fas fa-times" aria-hidden="true"></i>
1230
+ </button>
1231
+ </span>
1206
1232
  </span>
1207
- </div>
1233
+ </span>
1208
1234
  </li>
1209
- <li class="pf-v6-c-chip-group__list-item">
1210
- <div class="pf-v6-c-chip">
1211
- <span class="pf-v6-c-chip__content">
1212
- <span
1213
- class="pf-v6-c-chip__text"
1214
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
1215
- >Chip three</span>
1235
+ <li class="pf-v6-c-label-group__list-item">
1236
+ <span class="pf-v6-c-label pf-m-outline">
1237
+ <span class="pf-v6-c-label__content">
1238
+ <span class="pf-v6-c-label__content">
1239
+ <span
1240
+ class="pf-v6-c-label__text"
1241
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-three"
1242
+ >Label three</span>
1243
+ </span>
1244
+ <span class="pf-v6-c-label__actions">
1245
+ <button
1246
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1247
+ type="button"
1248
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-three"
1249
+ aria-label="Remove"
1250
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three"
1251
+ >
1252
+ <i class="fas fa-times" aria-hidden="true"></i>
1253
+ </button>
1254
+ </span>
1216
1255
  </span>
1217
- <span class="pf-v6-c-chip__actions">
1218
- <button
1219
- class="pf-v6-c-button pf-m-plain"
1220
- type="button"
1221
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
1222
- aria-label="Remove"
1223
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three"
1224
- >
1225
- <i class="fas fa-times" aria-hidden="true"></i>
1226
- </button>
1227
- </span>
1228
- </div>
1256
+ </span>
1229
1257
  </li>
1230
1258
  </ul>
1231
1259
  </div>
@@ -1425,158 +1453,172 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1425
1453
  <div class="pf-v6-c-toolbar__group">
1426
1454
  <div class="pf-v6-c-toolbar__group">
1427
1455
  <div class="pf-v6-c-toolbar__item">
1428
- <div class="pf-v6-c-chip-group" role="group">
1429
- <div class="pf-v6-c-chip-group__main">
1456
+ <div class="pf-v6-c-label-group pf-m-category">
1457
+ <div class="pf-v6-c-label-group__main">
1430
1458
  <span
1431
- class="pf-v6-c-chip-group__label"
1432
- id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1459
+ class="pf-v6-c-label-group__label"
1460
+ aria-hidden="true"
1461
+ id="toolbar-selected-filters-example-label-group-status-label-group-label"
1433
1462
  >Status</span>
1434
1463
  <ul
1435
- class="pf-v6-c-chip-group__list"
1464
+ class="pf-v6-c-label-group__list"
1436
1465
  role="list"
1437
- aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1466
+ aria-labelledby="toolbar-selected-filters-example-label-group-status-label-group-label"
1438
1467
  >
1439
- <li class="pf-v6-c-chip-group__list-item">
1440
- <div class="pf-v6-c-chip">
1441
- <span class="pf-v6-c-chip__content">
1442
- <span
1443
- class="pf-v6-c-chip__text"
1444
- id="toolbar-selected-filters-example-chip-group-statuschip-one"
1445
- >Chip one</span>
1446
- </span>
1447
- <span class="pf-v6-c-chip__actions">
1448
- <button
1449
- class="pf-v6-c-button pf-m-plain"
1450
- type="button"
1451
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
1452
- aria-label="Remove"
1453
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
1454
- >
1455
- <i class="fas fa-times" aria-hidden="true"></i>
1456
- </button>
1468
+ <li class="pf-v6-c-label-group__list-item">
1469
+ <span class="pf-v6-c-label pf-m-outline">
1470
+ <span class="pf-v6-c-label__content">
1471
+ <span class="pf-v6-c-label__content">
1472
+ <span
1473
+ class="pf-v6-c-label__text"
1474
+ id="toolbar-selected-filters-example-label-group-statuslabel-one"
1475
+ >Label one</span>
1476
+ </span>
1477
+ <span class="pf-v6-c-label__actions">
1478
+ <button
1479
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1480
+ type="button"
1481
+ aria-labelledby="toolbar-selected-filters-example-label-group-statusremove-label-one toolbar-selected-filters-example-label-group-statuslabel-one"
1482
+ aria-label="Remove"
1483
+ id="toolbar-selected-filters-example-label-group-statusremove-label-one"
1484
+ >
1485
+ <i class="fas fa-times" aria-hidden="true"></i>
1486
+ </button>
1487
+ </span>
1457
1488
  </span>
1458
- </div>
1489
+ </span>
1459
1490
  </li>
1460
- <li class="pf-v6-c-chip-group__list-item">
1461
- <div class="pf-v6-c-chip">
1462
- <span class="pf-v6-c-chip__content">
1463
- <span
1464
- class="pf-v6-c-chip__text"
1465
- id="toolbar-selected-filters-example-chip-group-statuschip-two"
1466
- >Chip two</span>
1467
- </span>
1468
- <span class="pf-v6-c-chip__actions">
1469
- <button
1470
- class="pf-v6-c-button pf-m-plain"
1471
- type="button"
1472
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
1473
- aria-label="Remove"
1474
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
1475
- >
1476
- <i class="fas fa-times" aria-hidden="true"></i>
1477
- </button>
1491
+ <li class="pf-v6-c-label-group__list-item">
1492
+ <span class="pf-v6-c-label pf-m-outline">
1493
+ <span class="pf-v6-c-label__content">
1494
+ <span class="pf-v6-c-label__content">
1495
+ <span
1496
+ class="pf-v6-c-label__text"
1497
+ id="toolbar-selected-filters-example-label-group-statuslabel-two"
1498
+ >Label two</span>
1499
+ </span>
1500
+ <span class="pf-v6-c-label__actions">
1501
+ <button
1502
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1503
+ type="button"
1504
+ aria-labelledby="toolbar-selected-filters-example-label-group-statusremove-label-two toolbar-selected-filters-example-label-group-statuslabel-two"
1505
+ aria-label="Remove"
1506
+ id="toolbar-selected-filters-example-label-group-statusremove-label-two"
1507
+ >
1508
+ <i class="fas fa-times" aria-hidden="true"></i>
1509
+ </button>
1510
+ </span>
1478
1511
  </span>
1479
- </div>
1512
+ </span>
1480
1513
  </li>
1481
- <li class="pf-v6-c-chip-group__list-item">
1482
- <div class="pf-v6-c-chip">
1483
- <span class="pf-v6-c-chip__content">
1484
- <span
1485
- class="pf-v6-c-chip__text"
1486
- id="toolbar-selected-filters-example-chip-group-statuschip-three"
1487
- >Chip three</span>
1488
- </span>
1489
- <span class="pf-v6-c-chip__actions">
1490
- <button
1491
- class="pf-v6-c-button pf-m-plain"
1492
- type="button"
1493
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
1494
- aria-label="Remove"
1495
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
1496
- >
1497
- <i class="fas fa-times" aria-hidden="true"></i>
1498
- </button>
1514
+ <li class="pf-v6-c-label-group__list-item">
1515
+ <span class="pf-v6-c-label pf-m-outline">
1516
+ <span class="pf-v6-c-label__content">
1517
+ <span class="pf-v6-c-label__content">
1518
+ <span
1519
+ class="pf-v6-c-label__text"
1520
+ id="toolbar-selected-filters-example-label-group-statuslabel-three"
1521
+ >Label three</span>
1522
+ </span>
1523
+ <span class="pf-v6-c-label__actions">
1524
+ <button
1525
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1526
+ type="button"
1527
+ aria-labelledby="toolbar-selected-filters-example-label-group-statusremove-label-three toolbar-selected-filters-example-label-group-statuslabel-three"
1528
+ aria-label="Remove"
1529
+ id="toolbar-selected-filters-example-label-group-statusremove-label-three"
1530
+ >
1531
+ <i class="fas fa-times" aria-hidden="true"></i>
1532
+ </button>
1533
+ </span>
1499
1534
  </span>
1500
- </div>
1535
+ </span>
1501
1536
  </li>
1502
1537
  </ul>
1503
1538
  </div>
1504
1539
  </div>
1505
1540
  </div>
1506
1541
  <div class="pf-v6-c-toolbar__item">
1507
- <div class="pf-v6-c-chip-group" role="group">
1508
- <div class="pf-v6-c-chip-group__main">
1542
+ <div class="pf-v6-c-label-group pf-m-category">
1543
+ <div class="pf-v6-c-label-group__main">
1509
1544
  <span
1510
- class="pf-v6-c-chip-group__label"
1511
- id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1545
+ class="pf-v6-c-label-group__label"
1546
+ aria-hidden="true"
1547
+ id="toolbar-selected-filters-example-label-group-risk-label-group-label"
1512
1548
  >Risk</span>
1513
1549
  <ul
1514
- class="pf-v6-c-chip-group__list"
1550
+ class="pf-v6-c-label-group__list"
1515
1551
  role="list"
1516
- aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1552
+ aria-labelledby="toolbar-selected-filters-example-label-group-risk-label-group-label"
1517
1553
  >
1518
- <li class="pf-v6-c-chip-group__list-item">
1519
- <div class="pf-v6-c-chip">
1520
- <span class="pf-v6-c-chip__content">
1521
- <span
1522
- class="pf-v6-c-chip__text"
1523
- id="toolbar-selected-filters-example-chip-group-riskchip-one"
1524
- >Chip one</span>
1525
- </span>
1526
- <span class="pf-v6-c-chip__actions">
1527
- <button
1528
- class="pf-v6-c-button pf-m-plain"
1529
- type="button"
1530
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
1531
- aria-label="Remove"
1532
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
1533
- >
1534
- <i class="fas fa-times" aria-hidden="true"></i>
1535
- </button>
1554
+ <li class="pf-v6-c-label-group__list-item">
1555
+ <span class="pf-v6-c-label pf-m-outline">
1556
+ <span class="pf-v6-c-label__content">
1557
+ <span class="pf-v6-c-label__content">
1558
+ <span
1559
+ class="pf-v6-c-label__text"
1560
+ id="toolbar-selected-filters-example-label-group-risklabel-one"
1561
+ >Label one</span>
1562
+ </span>
1563
+ <span class="pf-v6-c-label__actions">
1564
+ <button
1565
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1566
+ type="button"
1567
+ aria-labelledby="toolbar-selected-filters-example-label-group-riskremove-label-one toolbar-selected-filters-example-label-group-risklabel-one"
1568
+ aria-label="Remove"
1569
+ id="toolbar-selected-filters-example-label-group-riskremove-label-one"
1570
+ >
1571
+ <i class="fas fa-times" aria-hidden="true"></i>
1572
+ </button>
1573
+ </span>
1536
1574
  </span>
1537
- </div>
1575
+ </span>
1538
1576
  </li>
1539
- <li class="pf-v6-c-chip-group__list-item">
1540
- <div class="pf-v6-c-chip">
1541
- <span class="pf-v6-c-chip__content">
1542
- <span
1543
- class="pf-v6-c-chip__text"
1544
- id="toolbar-selected-filters-example-chip-group-riskchip-two"
1545
- >Chip two</span>
1546
- </span>
1547
- <span class="pf-v6-c-chip__actions">
1548
- <button
1549
- class="pf-v6-c-button pf-m-plain"
1550
- type="button"
1551
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
1552
- aria-label="Remove"
1553
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
1554
- >
1555
- <i class="fas fa-times" aria-hidden="true"></i>
1556
- </button>
1577
+ <li class="pf-v6-c-label-group__list-item">
1578
+ <span class="pf-v6-c-label pf-m-outline">
1579
+ <span class="pf-v6-c-label__content">
1580
+ <span class="pf-v6-c-label__content">
1581
+ <span
1582
+ class="pf-v6-c-label__text"
1583
+ id="toolbar-selected-filters-example-label-group-risklabel-two"
1584
+ >Label two</span>
1585
+ </span>
1586
+ <span class="pf-v6-c-label__actions">
1587
+ <button
1588
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1589
+ type="button"
1590
+ aria-labelledby="toolbar-selected-filters-example-label-group-riskremove-label-two toolbar-selected-filters-example-label-group-risklabel-two"
1591
+ aria-label="Remove"
1592
+ id="toolbar-selected-filters-example-label-group-riskremove-label-two"
1593
+ >
1594
+ <i class="fas fa-times" aria-hidden="true"></i>
1595
+ </button>
1596
+ </span>
1557
1597
  </span>
1558
- </div>
1598
+ </span>
1559
1599
  </li>
1560
- <li class="pf-v6-c-chip-group__list-item">
1561
- <div class="pf-v6-c-chip">
1562
- <span class="pf-v6-c-chip__content">
1563
- <span
1564
- class="pf-v6-c-chip__text"
1565
- id="toolbar-selected-filters-example-chip-group-riskchip-three"
1566
- >Chip three</span>
1567
- </span>
1568
- <span class="pf-v6-c-chip__actions">
1569
- <button
1570
- class="pf-v6-c-button pf-m-plain"
1571
- type="button"
1572
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
1573
- aria-label="Remove"
1574
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
1575
- >
1576
- <i class="fas fa-times" aria-hidden="true"></i>
1577
- </button>
1600
+ <li class="pf-v6-c-label-group__list-item">
1601
+ <span class="pf-v6-c-label pf-m-outline">
1602
+ <span class="pf-v6-c-label__content">
1603
+ <span class="pf-v6-c-label__content">
1604
+ <span
1605
+ class="pf-v6-c-label__text"
1606
+ id="toolbar-selected-filters-example-label-group-risklabel-three"
1607
+ >Label three</span>
1608
+ </span>
1609
+ <span class="pf-v6-c-label__actions">
1610
+ <button
1611
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1612
+ type="button"
1613
+ aria-labelledby="toolbar-selected-filters-example-label-group-riskremove-label-three toolbar-selected-filters-example-label-group-risklabel-three"
1614
+ aria-label="Remove"
1615
+ id="toolbar-selected-filters-example-label-group-riskremove-label-three"
1616
+ >
1617
+ <i class="fas fa-times" aria-hidden="true"></i>
1618
+ </button>
1619
+ </span>
1578
1620
  </span>
1579
- </div>
1621
+ </span>
1580
1622
  </li>
1581
1623
  </ul>
1582
1624
  </div>