@patternfly/patternfly 6.0.0-alpha.131 → 6.0.0-alpha.133

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 (51) hide show
  1. package/components/Breadcrumb/breadcrumb.css +10 -10
  2. package/components/Breadcrumb/breadcrumb.scss +10 -10
  3. package/components/Hint/hint.css +2 -2
  4. package/components/Hint/hint.scss +2 -3
  5. package/components/Login/login.css +4 -2
  6. package/components/Login/login.scss +2 -1
  7. package/components/Menu/menu.css +4 -1
  8. package/components/Menu/menu.scss +5 -1
  9. package/components/_index.css +20 -15
  10. package/docs/components/ActionList/examples/ActionList.md +4 -4
  11. package/docs/components/Breadcrumb/examples/Breadcrumb.md +2 -1
  12. package/docs/components/Card/examples/Card.md +80 -416
  13. package/docs/components/DataList/examples/DataList.md +170 -952
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +160 -896
  15. package/docs/components/Hint/examples/Hint.md +30 -156
  16. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  17. package/docs/components/LogViewer/examples/LogViewer.css +9 -2
  18. package/docs/components/LogViewer/examples/LogViewer.md +315 -3313
  19. package/docs/components/Menu/examples/Menu.md +6 -76
  20. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -0
  21. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +370 -2064
  22. package/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +56 -143
  24. package/docs/components/Table/examples/Table.css +7 -0
  25. package/docs/components/Table/examples/Table.md +281 -405
  26. package/docs/components/Toolbar/examples/Toolbar.md +32 -239
  27. package/docs/demos/CardView/examples/CardView.md +110 -583
  28. package/docs/demos/Dashboard/examples/Dashboard.md +10 -56
  29. package/docs/demos/DataList/examples/DataList.md +44 -96
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +10 -56
  31. package/docs/demos/Drawer/examples/Drawer.md +10 -56
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +647 -3504
  33. package/docs/demos/Page/examples/Penta.md +5 -5
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +150 -675
  35. package/docs/demos/Table/examples/Table.md +142 -220
  36. package/docs/demos/Tabs/examples/Tabs.md +15 -28
  37. package/docs/demos/Toolbar/examples/Toolbar.css +0 -16
  38. package/docs/demos/Toolbar/examples/Toolbar.md +88 -609
  39. package/docs/utilities/Display/examples/Display.css +1 -8
  40. package/docs/utilities/Display/examples/Display.md +16 -7
  41. package/package.json +1 -1
  42. package/patternfly-addons.css +38 -0
  43. package/patternfly-charts.css +339 -8
  44. package/patternfly-charts.scss +21 -8
  45. package/patternfly-no-globals.css +20 -15
  46. package/patternfly.css +20 -15
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/utilities/Display/display.css +38 -0
  50. package/utilities/Display/display.scss +3 -1
  51. package/utilities/_index.css +38 -0
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -539,30 +539,17 @@ section: patterns
539
539
  </div>
540
540
  </div>
541
541
  <div class="pf-v6-c-overflow-menu__control">
542
- <div class="pf-v6-c-dropdown">
543
- <button
544
- class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
545
- type="button"
546
- id="card-view-basic-example-toolbar-overflow-menu-dropdown-toggle"
547
- aria-label="Dropdown with additional options"
548
- aria-expanded="false"
549
- >
542
+ <button
543
+ class="pf-v6-c-menu-toggle pf-m-plain"
544
+ type="button"
545
+ aria-expanded="false"
546
+ aria-label="Menu toggle"
547
+ id="card-view-basic-example-toolbar-overflow-menutoggle"
548
+ >
549
+ <span class="pf-v6-c-menu-toggle__icon">
550
550
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
551
- </button>
552
- <ul
553
- class="pf-v6-c-dropdown__menu"
554
- role="menu"
555
- aria-labelledby="card-view-basic-example-toolbar-overflow-menu-dropdown-toggle"
556
- hidden
557
- >
558
- <li role="none">
559
- <button
560
- role="menuitem"
561
- class="pf-v6-c-dropdown__menu-item"
562
- >Action 7</button>
563
- </li>
564
- </ul>
565
- </div>
551
+ </span>
552
+ </button>
566
553
  </div>
