@patternfly/patternfly 4.224.2 → 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 (187) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +0 -17
  3. package/assets/icons/iconUnicodes.json +0 -1
  4. package/assets/pficon/pficon.scss +0 -6
  5. package/assets/pficon/pficon.woff +0 -0
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_chart-globals.scss +4 -0
  8. package/base/_common.scss +0 -22
  9. package/base/_fonts.scss +0 -188
  10. package/base/_globals.scss +0 -6
  11. package/base/_icons.scss +28 -0
  12. package/base/_variables.scss +0 -14
  13. package/base/patternfly-common.css +0 -10
  14. package/base/patternfly-fonts.css +0 -120
  15. package/base/patternfly-globals.css +0 -4
  16. package/base/patternfly-icons.css +1 -5
  17. package/base/patternfly-icons.scss +0 -28
  18. package/base/patternfly-pf-icons.css +1 -5
  19. package/base/patternfly-variables.css +6 -19
  20. package/components/AboutModalBox/about-modal-box.css +1 -28
  21. package/components/AboutModalBox/about-modal-box.scss +1 -27
  22. package/components/Accordion/accordion.css +64 -62
  23. package/components/Accordion/accordion.scss +62 -64
  24. package/components/Alert/alert.css +0 -4
  25. package/components/Alert/alert.scss +0 -7
  26. package/components/Banner/banner.css +1 -1
  27. package/components/Banner/banner.scss +1 -1
  28. package/components/Breadcrumb/breadcrumb.css +0 -6
  29. package/components/Breadcrumb/breadcrumb.scss +0 -9
  30. package/components/Button/button.css +0 -4
  31. package/components/Button/button.scss +0 -7
  32. package/components/CalendarMonth/calendar-month.css +1 -1
  33. package/components/CalendarMonth/calendar-month.scss +1 -1
  34. package/components/Card/card.css +9 -16
  35. package/components/Card/card.scss +11 -24
  36. package/components/Check/check.css +4 -2
  37. package/components/Check/check.scss +2 -2
  38. package/components/ChipGroup/chip-group.css +29 -17
  39. package/components/ChipGroup/chip-group.scss +39 -22
  40. package/components/Content/content.css +1 -17
  41. package/components/Content/content.scss +1 -23
  42. package/components/DataList/data-list.css +0 -15
  43. package/components/Divider/divider.css +0 -16
  44. package/components/Divider/divider.scss +0 -1
  45. package/components/Drawer/drawer.css +0 -15
  46. package/components/Drawer/drawer.scss +0 -6
  47. package/components/EmptyState/empty-state.css +46 -56
  48. package/components/EmptyState/empty-state.scss +58 -66
  49. package/components/ExpandableSection/expandable-section.css +0 -4
  50. package/components/ExpandableSection/expandable-section.scss +0 -7
  51. package/components/Form/form.css +0 -1
  52. package/components/Form/form.scss +0 -1
  53. package/components/InlineEdit/inline-edit.css +1 -12
  54. package/components/InlineEdit/inline-edit.scss +1 -10
  55. package/components/JumpLinks/jump-links.css +0 -43
  56. package/components/JumpLinks/jump-links.scss +0 -13
  57. package/components/Label/label.css +0 -3
  58. package/components/Label/label.scss +0 -4
  59. package/components/LabelGroup/label-group.css +26 -22
  60. package/components/LabelGroup/label-group.scss +31 -26
  61. package/components/Menu/menu.css +0 -16
  62. package/components/Menu/menu.scss +0 -1
  63. package/components/NotificationDrawer/notification-drawer.css +1 -0
  64. package/components/NotificationDrawer/notification-drawer.scss +1 -0
  65. package/components/Page/page.css +0 -15
  66. package/components/Pagination/pagination.css +108 -55
  67. package/components/Pagination/pagination.scss +6 -25
  68. package/components/Popover/popover.css +1 -6
  69. package/components/Popover/themes/dark/popover.scss +1 -7
  70. package/components/Progress/progress.css +0 -1
  71. package/components/Progress/progress.scss +0 -1
  72. package/components/Radio/radio.css +4 -2
  73. package/components/Radio/radio.scss +2 -2
  74. package/components/SimpleList/simple-list.css +1 -1
  75. package/components/SimpleList/simple-list.scss +1 -1
  76. package/components/SkipToContent/skip-to-content.css +1 -1
  77. package/components/SkipToContent/skip-to-content.scss +1 -1
  78. package/components/Switch/switch.css +0 -1
  79. package/components/Switch/switch.scss +0 -1
  80. package/components/Table/table-grid.css +0 -10
  81. package/components/Table/table-grid.scss +0 -2
  82. package/components/Table/table-tree-view.css +0 -16
  83. package/components/Table/table-tree-view.scss +0 -4
  84. package/components/Table/table.css +0 -16
  85. package/components/Table/table.scss +0 -1
  86. package/components/Tabs/tabs.css +5 -34
  87. package/components/Tabs/tabs.scss +7 -15
  88. package/components/Title/title.css +0 -5
  89. package/components/Title/title.scss +0 -8
  90. package/components/Toolbar/toolbar.css +30 -33
  91. package/components/Toolbar/toolbar.scss +37 -9
  92. package/components/Tooltip/themes/dark/tooltip.scss +3 -6
  93. package/components/Tooltip/tooltip.css +2 -5
  94. package/components/Wizard/wizard.css +0 -9
  95. package/components/Wizard/wizard.scss +0 -9
  96. package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
  97. package/docs/components/Accordion/examples/Accordion.md +67 -67
  98. package/docs/components/Card/examples/Card.md +61 -44
  99. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  100. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  101. package/docs/components/Content/examples/Content.md +0 -28
  102. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  103. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
  104. package/docs/components/Tabs/examples/Tabs.md +102 -103
  105. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  106. package/docs/components/Wizard/examples/Wizard.md +10 -13
  107. package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
  108. package/docs/demos/Alert/examples/Alert.md +18 -12
  109. package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
  110. package/docs/demos/Banner/examples/Banner.md +13 -8
  111. package/docs/demos/Card/examples/Card.md +145 -110
  112. package/docs/demos/CardView/examples/CardView.md +7 -7
  113. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
  114. package/docs/demos/Dashboard/examples/Dashboard.md +6 -4
  115. package/docs/demos/DataList/examples/DataList.md +26 -20
  116. package/docs/demos/DescriptionList/examples/DescriptionList.md +19 -12
  117. package/docs/demos/Drawer/examples/Drawer.md +30 -20
  118. package/docs/demos/HelperText/examples/HelperText.md +1 -0
  119. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
  120. package/docs/demos/Masthead/examples/Masthead.md +57 -42
  121. package/docs/demos/Modal/examples/Modal.md +36 -24
  122. package/docs/demos/Nav/examples/Nav.md +48 -32
  123. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
  124. package/docs/demos/Page/examples/Page.md +55 -37
  125. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +1 -0
  126. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +51 -34
  127. package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
  128. package/docs/demos/Table/examples/Table.md +102 -88
  129. package/docs/demos/Tabs/examples/Tabs.md +40 -28
  130. package/docs/demos/Toolbar/examples/Toolbar.md +1648 -66
  131. package/docs/demos/Wizard/examples/Wizard.md +232 -222
  132. package/icons/pf-icons.json +0 -1
  133. package/package.json +4 -3
  134. package/patternfly-base-no-reset.css +31 -154
  135. package/patternfly-base.css +31 -158
  136. package/patternfly-charts.css +1 -1
  137. package/patternfly-no-reset.css +367 -650
  138. package/patternfly.css +367 -654
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
  141. package/sass-utilities/mixins.scss +0 -6
  142. package/sass-utilities/placeholders.scss +0 -7
  143. package/sass-utilities/scss-variables.scss +6 -13
  144. package/assets/fonts/overpass-mono-webfont/example.html +0 -15
  145. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
  146. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
  147. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
  148. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
  149. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
  150. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
  151. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
  152. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
  153. package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
  154. package/assets/fonts/overpass-webfont/example.html +0 -18
  155. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
  156. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
  157. package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
  158. package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
  159. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
  160. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
  161. package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
  162. package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
  163. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
  164. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
  165. package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
  166. package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
  167. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
  168. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
  169. package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
  170. package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
  171. package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
  172. package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
  173. package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
  174. package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
  175. package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
  176. package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
  177. package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
  178. package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
  179. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
  180. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
  181. package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
  182. package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
  183. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
  184. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
  185. package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
  186. package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
  187. package/assets/fonts/overpass-webfont/overpass.css +0 -141
