@patternfly/patternfly 4.183.2 → 4.184.2

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 (92) hide show
  1. package/components/Accordion/accordion.css +1 -0
  2. package/components/Accordion/accordion.scss +1 -0
  3. package/components/Menu/menu.css +1 -1
  4. package/components/Menu/menu.scss +2 -1
  5. package/components/MenuToggle/menu-toggle.css +18 -1
  6. package/components/MenuToggle/menu-toggle.scss +28 -1
  7. package/components/TextInputGroup/text-input-group.css +6 -0
  8. package/components/TextInputGroup/text-input-group.scss +11 -0
  9. package/docs/components/Accordion/examples/Accordion.md +16 -3
  10. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  11. package/docs/components/Form/examples/Form.md +118 -47
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +68 -9
  13. package/docs/components/ModalBox/examples/ModalBox.md +1 -0
  14. package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
  15. package/docs/components/Page/examples/Page.md +9 -8
  16. package/docs/components/Pagination/examples/Pagination.css +3 -0
  17. package/docs/components/Pagination/examples/Pagination.md +136 -158
  18. package/docs/components/Toolbar/examples/Toolbar.md +22 -26
  19. package/docs/components/Wizard/examples/Wizard.md +19 -18
  20. package/docs/demos/CardView/examples/CardView.md +22 -26
  21. package/docs/demos/DataList/examples/DataList.md +88 -104
  22. package/docs/demos/Form/examples/BasicForms.md +40 -8
  23. package/docs/demos/Modal/examples/Modal.md +7 -4
  24. package/docs/demos/Page/examples/Page.md +1 -0
  25. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
  26. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +54 -89
  28. package/docs/demos/Table/examples/Table.md +227 -273
  29. package/docs/demos/Tabs/examples/Tabs.md +64 -88
  30. package/docs/demos/Toolbar/examples/Toolbar.md +88 -104
  31. package/docs/demos/Wizard/examples/Wizard.md +4 -4
  32. package/package.json +1 -1
  33. package/patternfly-no-reset.css +26 -2
  34. package/patternfly.css +26 -2
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
  37. package/themes/dark/_patternfly-theme-dark.scss +118 -0
  38. package/themes/dark/_variables.scss +94 -0
  39. package/themes/dark/colors.scss +16 -0
  40. package/themes/dark/globals.scss +7 -0
  41. package/themes/dark/mixins.scss +5 -0
  42. package/themes/dark/placeholders.scss +30 -0
  43. package/themes/dark/scss-variables.scss +85 -0
  44. package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
  45. package/components/Accordion/themes/dark/accordion.css +0 -0
  46. package/components/Alert/themes/dark/alert.css +0 -0
  47. package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
  48. package/components/Badge/themes/dark/badge.css +0 -0
  49. package/components/Banner/themes/dark/banner.css +0 -0
  50. package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
  51. package/components/Button/themes/dark/button.css +0 -0
  52. package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
  53. package/components/Chip/themes/dark/chip.css +0 -0
  54. package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
  55. package/components/CodeEditor/themes/dark/code-editor.css +0 -0
  56. package/components/ContextSelector/themes/dark/context-selector.css +0 -0
  57. package/components/DataList/themes/dark/data-list.css +0 -0
  58. package/components/DatePicker/themes/dark/date-picker.css +0 -0
  59. package/components/Drawer/themes/dark/drawer.css +0 -0
  60. package/components/Dropdown/themes/dark/dropdown.css +0 -0
  61. package/components/Form/themes/dark/form.css +0 -0
  62. package/components/FormControl/themes/dark/form-control.css +0 -0
  63. package/components/HelperText/themes/dark/helper-text.css +0 -0
  64. package/components/Hint/themes/dark/hint.css +0 -0
  65. package/components/InputGroup/themes/dark/input-group.css +0 -0
  66. package/components/Label/themes/dark/label.css +0 -0
  67. package/components/LogViewer/themes/dark/log-viewer.css +0 -0
  68. package/components/Login/themes/dark/login.css +0 -0
  69. package/components/Masthead/themes/dark/masthead.css +0 -0
  70. package/components/Menu/themes/dark/menu.css +0 -0
  71. package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
  72. package/components/ModalBox/themes/dark/modal-box.css +0 -0
  73. package/components/Nav/themes/dark/nav.css +0 -0
  74. package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
  75. package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
  76. package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
  77. package/components/Page/themes/dark/page.css +0 -0
  78. package/components/Pagination/themes/dark/pagination.css +0 -0
  79. package/components/Popover/themes/dark/popover.css +0 -0
  80. package/components/Progress/themes/dark/progress.css +0 -0
  81. package/components/SearchInput/themes/dark/search-input.css +0 -0
  82. package/components/Select/themes/dark/select.css +0 -0
  83. package/components/SimpleList/themes/dark/simple-list.css +0 -0
  84. package/components/Skeleton/themes/dark/skeleton.css +0 -0
  85. package/components/Switch/themes/dark/switch.css +0 -0
  86. package/components/Table/themes/dark/table.css +0 -0
  87. package/components/Tabs/themes/dark/tabs.css +0 -0
  88. package/components/Tile/themes/dark/tile.css +0 -0
  89. package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
  90. package/components/Tooltip/themes/dark/tooltip.css +0 -0
  91. package/components/TreeView/themes/dark/tree-view.css +0 -0
  92. package/components/Wizard/themes/dark/wizard.css +0 -0
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -1877,30 +1877,24 @@ section: components
1877
1877
  <div class="pf-c-toolbar__item pf-m-pagination">
