@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/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
@@ -4915,467 +4840,8 @@ section: components
4915
4840
  </div>
4916
4841
  </td>
4917
4842
  </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
4843
  </tbody>
5279
4844
  </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
4845
  </div>
5380
4846
  </div>
5381
4847
 
@@ -5513,6 +4979,43 @@ section: components
5513
4979
  </div>
5514
4980
  </div>
5515
4981
  </div>
4982
+ <div class="pf-l-flex pf-m-column">
4983
+ <div class="pf-l-flex__item">
4984
+ <h3 class="pf-c-title" id="-title">Tags</h3>
4985
+ </div>
4986
+ <div class="pf-l-flex__item">
4987
+ <div class="pf-c-label-group">
4988
+ <div class="pf-c-label-group__main">
4989
+ <ul
4990
+ class="pf-c-label-group__list"
4991
+ role="list"
4992
+ aria-label="Group of labels"
4993
+ >
4994
+ <li class="pf-c-label-group__list-item">
4995
+ <span class="pf-c-label pf-m-outline">
4996
+ <span class="pf-c-label__content">Tag 1</span>
4997
+ </span>
4998
+ </li>
4999
+ <li class="pf-c-label-group__list-item">
5000
+ <span class="pf-c-label pf-m-outline">
5001
+ <span class="pf-c-label__content">Tag 2</span>
5002
+ </span>
5003
+ </li>
5004
+ <li class="pf-c-label-group__list-item">
5005
+ <span class="pf-c-label pf-m-outline">
5006
+ <span class="pf-c-label__content">Tag 3</span>
5007
+ </span>
5008
+ </li>
5009
+ <li class="pf-c-label-group__list-item">
5010
+ <span class="pf-c-label pf-m-overflow">
5011
+ <span class="pf-c-label__content">2 more</span>
5012
+ </span>
5013
+ </li>
5014
+ </ul>
5015
+ </div>
5016
+ </div>
5017
+ </div>
5018
+ </div>
5516
5019
  </div>
5517
5020
  </div>
5518
5021
  </section>
@@ -6500,12 +6003,12 @@ section: components
6500
6003
  <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
6501
6004
  <div class="pf-c-page__main-body">
6502
6005
  <div class="pf-c-content">
6503
- <h1>Projects</h1>
6504
- <p>Click any project card to view tabs within modals.</p>
6006
+ <h1>Main title</h1>
6007
+ <p>This is a full page demo.</p>
6505
6008
  </div>
6506
6009
  </div>
6507
6010
  </section>
6508
- <section class="pf-c-page__main-section pf-m-fill">
6011
+ <section class="pf-c-page__main-section">
6509
6012
  <div class="pf-l-gallery pf-m-gutter">
6510
6013
  <div
6511
6014
  class="pf-c-card pf-m-selectable-raised pf-m-compact"