package/docs/demos/Table/examples/Table.md CHANGED
@@ -10,10 +10,12 @@ wrapperTag: div
10
10
 
11
11
  ```html isFullscreen
12
12
  <div class="pf-c-page" id="basic-demo">
13
- <a
14
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
15
- href="#main-content-basic-demo"
16
- >Skip to content</a>
13
+ <div class="pf-c-skip-to-content">
14
+ <a
15
+ class="pf-c-button pf-m-primary"
16
+ href="#main-content-basic-demo"
17
+ >Skip to content</a>
18
+ </div>
17
19
  <header class="pf-c-masthead" id="basic-demo-masthead">
18
20
  <span class="pf-c-masthead__toggle">
19
21
  <button
@@ -969,7 +971,6 @@ wrapperTag: div
969
971
  role="listbox"
970
972
  aria-labelledby="-select-name-label"
971
973
  hidden
972
- style="width: 175px"
973
974
  >
974
975
  <li role="presentation">
975
976
  <button
@@ -1009,7 +1010,7 @@ wrapperTag: div
1009
1010
  </li>
1010
1011
  </ul>
1011
1012
  </div>
1012
- <div class="pf-c-text-input-group">
1013
+ <div class="pf-c-text-input-group" style="width: auto">
1013
1014
  <div class="pf-c-text-input-group__main pf-m-icon">
1014
1015
  <span class="pf-c-text-input-group__text">
1015
1016
  <span class="pf-c-text-input-group__icon">
@@ -1712,10 +1713,12 @@ wrapperTag: div
1712
1713
 
1713
1714
  ```html isFullscreen