1878
1878
  <div class="pf-c-pagination pf-m-compact">
1879
1879
  <div class="pf-c-options-menu">
1880
- <div
1880
+ <button
1881
1881
  class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1882
+ type="button"
1883
+ id="table-tabs-example-toolbar-top-pagination-toggle"
1884
+ aria-haspopup="listbox"
1885
+ aria-expanded="false"
1882
1886
  >
1883
1887
  <span class="pf-c-options-menu__toggle-text">
1884
1888
  <b>1 - 10</b>&nbsp;of&nbsp;
1885
1889
  <b>36</b>
1886
1890
  </span>
1887
- <button
1888
- class="pf-c-options-menu__toggle-button"
1889
- id="table-tabs-example-toolbar-top-pagination-toggle"
1890
- aria-haspopup="listbox"
1891
- aria-expanded="false"
1892
- aria-label="Items per page"
1893
- >
1894
- <span
1895
- class="pf-c-options-menu__toggle-button-icon"
1896
- >
1897
- <i
1898
- class="fas fa-caret-down"
1899
- aria-hidden="true"
1900
- ></i>
1901
- </span>
1902
- </button>
1903
- </div>
1891
+ <div class="pf-c-options-menu__toggle-icon">
1892
+ <i
1893
+ class="fas fa-caret-down"
1894
+ aria-hidden="true"
1895
+ ></i>
1896
+ </div>
1897
+ </button>
1904
1898
  <ul
1905
1899
  class="pf-c-options-menu__menu"
1906
1900
  aria-labelledby="table-tabs-example-toolbar-top-pagination-toggle"
@@ -2895,25 +2889,21 @@ section: components
2895
2889
  </table>
2896
2890
  <div class="pf-c-pagination pf-m-bottom">
2897
2891
  <div class="pf-c-options-menu pf-m-top">
2898
- <div
2892
+ <button
2899
2893
  class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
2894
+ type="button"
2895
+ id="table-tabs-example-footer-pagination-toggle"
2896
+ aria-haspopup="listbox"
2897
+ aria-expanded="false"
2900
2898
  >
2901
2899
  <span class="pf-c-options-menu__toggle-text">
2902
2900
  <b>1 - 10</b>&nbsp;of&nbsp;
2903
2901
  <b>36</b>
2904
2902
  </span>
2905
- <button
2906
- class="pf-c-options-menu__toggle-button"
2907
- id="table-tabs-example-footer-pagination-toggle"
2908
- aria-haspopup="listbox"
2909
- aria-expanded="false"
2910
- aria-label="Items per page"
2911
- >
2912
- <span class="pf-c-options-menu__toggle-button-icon">
2913
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2914
- </span>
2915
- </button>
2916
- </div>
2903
+ <div class="pf-c-options-menu__toggle-icon">
2904
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2905
+ </div>
2906
+ </button>
2917
2907
  <ul
