@patternfly/patternfly 6.0.0-alpha.157 → 6.0.0-alpha.159

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 (20) hide show
  1. package/components/Pagination/pagination.css +6 -3
  2. package/components/Pagination/pagination.scss +6 -3
  3. package/components/TextInputGroup/text-input-group.css +20 -18
  4. package/components/TextInputGroup/text-input-group.scss +23 -22
  5. package/components/_index.css +26 -21
  6. package/docs/components/Pagination/examples/Pagination.md +196 -713
  7. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -0
  9. package/docs/components/Toolbar/examples/Toolbar.md +34 -98
  10. package/docs/demos/CardView/examples/CardView.md +32 -98
  11. package/docs/demos/DataList/examples/DataList.md +128 -392
  12. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +96 -320
  13. package/docs/demos/Table/examples/Table.md +369 -1132
  14. package/docs/demos/Toolbar/examples/Toolbar.md +128 -392
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +26 -21
  17. package/patternfly.css +26 -21
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
  20. package/docs/components/Pagination/examples/Pagination.css +0 -3
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -650,64 +650,26 @@ wrapperTag: div
650
650
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
651
651
  <div class="pf-v6-c-pagination pf-m-compact">
652
652
  <div class="pf-v6-c-pagination__page-menu">
653
- <div class="pf-v6-c-options-menu">
654
- <button
655
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
656
- type="button"
657
- id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
658
- aria-haspopup="listbox"
659
- aria-expanded="false"
660
- >
661
- <span class="pf-v6-c-options-menu__toggle-text">
662
- <b>1 - 10</b>&nbsp;of&nbsp;
663
- <b>36</b>
664
- </span>
665
- <div class="pf-v6-c-options-menu__toggle-icon">
653
+ <button
654
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
655
+ type="button"
656
+ aria-expanded="false"
657
+ aria-label="Menu toggle"
658
+ id="primary-detail-expanded-example-drawer-toolbar-top-pagination"
659
+ >
660
+ <span class="pf-v6-c-menu-toggle__text">
661
+ <b>1 - 10</b>&nbsp;of&nbsp;
662
+ <b>36</b>
663
+ </span>
664
+ <span class="pf-v6-c-menu-toggle__controls">
665
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
666
666
  <i
667
667
  class="fas fa-caret-down"
668
668
  aria-hidden="true"
669
669
  ></i>
670
- </div>
671
- </button>
672
- <ul
673
- class="pf-v6-c-options-menu__menu"
674
- role="menu"
675
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
676
- hidden
677
- >
678
- <li role="none">
679
- <button
680
- class="pf-v6-c-options-menu__menu-item"
681
- type="button"
682
- role="menuitem"
683
- >5 per page</button>
684
- </li>
685
- <li role="none">
686
- <button
687
- class="pf-v6-c-options-menu__menu-item"
688
- type="button"
689
- role="menuitem"
690
- >
691
- 10 per page
692
- <div
693
- class="pf-v6-c-options-menu__menu-item-icon"
694
- >
695
- <i
696
- class="fas fa-check"
697
- aria-hidden="true"
698
- ></i>
699
- </div>
700
- </button>
701
- </li>
702
- <li role="none">
703
- <button
704
- class="pf-v6-c-options-menu__menu-item"
705
- type="button"
706
- role="menuitem"
707
- >20 per page</button>
708
- </li>
709
- </ul>
710
- </div>
670
+ </span>
671
+ </span>
672
+ </button>
711
673
  </div>
712
674
  <nav
713
675
  class="pf-v6-c-pagination__nav"
@@ -1970,64 +1932,26 @@ wrapperTag: div
1970
1932
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
1971
1933
  <div class="pf-v6-c-pagination pf-m-compact">
1972
1934
  <div class="pf-v6-c-pagination__page-menu">