1714
1715
  <div class="pf-c-page" id="sortable-demo">
1715
- <a
1716
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
1717
- href="#main-content-sortable-demo"
1718
- >Skip to content</a>
1716
+ <div class="pf-c-skip-to-content">
1717
+ <a
1718
+ class="pf-c-button pf-m-primary"
1719
+ href="#main-content-sortable-demo"
1720
+ >Skip to content</a>
1721
+ </div>
1719
1722
  <header class="pf-c-masthead" id="sortable-demo-masthead">
1720
1723
  <span class="pf-c-masthead__toggle">
1721
1724
  <button
@@ -2669,7 +2672,6 @@ wrapperTag: div
2669
2672
  role="listbox"
2670
2673
  aria-labelledby="-select-name-label"
2671
2674
  hidden
2672
- style="width: 175px"
2673
2675
  >
2674
2676
  <li role="presentation">
2675
2677
  <button
@@ -2709,7 +2711,7 @@ wrapperTag: div
2709
2711
  </li>
2710
2712
  </ul>
2711
2713
  </div>
2712
- <div class="pf-c-text-input-group">
2714
+ <div class="pf-c-text-input-group" style="width: auto">
2713
2715
  <div class="pf-c-text-input-group__main pf-m-icon">
2714
2716
  <span class="pf-c-text-input-group__text">
2715
2717
  <span class="pf-c-text-input-group__icon">
@@ -3588,10 +3590,12 @@ wrapperTag: div
3588
3590
 
3589
3591
  ```html isFullscreen
3590
3592
  <div class="pf-c-page" id="expandable-demo">
3591
- <a
3592
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
3593
- href="#main-content-expandable-demo"
3594
- >Skip to content</a>
3593
+ <div class="pf-c-skip-to-content">
3594
+ <a
3595
+ class="pf-c-button pf-m-primary"
3596
+ href="#main-content-expandable-demo"
3597
+ >Skip to content</a>
3598
+ </div>
3595
3599
  <header class="pf-c-masthead" id="expandable-demo-masthead">
3596
3600
  <span class="pf-c-masthead__toggle">
3597
3601
  <button
@@ -4549,7 +4553,6 @@ wrapperTag: div
4549
4553
  role="listbox"
4550
4554
  aria-labelledby="-select-name-label"
4551
4555
  hidden
4552
- style="width: 175px"
4553
4556
  >
4554
4557
  <li role="presentation">
4555
4558
  <button
@@ -4589,7 +4592,7 @@ wrapperTag: div
4589
4592
  </li>
4590
4593
  </ul>
4591
4594
  </div>
4592
- <div class="pf-c-text-input-group">
4595
+ <div class="pf-c-text-input-group" style="width: auto">
4593
4596
  <div class="pf-c-text-input-group__main pf-m-icon">
4594
4597
  <span class="pf-c-text-input-group__text">
4595
4598
  <span class="pf-c-text-input-group__icon">
@@ -5666,10 +5669,12 @@ wrapperTag: div
5666
5669
 
5667
5670
  ```html isFullscreen
5668
5671
  <div class="pf-c-page" id="compact-demo">
