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

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 (71) 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 +27 -17
  7. package/components/ChipGroup/chip-group.scss +36 -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 +2 -7
  26. package/components/Popover/themes/dark/popover.scss +2 -8
  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 +1 -11
  32. package/components/Tooltip/tooltip.css +7 -12
  33. package/components/Tooltip/tooltip.scss +6 -3
  34. package/docs/components/Card/examples/Card.md +61 -44
  35. package/docs/components/Check/examples/Check.md +2 -6
  36. package/docs/components/ChipGroup/examples/ChipGroup.md +10 -339
  37. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  38. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  39. package/docs/components/DataList/examples/DataList.md +104 -65
  40. package/docs/components/Dropdown/examples/Dropdown.md +263 -23
  41. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  42. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  43. package/docs/components/LabelGroup/examples/LabelGroup.md +2 -14
  44. package/docs/components/Menu/examples/Menu.md +1 -1
  45. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
  46. package/docs/components/Pagination/examples/Pagination.md +129 -30
  47. package/docs/components/Slider/examples/Slider.md +6 -6
  48. package/docs/components/Table/examples/Table.md +1117 -700
  49. package/docs/components/Tabs/examples/Tabs.md +1 -1
  50. package/docs/components/Toolbar/examples/Toolbar.md +67 -46
  51. package/docs/components/Wizard/examples/Wizard.md +4 -7
  52. package/docs/demos/Banner/examples/Banner.md +2 -2
  53. package/docs/demos/Card/examples/Card.md +144 -109
  54. package/docs/demos/CardView/examples/CardView.md +9 -8
  55. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  56. package/docs/demos/DataList/examples/DataList.md +138 -89
  57. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  58. package/docs/demos/Nav/examples/Nav.md +671 -718
  59. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +17 -13
  60. package/docs/demos/Table/examples/Table.md +439 -297
  61. package/docs/demos/Tabs/examples/Tabs.md +90 -569
  62. package/docs/demos/Toolbar/examples/Toolbar.md +1773 -163
  63. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  64. package/package.json +5 -5
  65. package/patternfly-base-no-reset.css +0 -10
  66. package/patternfly-base.css +0 -10
  67. package/patternfly-no-reset.css +409 -143
  68. package/patternfly.css +409 -143
  69. package/patternfly.min.css +1 -1
  70. package/patternfly.min.css.map +1 -1
  71. package/sass-utilities/scss-variables.scss +0 -1
@@ -888,11 +888,14 @@ wrapperTag: div
888
888
  class="pf-c-dropdown__toggle-check"
889
889
  for="-bulk-select-toggle-check"
890
890
  >
891
- <input
892
- type="checkbox"
893
- id="-bulk-select-toggle-check"
894
- aria-label="Select all"
895
- />
891
+ <div class="pf-c-check pf-m-standalone">
892
+ <input
893
+ class="pf-c-check__input"
894
+ type="checkbox"
895
+ id="-bulk-select-toggle-check"
896
+ aria-label="Select all"
897
+ />
898
+ </div>
896
899
  </label>
897
900
 
898
901
  <button
@@ -2417,11 +2420,14 @@ wrapperTag: div
2417
2420
  class="pf-c-dropdown__toggle-check"
2418
2421
  for="-bulk-select-toggle-check"
2419
2422
  >
2420
- <input
2421
- type="checkbox"
2422
- id="-bulk-select-toggle-check"
2423
- aria-label="Select all"
2424
- />
2423
+ <div class="pf-c-check pf-m-standalone">
2424
+ <input
2425
+ class="pf-c-check__input"
2426
+ type="checkbox"
2427
+ id="-bulk-select-toggle-check"
2428
+ aria-label="Select all"
2429
+ />
2430
+ </div>
2425
2431
  </label>
2426
2432
 
2427
2433
  <button
@@ -2651,11 +2657,14 @@ wrapperTag: div
2651
2657
  <div class="pf-c-data-list__item-row">
