@patternfly/patternfly 5.0.0-alpha.1 → 5.0.0-alpha.10

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 (63) hide show
  1. package/RELEASE-NOTES.md +30 -0
  2. package/base/_common.scss +0 -22
  3. package/base/patternfly-common.css +0 -10
  4. package/components/Card/card.css +9 -12
  5. package/components/Card/card.scss +11 -17
  6. package/components/ChipGroup/chip-group.css +29 -17
  7. package/components/ChipGroup/chip-group.scss +39 -22
  8. package/components/Drawer/drawer.css +0 -1
  9. package/components/Drawer/drawer.scss +0 -1
  10. package/components/Dropdown/dropdown.css +15 -0
  11. package/components/Dropdown/dropdown.scss +20 -0
  12. package/components/EmptyState/empty-state.css +46 -52
  13. package/components/EmptyState/empty-state.scss +58 -57
  14. package/components/FormControl/form-control.css +1 -1
  15. package/components/FormControl/themes/dark/form-control.scss +1 -1
  16. package/components/InputGroup/input-group.css +14 -0
  17. package/components/InputGroup/input-group.scss +9 -0
  18. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  19. package/components/LabelGroup/label-group.css +26 -22
  20. package/components/LabelGroup/label-group.scss +31 -26
  21. package/components/Menu/menu.css +4 -0
  22. package/components/Menu/menu.scss +5 -0
  23. package/components/Pagination/pagination.css +228 -0
  24. package/components/Pagination/pagination.scss +30 -1
  25. package/components/Popover/popover.css +1 -6
  26. package/components/Popover/themes/dark/popover.scss +1 -7
  27. package/components/Slider/slider.css +0 -7
  28. package/components/Slider/slider.scss +0 -9
  29. package/components/Toolbar/toolbar.css +30 -2
  30. package/components/Toolbar/toolbar.scss +37 -3
  31. package/components/Tooltip/themes/dark/tooltip.scss +3 -6
  32. package/components/Tooltip/tooltip.css +2 -5
  33. package/docs/components/Card/examples/Card.md +61 -44
  34. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  35. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  36. package/docs/components/Dropdown/examples/Dropdown.md +216 -0
  37. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  38. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  39. package/docs/components/Pagination/examples/Pagination.md +129 -30
  40. package/docs/components/Slider/examples/Slider.md +6 -6
  41. package/docs/components/Tabs/examples/Tabs.md +1 -1
  42. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  43. package/docs/components/Wizard/examples/Wizard.md +4 -7
  44. package/docs/demos/Banner/examples/Banner.md +2 -2
  45. package/docs/demos/Card/examples/Card.md +144 -109
  46. package/docs/demos/CardView/examples/CardView.md +1 -3
  47. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  48. package/docs/demos/DataList/examples/DataList.md +2 -4
  49. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  50. package/docs/demos/Nav/examples/Nav.md +671 -718
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -8
  52. package/docs/demos/Table/examples/Table.md +18 -32
  53. package/docs/demos/Tabs/examples/Tabs.md +42 -539
  54. package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
  55. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  56. package/package.json +5 -5
  57. package/patternfly-base-no-reset.css +0 -10
  58. package/patternfly-base.css +0 -10
  59. package/patternfly-no-reset.css +405 -135
  60. package/patternfly.css +405 -135
  61. package/patternfly.min.css +1 -1
  62. package/patternfly.min.css.map +1 -1
  63. package/sass-utilities/scss-variables.scss +0 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -944,7 +944,6 @@ wrapperTag: div
944
944
  role="listbox"
945
945
  aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
946
946
  hidden
947
- style="width: 175px"
948
947
  >
949
948
  <li role="presentation">
950
949
  <button
@@ -984,7 +983,10 @@ wrapperTag: div
984
983
  </li>
985
984
  </ul>
986
985
  </div>
987
- <div class="pf-c-text-input-group">
986
+ <div
987
+ class="pf-c-text-input-group"
988
+ style="width: auto"
989
+ >
988
990
  <div class="pf-c-text-input-group__main pf-m-icon">
989
991
  <span class="pf-c-text-input-group__text">