5669
- <a
5670
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
5671
- href="#main-content-compact-demo"
5672
- >Skip to content</a>
5672
+ <div class="pf-c-skip-to-content">
5673
+ <a
5674
+ class="pf-c-button pf-m-primary"
5675
+ href="#main-content-compact-demo"
5676
+ >Skip to content</a>
5677
+ </div>
5673
5678
  <header class="pf-c-masthead" id="compact-demo-masthead">
5674
5679
  <span class="pf-c-masthead__toggle">
5675
5680
  <button
@@ -6623,7 +6628,6 @@ wrapperTag: div
6623
6628
  role="listbox"
6624
6629
  aria-labelledby="-select-name-label"
6625
6630
  hidden
6626
- style="width: 175px"
6627
6631
  >
6628
6632
  <li role="presentation">
6629
6633
  <button
@@ -6663,7 +6667,7 @@ wrapperTag: div
6663
6667
  </li>
6664
6668
  </ul>
6665
6669
  </div>
6666
- <div class="pf-c-text-input-group">
6670
+ <div class="pf-c-text-input-group" style="width: auto">
6667
6671
  <div class="pf-c-text-input-group__main pf-m-icon">
6668
6672
  <span class="pf-c-text-input-group__text">
6669
6673
  <span class="pf-c-text-input-group__icon">
@@ -7400,10 +7404,12 @@ wrapperTag: div
7400
7404
 
7401
7405
  ```html isFullscreen
7402
7406
  <div class="pf-c-page" id="compound-expansion-demo">
7403
- <a
7404
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
7405
- href="#main-content-compound-expansion-demo"
7406
- >Skip to content</a>
7407
+ <div class="pf-c-skip-to-content">
7408
+ <a
7409
+ class="pf-c-button pf-m-primary"
7410
+ href="#main-content-compound-expansion-demo"
7411
+ >Skip to content</a>
7412
+ </div>
7407
7413
  <header class="pf-c-masthead" id="compound-expansion-demo-masthead">
7408
7414
  <span class="pf-c-masthead__toggle">
7409
7415
  <button
@@ -8365,7 +8371,6 @@ wrapperTag: div
8365
8371
  role="listbox"
8366
8372
  aria-labelledby="-select-name-label"
8367
8373
  hidden
8368
- style="width: 175px"
8369
8374
  >
8370
8375
  <li role="presentation">
8371
8376
  <button
@@ -8405,7 +8410,7 @@ wrapperTag: div
8405
8410
  </li>
8406
8411
  </ul>
8407
8412
  </div>
8408
- <div class="pf-c-text-input-group">
8413
+ <div class="pf-c-text-input-group" style="width: auto">
8409
8414
  <div class="pf-c-text-input-group__main pf-m-icon">
8410
8415
  <span class="pf-c-text-input-group__text">
8411
8416
  <span class="pf-c-text-input-group__icon">
@@ -12348,10 +12353,12 @@ wrapperTag: div
12348
12353
 
12349
12354
  ```html isFullscreen
12350
12355
  <div class="pf-c-page" id="loading-state-demo">
12351
- <a
12352
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
12353
- href="#main-content-loading-state-demo"
12354
- >Skip to content</a>
12356
+ <div class="pf-c-skip-to-content">
12357
+ <a
12358
+ class="pf-c-button pf-m-primary"
12359
+ href="#main-content-loading-state-demo"
12360
+ >Skip to content</a>
12361
+ </div>
12355
12362
  <header class="pf-c-masthead" id="loading-state-demo-masthead">
12356
12363
  <span class="pf-c-masthead__toggle">
12357
12364
  <button
@@ -13276,10 +13283,12 @@ wrapperTag: div
13276
13283
 