1973
- <div class="pf-v6-c-options-menu">
1974
- <button
1975
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1976
- type="button"
1977
- id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1978
- aria-haspopup="listbox"
1979
- aria-expanded="false"
1980
- >
1981
- <span class="pf-v6-c-options-menu__toggle-text">
1982
- <b>1 - 10</b>&nbsp;of&nbsp;
1983
- <b>36</b>
1984
- </span>
1985
- <div class="pf-v6-c-options-menu__toggle-icon">
1935
+ <button
1936
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1937
+ type="button"
1938
+ aria-expanded="false"
1939
+ aria-label="Menu toggle"
1940
+ id="primary-detail-collapsed-example-drawer-toolbar-top-pagination"
1941
+ >
1942
+ <span class="pf-v6-c-menu-toggle__text">
1943
+ <b>1 - 10</b>&nbsp;of&nbsp;
1944
+ <b>36</b>
1945
+ </span>
1946
+ <span class="pf-v6-c-menu-toggle__controls">
1947
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1986
1948
  <i
1987
1949
  class="fas fa-caret-down"
1988
1950
  aria-hidden="true"
1989
1951
  ></i>
1990
- </div>
1991
- </button>
1992
- <ul
1993
- class="pf-v6-c-options-menu__menu"
1994
- role="menu"
1995
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1996
- hidden
1997
- >
1998
- <li role="none">
1999
- <button
2000
- class="pf-v6-c-options-menu__menu-item"
2001
- type="button"
2002
- role="menuitem"
2003
- >5 per page</button>
2004
- </li>
2005
- <li role="none">
2006
- <button
2007
- class="pf-v6-c-options-menu__menu-item"
2008
- type="button"
2009
- role="menuitem"
2010
- >
2011
- 10 per page
2012
- <div
2013
- class="pf-v6-c-options-menu__menu-item-icon"
2014
- >
2015
- <i
2016
- class="fas fa-check"
2017
- aria-hidden="true"
2018
- ></i>
2019
- </div>
2020
- </button>
2021
- </li>
2022
- <li role="none">
2023
- <button
2024
- class="pf-v6-c-options-menu__menu-item"
2025
- type="button"
2026
- role="menuitem"
2027
- >20 per page</button>
2028
- </li>
2029
- </ul>
2030
- </div>
1952
+ </span>
1953
+ </span>
1954
+ </button>
2031
1955
  </div>
2032
1956
  <nav
2033
1957
  class="pf-v6-c-pagination__nav"
@@ -3153,64 +3077,26 @@ wrapperTag: div
3153
3077
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
3154
3078
  <div class="pf-v6-c-pagination pf-m-compact">
3155
3079
  <div class="pf-v6-c-pagination__page-menu">
3156
- <div class="pf-v6-c-options-menu">
3157
- <button
3158
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
3159
- type="button"
3160
- id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3161
- aria-haspopup="listbox"
3162
- aria-expanded="false"
3163
- >
3164
- <span class="pf-v6-c-options-menu__toggle-text">
3165
- <b>1 - 10</b>&nbsp;of&nbsp;
3166
- <b>36</b>
3167
- </span>
3168
- <div class="pf-v6-c-options-menu__toggle-icon">
3080
+ <button
3081
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
3082
+ type="button"
3083
+ aria-expanded="false"
3084
+ aria-label="Menu toggle"
3085
+ id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination"
3086
+ >
3087
+ <span class="pf-v6-c-menu-toggle__text">
3088
+ <b>1 - 10</b>&nbsp;of&nbsp;
3089
+ <b>36</b>
3090
+ </span>
3091
+ <span class="pf-v6-c-menu-toggle__controls">
3092
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3169
3093
  <i
3170
3094
  class="fas fa-caret-down"
3171
3095
  aria-hidden="true"
3172
3096
  ></i>
3173
- </div>
3174
- </button>
3175
- <ul
3176
- class="pf-v6-c-options-menu__menu"
3177
- role="menu"
3178
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3179
- hidden
3180
- >
3181
- <li role="none">
3182
- <button
3183
- class="pf-v6-c-options-menu__menu-item"
3184
- type="button"
3185
- role="menuitem"
3186
- >5 per page</button>
3187
- </li>
3188
- <li role="none">
3189
- <button
3190
- class="pf-v6-c-options-menu__menu-item"
3191
- type="button"
3192
- role="menuitem"
3193
- >
3194
- 10 per page
3195
- <div
3196
- class="pf-v6-c-options-menu__menu-item-icon"
3197
- >
3198
- <i
3199
- class="fas fa-check"
3200
- aria-hidden="true"
3201
- ></i>
3202
- </div>
3203
- </button>
3204
- </li>
3205
- <li role="none">
3206
- <button
3207
- class="pf-v6-c-options-menu__menu-item"
3208
- type="button"
3209
- role="menuitem"
3210
- >20 per page</button>
3211
- </li>
3212
- </ul>
3213
- </div>
3097
+ </span>
3098
+ </span>
3099
+ </button>
3214
3100
  </div>