567
554
  </div>
568
555
 
@@ -686,63 +673,17 @@ section: patterns
686
673
  <div class="pf-v6-c-card__header">
687
674
  <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
688
675
  <div class="pf-v6-c-card__actions">
689
- <div class="pf-v6-c-dropdown">
690
- <button
691
- class="pf-v6-c-dropdown__toggle pf-m-plain"
692
- id="card-view-basic-example-gallery-card-1-dropdown-kebab-button"
693
- aria-expanded="false"
694
- type="button"
695
- aria-label="Actions"
696
- >
676
+ <button
677
+ class="pf-v6-c-menu-toggle pf-m-plain"
678
+ type="button"
679
+ aria-expanded="false"
680
+ aria-label="Menu toggle"
681
+ id="card-view-basic-example-gallery-card-1toggle"
682
+ >
683
+ <span class="pf-v6-c-menu-toggle__icon">
697
684
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
698
- </button>
699
- <ul
700
- class="pf-v6-c-dropdown__menu pf-m-align-right"
701
- aria-labelledby="card-view-basic-example-gallery-card-1-dropdown-kebab-button"
702
- hidden
703
- role="menu"
704
- >
705
- <li role="none">
706
- <a
707
- class="pf-v6-c-dropdown__menu-item"
708
- role="menuitem"
709
- href="#"
710
- >Link</a>
711
- </li>
712
- <li role="none">
713
- <button
714
- class="pf-v6-c-dropdown__menu-item"
715
- role="menuitem"
716
- type="button"
717
- >Action</button>
718
- </li>
719
- <li role="none">
720
- <a
721
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
722
- role="menuitem"
723
- href="#"
724
- aria-disabled="true"
725
- tabindex="-1"
726
- >Disabled link</a>
727
- </li>
728
- <li role="none">
729
- <button
730
- class="pf-v6-c-dropdown__menu-item"
731
- role="menuitem"
732
- type="button"
733
- disabled
734
- >Disabled action</button>
735
- </li>
736
- <li class="pf-v6-c-divider" role="separator"></li>
737
- <li role="none">
738
- <a
739
- class="pf-v6-c-dropdown__menu-item"
740
- role="menuitem"
741
- href="#"
742
- >Separated link</a>
743
- </li>
744
- </ul>
745
- </div>
685
+ </span>
686
+ </button>
746
687
  <div class="pf-v6-c-check pf-m-standalone">
747
688
  <input
748
689
  class="pf-v6-c-check__input"
@@ -778,63 +719,17 @@ section: patterns
778
719
  alt="Logo"
779
720
  />
780
721
  <div class="pf-v6-c-card__actions">
781
- <div class="pf-v6-c-dropdown">
782
- <button
783
- class="pf-v6-c-dropdown__toggle pf-m-plain"
784
- id="card-view-basic-example-gallery-card-2-dropdown-kebab-button"
785
- aria-expanded="false"
786
- type="button"
787
- aria-label="Actions"
788
- >
722
+ <button
723
+ class="pf-v6-c-menu-toggle pf-m-plain"
724
+ type="button"
725
+ aria-expanded="false"
726
+ aria-label="Menu toggle"
727
+ id="card-view-basic-example-gallery-card-2toggle"
728
+ >
729
+ <span class="pf-v6-c-menu-toggle__icon">
789
730
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
790
- </button>
791
- <ul
792
- class="pf-v6-c-dropdown__menu pf-m-align-right"
793
- aria-labelledby="card-view-basic-example-gallery-card-2-dropdown-kebab-button"
794
- hidden
795
- role="menu"
796
- >
797
- <li role="none">
798
- <a
799
- class="pf-v6-c-dropdown__menu-item"
800
- role="menuitem"
801
- href="#"
802
- >Link</a>
803
- </li>
804
- <li role="none">
805
- <button
806
- class="pf-v6-c-dropdown__menu-item"
807
- role="menuitem"
808
- type="button"
809
- >Action</button>
810
- </li>
811
- <li role="none">
812
- <a
813
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
814
- role="menuitem"
815
- href="#"
816
- aria-disabled="true"
817
- tabindex="-1"
818
- >Disabled link</a>
819
- </li>
820
- <li role="none">
821
- <button
822
- class="pf-v6-c-dropdown__menu-item"
823
- role="menuitem"
824
- type="button"
825
- disabled
826
- >Disabled action</button>
827
- </li>
828
- <li class="pf-v6-c-divider" role="separator"></li>
829
- <li role="none">
830
- <a
831
- class="pf-v6-c-dropdown__menu-item"
832
- role="menuitem"
833
- href="#"
834
- >Separated link</a>
835
- </li>
836
- </ul>
837
- </div>
731
+ </span>
732
+ </button>
838
733
  <div class="pf-v6-c-check pf-m-standalone">