13277
13284
  ```html isFullscreen
13278
13285
  <div class="pf-c-page" id="empty-state-demo">
13279
- <a
13280
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
13281
- href="#main-content-empty-state-demo"
13282
- >Skip to content</a>
13286
+ <div class="pf-c-skip-to-content">
13287
+ <a
13288
+ class="pf-c-button pf-m-primary"
13289
+ href="#main-content-empty-state-demo"
13290
+ >Skip to content</a>
13291
+ </div>
13283
13292
  <header class="pf-c-masthead" id="empty-state-demo-masthead">
13284
13293
  <span class="pf-c-masthead__toggle">
13285
13294
  <button
@@ -14175,21 +14184,18 @@ wrapperTag: div
14175
14184
  <td role="cell" colspan="8">
14176
14185
  <div class="pf-c-empty-state pf-m-sm">
14177
14186
  <div class="pf-c-empty-state__content">
14178
- <i
14179
- class="fas fa- fa-search pf-c-empty-state__icon"
14180
- aria-hidden="true"
14181
- ></i>
14187
+ <div class="pf-c-empty-state__icon">
14188
+ <i class="fas fa- fa-search" aria-hidden="true"></i>
14189
+ </div>
14182
14190
 
14183
14191
  <h2 class="pf-c-title pf-m-lg">No results found</h2>
14184
14192
  <div
14185
14193
  class="pf-c-empty-state__body"
14186
14194
  >No results match the filter criteria. Remove all filters or clear all filters to show results.</div>
14187
- <div class="pf-c-empty-state__primary">
14188
- <button
14189
- class="pf-c-button pf-m-link"
14190
- type="button"
14191
- >Clear all filters</button>
14192
- </div>
14195
+ <button
14196
+ class="pf-c-button pf-m-link"
14197
+ type="button"
14198
+ >Clear all filters</button>
14193
14199
  </div>
14194
14200
  </div>
14195
14201
  </td>
@@ -14207,10 +14213,12 @@ wrapperTag: div
14207
14213
 
14208
14214
  ```html isFullscreen
14209
14215
  <div class="pf-c-page" id="static-bottom-pagination-demo">
14210
- <a
14211
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
14212
- href="#main-content-static-bottom-pagination-demo"
14213
- >Skip to content</a>
14216
+ <div class="pf-c-skip-to-content">
14217
+ <a
14218
+ class="pf-c-button pf-m-primary"
14219
+ href="#main-content-static-bottom-pagination-demo"
14220
+ >Skip to content</a>
14221
+ </div>
14214
14222
  <header class="pf-c-masthead" id="static-bottom-pagination-demo-masthead">
14215
14223
  <span class="pf-c-masthead__toggle">
14216
14224
  <button
@@ -15172,7 +15180,6 @@ wrapperTag: div
15172
15180
  role="listbox"
15173
15181
  aria-labelledby="-select-name-label"
15174
15182
  hidden
15175
- style="width: 175px"
15176
15183
  >
15177
15184
  <li role="presentation">
15178
15185
  <button
@@ -15212,7 +15219,7 @@ wrapperTag: div
15212
15219
  </li>
15213
15220
  </ul>
15214
15221
  </div>
15215
- <div class="pf-c-text-input-group">
15222
+ <div class="pf-c-text-input-group" style="width: auto">
15216
15223
  <div class="pf-c-text-input-group__main pf-m-icon">
15217
15224
  <span class="pf-c-text-input-group__text">
15218
15225
  <span class="pf-c-text-input-group__icon">
@@ -16081,10 +16088,12 @@ wrapperTag: div
16081
16088
 
16082
16089
  ```html isFullscreen
16083
16090
  <div class="pf-c-page" id="column-management-demo">
16084
- <a
16085
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
16086
- href="#main-content-column-management-demo"
16087
- >Skip to content</a>
16091
+ <div class="pf-c-skip-to-content">
16092
+ <a
16093
+ class="pf-c-button pf-m-primary"
16094
+ href="#main-content-column-management-demo"
16095
+ >Skip to content</a>
16096
+ </div>
16088
16097
  <header class="pf-c-masthead" id="column-management-demo-masthead">
16089
16098
  <span class="pf-c-masthead__toggle">
16090
16099
  <button
@@ -17046,7 +17055,6 @@ wrapperTag: div
17046
17055
  role="listbox"
17047
17056
  aria-labelledby="-select-name-label"
17048
17057
  hidden
17049
- style="width: 175px"
17050
17058
  >
17051
17059
  <li role="presentation">
17052
17060
  <button
@@ -17086,7 +17094,7 @@ wrapperTag: div
17086
17094
  </li>
17087
17095
  </ul>
17088
17096
  </div>
17089
- <div class="pf-c-text-input-group">
17097
+ <div class="pf-c-text-input-group" style="width: auto">
17090
17098
  <div class="pf-c-text-input-group__main pf-m-icon">
17091
17099
  <span class="pf-c-text-input-group__text">
17092
17100
  <span class="pf-c-text-input-group__icon">
@@ -18038,10 +18046,12 @@ wrapperTag: div
18038
18046
 
18039
18047
  ```html isFullscreen
18040
18048
  <div class="pf-c-page" id="sticky-header-demo">