990
992
  <span class="pf-c-text-input-group__icon">
@@ -2821,7 +2823,6 @@ wrapperTag: div
2821
2823
  role="listbox"
2822
2824
  aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2823
2825
  hidden
2824
- style="width: 175px"
2825
2826
  >
2826
2827
  <li role="presentation">
2827
2828
  <button
@@ -2861,7 +2862,10 @@ wrapperTag: div
2861
2862
  </li>
2862
2863
  </ul>
2863
2864
  </div>
2864
- <div class="pf-c-text-input-group">
2865
+ <div
2866
+ class="pf-c-text-input-group"
2867
+ style="width: auto"
2868
+ >
2865
2869
  <div class="pf-c-text-input-group__main pf-m-icon">
2866
2870
  <span class="pf-c-text-input-group__text">
2867
2871
  <span class="pf-c-text-input-group__icon">
@@ -6269,7 +6273,6 @@ wrapperTag: div
6269
6273
  </div>
6270
6274
  </div>
6271
6275
  </section>
6272
- <div class="pf-c-divider" role="separator"></div>
6273
6276
  <section class="pf-c-page__main-section pf-m-no-padding">
6274
6277
  <!-- Drawer -->
6275
6278
  <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
@@ -6377,7 +6380,6 @@ wrapperTag: div
6377
6380
  role="listbox"
6378
6381
  aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6379
6382
  hidden
6380
- style="width: 175px"
6381
6383
  >
6382
6384
  <li role="presentation">
6383
6385
  <button
@@ -6417,7 +6419,7 @@ wrapperTag: div
6417
6419
  </li>
6418
6420
  </ul>
6419
6421
  </div>
6420
- <div class="pf-c-text-input-group">
6422
+ <div class="pf-c-text-input-group" style="width: auto">
6421
6423
  <div class="pf-c-text-input-group__main pf-m-icon">
6422
6424
  <span class="pf-c-text-input-group__text">
6423
6425
  <span class="pf-c-text-input-group__icon">
@@ -10763,7 +10765,6 @@ wrapperTag: div
10763
10765
  </div>
10764
10766
  </section>
10765
10767
  <div class="pf-c-divider" role="separator"></div>
10766
-
10767
10768
  <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
10768
10769
  <div class="pf-c-drawer__main">
10769
10770
  <!-- Content -->
package/docs/demos/Table/examples/Table.md CHANGED
@@ -971,7 +971,6 @@ wrapperTag: div
971
971
  role="listbox"
972
972
  aria-labelledby="-select-name-label"
973
973
  hidden
974
- style="width: 175px"
975
974
  >
976
975
  <li role="presentation">
977
976
  <button
@@ -1011,7 +1010,7 @@ wrapperTag: div
1011
1010
  </li>
1012
1011
  </ul>
1013
1012
  </div>
1014
- <div class="pf-c-text-input-group">
1013
+ <div class="pf-c-text-input-group" style="width: auto">
1015
1014
  <div class="pf-c-text-input-group__main pf-m-icon">
1016
1015
  <span class="pf-c-text-input-group__text">
1017
1016
  <span class="pf-c-text-input-group__icon">
@@ -2673,7 +2672,6 @@ wrapperTag: div
2673
2672
  role="listbox"
2674
2673
  aria-labelledby="-select-name-label"
2675
2674
  hidden
2676
- style="width: 175px"
2677
2675
  >
2678
2676
  <li role="presentation">
2679
2677
  <button
@@ -2713,7 +2711,7 @@ wrapperTag: div
2713
2711
  </li>
2714
2712
  </ul>
2715
2713
  </div>
2716
- <div class="pf-c-text-input-group">
2714
+ <div class="pf-c-text-input-group" style="width: auto">
2717
2715
  <div class="pf-c-text-input-group__main pf-m-icon">
2718
2716
  <span class="pf-c-text-input-group__text">
2719
2717
  <span class="pf-c-text-input-group__icon">
@@ -4555,7 +4553,6 @@ wrapperTag: div
4555
4553
  role="listbox"
4556
4554
  aria-labelledby="-select-name-label"
4557
4555
  hidden