839
734
  <input
840
735
  class="pf-v6-c-check__input"
@@ -870,63 +765,17 @@ section: patterns
870
765
  alt="Logo"
871
766
  />
872
767
  <div class="pf-v6-c-card__actions">
873
- <div class="pf-v6-c-dropdown">
874
- <button
875
- class="pf-v6-c-dropdown__toggle pf-m-plain"
876
- id="card-view-basic-example-gallery-card-3-dropdown-kebab-button"
877
- aria-expanded="false"
878
- type="button"
879
- aria-label="Actions"
880
- >
768
+ <button
769
+ class="pf-v6-c-menu-toggle pf-m-plain"
770
+ type="button"
771
+ aria-expanded="false"
772
+ aria-label="Menu toggle"
773
+ id="card-view-basic-example-gallery-card-3toggle"
774
+ >
775
+ <span class="pf-v6-c-menu-toggle__icon">
881
776
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
882
- </button>
883
- <ul
884
- class="pf-v6-c-dropdown__menu pf-m-align-right"
885
- aria-labelledby="card-view-basic-example-gallery-card-3-dropdown-kebab-button"
886
- hidden
887
- role="menu"
888
- >
889
- <li role="none">
890
- <a
891
- class="pf-v6-c-dropdown__menu-item"
892
- role="menuitem"
893
- href="#"
894
- >Link</a>
895
- </li>
896
- <li role="none">
897
- <button
898
- class="pf-v6-c-dropdown__menu-item"
899
- role="menuitem"
900
- type="button"
901
- >Action</button>
902
- </li>
903
- <li role="none">
904
- <a
905
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
906
- role="menuitem"
907
- href="#"
908
- aria-disabled="true"
909
- tabindex="-1"
910
- >Disabled link</a>
911
- </li>
912
- <li role="none">
913
- <button
914
- class="pf-v6-c-dropdown__menu-item"
915
- role="menuitem"
916
- type="button"
917
- disabled
918
- >Disabled action</button>
919
- </li>
920
- <li class="pf-v6-c-divider" role="separator"></li>
921
- <li role="none">
922
- <a
923
- class="pf-v6-c-dropdown__menu-item"
924
- role="menuitem"
925
- href="#"
926
- >Separated link</a>
927
- </li>
928
- </ul>
929
- </div>
777
+ </span>
778
+ </button>
930
779
  <div class="pf-v6-c-check pf-m-standalone">
931
780
  <input
932
781
  class="pf-v6-c-check__input"
@@ -962,63 +811,17 @@ section: patterns
962
811
  alt="Logo"
963
812
  />
964
813
  <div class="pf-v6-c-card__actions">