2652
2658
  <div class="pf-c-data-list__item-control">
2653
2659
  <div class="pf-c-data-list__check">
2654
- <input
2655
- type="checkbox"
2656
- name="check-action-check1"
2657
- aria-labelledby="data-list-actionable-example-data-list-item-1"
2658
- />
2660
+ <div class="pf-c-check pf-m-standalone">
2661
+ <input
2662
+ class="pf-c-check__input"
2663
+ type="checkbox"
2664
+ name="check-action-check1"
2665
+ aria-labelledby="data-list-actionable-example-data-list-item-1"
2666
+ />
2667
+ </div>
2659
2668
  </div>
2660
2669
  </div>
2661
2670
  <div class="pf-c-data-list__item-content">
@@ -2721,11 +2730,14 @@ wrapperTag: div
2721
2730
  <div class="pf-c-data-list__item-row">
2722
2731
  <div class="pf-c-data-list__item-control">
2723
2732
  <div class="pf-c-data-list__check">
2724
- <input
2725
- type="checkbox"
2726
- name="check-action-check2"
2727
- aria-labelledby="data-list-actionable-example-data-list-item-2"
2728
- />
2733
+ <div class="pf-c-check pf-m-standalone">
2734
+ <input
2735
+ class="pf-c-check__input"
2736
+ type="checkbox"
2737
+ name="check-action-check2"
2738
+ aria-labelledby="data-list-actionable-example-data-list-item-2"
2739
+ />
2740
+ </div>
2729
2741
  </div>
2730
2742
  </div>
2731
2743
  <div class="pf-c-data-list__item-content">
@@ -2815,11 +2827,14 @@ wrapperTag: div
2815
2827
  <div class="pf-c-data-list__item-row">
2816
2828
  <div class="pf-c-data-list__item-control">
2817
2829
  <div class="pf-c-data-list__check">
2818
- <input
2819
- type="checkbox"
2820
- name="check-action-check3"
2821
- aria-labelledby="data-list-actionable-example-data-list-item-3"
2822
- />
2830
+ <div class="pf-c-check pf-m-standalone">
2831
+ <input
2832
+ class="pf-c-check__input"
2833
+ type="checkbox"
2834
+ name="check-action-check3"
2835
+ aria-labelledby="data-list-actionable-example-data-list-item-3"
2836
+ />
2837
+ </div>
2823
2838
  </div>
2824
2839
  </div>
2825
2840
  <div class="pf-c-data-list__item-content">
@@ -2846,11 +2861,14 @@ wrapperTag: div
2846
2861
  <div class="pf-c-data-list__item-row">
2847
2862
  <div class="pf-c-data-list__item-control">
2848
2863
  <div class="pf-c-data-list__check">
2849
- <input
2850
- type="checkbox"
2851
- name="check-action-check4"
2852
- aria-labelledby="data-list-actionable-example-data-list-item-4"
2853
- />
2864
+ <div class="pf-c-check pf-m-standalone">
2865
+ <input
2866
+ class="pf-c-check__input"
2867
+ type="checkbox"
2868
+ name="check-action-check4"
2869
+ aria-labelledby="data-list-actionable-example-data-list-item-4"
2870
+ />
2871
+ </div>
2854
2872
  </div>
2855
2873
  </div>
2856
2874
  <div class="pf-c-data-list__item-content">
@@ -3922,11 +3940,14 @@ wrapperTag: div
3922
3940
  class="pf-c-dropdown__toggle-check"
3923
3941
  for="-bulk-select-toggle-check"
3924
3942
  >
3925
- <input
3926
- type="checkbox"
3927
- id="-bulk-select-toggle-check"
3928
- aria-label="Select all"
3929
- />
3943
+ <div class="pf-c-check pf-m-standalone">
3944
+ <input
3945
+ class="pf-c-check__input"
3946
+ type="checkbox"
3947
+ id="-bulk-select-toggle-check"
3948
+ aria-label="Select all"
3949
+ />
3950
+ </div>
3930
3951
  </label>