18041
- <a
18042
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
18043
- href="#main-content-sticky-header-demo"
18044
- >Skip to content</a>
18049
+ <div class="pf-c-skip-to-content">
18050
+ <a
18051
+ class="pf-c-button pf-m-primary"
18052
+ href="#main-content-sticky-header-demo"
18053
+ >Skip to content</a>
18054
+ </div>
18045
18055
  <header class="pf-c-masthead" id="sticky-header-demo-masthead">
18046
18056
  <span class="pf-c-masthead__toggle">
18047
18057
  <button
@@ -19003,7 +19013,6 @@ wrapperTag: div
19003
19013
  role="listbox"
19004
19014
  aria-labelledby="-select-name-label"
19005
19015
  hidden
19006
- style="width: 175px"
19007
19016
  >
19008
19017
  <li role="presentation">
19009
19018
  <button
@@ -19043,7 +19052,7 @@ wrapperTag: div
19043
19052
  </li>
19044
19053
  </ul>
19045
19054
  </div>
19046
- <div class="pf-c-text-input-group">
19055
+ <div class="pf-c-text-input-group" style="width: auto">
19047
19056
  <div class="pf-c-text-input-group__main pf-m-icon">
19048
19057
  <span class="pf-c-text-input-group__text">
19049
19058
  <span class="pf-c-text-input-group__icon">
@@ -19912,10 +19921,12 @@ wrapperTag: div
19912
19921
 
19913
19922
  ```html isFullscreen
19914
19923
  <div class="pf-c-page" id="sticky-first-column-demo">
19915
- <a
19916
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
19917
- href="#main-content-sticky-first-column-demo"
19918
- >Skip to content</a>
19924
+ <div class="pf-c-skip-to-content">
19925
+ <a
19926
+ class="pf-c-button pf-m-primary"
19927
+ href="#main-content-sticky-first-column-demo"
19928
+ >Skip to content</a>
19929
+ </div>
19919
19930
  <header class="pf-c-masthead" id="sticky-first-column-demo-masthead">
19920
19931
  <span class="pf-c-masthead__toggle">
19921
19932
  <button
@@ -20880,7 +20891,6 @@ wrapperTag: div
20880
20891
  role="listbox"
20881
20892
  aria-labelledby="-select-name-label"
20882
20893
  hidden
20883
- style="width: 175px"
20884
20894
  >
20885
20895
  <li role="presentation">
20886
20896
  <button
@@ -20920,7 +20930,7 @@ wrapperTag: div
20920
20930
  </li>
20921
20931
  </ul>
20922
20932
  </div>
20923
- <div class="pf-c-text-input-group">
20933
+ <div class="pf-c-text-input-group" style="width: auto">
20924
20934
  <div class="pf-c-text-input-group__main pf-m-icon">
20925
20935
  <span class="pf-c-text-input-group__text">
20926
20936
  <span class="pf-c-text-input-group__icon">
@@ -21710,10 +21720,12 @@ wrapperTag: div
21710
21720
 
21711
21721
  ```html isFullscreen
21712
21722
  <div class="pf-c-page" id="sticky-multiple-columns-demo">
21713
- <a
21714
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
21715
- href="#main-content-sticky-multiple-columns-demo"
21716
- >Skip to content</a>
21723
+ <div class="pf-c-skip-to-content">
21724
+ <a
21725
+ class="pf-c-button pf-m-primary"
21726
+ href="#main-content-sticky-multiple-columns-demo"
21727
+ >Skip to content</a>
21728
+ </div>
21717
21729
  <header class="pf-c-masthead" id="sticky-multiple-columns-demo-masthead">
21718
21730
  <span class="pf-c-masthead__toggle">
21719
21731
  <button
@@ -22678,7 +22690,6 @@ wrapperTag: div
22678
22690
  role="listbox"
22679
22691
  aria-labelledby="-select-name-label"
22680
22692
  hidden
22681
- style="width: 175px"
22682
22693
  >
22683
22694
  <li role="presentation">
22684
22695
  <button
@@ -22718,7 +22729,7 @@ wrapperTag: div
22718
22729
  </li>
22719
22730
  </ul>
22720
22731
  </div>
22721
- <div class="pf-c-text-input-group">
22732
+ <div class="pf-c-text-input-group" style="width: auto">
22722
22733
  <div class="pf-c-text-input-group__main pf-m-icon">
22723
22734
  <span class="pf-c-text-input-group__text">