965
- <div class="pf-v6-c-dropdown">
966
- <button
967
- class="pf-v6-c-dropdown__toggle pf-m-plain"
968
- id="card-view-basic-example-gallery-card-4-dropdown-kebab-button"
969
- aria-expanded="false"
970
- type="button"
971
- aria-label="Actions"
972
- >
814
+ <button
815
+ class="pf-v6-c-menu-toggle pf-m-plain"
816
+ type="button"
817
+ aria-expanded="false"
818
+ aria-label="Menu toggle"
819
+ id="card-view-basic-example-gallery-card-4toggle"
820
+ >
821
+ <span class="pf-v6-c-menu-toggle__icon">
973
822
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
974
- </button>
975
- <ul
976
- class="pf-v6-c-dropdown__menu pf-m-align-right"
977
- aria-labelledby="card-view-basic-example-gallery-card-4-dropdown-kebab-button"
978
- hidden
979
- role="menu"
980
- >
981
- <li role="none">
982
- <a
983
- class="pf-v6-c-dropdown__menu-item"
984
- role="menuitem"
985
- href="#"
986
- >Link</a>
987
- </li>
988
- <li role="none">
989
- <button
990
- class="pf-v6-c-dropdown__menu-item"
991
- role="menuitem"
992
- type="button"
993
- >Action</button>
994
- </li>
995
- <li role="none">
996
- <a
997
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
998
- role="menuitem"
999
- href="#"
1000
- aria-disabled="true"
1001
- tabindex="-1"
1002
- >Disabled link</a>
1003
- </li>
1004
- <li role="none">
1005
- <button
1006
- class="pf-v6-c-dropdown__menu-item"
1007
- role="menuitem"
1008
- type="button"
1009
- disabled
1010
- >Disabled action</button>
1011
- </li>
1012
- <li class="pf-v6-c-divider" role="separator"></li>
1013
- <li role="none">
1014
- <a
1015
- class="pf-v6-c-dropdown__menu-item"
1016
- role="menuitem"
1017
- href="#"
1018
- >Separated link</a>
1019
- </li>
1020
- </ul>
1021
- </div>
823
+ </span>
824
+ </button>
1022
825
  <div class="pf-v6-c-check pf-m-standalone">
1023
826
  <input
1024
827
  class="pf-v6-c-check__input"
@@ -1054,63 +857,17 @@ section: patterns
1054
857
  alt="Logo"
1055
858
  />
1056
859
  <div class="pf-v6-c-card__actions">
1057
- <div class="pf-v6-c-dropdown">
1058
- <button
1059
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1060
- id="card-view-basic-example-gallery-card-5-dropdown-kebab-button"
1061
- aria-expanded="false"
1062
- type="button"
1063
- aria-label="Actions"
1064
- >
860
+ <button
861
+ class="pf-v6-c-menu-toggle pf-m-plain"
862
+ type="button"
863
+ aria-expanded="false"
864
+ aria-label="Menu toggle"
865
+ id="card-view-basic-example-gallery-card-5toggle"
866
+ >
867
+ <span class="pf-v6-c-menu-toggle__icon">
1065
868
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1066
- </button>
1067
- <ul
1068
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1069
- aria-labelledby="card-view-basic-example-gallery-card-5-dropdown-kebab-button"
1070
- hidden
1071
- role="menu"
1072
- >
1073
- <li role="none">
1074
- <a
1075
- class="pf-v6-c-dropdown__menu-item"
1076
- role="menuitem"
1077
- href="#"
1078
- >Link</a>
1079
- </li>
1080
- <li role="none">
1081
- <button
1082
- class="pf-v6-c-dropdown__menu-item"
1083
- role="menuitem"
1084
- type="button"
1085
- >Action</button>
1086
- </li>
1087
- <li role="none">
1088
- <a
1089
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1090
- role="menuitem"
1091
- href="#"
1092
- aria-disabled="true"
1093
- tabindex="-1"
1094
- >Disabled link</a>
1095
- </li>
1096
- <li role="none">
1097
- <button
1098
- class="pf-v6-c-dropdown__menu-item"
1099
- role="menuitem"
1100
- type="button"
1101
- disabled
1102
- >Disabled action</button>
1103
- </li>
1104
- <li class="pf-v6-c-divider" role="separator"></li>
1105
- <li role="none">
1106
- <a
1107
- class="pf-v6-c-dropdown__menu-item"
1108
- role="menuitem"
1109
- href="#"
1110
- >Separated link</a>
1111
- </li>
1112
- </ul>
1113
- </div>
869
+ </span>
870
+ </button>
1114
871
  <div class="pf-v6-c-check pf-m-standalone">
1115
872
  <input
1116
873
  class="pf-v6-c-check__input"
