@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
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -3351,14 +3351,14 @@ section: components
3351
3351
  <div class="pf-l-flex__item pf-m-flex-1">
3352
3352
  <div class="pf-c-card pf-m-full-height">
3353
3353
  <div class="pf-c-card__header">
3354
- <h3 class="pf-c-title pf-m-lg">Title of card</h3>
3354
+ <h2 class="pf-c-title pf-m-lg">Title of card</h2>
3355
3355
  </div>
3356
3356
  </div>
3357
3357
  </div>
3358
3358
  <div class="pf-l-flex__item pf-m-flex-1">
3359
3359
  <div class="pf-c-card pf-m-full-height">
3360
3360
  <div class="pf-c-card__header">
3361
- <h3 class="pf-c-title pf-m-lg">Title of card</h3>
3361
+ <h2 class="pf-c-title pf-m-lg">Title of card</h2>
3362
3362
  </div>
3363
3363
  </div>
3364
3364
  </div>
@@ -4441,81 +4441,6 @@ section: components
4441
4441
  </div>
4442
4442
  </div>
4443
4443
  </div>
4444
-
4445
- <div class="pf-c-toolbar__item pf-m-pagination">
4446
- <div class="pf-c-pagination pf-m-compact">
4447
- <div class="pf-c-options-menu">
4448
- <button
4449
- class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
4450
- type="button"
4451
- id="table-tabs-example-tabs-toolbar-top-pagination-toggle"
4452
- aria-haspopup="listbox"
4453
- aria-expanded="false"
4454
- >
4455
- <span class="pf-c-options-menu__toggle-text">
4456
- <b>1 - 10</b>&nbsp;of&nbsp;
4457
- <b>36</b>
4458
- </span>
4459
- <div class="pf-c-options-menu__toggle-icon">
4460
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4461
- </div>
4462
- </button>
4463
- <ul
4464
- class="pf-c-options-menu__menu"
4465
- aria-labelledby="table-tabs-example-tabs-toolbar-top-pagination-toggle"
4466
- hidden
4467
- >
4468
- <li>
4469
- <button
4470
- class="pf-c-options-menu__menu-item"
4471
- type="button"
4472
- >5 per page</button>
4473
- </li>
4474
- <li>
4475
- <button
4476
- class="pf-c-options-menu__menu-item"
4477
- type="button"
4478
- >
4479
- 10 per page
4480
- <div class="pf-c-options-menu__menu-item-icon">
4481
- <i class="fas fa-check" aria-hidden="true"></i>
4482
- </div>
4483
- </button>
4484
- </li>
4485
- <li>
4486
- <button
4487
- class="pf-c-options-menu__menu-item"
4488
- type="button"
4489
- >20 per page</button>
4490
- </li>
4491
- </ul>
4492
- </div>
4493
- <nav
4494
- class="pf-c-pagination__nav"
4495
- aria-label="Toolbar top pagination"
4496
- >
4497
- <div class="pf-c-pagination__nav-control pf-m-prev">
4498
- <button
4499
- class="pf-c-button pf-m-plain"
4500
- type="button"
4501
- disabled
4502
- aria-label="Go to previous page"
4503
- >
4504
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4505
- </button>
4506
- </div>
4507
- <div class="pf-c-pagination__nav-control pf-m-next">
4508
- <button
4509
- class="pf-c-button pf-m-plain"
4510
- type="button"
4511
- aria-label="Go to next page"
4512
- >
4513
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4514
- </button>
4515
- </div>
4516
- </nav>
4517
- </div>
4518
- </div>
4519
4444
  </div>
4520
4445
 
4521
4446
  <div
@@ -4540,11 +4465,14 @@ section: components
4540
4465
  <thead>
4541
4466
  <tr role="row">
4542
4467
  <td class="pf-c-table__check" role="cell">
4543
- <input
4544
- type="checkbox"
4545
- name="check-all"
4546
- aria-label="Select all rows"
4547
- />
4468
+ <div class="pf-c-check pf-m-standalone">
4469
+ <input
4470
+ class="pf-c-check__input"
4471
+ type="checkbox"
4472
+ name="check-all"
4473
+ aria-label="Select all rows"
4474
+ />
4475
+ </div>
4548
4476
  </td>
4549
4477
  <th role="columnheader" scope="col">Repositories</th>
4550
4478
  <th role="columnheader" scope="col">Branches</th>
@@ -4558,11 +4486,14 @@ section: components
4558
4486
  <tbody role="rowgroup">