3931
3952
 
3932
3953
  <button
@@ -3995,7 +4016,6 @@ wrapperTag: div
3995
4016
  role="listbox"
3996
4017
  aria-labelledby="-select-name-label"
3997
4018
  hidden
3998
- style="width: 175px"
3999
4019
  >
4000
4020
  <li role="presentation">
4001
4021
  <button
@@ -4035,7 +4055,7 @@ wrapperTag: div
4035
4055
  </li>
4036
4056
  </ul>
4037
4057
  </div>
4038
- <div class="pf-c-text-input-group">
4058
+ <div class="pf-c-text-input-group" style="width: auto">
4039
4059
  <div class="pf-c-text-input-group__main pf-m-icon">
4040
4060
  <span class="pf-c-text-input-group__text">
4041
4061
  <span class="pf-c-text-input-group__icon">
@@ -4204,11 +4224,14 @@ wrapperTag: div
4204
4224
  </div>
4205
4225
 
4206
4226
  <div class="pf-c-data-list__check">
4207
- <input
4208
- type="checkbox"
4209
- name="check-expandable-check1"
4210
- aria-labelledby="data-list-expandable-example-data-list-item-1"
4211
- />
4227
+ <div class="pf-c-check pf-m-standalone">
4228
+ <input
4229
+ class="pf-c-check__input"
4230
+ type="checkbox"
4231
+ name="check-expandable-check1"
4232
+ aria-labelledby="data-list-expandable-example-data-list-item-1"
4233
+ />
4234
+ </div>
4212
4235
  </div>
4213
4236
  </div>
4214
4237
  <div class="pf-c-data-list__item-content">
@@ -4282,11 +4305,14 @@ wrapperTag: div
4282
4305
  <thead>
4283
4306
  <tr role="row">
4284
4307
  <td class="pf-c-table__check" role="cell">
4285
- <input
4286
- type="checkbox"
4287
- name="check-all"
4288
- aria-label="Select all rows"
4289
- />
4308
+ <div class="pf-c-check pf-m-standalone">
4309
+ <input
4310
+ class="pf-c-check__input"
4311
+ type="checkbox"
4312
+ name="check-all"
4313
+ aria-label="Select all rows"
4314
+ />
4315
+ </div>
4290
4316
  </td>
4291
4317
  <th role="columnheader" scope="col">Contributor</th>
4292
4318
  <th role="columnheader" scope="col">Position</th>
@@ -4305,11 +4331,14 @@ wrapperTag: div
4305
4331
  <tbody role="rowgroup">
4306
4332
  <tr role="row">
4307
4333
  <td class="pf-c-table__check" role="cell">
4308
- <input
4309
- type="checkbox"
4310
- name="checkrow1"
4311
- aria-labelledby="compact-table-demo-data-list-name1"
4312
- />
4334
+ <div class="pf-c-check pf-m-standalone">
4335
+ <input
4336
+ class="pf-c-check__input"
4337
+ type="checkbox"
4338
+ name="checkrow1"
4339
+ aria-labelledby="compact-table-demo-data-list-name1"
4340
+ />
4341
+ </div>
4313
4342
  </td>
4314
4343
  <td role="cell" data-label="Contributor">
4315
4344
  <span id="compact-table-demo-data-list-name1">Sam Jones</span>
@@ -4381,11 +4410,14 @@ wrapperTag: div
4381
4410
  </tr>
4382
4411
  <tr role="row">
4383
4412
  <td class="pf-c-table__check" role="cell">
4384
- <input
4385
- type="checkbox"
4386
- name="checkrow2"
4387
- aria-labelledby="compact-table-demo-data-list-name2"
4388
- />
4413
+ <div class="pf-c-check pf-m-standalone">
4414
+ <input
4415
+ class="pf-c-check__input"
4416
+ type="checkbox"
4417
+ name="checkrow2"
4418
+ aria-labelledby="compact-table-demo-data-list-name2"
4419
+ />
4420
+ </div>
4389
4421
  </td>