2918
2908
  class="pf-c-options-menu__menu pf-m-top"
2919
2909
  aria-labelledby="table-tabs-example-footer-pagination-toggle"
@@ -3673,30 +3663,24 @@ section: components
3673
3663
  <div class="pf-c-toolbar__item pf-m-pagination">
3674
3664
  <div class="pf-c-pagination pf-m-compact">
3675
3665
  <div class="pf-c-options-menu">
3676
- <div
3666
+ <button
3677
3667
  class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
3668
+ type="button"
3669
+ id="table-tabs-w-secondary-example-toolbar-top-pagination-toggle"
3670
+ aria-haspopup="listbox"
3671
+ aria-expanded="false"
3678
3672
  >
3679
3673
  <span class="pf-c-options-menu__toggle-text">
3680
3674
  <b>1 - 10</b>&nbsp;of&nbsp;
3681
3675
  <b>36</b>
3682
3676
  </span>
3683
- <button
3684
- class="pf-c-options-menu__toggle-button"
3685
- id="table-tabs-w-secondary-example-toolbar-top-pagination-toggle"
3686
- aria-haspopup="listbox"
3687
- aria-expanded="false"
3688
- aria-label="Items per page"
3689
- >
3690
- <span
3691
- class="pf-c-options-menu__toggle-button-icon"
3692
- >
3693
- <i
3694
- class="fas fa-caret-down"
3695
- aria-hidden="true"
3696
- ></i>
3697
- </span>
3698
- </button>
3699
- </div>
3677
+ <div class="pf-c-options-menu__toggle-icon">
3678
+ <i
3679
+ class="fas fa-caret-down"
3680
+ aria-hidden="true"
3681
+ ></i>
3682
+ </div>
3683
+ </button>
3700
3684
  <ul
3701
3685
  class="pf-c-options-menu__menu"
3702
3686
  aria-labelledby="table-tabs-w-secondary-example-toolbar-top-pagination-toggle"
@@ -4711,25 +4695,21 @@ section: components
4711
4695
  </table>
4712
4696
  <div class="pf-c-pagination pf-m-bottom">
4713
4697
  <div class="pf-c-options-menu pf-m-top">
4714
- <div
4698
+ <button
4715
4699
  class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
4700
+ type="button"
4701
+ id="table-tabs-w-secondary-example-footer-pagination-toggle"
4702
+ aria-haspopup="listbox"
4703
+ aria-expanded="false"
4716
4704
  >
4717
4705
  <span class="pf-c-options-menu__toggle-text">
4718
4706
  <b>1 - 10</b>&nbsp;of&nbsp;
4719
4707
  <b>36</b>
4720
4708
  </span>
4721
- <button
4722
- class="pf-c-options-menu__toggle-button"
4723
- id="table-tabs-w-secondary-example-footer-pagination-toggle"
4724
- aria-haspopup="listbox"
4725
- aria-expanded="false"
4726
- aria-label="Items per page"
4727
- >
4728
- <span class="pf-c-options-menu__toggle-button-icon">
4729
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4730
- </span>
4731
- </button>
4732
- </div>
4709
+ <div class="pf-c-options-menu__toggle-icon">
4710
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4711
+ </div>
4712
+ </button>
4733
4713
  <ul
4734
4714
  class="pf-c-options-menu__menu pf-m-top"
4735
4715
  aria-labelledby="table-tabs-w-secondary-example-footer-pagination-toggle"
@@ -5557,23 +5537,21 @@ section: components
5557
5537
  <div class="pf-c-toolbar__item pf-m-pagination">
5558
5538
  <div class="pf-c-pagination pf-m-compact">
5559
5539
  <div class="pf-c-options-menu">
5560
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
5540
+ <button
5541
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
5542
+ type="button"
5543
+ id="-top-pagination-toggle"
5544
+ aria-haspopup="listbox"
5545
+ aria-expanded="false"
5546
+ >
5561
5547
  <span class="pf-c-options-menu__toggle-text">
5562
5548
  <b>1 - 10</b>&nbsp;of&nbsp;
5563
5549
  <b>36</b>