4559
4487
  <tr role="row">
4560
4488
  <td class="pf-c-table__check" role="cell">
4561
- <input
4562
- type="checkbox"
4563
- name="checkrow1"
4564
- aria-labelledby="table-tabs-example-table-node1"
4565
- />
4489
+ <div class="pf-c-check pf-m-standalone">
4490
+ <input
4491
+ class="pf-c-check__input"
4492
+ type="checkbox"
4493
+ name="checkrow1"
4494
+ aria-labelledby="table-tabs-example-table-node1"
4495
+ />
4496
+ </div>
4566
4497
  </td>
4567
4498
  <th role="columnheader" data-label="Repository name">
4568
4499
  <div>
@@ -4630,11 +4561,14 @@ section: components
4630
4561
 
4631
4562
  <tr class="pf-m-selected" role="row">
4632
4563
  <td class="pf-c-table__check" role="cell">
4633
- <input
4634
- type="checkbox"
4635
- name="checkrow2"
4636
- aria-labelledby="table-tabs-example-table-node2"
4637
- />
4564
+ <div class="pf-c-check pf-m-standalone">
4565
+ <input
4566
+ class="pf-c-check__input"
4567
+ type="checkbox"
4568
+ name="checkrow2"
4569
+ aria-labelledby="table-tabs-example-table-node2"
4570
+ />
4571
+ </div>
4638
4572
  </td>
4639
4573
  <th role="columnheader" data-label="Repository name">
4640
4574
  <div>
@@ -4702,11 +4636,14 @@ section: components
4702
4636
 
4703
4637
  <tr role="row">
4704
4638
  <td class="pf-c-table__check" role="cell">
4705
- <input
4706
- type="checkbox"
4707
- name="checkrow3"
4708
- aria-labelledby="table-tabs-example-table-node3"
4709
- />
4639
+ <div class="pf-c-check pf-m-standalone">
4640
+ <input
4641
+ class="pf-c-check__input"
4642
+ type="checkbox"
4643
+ name="checkrow3"
4644
+ aria-labelledby="table-tabs-example-table-node3"
4645
+ />
4646
+ </div>
4710
4647
  </td>
4711
4648
  <th role="columnheader" data-label="Repository name">
4712
4649
  <div>
@@ -4774,11 +4711,14 @@ section: components
4774
4711
 
4775
4712
  <tr role="row">
4776
4713
  <td class="pf-c-table__check" role="cell">
4777
- <input
4778
- type="checkbox"
4779
- name="checkrow4"
4780
- aria-labelledby="table-tabs-example-table-node4"
4781
- />
4714
+ <div class="pf-c-check pf-m-standalone">
4715
+ <input
4716
+ class="pf-c-check__input"
4717
+ type="checkbox"
4718
+ name="checkrow4"
4719
+ aria-labelledby="table-tabs-example-table-node4"
4720
+ />
4721
+ </div>
4782
4722
  </td>
4783
4723
  <th role="columnheader" data-label="Repository name">
4784
4724
  <div>
@@ -4846,11 +4786,14 @@ section: components
4846
4786
 
4847
4787
  <tr role="row">
4848
4788
  <td class="pf-c-table__check" role="cell">
4849
- <input
4850
- type="checkbox"
4851
- name="checkrow5"
4852
- aria-labelledby="table-tabs-example-table-node5"
4853
- />
4789
+ <div class="pf-c-check pf-m-standalone">
4790
+ <input
4791
+ class="pf-c-check__input"
4792
+ type="checkbox"
4793
+ name="checkrow5"
4794
+ aria-labelledby="table-tabs-example-table-node5"
4795
+ />
4796
+ </div>
4854
4797
  </td>
4855
4798
  <td role="cell" data-label="Repository name">
4856
4799
  <div>
@@ -4915,467 +4858,8 @@ section: components
4915
4858
  </div>
4916
4859
  </td>
4917
4860
  </tr>