4390
4422
  <th role="columnheader" data-label="Contributor">
4391
4423
  <span id="compact-table-demo-data-list-name2">Amy Miller</span>
@@ -4457,11 +4489,14 @@ wrapperTag: div
4457
4489
  </tr>
4458
4490
  <tr role="row">
4459
4491
  <td class="pf-c-table__check" role="cell">
4460
- <input
4461
- type="checkbox"
4462
- name="checkrow3"
4463
- aria-labelledby="compact-table-demo-data-list-name3"
4464
- />
4492
+ <div class="pf-c-check pf-m-standalone">
4493
+ <input
4494
+ class="pf-c-check__input"
4495
+ type="checkbox"
4496
+ name="checkrow3"
4497
+ aria-labelledby="compact-table-demo-data-list-name3"
4498
+ />
4499
+ </div>
4465
4500
  </td>
4466
4501
  <th role="columnheader" data-label="Contributor">
4467
4502
  <span
@@ -4539,11 +4574,14 @@ wrapperTag: div
4539
4574
  </tr>
4540
4575
  <tr role="row">
4541
4576
  <td class="pf-c-table__check" role="cell">
4542
- <input
4543
- type="checkbox"
4544
- name="checkrow4"
4545
- aria-labelledby="compact-table-demo-data-list-name4"
4546
- />
4577
+ <div class="pf-c-check pf-m-standalone">
4578
+ <input
4579
+ class="pf-c-check__input"
4580
+ type="checkbox"
4581
+ name="checkrow4"
4582
+ aria-labelledby="compact-table-demo-data-list-name4"
4583
+ />
4584
+ </div>
4547
4585
  </td>
4548
4586
  <td role="cell" data-label="Contributor name">
4549
4587
  <span
@@ -4648,11 +4686,14 @@ wrapperTag: div
4648
4686
  </div>
4649
4687
 
4650
4688
  <div class="pf-c-data-list__check">
4651
- <input
4652
- type="checkbox"
4653
- name="check-expandable-check2"
4654
- aria-labelledby="data-list-expandable-example-data-list-item-2"
4655
- />
4689
+ <div class="pf-c-check pf-m-standalone">
4690
+ <input
4691
+ class="pf-c-check__input"
4692
+ type="checkbox"
4693
+ name="check-expandable-check2"
4694
+ aria-labelledby="data-list-expandable-example-data-list-item-2"
4695
+ />
4696
+ </div>
4656
4697
  </div>
4657
4698
  </div>
4658
4699
  <div class="pf-c-data-list__item-content">
@@ -4768,11 +4809,14 @@ wrapperTag: div
4768
4809
  </div>
4769
4810
 
4770
4811
  <div class="pf-c-data-list__check">
4771
- <input
4772
- type="checkbox"
4773
- name="check-expandable-check3"
4774
- aria-labelledby="data-list-expandable-example-data-list-item-3"
4775
- />
4812
+ <div class="pf-c-check pf-m-standalone">
4813
+ <input
4814
+ class="pf-c-check__input"
4815
+ type="checkbox"
4816
+ name="check-expandable-check3"
4817
+ aria-labelledby="data-list-expandable-example-data-list-item-3"
4818
+ />
4819
+ </div>
4776
4820
  </div>
4777
4821
  </div>
4778
4822
  <div class="pf-c-data-list__item-content">
@@ -4818,11 +4862,14 @@ wrapperTag: div
4818
4862
  </div>
4819
4863
 
4820
4864
  <div class="pf-c-data-list__check">
4821
- <input
4822
- type="checkbox"
4823
- name="check-expandable-check4"
4824
- aria-labelledby="data-list-expandable-example-data-list-item-4"
4825
- />
4865
+ <div class="pf-c-check pf-m-standalone">
4866
+ <input
4867
+ class="pf-c-check__input"
4868
+ type="checkbox"
4869
+ name="check-expandable-check4"
4870
+ aria-labelledby="data-list-expandable-example-data-list-item-4"
4871
+ />
4872
+ </div>
4826
4873
  </div>