5564
5550
  </span>
5565
- <button
5566
- class="pf-c-options-menu__toggle-button"
5567
- id="-top-pagination-toggle"
5568
- aria-haspopup="listbox"
5569
- aria-expanded="false"
5570
- aria-label="Items per page"
5571
- >
5572
- <span class="pf-c-options-menu__toggle-button-icon">
5573
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5574
- </span>
5575
- </button>
5576
- </div>
5551
+ <div class="pf-c-options-menu__toggle-icon">
5552
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
5553
+ </div>
5554
+ </button>
5577
5555
  <ul
5578
5556
  class="pf-c-options-menu__menu"
5579
5557
  aria-labelledby="-top-pagination-toggle"
@@ -6409,23 +6387,21 @@ section: components
6409
6387
  >
6410
6388
  <div class="pf-c-pagination pf-m-bottom">
6411
6389
  <div class="pf-c-options-menu pf-m-top">
6412
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
6390
+ <button
6391
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
6392
+ type="button"
6393
+ id="table-tabs-w-secondary-example-bottom-pagination-toggle"
6394
+ aria-haspopup="listbox"
6395
+ aria-expanded="false"
6396
+ >
6413
6397
  <span class="pf-c-options-menu__toggle-text">
6414
6398
  <b>1 - 10</b>&nbsp;of&nbsp;
6415
6399
  <b>36</b>
6416
6400
  </span>
6417
- <button
6418
- class="pf-c-options-menu__toggle-button"
6419
- id="table-tabs-w-secondary-example-bottom-pagination-toggle"
6420
- aria-haspopup="listbox"
6421
- aria-expanded="false"
6422
- aria-label="Items per page"
6423
- >
6424
- <span class="pf-c-options-menu__toggle-button-icon">
6425
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6426
- </span>
6427
- </button>
6428
- </div>
6401
+ <div class="pf-c-options-menu__toggle-icon">
6402
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6403
+ </div>
6404
+ </button>
6429
6405
  <ul
6430
6406
  class="pf-c-options-menu__menu pf-m-top"
6431
6407
  aria-labelledby="table-tabs-w-secondary-example-bottom-pagination-toggle"
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -163,23 +163,21 @@ section: components
163
163
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
164
164
  >
165
165
  <div class="pf-c-options-menu">
166
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
166
+ <button
167
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
168
+ type="button"
169
+ id="pagination-options-menu-bottom-example-toggle"
170
+ aria-haspopup="listbox"
171
+ aria-expanded="false"
172
+ >
167
173
  <span class="pf-c-options-menu__toggle-text">
168
174
  <b>1 - 10</b>&nbsp;of&nbsp;
169
175
  <b>36</b>
170
176
  </span>
171
- <button
172
- class="pf-c-options-menu__toggle-button"
173
- id="pagination-options-menu-bottom-example-toggle"
174
- aria-haspopup="listbox"
175
- aria-expanded="false"
176
- aria-label="Items per page"
177
- >
178
- <span class="pf-c-options-menu__toggle-button-icon">
179
- <i class="fas fa-caret-down" aria-hidden="true"></i>
180
- </span>
181
- </button>
182
- </div>
177
+ <div class="pf-c-options-menu__toggle-icon">
178
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
179
+ </div>
180
+ </button>
183
181
  <ul
184
182
  class="pf-c-options-menu__menu"
185
183
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -307,23 +305,21 @@ section: components
307
305
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
308
306
  >
309
307
  <div class="pf-c-options-menu">
310
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
308
+ <button
309
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
310
+ type="button"
311
+ id="pagination-options-menu-bottom-example-toggle"
312
+ aria-haspopup="listbox"
313
+ aria-expanded="false"
314
+ >
311
315
  <span class="pf-c-options-menu__toggle-text">
312
316
  <b>1 - 10</b>&nbsp;of&nbsp;
313
317
  <b>36</b>
314
318
  </span>
