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

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 (30) hide show
  1. package/RELEASE-NOTES.md +30 -0
  2. package/components/Dropdown/dropdown.css +15 -0
  3. package/components/Dropdown/dropdown.scss +20 -0
  4. package/components/FormControl/form-control.css +1 -1
  5. package/components/FormControl/themes/dark/form-control.scss +1 -1
  6. package/components/InputGroup/input-group.css +14 -0
  7. package/components/InputGroup/input-group.scss +9 -0
  8. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  9. package/components/Menu/menu.css +4 -0
  10. package/components/Menu/menu.scss +5 -0
  11. package/components/Pagination/pagination.css +120 -0
  12. package/components/Pagination/pagination.scss +24 -1
  13. package/components/Slider/slider.css +0 -7
  14. package/components/Slider/slider.scss +0 -9
  15. package/docs/components/Dropdown/examples/Dropdown.md +216 -0
  16. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  17. package/docs/components/Pagination/examples/Pagination.md +129 -30
  18. package/docs/components/Slider/examples/Slider.md +6 -6
  19. package/docs/components/Tabs/examples/Tabs.md +1 -1
  20. package/docs/demos/Banner/examples/Banner.md +2 -2
  21. package/docs/demos/Dashboard/examples/Dashboard.md +0 -1
  22. package/docs/demos/Nav/examples/Nav.md +671 -718
  23. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -2
  24. package/docs/demos/Tabs/examples/Tabs.md +42 -539
  25. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  26. package/package.json +5 -5
  27. package/patternfly-no-reset.css +154 -8
  28. package/patternfly.css +154 -8
  29. package/patternfly.min.css +1 -1
  30. package/patternfly.min.css.map +1 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -6269,7 +6269,6 @@ wrapperTag: div
6269
6269
  </div>
6270
6270
  </div>
6271
6271
  </section>
6272
- <div class="pf-c-divider" role="separator"></div>
6273
6272
  <section class="pf-c-page__main-section pf-m-no-padding">
6274
6273
  <!-- Drawer -->
6275
6274
  <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
@@ -10763,7 +10762,6 @@ wrapperTag: div
10763
10762
  </div>
10764
10763
  </section>
10765
10764
  <div class="pf-c-divider" role="separator"></div>
10766
-
10767
10765
  <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
10768
10766
  <div class="pf-c-drawer__main">
10769
10767
  <!-- Content -->
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"
package/docs/demos/Wizard/examples/Wizard.md CHANGED
@@ -6631,7 +6631,6 @@ wrapperTag: div
6631
6631
  </div>
6632
6632
  </div>
6633
6633
  </section>
6634
-
6635
6634
  <section class="pf-c-page__main-wizard">
6636
6635
  <div class="pf-c-wizard">
6637
6636
  <button
@@ -7726,7 +7725,6 @@ wrapperTag: div
7726
7725
  </div>
7727
7726
  </div>
7728
7727
  </section>
7729
-
7730
7728
  <section class="pf-c-page__main-wizard">
7731
7729
  <div class="pf-c-wizard">
7732
7730
  <button
@@ -8803,7 +8801,6 @@ wrapperTag: div
8803
8801
  </div>
8804
8802
  </div>
8805
8803
  </section>
8806
-
8807
8804
  <section class="pf-c-page__main-wizard pf-m-light-200">
8808
8805
  <div class="pf-c-wizard">
8809
8806
  <button
@@ -9946,7 +9943,6 @@ wrapperTag: div
9946
9943
  </div>
9947
9944
  </div>
9948
9945
  </section>
9949
-
9950
9946
  <section class="pf-c-page__main-wizard pf-m-light-200">
9951
9947
  <div class="pf-c-wizard">
9952
9948
  <button