@@ -1146,63 +903,17 @@ section: patterns
1146
903
  alt="Logo"
1147
904
  />
1148
905
  <div class="pf-v6-c-card__actions">
1149
- <div class="pf-v6-c-dropdown">
1150
- <button
1151
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1152
- id="card-view-basic-example-gallery-card-6-dropdown-kebab-button"
1153
- aria-expanded="false"
1154
- type="button"
1155
- aria-label="Actions"
1156
- >
906
+ <button
907
+ class="pf-v6-c-menu-toggle pf-m-plain"
908
+ type="button"
909
+ aria-expanded="false"
910
+ aria-label="Menu toggle"
911
+ id="card-view-basic-example-gallery-card-6toggle"
912
+ >
913
+ <span class="pf-v6-c-menu-toggle__icon">
1157
914
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1158
- </button>
1159
- <ul
1160
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1161
- aria-labelledby="card-view-basic-example-gallery-card-6-dropdown-kebab-button"
1162
- hidden
1163
- role="menu"
1164
- >
1165
- <li role="none">
1166
- <a
1167
- class="pf-v6-c-dropdown__menu-item"
1168
- role="menuitem"
1169
- href="#"
1170
- >Link</a>
1171
- </li>
1172
- <li role="none">
1173
- <button
1174
- class="pf-v6-c-dropdown__menu-item"
1175
- role="menuitem"
1176
- type="button"
1177
- >Action</button>
1178
- </li>
1179
- <li role="none">
1180
- <a
1181
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1182
- role="menuitem"
1183
- href="#"
1184
- aria-disabled="true"
1185
- tabindex="-1"
1186
- >Disabled link</a>
1187
- </li>
1188
- <li role="none">
1189
- <button
1190
- class="pf-v6-c-dropdown__menu-item"
1191
- role="menuitem"
1192
- type="button"
1193
- disabled
1194
- >Disabled action</button>
1195
- </li>
1196
- <li class="pf-v6-c-divider" role="separator"></li>
1197
- <li role="none">
1198
- <a
1199
- class="pf-v6-c-dropdown__menu-item"
1200
- role="menuitem"
1201
- href="#"
1202
- >Separated link</a>
1203
- </li>
1204
- </ul>
1205
- </div>
915
+ </span>
916
+ </button>
1206
917
  <div class="pf-v6-c-check pf-m-standalone">
1207
918
  <input
1208
919
  class="pf-v6-c-check__input"
@@ -1239,63 +950,17 @@ section: patterns
1239
950
  alt="Logo"
1240
951
  />
1241
952
  <div class="pf-v6-c-card__actions">
1242
- <div class="pf-v6-c-dropdown">
1243
- <button
1244
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1245
- id="card-view-basic-example-gallery-card-7-dropdown-kebab-button"
1246
- aria-expanded="false"
1247
- type="button"
1248
- aria-label="Actions"
1249
- >
953
+ <button
954
+ class="pf-v6-c-menu-toggle pf-m-plain"
955
+ type="button"
956
+ aria-expanded="false"
957
+ aria-label="Menu toggle"
958
+ id="card-view-basic-example-gallery-card-7toggle"
959
+ >
960
+ <span class="pf-v6-c-menu-toggle__icon">
1250
961
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1251
- </button>
1252
- <ul
1253
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1254
- aria-labelledby="card-view-basic-example-gallery-card-7-dropdown-kebab-button"
1255
- hidden
1256
- role="menu"
1257
- >
1258
- <li role="none">
1259
- <a
1260
- class="pf-v6-c-dropdown__menu-item"
1261
- role="menuitem"
1262
- href="#"
1263
- >Link</a>
1264
- </li>
1265
- <li role="none">
1266
- <button
1267
- class="pf-v6-c-dropdown__menu-item"
1268
- role="menuitem"
1269
- type="button"
1270
- >Action</button>
1271
- </li>
1272
- <li role="none">
1273
- <a
1274
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1275
- role="menuitem"
1276
- href="#"
1277
- aria-disabled="true"
1278
- tabindex="-1"
1279
- >Disabled link</a>
1280
- </li>
1281
- <li role="none">
1282
- <button
1283
- class="pf-v6-c-dropdown__menu-item"
1284
- role="menuitem"
1285
- type="button"
1286
- disabled
1287
- >Disabled action</button>
1288
- </li>
1289
- <li class="pf-v6-c-divider" role="separator"></li>
1290
- <li role="none">
1291
- <a
1292
- class="pf-v6-c-dropdown__menu-item"
1293
- role="menuitem"
1294
- href="#"
1295
- >Separated link</a>
1296
- </li>
1297
- </ul>
1298
- </div>
962
+ </span>
963
+ </button>
1299
964
  <div class="pf-v6-c-check pf-m-standalone">