4558
- style="width: 175px"
4559
4556
  >
4560
4557
  <li role="presentation">
4561
4558
  <button
@@ -4595,7 +4592,7 @@ wrapperTag: div
4595
4592
  </li>
4596
4593
  </ul>
4597
4594
  </div>
4598
- <div class="pf-c-text-input-group">
4595
+ <div class="pf-c-text-input-group" style="width: auto">
4599
4596
  <div class="pf-c-text-input-group__main pf-m-icon">
4600
4597
  <span class="pf-c-text-input-group__text">
4601
4598
  <span class="pf-c-text-input-group__icon">
@@ -6631,7 +6628,6 @@ wrapperTag: div
6631
6628
  role="listbox"
6632
6629
  aria-labelledby="-select-name-label"
6633
6630
  hidden
6634
- style="width: 175px"
6635
6631
  >
6636
6632
  <li role="presentation">
6637
6633
  <button
@@ -6671,7 +6667,7 @@ wrapperTag: div
6671
6667
  </li>
6672
6668
  </ul>
6673
6669
  </div>
6674
- <div class="pf-c-text-input-group">
6670
+ <div class="pf-c-text-input-group" style="width: auto">
6675
6671
  <div class="pf-c-text-input-group__main pf-m-icon">
6676
6672
  <span class="pf-c-text-input-group__text">
6677
6673
  <span class="pf-c-text-input-group__icon">
@@ -8375,7 +8371,6 @@ wrapperTag: div
8375
8371
  role="listbox"
8376
8372
  aria-labelledby="-select-name-label"
8377
8373
  hidden
8378
- style="width: 175px"
8379
8374
  >
8380
8375
  <li role="presentation">
8381
8376
  <button
@@ -8415,7 +8410,7 @@ wrapperTag: div
8415
8410
  </li>
8416
8411
  </ul>
8417
8412
  </div>
8418
- <div class="pf-c-text-input-group">
8413
+ <div class="pf-c-text-input-group" style="width: auto">
8419
8414
  <div class="pf-c-text-input-group__main pf-m-icon">
8420
8415
  <span class="pf-c-text-input-group__text">
8421
8416
  <span class="pf-c-text-input-group__icon">
@@ -14189,21 +14184,18 @@ wrapperTag: div
14189
14184
  <td role="cell" colspan="8">
14190
14185
  <div class="pf-c-empty-state pf-m-sm">
14191
14186
  <div class="pf-c-empty-state__content">
14192
- <i
14193
- class="fas fa- fa-search pf-c-empty-state__icon"
14194
- aria-hidden="true"
14195
- ></i>
14187
+ <div class="pf-c-empty-state__icon">
14188
+ <i class="fas fa- fa-search" aria-hidden="true"></i>
14189
+ </div>
14196
14190
 
14197
14191
  <h2 class="pf-c-title pf-m-lg">No results found</h2>
14198
14192
  <div
14199
14193
  class="pf-c-empty-state__body"
14200
14194
  >No results match the filter criteria. Remove all filters or clear all filters to show results.</div>
14201
- <div class="pf-c-empty-state__primary">
14202
- <button
14203
- class="pf-c-button pf-m-link"
14204
- type="button"
14205
- >Clear all filters</button>
14206
- </div>
14195
+ <button
14196
+ class="pf-c-button pf-m-link"
14197
+ type="button"
14198
+ >Clear all filters</button>
14207
14199
  </div>
14208
14200
  </div>
14209
14201
  </td>
@@ -15188,7 +15180,6 @@ wrapperTag: div
15188
15180
  role="listbox"
15189
15181
  aria-labelledby="-select-name-label"
15190
15182
  hidden
15191
- style="width: 175px"
15192
15183
  >
15193
15184
  <li role="presentation">
15194
15185
  <button
@@ -15228,7 +15219,7 @@ wrapperTag: div
15228
15219
  </li>
15229
15220
  </ul>
15230
15221
  </div>
15231
- <div class="pf-c-text-input-group">
15222
+ <div class="pf-c-text-input-group" style="width: auto">
15232
15223
  <div class="pf-c-text-input-group__main pf-m-icon">