315
- <button
316
- class="pf-c-options-menu__toggle-button"
317
- id="pagination-options-menu-bottom-example-toggle"
318
- aria-haspopup="listbox"
319
- aria-expanded="false"
320
- aria-label="Items per page"
321
- >
322
- <span class="pf-c-options-menu__toggle-button-icon">
323
- <i class="fas fa-caret-down" aria-hidden="true"></i>
324
- </span>
325
- </button>
326
- </div>
319
+ <div class="pf-c-options-menu__toggle-icon">
320
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
321
+ </div>
322
+ </button>
327
323
  <ul
328
324
  class="pf-c-options-menu__menu"
329
325
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -665,23 +661,21 @@ section: components
665
661
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
666
662
  >
667
663
  <div class="pf-c-options-menu">
668
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
664
+ <button
665
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
666
+ type="button"
667
+ id="pagination-options-menu-bottom-example-toggle"
668
+ aria-haspopup="listbox"
669
+ aria-expanded="false"
670
+ >
669
671
  <span class="pf-c-options-menu__toggle-text">
670
672
  <b>1 - 10</b>&nbsp;of&nbsp;
671
673
  <b>36</b>
672
674
  </span>
673
- <button
674
- class="pf-c-options-menu__toggle-button"
675
- id="pagination-options-menu-bottom-example-toggle"
676
- aria-haspopup="listbox"
677
- aria-expanded="false"
678
- aria-label="Items per page"
679
- >
680
- <span class="pf-c-options-menu__toggle-button-icon">
681
- <i class="fas fa-caret-down" aria-hidden="true"></i>
682
- </span>
683
- </button>
684
- </div>
675
+ <div class="pf-c-options-menu__toggle-icon">
676
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
677
+ </div>
678
+ </button>
685
679
  <ul
686
680
  class="pf-c-options-menu__menu"
687
681
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -809,23 +803,21 @@ section: components
809
803
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
810
804
  >
811
805
  <div class="pf-c-options-menu">
812
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
806
+ <button
807
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
808
+ type="button"
809
+ id="pagination-options-menu-bottom-example-toggle"
810
+ aria-haspopup="listbox"
811
+ aria-expanded="false"
812
+ >
813
813
  <span class="pf-c-options-menu__toggle-text">
814
814
  <b>1 - 10</b>&nbsp;of&nbsp;
815
815
  <b>36</b>
816
816
  </span>
817
- <button
818
- class="pf-c-options-menu__toggle-button"
819
- id="pagination-options-menu-bottom-example-toggle"
820
- aria-haspopup="listbox"
821
- aria-expanded="false"
822
- aria-label="Items per page"
823
- >
824
- <span class="pf-c-options-menu__toggle-button-icon">
825
- <i class="fas fa-caret-down" aria-hidden="true"></i>
826
- </span>
827
- </button>
828
- </div>
817
+ <div class="pf-c-options-menu__toggle-icon">
818
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
819
+ </div>
820
+ </button>
829
821
  <ul
830
822
  class="pf-c-options-menu__menu"
831
823
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -1248,23 +1240,21 @@ section: components
1248
1240
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1249
1241
  >
1250
1242
  <div class="pf-c-options-menu">
1251
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
1243
+ <button
1244
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1245
+ type="button"
1246
+ id="pagination-options-menu-bottom-example-toggle"
1247
+ aria-haspopup="listbox"
1248
+ aria-expanded="false"
1249
+ >
1252
1250
  <span class="pf-c-options-menu__toggle-text">
1253
1251
  <b>1 - 10</b>&nbsp;of&nbsp;
1254
1252
  <b>36</b>
1255
1253
  </span>
1256
- <button
1257
- class="pf-c-options-menu__toggle-button"
1258
- id="pagination-options-menu-bottom-example-toggle"
1259
- aria-haspopup="listbox"
1260
- aria-expanded="false"
1261
- aria-label="Items per page"
1262
- >
1263
- <span class="pf-c-options-menu__toggle-button-icon">
1264
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1265
- </span>
1266
- </button>
1267
- </div>
1254
+ <div class="pf-c-options-menu__toggle-icon">
1255
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1256
+ </div>
1257
+ </button>
1268
1258
  <ul
1269
1259
  class="pf-c-options-menu__menu"
1270
1260
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -1459,23 +1449,21 @@ section: components
1459
1449
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1460
1450
  >
1461
1451
  <div class="pf-c-options-menu">