1300
965
  <input
1301
966
  class="pf-v6-c-check__input"
@@ -1331,63 +996,17 @@ section: patterns
1331
996
  alt="Logo"
1332
997
  />
1333
998
  <div class="pf-v6-c-card__actions">
1334
- <div class="pf-v6-c-dropdown">
1335
- <button
1336
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1337
- id="card-view-basic-example-gallery-card-8-dropdown-kebab-button"
1338
- aria-expanded="false"
1339
- type="button"
1340
- aria-label="Actions"
1341
- >
999
+ <button
1000
+ class="pf-v6-c-menu-toggle pf-m-plain"
1001
+ type="button"
1002
+ aria-expanded="false"
1003
+ aria-label="Menu toggle"
1004
+ id="card-view-basic-example-gallery-card-8toggle"
1005
+ >
1006
+ <span class="pf-v6-c-menu-toggle__icon">
1342
1007
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1343
- </button>
1344
- <ul
1345
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1346
- aria-labelledby="card-view-basic-example-gallery-card-8-dropdown-kebab-button"
1347
- hidden
1348
- role="menu"
1349
- >
1350
- <li role="none">
1351
- <a
1352
- class="pf-v6-c-dropdown__menu-item"
1353
- role="menuitem"
1354
- href="#"
1355
- >Link</a>
1356
- </li>
1357
- <li role="none">
1358
- <button
1359
- class="pf-v6-c-dropdown__menu-item"
1360
- role="menuitem"
1361
- type="button"
1362
- >Action</button>
1363
- </li>
1364
- <li role="none">
1365
- <a
1366
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1367
- role="menuitem"
1368
- href="#"
1369
- aria-disabled="true"
1370
- tabindex="-1"
1371
- >Disabled link</a>
1372
- </li>
1373
- <li role="none">
1374
- <button
1375
- class="pf-v6-c-dropdown__menu-item"
1376
- role="menuitem"
1377
- type="button"
1378
- disabled
1379
- >Disabled action</button>
1380
- </li>
1381
- <li class="pf-v6-c-divider" role="separator"></li>
1382
- <li role="none">
1383
- <a
1384
- class="pf-v6-c-dropdown__menu-item"
1385
- role="menuitem"
1386
- href="#"
1387
- >Separated link</a>
1388
- </li>
1389
- </ul>
1390
- </div>
1008
+ </span>
1009
+ </button>
1391
1010
  <div class="pf-v6-c-check pf-m-standalone">
1392
1011
  <input
1393
1012
  class="pf-v6-c-check__input"
@@ -1423,63 +1042,17 @@ section: patterns
1423
1042
  alt="Logo"
1424
1043
  />
1425
1044
  <div class="pf-v6-c-card__actions">