15233
15224
  <span class="pf-c-text-input-group__text">
15234
15225
  <span class="pf-c-text-input-group__icon">
@@ -17064,7 +17055,6 @@ wrapperTag: div
17064
17055
  role="listbox"
17065
17056
  aria-labelledby="-select-name-label"
17066
17057
  hidden
17067
- style="width: 175px"
17068
17058
  >
17069
17059
  <li role="presentation">
17070
17060
  <button
@@ -17104,7 +17094,7 @@ wrapperTag: div
17104
17094
  </li>
17105
17095
  </ul>
17106
17096
  </div>
17107
- <div class="pf-c-text-input-group">
17097
+ <div class="pf-c-text-input-group" style="width: auto">
17108
17098
  <div class="pf-c-text-input-group__main pf-m-icon">
17109
17099
  <span class="pf-c-text-input-group__text">
17110
17100
  <span class="pf-c-text-input-group__icon">
@@ -19023,7 +19013,6 @@ wrapperTag: div
19023
19013
  role="listbox"
19024
19014
  aria-labelledby="-select-name-label"
19025
19015
  hidden
19026
- style="width: 175px"
19027
19016
  >
19028
19017
  <li role="presentation">
19029
19018
  <button
@@ -19063,7 +19052,7 @@ wrapperTag: div
19063
19052
  </li>
19064
19053
  </ul>
19065
19054
  </div>
19066
- <div class="pf-c-text-input-group">
19055
+ <div class="pf-c-text-input-group" style="width: auto">
19067
19056
  <div class="pf-c-text-input-group__main pf-m-icon">
19068
19057
  <span class="pf-c-text-input-group__text">
19069
19058
  <span class="pf-c-text-input-group__icon">
@@ -20902,7 +20891,6 @@ wrapperTag: div
20902
20891
  role="listbox"
20903
20892
  aria-labelledby="-select-name-label"
20904
20893
  hidden
20905
- style="width: 175px"
20906
20894
  >
20907
20895
  <li role="presentation">
20908
20896
  <button
@@ -20942,7 +20930,7 @@ wrapperTag: div
20942
20930
  </li>
20943
20931
  </ul>
20944
20932
  </div>
20945
- <div class="pf-c-text-input-group">
20933
+ <div class="pf-c-text-input-group" style="width: auto">
20946
20934
  <div class="pf-c-text-input-group__main pf-m-icon">
20947
20935
  <span class="pf-c-text-input-group__text">
20948
20936
  <span class="pf-c-text-input-group__icon">
@@ -22702,7 +22690,6 @@ wrapperTag: div
22702
22690
  role="listbox"
22703
22691
  aria-labelledby="-select-name-label"
22704
22692
  hidden
22705
- style="width: 175px"
22706
22693
  >
22707
22694
  <li role="presentation">
22708
22695
  <button
@@ -22742,7 +22729,7 @@ wrapperTag: div
22742
22729
  </li>
22743
22730
  </ul>
22744
22731
  </div>
22745
- <div class="pf-c-text-input-group">
22732
+ <div class="pf-c-text-input-group" style="width: auto">
22746
22733
  <div class="pf-c-text-input-group__main pf-m-icon">
22747
22734
  <span class="pf-c-text-input-group__text">
22748
22735
  <span class="pf-c-text-input-group__icon">
@@ -24523,7 +24510,6 @@ wrapperTag: div
24523
24510
  role="listbox"
24524
24511
  aria-labelledby="-select-name-label"
24525
24512
  hidden
24526
- style="width: 175px"
24527
24513
  >
24528
24514
  <li role="presentation">
24529
24515
  <button
@@ -24563,7 +24549,7 @@ wrapperTag: div
24563
24549
  </li>
24564
24550
  </ul>
24565
24551
  </div>
24566
- <div class="pf-c-text-input-group">
24552
+ <div class="pf-c-text-input-group" style="width: auto">
24567
24553
  <div class="pf-c-text-input-group__main pf-m-icon">
24568
24554
  <span class="pf-c-text-input-group__text">
24569
24555
  <span class="pf-c-text-input-group__icon">