4918
-
4919
- <tr role="row">
4920
- <td class="pf-c-table__check" role="cell">
4921
- <input
4922
- type="checkbox"
4923
- name="checkrow6"
4924
- aria-labelledby="table-tabs-example-table-node6"
4925
- />
4926
- </td>
4927
- <th role="columnheader" data-label="Repository name">
4928
- <div>
4929
- <div id="table-tabs-example-table-node6">Node 6</div>
4930
- <a href="#">siemur/test-space</a>
4931
- </div>
4932
- </th>
4933
- <td role="cell" data-label="Branches">
4934
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
4935
- <div class="pf-l-flex__item">34</div>
4936
- <div class="pf-l-flex__item">
4937
- <i class="fas fa-code-branch"></i>
4938
- </div>
4939
- </div>
4940
- </td>
4941
- <td role="cell" data-label="Pull requests">
4942
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
4943
- <div class="pf-l-flex__item">21</div>
4944
- <div class="pf-l-flex__item">
4945
- <i class="fas fa-code"></i>
4946
- </div>
4947
- </div>
4948
- </td>
4949
- <td role="cell" data-label="Workspaces">
4950
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
4951
- <div class="pf-l-flex__item">26</div>
4952
- <div class="pf-l-flex__item">
4953
- <i class="fas fa-cube"></i>
4954
- </div>
4955
- </div>
4956
- </td>
4957
- <td role="cell" data-label="Last commit">2 days ago</td>
4958
- <td class="pf-c-table__action" role="cell">
4959
- <div
4960
- class="pf-c-overflow-menu"
4961
- id="table-tabs-example-table-dropdown-kebab-6"
4962
- >
4963
- <div class="pf-c-overflow-menu__control">
4964
- <div class="pf-c-dropdown">
4965
- <button
4966
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
4967
- type="button"
4968
- id="table-tabs-example-table-dropdown-kebab-6-dropdown-toggle"
4969
- aria-label="Dropdown for tabs table"
4970
- aria-expanded="false"
4971
- >
4972
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4973
- </button>
4974
- <ul
4975
- class="pf-c-dropdown__menu pf-m-align-right"
4976
- aria-labelledby="table-tabs-example-table-dropdown-kebab-6-dropdown-toggle"
4977
- hidden
4978
- >
4979
- <li>
4980
- <button
4981
- class="pf-c-dropdown__menu-item"
4982
- >Action Link</button>
4983
- </li>
4984
- </ul>
4985
- </div>
4986
- </div>
4987
- </div>
4988
- </td>
4989
- </tr>
4990
-
4991
- <tr role="row">
4992
- <td class="pf-c-table__check" role="cell">
4993
- <input
4994
- type="checkbox"
4995
- name="checkrow7"
4996
- aria-labelledby="table-tabs-example-table-node7"
4997
- />
4998
- </td>
4999
- <th role="columnheader" data-label="Repository name">
5000
- <div>
5001
- <div id="table-tabs-example-table-node7">Node 7</div>
5002
- <a href="#">siemur/test-space</a>
5003
- </div>
5004
- </th>
5005
- <td role="cell" data-label="Branches">
5006
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5007
- <div class="pf-l-flex__item">34</div>
5008
- <div class="pf-l-flex__item">
5009
- <i class="fas fa-code-branch"></i>
5010
- </div>
5011
- </div>
5012
- </td>
5013
- <td role="cell" data-label="Pull requests">
5014
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5015
- <div class="pf-l-flex__item">21</div>
5016
- <div class="pf-l-flex__item">
5017
- <i class="fas fa-code"></i>
5018
- </div>
5019
- </div>
5020
- </td>
5021
- <td role="cell" data-label="Workspaces">
5022
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5023
- <div class="pf-l-flex__item">26</div>
5024
- <div class="pf-l-flex__item">
5025
- <i class="fas fa-cube"></i>
5026
- </div>
5027
- </div>
5028
- </td>
5029
- <td role="cell" data-label="Last commit">2 days ago</td>
5030
- <td class="pf-c-table__action" role="cell">
5031
- <div
5032
- class="pf-c-overflow-menu"
5033
- id="table-tabs-example-table-dropdown-kebab-7"
5034
- >
5035
- <div class="pf-c-overflow-menu__control">
5036
- <div class="pf-c-dropdown">
5037
- <button
5038
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
5039
- type="button"
5040
- id="table-tabs-example-table-dropdown-kebab-7-dropdown-toggle"
5041
- aria-label="Dropdown for tabs table"
5042
- aria-expanded="false"
5043
- >
5044
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5045
- </button>
5046
- <ul
5047
- class="pf-c-dropdown__menu pf-m-align-right"
5048
- aria-labelledby="table-tabs-example-table-dropdown-kebab-7-dropdown-toggle"
5049
- hidden
5050
- >
5051
- <li>
5052
- <button
5053
- class="pf-c-dropdown__menu-item"
5054
- >Action Link</button>
5055
- </li>
5056
- </ul>
5057
- </div>
5058
- </div>
5059
- </div>
5060
- </td>
5061
- </tr>
5062
-
5063
- <tr role="row">
5064
- <td class="pf-c-table__check" role="cell">
5065
- <input
5066
- type="checkbox"
5067
- name="checkrow8"
5068
- aria-labelledby="table-tabs-example-table-node8"
5069
- />
5070
- </td>
5071
- <th role="columnheader" data-label="Repository name">
5072
- <div>
5073
- <div id="table-tabs-example-table-node8">Node 8</div>
5074
- <a href="#">siemur/test-space</a>
5075
- </div>
5076
- </th>
5077
- <td role="cell" data-label="Branches">
5078
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5079
- <div class="pf-l-flex__item">34</div>
5080
- <div class="pf-l-flex__item">
5081
- <i class="fas fa-code-branch"></i>
5082
- </div>
5083
- </div>
5084
- </td>
5085
- <td role="cell" data-label="Pull requests">
5086
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5087
- <div class="pf-l-flex__item">21</div>
5088
- <div class="pf-l-flex__item">
5089
- <i class="fas fa-code"></i>
5090
- </div>
5091
- </div>
5092
- </td>
5093
- <td role="cell" data-label="Workspaces">
5094
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5095
- <div class="pf-l-flex__item">26</div>
5096
- <div class="pf-l-flex__item">
5097
- <i class="fas fa-cube"></i>
5098
- </div>
5099
- </div>
5100
- </td>
5101
- <td role="cell" data-label="Last commit">2 days ago</td>
5102
- <td class="pf-c-table__action" role="cell">
5103
- <div
5104
- class="pf-c-overflow-menu"
5105
- id="table-tabs-example-table-dropdown-kebab-8"
5106
- >
5107
- <div class="pf-c-overflow-menu__control">
5108
- <div class="pf-c-dropdown">
5109
- <button
5110
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
5111
- type="button"
5112
- id="table-tabs-example-table-dropdown-kebab-8-dropdown-toggle"
5113
- aria-label="Dropdown for tabs table"
5114
- aria-expanded="false"
5115
- >
5116
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5117
- </button>
5118
- <ul
5119
- class="pf-c-dropdown__menu pf-m-align-right"
5120
- aria-labelledby="table-tabs-example-table-dropdown-kebab-8-dropdown-toggle"
5121
- hidden
5122
- >
5123
- <li>
5124
- <button
5125
- class="pf-c-dropdown__menu-item"
5126
- >Action Link</button>
5127
- </li>
5128
- </ul>
5129
- </div>
5130
- </div>
5131
- </div>
5132
- </td>
5133
- </tr>
5134
-
5135
- <tr role="row">
5136
- <td class="pf-c-table__check" role="cell">
5137
- <input
5138
- type="checkbox"
5139
- name="checkrow9"
5140
- aria-labelledby="table-tabs-example-table-node9"
5141
- />
5142
- </td>
5143
- <th role="columnheader" data-label="Repository name">
5144
- <div>
5145
- <div id="table-tabs-example-table-node9">Node 9</div>
5146
- <a href="#">siemur/test-space</a>
5147
- </div>
5148
- </th>
5149
- <td role="cell" data-label="Branches">
5150
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5151
- <div class="pf-l-flex__item">34</div>
5152
- <div class="pf-l-flex__item">
5153
- <i class="fas fa-code-branch"></i>
5154
- </div>
5155
- </div>
5156
- </td>
5157
- <td role="cell" data-label="Pull requests">
5158
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5159
- <div class="pf-l-flex__item">21</div>
5160
- <div class="pf-l-flex__item">
5161
- <i class="fas fa-code"></i>
5162
- </div>
5163
- </div>
5164
- </td>
5165
- <td role="cell" data-label="Workspaces">
5166
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5167
- <div class="pf-l-flex__item">26</div>
5168
- <div class="pf-l-flex__item">
5169
- <i class="fas fa-cube"></i>
5170
- </div>
5171
- </div>
5172
- </td>
5173
- <td role="cell" data-label="Last commit">2 days ago</td>
5174
- <td class="pf-c-table__action" role="cell">
5175
- <div
5176
- class="pf-c-overflow-menu"
5177
- id="table-tabs-example-table-dropdown-kebab-9"
5178
- >
5179
- <div class="pf-c-overflow-menu__control">
5180
- <div class="pf-c-dropdown">
5181
- <button
5182
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
5183
- type="button"
5184
- id="table-tabs-example-table-dropdown-kebab-9-dropdown-toggle"
5185
- aria-label="Dropdown for tabs table"
5186
- aria-expanded="false"
5187
- >
5188
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5189
- </button>
5190
- <ul
5191
- class="pf-c-dropdown__menu pf-m-align-right"
5192
- aria-labelledby="table-tabs-example-table-dropdown-kebab-9-dropdown-toggle"
5193
- hidden
5194
- >
5195
- <li>
5196
- <button
5197
- class="pf-c-dropdown__menu-item"
5198
- >Action Link</button>
5199
- </li>
5200
- </ul>
5201
- </div>
5202
- </div>
5203
- </div>
5204
- </td>
5205
- </tr>
5206
-
5207
- <tr role="row">
5208
- <td class="pf-c-table__check" role="cell">
5209
- <input
5210
- type="checkbox"
5211
- name="checkrow10"
5212
- aria-labelledby="table-tabs-example-table-node10"
5213
- />
5214
- </td>
5215
- <th role="columnheader" data-label="Repository name">
5216
- <div>
5217
- <div id="table-tabs-example-table-node10">Node 10</div>
5218
- <a href="#">siemur/test-space</a>
5219
- </div>
5220
- </th>
5221
- <td role="cell" data-label="Branches">
5222
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5223
- <div class="pf-l-flex__item">34</div>
5224
- <div class="pf-l-flex__item">
5225
- <i class="fas fa-code-branch"></i>
5226
- </div>
5227
- </div>
5228
- </td>
5229
- <td role="cell" data-label="Pull requests">
5230
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5231
- <div class="pf-l-flex__item">21</div>
5232
- <div class="pf-l-flex__item">
5233
- <i class="fas fa-code"></i>
5234
- </div>
5235
- </div>
5236
- </td>
5237
- <td role="cell" data-label="Workspaces">
5238
- <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
5239
- <div class="pf-l-flex__item">26</div>
5240
- <div class="pf-l-flex__item">
5241
- <i class="fas fa-cube"></i>
5242
- </div>
5243
- </div>
5244
- </td>
5245
- <td role="cell" data-label="Last commit">2 days ago</td>
5246
- <td class="pf-c-table__action" role="cell">
5247
- <div
5248
- class="pf-c-overflow-menu"
5249
- id="table-tabs-example-table-dropdown-kebab-10"
5250
- >
5251
- <div class="pf-c-overflow-menu__control">
5252
- <div class="pf-c-dropdown">
5253
- <button
5254
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
5255
- type="button"
5256
- id="table-tabs-example-table-dropdown-kebab-10-dropdown-toggle"
5257
- aria-label="Dropdown for tabs table"
5258
- aria-expanded="false"
5259
- >
5260
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5261
- </button>
5262
- <ul
5263
- class="pf-c-dropdown__menu pf-m-align-right"
5264
- aria-labelledby="table-tabs-example-table-dropdown-kebab-10-dropdown-toggle"
5265
- hidden
5266
- >
5267
- <li>
5268
- <button
5269
- class="pf-c-dropdown__menu-item"
5270
- >Action Link</button>
5271
- </li>
5272
- </ul>
5273
- </div>
5274
- </div>
5275
- </div>
5276
- </td>
5277
- </tr>
5278
4861
  </tbody>