1462
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
1452
+ <button
1453
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1454
+ type="button"
1455
+ id="pagination-options-menu-bottom-example-toggle"
1456
+ aria-haspopup="listbox"
1457
+ aria-expanded="false"
1458
+ >
1463
1459
  <span class="pf-c-options-menu__toggle-text">
1464
1460
  <b>1 - 10</b>&nbsp;of&nbsp;
1465
1461
  <b>36</b>
1466
1462
  </span>
1467
- <button
1468
- class="pf-c-options-menu__toggle-button"
1469
- id="pagination-options-menu-bottom-example-toggle"
1470
- aria-haspopup="listbox"
1471
- aria-expanded="false"
1472
- aria-label="Items per page"
1473
- >
1474
- <span class="pf-c-options-menu__toggle-button-icon">
1475
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1476
- </span>
1477
- </button>
1478
- </div>
1463
+ <div class="pf-c-options-menu__toggle-icon">
1464
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1465
+ </div>
1466
+ </button>
1479
1467
  <ul
1480
1468
  class="pf-c-options-menu__menu"
1481
1469
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -2157,23 +2145,21 @@ section: components
2157
2145
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2158
2146
  >
2159
2147
  <div class="pf-c-options-menu">
2160
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
2148
+ <button
2149
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
2150
+ type="button"
2151
+ id="pagination-options-menu-bottom-example-toggle"
2152
+ aria-haspopup="listbox"
2153
+ aria-expanded="false"
2154
+ >
2161
2155
  <span class="pf-c-options-menu__toggle-text">
2162
2156
  <b>1 - 10</b>&nbsp;of&nbsp;
2163
2157
  <b>36</b>
2164
2158
  </span>
2165
- <button
2166
- class="pf-c-options-menu__toggle-button"
2167
- id="pagination-options-menu-bottom-example-toggle"
2168
- aria-haspopup="listbox"
2169
- aria-expanded="false"
2170
- aria-label="Items per page"
2171
- >
2172
- <span class="pf-c-options-menu__toggle-button-icon">
2173
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2174
- </span>
2175
- </button>
2176
- </div>
2159
+ <div class="pf-c-options-menu__toggle-icon">
2160
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2161
+ </div>
2162
+ </button>
2177
2163
  <ul
2178
2164
  class="pf-c-options-menu__menu"
2179
2165
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -2695,23 +2681,21 @@ section: components
2695
2681
  </table>
2696
2682
  <div class="pf-c-pagination pf-m-bottom">
2697
2683
  <div class="pf-c-options-menu pf-m-top">
2698
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
2684
+ <button
2685
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
2686
+ type="button"
2687
+ id="pagination-options-menu-bottom-collapsed-example-toggle"
2688
+ aria-haspopup="listbox"
2689
+ aria-expanded="false"
2690
+ >
2699
2691
  <span class="pf-c-options-menu__toggle-text">
2700
2692
  <b>1 - 10</b>&nbsp;of&nbsp;
2701
2693
  <b>36</b>
2702
2694
  </span>
2703
- <button
2704
- class="pf-c-options-menu__toggle-button"
2705
- id="pagination-options-menu-bottom-collapsed-example-toggle"
2706
- aria-haspopup="listbox"
2707
- aria-expanded="false"
2708
- aria-label="Items per page"
2709
- >
2710
- <span class="pf-c-options-menu__toggle-button-icon">
2711
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2712
- </span>
2713
- </button>
2714
- </div>
2695
+ <div class="pf-c-options-menu__toggle-icon">
2696
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2697
+ </div>
2698
+ </button>
2715
2699
  <ul
2716
2700
  class="pf-c-options-menu__menu pf-m-top"
2717
2701
  aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
package/docs/demos/Wizard/examples/Wizard.md CHANGED
@@ -87,7 +87,7 @@ wrapperTag: div
87
87
  </li>
88
88
  </ol>
89
89
  </nav>
90
- <main class="pf-c-wizard__main">
90
+ <main class="pf-c-wizard__main" tabindex="0">
91
91
  <div class="pf-c-wizard__main-body">
92
92
  <form novalidate class="pf-c-form">
93
93
  <div class="pf-c-form__group">