22724
22735
  <span class="pf-c-text-input-group__icon">
@@ -23527,10 +23538,12 @@ wrapperTag: div
23527
23538
 
23528
23539
  ```html isFullscreen
23529
23540
  <div class="pf-c-page" id="sticky-header-and-multiple columns-demo">
23530
- <a
23531
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
23532
- href="#main-content-sticky-header-and-multiple columns-demo"
23533
- >Skip to content</a>
23541
+ <div class="pf-c-skip-to-content">
23542
+ <a
23543
+ class="pf-c-button pf-m-primary"
23544
+ href="#main-content-sticky-header-and-multiple columns-demo"
23545
+ >Skip to content</a>
23546
+ </div>
23534
23547
  <header
23535
23548
  class="pf-c-masthead"
23536
23549
  id="sticky-header-and-multiple columns-demo-masthead"
@@ -24497,7 +24510,6 @@ wrapperTag: div
24497
24510
  role="listbox"
24498
24511
  aria-labelledby="-select-name-label"
24499
24512
  hidden
24500
- style="width: 175px"
24501
24513
  >
24502
24514
  <li role="presentation">
24503
24515
  <button
@@ -24537,7 +24549,7 @@ wrapperTag: div
24537
24549
  </li>
24538
24550
  </ul>
24539
24551
  </div>
24540
- <div class="pf-c-text-input-group">
24552
+ <div class="pf-c-text-input-group" style="width: auto">
24541
24553
  <div class="pf-c-text-input-group__main pf-m-icon">
24542
24554
  <span class="pf-c-text-input-group__text">
24543
24555
  <span class="pf-c-text-input-group__icon">
@@ -25347,10 +25359,12 @@ By default, table cell alignment is set to baseline. This retains vertical align
25347
25359
 
25348
25360
  ```html isFullscreen
25349
25361
  <div class="pf-c-page" id="image-alignment-demo">
25350
- <a
25351
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
25352
- href="#main-content-image-alignment-demo"
25353
- >Skip to content</a>
25362
+ <div class="pf-c-skip-to-content">
25363
+ <a
25364
+ class="pf-c-button pf-m-primary"
25365
+ href="#main-content-image-alignment-demo"
25366
+ >Skip to content</a>
25367
+ </div>
25354
25368
  <header class="pf-c-masthead" id="image-alignment-demo-masthead">
25355
25369
  <span class="pf-c-masthead__toggle">
25356
25370
  <button
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -7,10 +7,12 @@ section: components
7
7
 
8
8
  ```html isFullscreen
9
9
  <div class="pf-c-page" id="tabs-tables-and-tabs-example">
10
- <a
11
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
- href="#main-content-tabs-tables-and-tabs-example"
13
- >Skip to content</a>
10
+ <div class="pf-c-skip-to-content">
11
+ <a
12
+ class="pf-c-button pf-m-primary"
13
+ href="#main-content-tabs-tables-and-tabs-example"
14
+ >Skip to content</a>
15
+ </div>
14
16
  <header class="pf-c-masthead" id="tabs-tables-and-tabs-example-masthead">
15
17
  <span class="pf-c-masthead__toggle">
16
18
  <button
@@ -1163,10 +1165,12 @@ section: components
1163
1165
 
1164
1166
  ```html isFullscreen
1165
1167
  <div class="pf-c-page" id="tabs-tables-and-tabs-example">
1166
- <a
1167
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
1168
- href="#main-content-tabs-tables-and-tabs-example"
1169
- >Skip to content</a>
1168
+ <div class="pf-c-skip-to-content">
1169
+ <a
1170
+ class="pf-c-button pf-m-primary"
1171
+ href="#main-content-tabs-tables-and-tabs-example"
1172
+ >Skip to content</a>
1173
+ </div>
1170
1174
  <header class="pf-c-masthead" id="tabs-tables-and-tabs-example-masthead">
1171
1175
  <span class="pf-c-masthead__toggle">
1172
1176
  <button
@@ -2105,7 +2109,7 @@ section: components
2105
2109
  >
2106
2110
  <div class="pf-c-page__main-body">
2107
2111
  <div
2108
- class="pf-c-tabs pf-m-secondary pf-m-page-insets pf-m-border-bottom"
2112
+ class="pf-c-tabs pf-m-secondary pf-m-page-insets"
2109
2113
  id="tabs-tables-and-tabs-example-tabs-secondary"
2110
2114
  >
2111
2115
  <ul class="pf-c-tabs__list">