5279
4862
  </table>
5280
- <div class="pf-c-pagination pf-m-bottom">
5281
- <div class="pf-c-options-menu pf-m-top">
5282
- <button
5283
- class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
5284
- type="button"
5285
- id="-footer-pagination-toggle"
5286
- aria-haspopup="listbox"
5287
- aria-expanded="false"
5288
- >
5289
- <span class="pf-c-options-menu__toggle-text">
5290
- <b>1 - 10</b>&nbsp;of&nbsp;
5291
- <b>36</b>
5292
- </span>
5293
- <div class="pf-c-options-menu__toggle-icon">
5294
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5295
- </div>
5296
- </button>
5297
- <ul
5298
- class="pf-c-options-menu__menu pf-m-top"
5299
- aria-labelledby="-footer-pagination-toggle"
5300
- hidden
5301
- >
5302
- <li>
5303
- <button
5304
- class="pf-c-options-menu__menu-item"
5305
- type="button"
5306
- >5 per page</button>
5307
- </li>
5308
- <li>
5309
- <button
5310
- class="pf-c-options-menu__menu-item"
5311
- type="button"
5312
- >
5313
- 10 per page
5314
- <div class="pf-c-options-menu__menu-item-icon">
5315
- <i class="fas fa-check" aria-hidden="true"></i>
5316
- </div>
5317
- </button>
5318
- </li>
5319
- <li>
5320
- <button
5321
- class="pf-c-options-menu__menu-item"
5322
- type="button"
5323
- >20 per page</button>
5324
- </li>
5325
- </ul>
5326
- </div>
5327
- <nav class="pf-c-pagination__nav" aria-label="Pagination">
5328
- <div class="pf-c-pagination__nav-control pf-m-first">
5329
- <button
5330
- class="pf-c-button pf-m-plain"
5331
- type="button"
5332
- disabled
5333
- aria-label="Go to first page"
5334
- >
5335
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
5336
- </button>
5337
- </div>
5338
- <div class="pf-c-pagination__nav-control pf-m-prev">
5339
- <button
5340
- class="pf-c-button pf-m-plain"
5341
- type="button"
5342
- disabled
5343
- aria-label="Go to previous page"
5344
- >
5345
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5346
- </button>
5347
- </div>
5348
- <div class="pf-c-pagination__nav-page-select">
5349
- <input
5350
- class="pf-c-form-control"
5351
- aria-label="Current page"
5352
- type="number"
5353
- min="1"
5354
- max="4"
5355
- value="1"
5356
- />
5357
- <span aria-hidden="true">of 4</span>
5358
- </div>
5359
- <div class="pf-c-pagination__nav-control pf-m-next">
5360
- <button
5361
- class="pf-c-button pf-m-plain"
5362
- type="button"
5363
- aria-label="Go to next page"
5364
- >
5365
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5366
- </button>
5367
- </div>
5368
- <div class="pf-c-pagination__nav-control pf-m-last">
5369
- <button
5370
- class="pf-c-button pf-m-plain"
5371
- type="button"
5372
- aria-label="Go to last page"
5373
- >
5374
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
5375
- </button>
5376
- </div>
5377
- </nav>
5378
- </div>
5379
4863
  </div>