3215
3101
  <nav
3216
3102
  class="pf-v6-c-pagination__nav"
@@ -4217,58 +4103,23 @@ wrapperTag: div
4217
4103
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
4218
4104
  <div class="pf-v6-c-pagination pf-m-compact">
4219
4105
  <div class="pf-v6-c-pagination__page-menu">
4220
- <div class="pf-v6-c-options-menu">
4221
- <button
4222
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
4223
- type="button"
4224
- id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4225
- aria-haspopup="listbox"
4226
- aria-expanded="false"
4227
- >
4228
- <span class="pf-v6-c-options-menu__toggle-text">
4229
- <b>1 - 10</b>&nbsp;of&nbsp;
4230
- <b>36</b>
4231
- </span>
4232
- <div class="pf-v6-c-options-menu__toggle-icon">
4106
+ <button
4107
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
4108
+ type="button"
4109
+ aria-expanded="false"
4110
+ aria-label="Menu toggle"
4111
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination"
4112
+ >
4113
+ <span class="pf-v6-c-menu-toggle__text">
4114
+ <b>1 - 10</b>&nbsp;of&nbsp;
4115
+ <b>36</b>
4116
+ </span>
4117
+ <span class="pf-v6-c-menu-toggle__controls">
4118
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
4233
4119
  <i class="fas fa-caret-down" aria-hidden="true"></i>
4234
- </div>
4235
- </button>
4236
- <ul
4237
- class="pf-v6-c-options-menu__menu"
4238
- role="menu"
4239
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4240
- hidden
4241
- >
4242
- <li role="none">
4243
- <button
4244
- class="pf-v6-c-options-menu__menu-item"
4245
- type="button"
4246
- role="menuitem"
4247
- >5 per page</button>
4248
- </li>
4249
- <li role="none">
4250
- <button
4251
- class="pf-v6-c-options-menu__menu-item"
4252
- type="button"
4253
- role="menuitem"
4254
- >
4255
- 10 per page
4256
- <div
4257
- class="pf-v6-c-options-menu__menu-item-icon"
4258
- >
4259
- <i class="fas fa-check" aria-hidden="true"></i>
4260
- </div>
4261
- </button>
4262
- </li>
4263
- <li role="none">
4264
- <button
4265
- class="pf-v6-c-options-menu__menu-item"
4266
- type="button"
4267
- role="menuitem"
4268
- >20 per page</button>
4269
- </li>
4270
- </ul>
4271
- </div>
4120
+ </span>
4121
+ </span>
4122
+ </button>
4272
4123
  </div>
4273
4124
  <nav
4274
4125
  class="pf-v6-c-pagination__nav"
@@ -5734,68 +5585,28 @@ wrapperTag: div
5734
5585
  <b>37</b>
5735
5586
  </div>
5736
5587
  <div class="pf-v6-c-pagination__page-menu">
5737
- <div class="pf-v6-c-options-menu">
5738
- <button
5739
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
5740
- type="button"
5741
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5742
- aria-haspopup="listbox"
5743
- aria-expanded="false"
5744
- >
5588
+ <button
5589
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
5590
+ type="button"
5591
+ aria-expanded="false"
5592
+ aria-label="Menu toggle"
5593
+ id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-menu-toggle"
5594
+ >
5595
+ <span class="pf-v6-c-menu-toggle__text">
5596
+ <b>1 - 10</b>&nbsp;of&nbsp;
5597
+ <b>36</b>
5598
+ </span>
5599
+ <span class="pf-v6-c-menu-toggle__controls">
5745
5600
  <span