4827
4874
  </div>
4828
4875
  <div class="pf-c-data-list__item-content">
@@ -4914,11 +4961,14 @@ wrapperTag: div
4914
4961
  </div>
4915
4962
 
4916
4963
  <div class="pf-c-data-list__check">
4917
- <input
4918
- type="checkbox"
4919
- name="check-expandable-check5"
4920
- aria-labelledby="data-list-expandable-example-data-list-item-5"
4921
- />
4964
+ <div class="pf-c-check pf-m-standalone">
4965
+ <input
4966
+ class="pf-c-check__input"
4967
+ type="checkbox"
4968
+ name="check-expandable-check5"
4969
+ aria-labelledby="data-list-expandable-example-data-list-item-5"
4970
+ />
4971
+ </div>
4922
4972
  </div>
4923
4973
  </div>
4924
4974
  <div class="pf-c-data-list__item-content">
@@ -6039,7 +6089,6 @@ wrapperTag: div
6039
6089
  role="listbox"
6040
6090
  aria-labelledby="-select-name-label"
6041
6091
  hidden
6042
- style="width: 175px"
6043
6092
  >
6044
6093
  <li role="presentation">
6045
6094
  <button
@@ -6079,7 +6128,7 @@ wrapperTag: div
6079
6128
  </li>
6080
6129
  </ul>
6081
6130
  </div>
6082
- <div class="pf-c-text-input-group">
6131
+ <div class="pf-c-text-input-group" style="width: auto">
6083
6132
  <div class="pf-c-text-input-group__main pf-m-icon">
6084
6133
  <span class="pf-c-text-input-group__text">
6085
6134
  <span class="pf-c-text-input-group__icon">
@@ -726,7 +726,6 @@ wrapperTag: div
726
726
  role="listbox"
727
727
  aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
728
728
  hidden
729
- style="width: 175px"
730
729
  >
731
730
  <li role="presentation">
732
731
  <button
@@ -766,7 +765,7 @@ wrapperTag: div
766
765
  </li>
767
766
  </ul>
768
767
  </div>
769
- <div class="pf-c-text-input-group">
768
+ <div class="pf-c-text-input-group" style="width: auto">
770
769
  <div class="pf-c-text-input-group__main pf-m-icon">
771
770
  <span class="pf-c-text-input-group__text">
772
771
  <span class="pf-c-text-input-group__icon">
@@ -1061,7 +1060,6 @@ wrapperTag: div
1061
1060
  role="listbox"
1062
1061
  aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1063
1062
  hidden
1064
- style="width: 175px"
1065
1063
  >
1066
1064
  <li role="presentation">
1067
1065
  <button
@@ -1101,7 +1099,7 @@ wrapperTag: div
1101
1099
  </li>
1102
1100
  </ul>
1103
1101
  </div>
1104
- <div class="pf-c-text-input-group">
1102
+ <div class="pf-c-text-input-group" style="width: auto">
1105
1103
  <div class="pf-c-text-input-group__main pf-m-icon">
1106
1104
  <span class="pf-c-text-input-group__text">
1107
1105
  <span class="pf-c-text-input-group__icon">
@@ -3678,7 +3676,6 @@ wrapperTag: div
3678
3676
  role="listbox"
3679
3677
  aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3680
3678
  hidden
3681
- style="width: 175px"
3682
3679
  >
3683
3680
  <li role="presentation">
3684
3681
  <button
@@ -3715,7 +3712,7 @@ wrapperTag: div
3715
3712
  </li>
3716
3713
  </ul>
3717
3714
  </div>
3718
- <div class="pf-c-text-input-group">
3715
+ <div class="pf-c-text-input-group" style="width: auto">
3719
3716
  <div class="pf-c-text-input-group__main pf-m-icon">
3720
3717
  <span class="pf-c-text-input-group__text">
3721
3718
  <span class="pf-c-text-input-group__icon">