5380
4864
  </div>
5381
4865
 
@@ -5513,6 +4997,43 @@ section: components
5513
4997
  </div>
5514
4998
  </div>
5515
4999
  </div>
5000
+ <div class="pf-l-flex pf-m-column">
5001
+ <div class="pf-l-flex__item">
5002
+ <h3 class="pf-c-title" id="-title">Tags</h3>
5003
+ </div>
5004
+ <div class="pf-l-flex__item">
5005
+ <div class="pf-c-label-group">
5006
+ <div class="pf-c-label-group__main">
5007
+ <ul
5008
+ class="pf-c-label-group__list"
5009
+ role="list"
5010
+ aria-label="Group of labels"
5011
+ >
5012
+ <li class="pf-c-label-group__list-item">
5013
+ <span class="pf-c-label pf-m-outline">
5014
+ <span class="pf-c-label__content">Tag 1</span>
5015
+ </span>
5016
+ </li>
5017
+ <li class="pf-c-label-group__list-item">
5018
+ <span class="pf-c-label pf-m-outline">
5019
+ <span class="pf-c-label__content">Tag 2</span>
5020
+ </span>
5021
+ </li>
5022
+ <li class="pf-c-label-group__list-item">
5023
+ <span class="pf-c-label pf-m-outline">
5024
+ <span class="pf-c-label__content">Tag 3</span>
5025
+ </span>
5026
+ </li>
5027
+ <li class="pf-c-label-group__list-item">
5028
+ <span class="pf-c-label pf-m-overflow">
5029
+ <span class="pf-c-label__content">2 more</span>
5030
+ </span>
5031
+ </li>
5032
+ </ul>
5033
+ </div>
5034
+ </div>
5035
+ </div>
5036
+ </div>
5516
5037
  </div>
5517
5038
  </div>
5518
5039
  </section>
@@ -6500,12 +6021,12 @@ section: components
6500
6021
  <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
6501
6022
  <div class="pf-c-page__main-body">
6502
6023
  <div class="pf-c-content">
6503
- <h1>Projects</h1>
6504
- <p>Click any project card to view tabs within modals.</p>
6024
+ <h1>Main title</h1>
6025
+ <p>This is a full page demo.</p>
6505
6026
  </div>
6506
6027
  </div>
6507
6028
  </section>
6508
- <section class="pf-c-page__main-section pf-m-fill">
6029
+ <section class="pf-c-page__main-section">
6509
6030
  <div class="pf-l-gallery pf-m-gutter">
6510
6031
  <div
6511
6032
  class="pf-c-card pf-m-selectable-raised pf-m-compact"