5746
- class="pf-v6-c-options-menu__toggle-text"
5747
- >
5748
- <b>1 - 10</b>&nbsp;of&nbsp;
5749
- <b>36</b>
5750
- </span>
5751
- <div
5752
- class="pf-v6-c-options-menu__toggle-icon"
5601
+ class="pf-v6-c-menu-toggle__toggle-icon"
5753
5602
  >
5754
5603
  <i
5755
5604
  class="fas fa-caret-down"
5756
5605
  aria-hidden="true"
5757
5606
  ></i>
5758
- </div>
5759
- </button>
5760
- <ul
5761
- class="pf-v6-c-options-menu__menu"
5762
- role="menu"
5763
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5764
- hidden
5765
- >
5766
- <li role="none">
5767
- <button
5768
- class="pf-v6-c-options-menu__menu-item"
5769
- type="button"
5770
- role="menuitem"
5771
- >5 per page</button>
5772
- </li>
5773
- <li role="none">
5774
- <button
5775
- class="pf-v6-c-options-menu__menu-item"
5776
- type="button"
5777
- role="menuitem"
5778
- >
5779
- 10 per page
5780
- <div
5781
- class="pf-v6-c-options-menu__menu-item-icon"
5782
- >
5783
- <i
5784
- class="fas fa-check"
5785
- aria-hidden="true"
5786
- ></i>
5787
- </div>
5788
- </button>
5789
- </li>
5790
- <li role="none">
5791
- <button
5792
- class="pf-v6-c-options-menu__menu-item"
5793
- type="button"
5794
- role="menuitem"
5795
- >20 per page</button>
5796
- </li>
5797
- </ul>
5798
- </div>
5607
+ </span>
5608
+ </span>
5609
+ </button>
5799
5610
  </div>
5800
5611
  </div>
5801
5612
  </div>
@@ -6500,58 +6311,23 @@ wrapperTag: div
6500
6311
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
6501
6312
  <div class="pf-v6-c-pagination pf-m-compact">
6502
6313
  <div class="pf-v6-c-pagination__page-menu">
6503
- <div class="pf-v6-c-options-menu">
6504
- <button
6505
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
6506
- type="button"
6507
- id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6508
- aria-haspopup="listbox"
6509
- aria-expanded="false"
6510
- >
6511
- <span class="pf-v6-c-options-menu__toggle-text">
6512
- <b>1 - 10</b>&nbsp;of&nbsp;
6513
- <b>36</b>
6514
- </span>
6515
- <div class="pf-v6-c-options-menu__toggle-icon">
6314
+ <button
6315
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
6316
+ type="button"
6317
+ aria-expanded="false"
6318
+ aria-label="Menu toggle"
6319
+ id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination"
6320
+ >
6321
+ <span class="pf-v6-c-menu-toggle__text">
6322
+ <b>1 - 10</b>&nbsp;of&nbsp;
6323
+ <b>36</b>
6324
+ </span>
6325
+ <span class="pf-v6-c-menu-toggle__controls">
6326
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
6516
6327
  <i class="fas fa-caret-down" aria-hidden="true"></i>
6517
- </div>
6518
- </button>
6519
- <ul
6520
- class="pf-v6-c-options-menu__menu"
6521
- role="menu"
6522
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6523
- hidden
6524
- >
6525
- <li role="none">
6526
- <button
6527
- class="pf-v6-c-options-menu__menu-item"
6528
- type="button"
6529
- role="menuitem"
6530
- >5 per page</button>
6531
- </li>
6532
- <li role="none">
6533
- <button
6534
- class="pf-v6-c-options-menu__menu-item"
6535
- type="button"
6536
- role="menuitem"
6537
- >
6538
- 10 per page
6539
- <div
6540
- class="pf-v6-c-options-menu__menu-item-icon"
6541
- >
6542
- <i class="fas fa-check" aria-hidden="true"></i>
6543
- </div>
6544
- </button>
6545
- </li>
6546
- <li role="none">
6547
- <button
6548
- class="pf-v6-c-options-menu__menu-item"
6549
- type="button"
6550
- role="menuitem"
6551
- >20 per page</button>
6552
- </li>
6553
- </ul>
6554
- </div>
6328
+ </span>
6329
+ </span>
6330
+ </button>
6555
6331
  </div>
6556
6332
  <nav
6557
6333
  class="pf-v6-c-pagination__nav"