@@ -332,7 +332,7 @@ wrapperTag: div
332
332
  </li>
333
333
  </ol>
334
334
  </nav>
335
- <main class="pf-c-wizard__main">
335
+ <main class="pf-c-wizard__main" tabindex="0">
336
336
  <div class="pf-c-wizard__main-body">
337
337
  <form novalidate class="pf-c-form">
338
338
  <div class="pf-c-form__group">
@@ -784,7 +784,7 @@ wrapperTag: div
784
784
  </li>
785
785
  </ol>
786
786
  </nav>
787
- <div class="pf-c-wizard__main">
787
+ <div class="pf-c-wizard__main" tabindex="0">
788
788
  <div class="pf-c-wizard__main-body">
789
789
  <form novalidate class="pf-c-form">
790
790
  <div class="pf-c-form__group">
@@ -1245,7 +1245,7 @@ wrapperTag: div
1245
1245
  </li>
1246
1246
  </ol>
1247
1247
  </nav>
1248
- <div class="pf-c-wizard__main">
1248
+ <div class="pf-c-wizard__main" tabindex="0">
1249
1249
  <div class="pf-c-wizard__main-body">
1250
1250
  <form novalidate class="pf-c-form">
1251
1251
  <div class="pf-c-form__group">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.183.2",
4
+ "version": "4.184.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -5702,6 +5702,7 @@ html {
5702
5702
  right: 0;
5703
5703
  bottom: 0;
5704
5704
  left: 0;
5705
+ pointer-events: none;
5705
5706
  content: "";
5706
5707
  border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
5707
5708
  }
@@ -16850,7 +16851,7 @@ ul.pf-c-list {
16850
16851
  --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
16851
16852
  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
16852
16853
  }
16853
- .pf-c-menu__list-item:focus-within {
16854
+ .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
16854
16855
  --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
16855
16856
  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
16856
16857
  }
@@ -17128,6 +17129,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17128
17129
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
17129
17130
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
17130
17131
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
17132
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
17133
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
17134
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
17135
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
17136
+ --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
17131
17137
  position: relative;
17132
17138
  display: inline-flex;
17133
17139
  align-items: center;
@@ -17136,6 +17142,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17136
17142
  font-size: var(--pf-c-menu-toggle--FontSize);
17137
17143
  line-height: var(--pf-c-menu-toggle--LineHeight);
17138
17144
  color: var(--pf-c-menu-toggle--Color);
17145
+ cursor: pointer;
17139
17146
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
17140
17147
  border: 0;
17141
17148
  border-radius: var(--pf-c-menu-toggle--BorderRadius);
@@ -17217,7 +17224,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17217
17224
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
17218
17225
  --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17219
17226
  }
17220
- .pf-c-menu-toggle:focus {
17227
+ .pf-c-menu-toggle:focus, .pf-c-menu-toggle:focus-within {
17221
17228
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
17222
17229
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
17223
17230
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
@@ -17258,6 +17265,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17258
17265
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
17259
17266
  height: 100%;
17260
17267
  }
17268
+ .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
17269
+ --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
17270
+ flex: 1;
17271
+ margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
17272
+ }
17261
17273
  .pf-c-menu-toggle.pf-m-split-button {
17262
17274
  --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
17263
17275
  padding: 0;
@@ -17355,6 +17367,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17355
17367
  color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
17356
17368
  background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
17357
17369
  }
17370
+ .pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
17371
+ --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
17372
+ }
17373
+ .pf-c-menu-toggle.pf-m-full-width {
17374
+ width: 100%;
17375
+ }
17358
17376
 
17359
17377
  .pf-c-menu-toggle__button {
17360
17378
  color: inherit;
@@ -27257,6 +27275,12 @@ svg.pf-c-spinner.pf-m-xl {
27257
27275
  --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
27258
27276
  pointer-events: none;
27259
27277
  }
27278
+ .pf-c-text-input-group.pf-m-plain {
27279
+ --pf-c-text-input-group--BackgroundColor: transparent;
27280
+ }
27281
+ .pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::before, .pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::after {
27282
+ border: 0;
27283
+ }
27260
27284
 
27261
27285
  .pf-c-text-input-group__main {
27262
27286
  display: flex;