@@ -2321,10 +2325,12 @@ section: components
2321
2325
 
2322
2326
  ```html isFullscreen
2323
2327
  <div class="pf-c-page" id="nested-tabs-example">
2324
- <a
2325
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
2326
- href="#main-content-nested-tabs-example"
2327
- >Skip to content</a>
2328
+ <div class="pf-c-skip-to-content">
2329
+ <a
2330
+ class="pf-c-button pf-m-primary"
2331
+ href="#main-content-nested-tabs-example"
2332
+ >Skip to content</a>
2333
+ </div>
2328
2334
  <header class="pf-c-masthead" id="nested-tabs-example-masthead">
2329
2335
  <span class="pf-c-masthead__toggle">
2330
2336
  <button
@@ -3238,7 +3244,7 @@ section: components
3238
3244
  <div class="pf-l-flex pf-m-column">
3239
3245
  <div class="pf-l-flex__item">
3240
3246
  <div
3241
- class="pf-c-tabs pf-m-secondary pf-m-border-bottom"
3247
+ class="pf-c-tabs pf-m-secondary"
3242
3248
  id="nested-tabs-example-tabs-tabs-subtabs"
3243
3249
  >
3244
3250
  <ul class="pf-c-tabs__list">
@@ -3386,10 +3392,12 @@ section: components
3386
3392
 
3387
3393
  ```html isFullscreen
3388
3394
  <div class="pf-c-page" id="table-tabs-example">
3389
- <a
3390
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
3391
- href="#main-content-table-tabs-example"
3392
- >Skip to content</a>
3395
+ <div class="pf-c-skip-to-content">
3396
+ <a
3397
+ class="pf-c-button pf-m-primary"
3398
+ href="#main-content-table-tabs-example"
3399
+ >Skip to content</a>
3400
+ </div>
3393
3401
  <header class="pf-c-masthead" id="table-tabs-example-masthead">
3394
3402
  <span class="pf-c-masthead__toggle">
3395
3403
  <button
@@ -5063,7 +5071,7 @@ section: components
5063
5071
  <div class="pf-l-grid pf-m-gutter">
5064
5072
  <div class="pf-l-grid__item">
5065
5073
  <div
5066
- class="pf-c-tabs pf-m-inset-none pf-m-secondary"
5074
+ class="pf-c-tabs pf-m-secondary pf-m-inset-none"
5067
5075
  id="modal-tabs-example-tabs"
5068
5076
  >
5069
5077
  <ul class="pf-c-tabs__list">
@@ -5132,10 +5140,12 @@ section: components
5132
5140
  </div>
5133
5141
 
5134
5142
  <div class="pf-c-page" id="modal-tabs-example">
5135
- <a
5136
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
5137
- href="#main-content-modal-tabs-example"
5138
- >Skip to content</a>
5143
+ <div class="pf-c-skip-to-content">
5144
+ <a
5145
+ class="pf-c-button pf-m-primary"
5146
+ href="#main-content-modal-tabs-example"
5147
+ >Skip to content</a>
5148
+ </div>
5139
5149
  <header class="pf-c-masthead" id="modal-tabs-example-masthead">
5140
5150
  <span class="pf-c-masthead__toggle">
5141
5151
  <button
@@ -6038,10 +6048,12 @@ section: components
6038
6048
 
6039
6049
  ```html isFullscreen
6040
6050
  <div class="pf-c-page" id="gray-tabs-example">
6041
- <a
6042
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
6043
- href="#main-content-gray-tabs-example"
6044
- >Skip to content</a>
6051
+ <div class="pf-c-skip-to-content">
6052
+ <a
6053
+ class="pf-c-button pf-m-primary"
6054
+ href="#main-content-gray-tabs-example"
6055
+ >Skip to content</a>
6056
+ </div>
6045
6057
  <header class="pf-c-masthead" id="gray-tabs-example-masthead">
6046
6058
  <span class="pf-c-masthead__toggle">
6047
6059
  <button
@@ -6983,7 +6995,7 @@ section: components
6983
6995
  </div>
6984
6996
  <div class="pf-l-grid__item">
6985
6997
  <div
6986
- class="pf-c-tabs pf-m-secondary pf-m-border-bottom pf-m-inset-none"
6998
+ class="pf-c-tabs pf-m-secondary pf-m-inset-none"
6987
6999
  id="gray-tabs-example-tabs-subtabs"
6988
7000
  >
6989
7001
  <ul class="pf-c-tabs__list">