1426
- <div class="pf-v6-c-dropdown">
1427
- <button
1428
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1429
- id="card-view-basic-example-gallery-card-9-dropdown-kebab-button"
1430
- aria-expanded="false"
1431
- type="button"
1432
- aria-label="Actions"
1433
- >
1045
+ <button
1046
+ class="pf-v6-c-menu-toggle pf-m-plain"
1047
+ type="button"
1048
+ aria-expanded="false"
1049
+ aria-label="Menu toggle"
1050
+ id="card-view-basic-example-gallery-card-9toggle"
1051
+ >
1052
+ <span class="pf-v6-c-menu-toggle__icon">
1434
1053
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1435
- </button>
1436
- <ul
1437
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1438
- aria-labelledby="card-view-basic-example-gallery-card-9-dropdown-kebab-button"
1439
- hidden
1440
- role="menu"
1441
- >
1442
- <li role="none">
1443
- <a
1444
- class="pf-v6-c-dropdown__menu-item"
1445
- role="menuitem"
1446
- href="#"
1447
- >Link</a>
1448
- </li>
1449
- <li role="none">
1450
- <button
1451
- class="pf-v6-c-dropdown__menu-item"
1452
- role="menuitem"
1453
- type="button"
1454
- >Action</button>
1455
- </li>
1456
- <li role="none">
1457
- <a
1458
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1459
- role="menuitem"
1460
- href="#"
1461
- aria-disabled="true"
1462
- tabindex="-1"
1463
- >Disabled link</a>
1464
- </li>
1465
- <li role="none">
1466
- <button
1467
- class="pf-v6-c-dropdown__menu-item"
1468
- role="menuitem"
1469
- type="button"
1470
- disabled
1471
- >Disabled action</button>
1472
- </li>
1473
- <li class="pf-v6-c-divider" role="separator"></li>
1474
- <li role="none">
1475
- <a
1476
- class="pf-v6-c-dropdown__menu-item"
1477
- role="menuitem"
1478
- href="#"
1479
- >Separated link</a>
1480
- </li>
1481
- </ul>
1482
- </div>
1054
+ </span>
1055
+ </button>
1483
1056
  <div class="pf-v6-c-check pf-m-standalone">
1484
1057
  <input
1485
1058
  class="pf-v6-c-check__input"
@@ -1516,63 +1089,17 @@ section: patterns
1516
1089
  alt="Logo"
1517
1090
  />
1518
1091
  <div class="pf-v6-c-card__actions">
1519
- <div class="pf-v6-c-dropdown">
1520
- <button
1521
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1522
- id="card-view-basic-example-gallery-card-10-dropdown-kebab-button"
1523
- aria-expanded="false"
1524
- type="button"
1525
- aria-label="Actions"
1526
- >
1092
+ <button
1093
+ class="pf-v6-c-menu-toggle pf-m-plain"
1094
+ type="button"
1095
+ aria-expanded="false"
1096
+ aria-label="Menu toggle"
1097
+ id="card-view-basic-example-gallery-card-10toggle"
1098
+ >
1099
+ <span class="pf-v6-c-menu-toggle__icon">
1527
1100
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1528
- </button>
1529
- <ul
1530
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1531
- aria-labelledby="card-view-basic-example-gallery-card-10-dropdown-kebab-button"
1532
- hidden
1533
- role="menu"
1534
- >
1535
- <li role="none">
1536
- <a
1537
- class="pf-v6-c-dropdown__menu-item"
1538
- role="menuitem"
1539
- href="#"
1540
- >Link</a>
1541
- </li>
1542
- <li role="none">
1543
- <button
1544
- class="pf-v6-c-dropdown__menu-item"
1545
- role="menuitem"
1546
- type="button"
1547
- >Action</button>
1548
- </li>
1549
- <li role="none">
1550
- <a
1551
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1552
- role="menuitem"
1553
- href="#"
1554
- aria-disabled="true"
1555
- tabindex="-1"
1556
- >Disabled link</a>
1557
- </li>
1558
- <li role="none">
1559
- <button
1560
- class="pf-v6-c-dropdown__menu-item"
1561
- role="menuitem"
1562
- type="button"
1563
- disabled
1564
- >Disabled action</button>
1565
- </li>
1566
- <li class="pf-v6-c-divider" role="separator"></li>
1567
- <li role="none">
1568
- <a
1569
- class="pf-v6-c-dropdown__menu-item"
1570
- role="menuitem"
1571
- href="#"
1572
- >Separated link</a>
1573
- </li>
1574
- </ul>
1575
- </div>
1101
+ </span>
1102
+ </button>
1576
1103
  <div class="pf-v6-c-check pf-m-standalone">
1577
1104
  <input
1578
1105
  class="pf-v6-c-check__input"