@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/Card/examples/Card.md CHANGED
@@ -68,57 +68,59 @@ wrapperTag: div
68
68
  </ul>
69
69
  </div>
70
70
  </div>
71
- <div class="pf-l-level pf-m-gutter">
72
- <div
73
- class="pf-c-card__title"
74
- id="card-demo-horizontal-grid-collapsed-example-title"
75
- >Getting started</div>
76
- <div class="pf-c-label-group">
77
- <div class="pf-c-label-group__main">
78
- <ul
79
- class="pf-c-label-group__list"
80
- role="list"
81
- aria-label="Group of labels"
82
- >
83
- <li class="pf-c-label-group__list-item">
84
- <span class="pf-c-label pf-m-blue pf-m-compact">
85
- <span class="pf-c-label__content">
86
- <span class="pf-c-label__icon">
87
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
71
+ <div class="pf-c-card__header-main">
72
+ <div class="pf-l-split pf-m-gutter pf-m-wrap">
73
+ <div
74
+ class="pf-c-card__title"
75
+ id="card-demo-horizontal-grid-collapsed-example-title"
76
+ >Getting started</div>
77
+ <div class="pf-c-label-group">
78
+ <div class="pf-c-label-group__main">
79
+ <ul
80
+ class="pf-c-label-group__list"
81
+ role="list"
82
+ aria-label="Group of labels"
83
+ >
84
+ <li class="pf-c-label-group__list-item">
85
+ <span class="pf-c-label pf-m-blue pf-m-compact">
86
+ <span class="pf-c-label__content">
87
+ <span class="pf-c-label__icon">
88
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
89
+ </span>
90
+ Set up your cluster
88
91
  </span>
89
- Set up your cluster
90
92
  </span>
91
- </span>
92
- </li>
93
- <li class="pf-c-label-group__list-item">
94
- <span class="pf-c-label pf-m-purple pf-m-compact">
95
- <span class="pf-c-label__content">
96
- <span class="pf-c-label__icon">
97
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
93
+ </li>
94
+ <li class="pf-c-label-group__list-item">
95
+ <span class="pf-c-label pf-m-purple pf-m-compact">
96
+ <span class="pf-c-label__content">
97
+ <span class="pf-c-label__icon">
98
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
99
+ </span>
100
+ Guided tours
98
101
  </span>
99
- Guided tours
100
102
  </span>
101
- </span>
102
- </li>
103
- <li class="pf-c-label-group__list-item">
104
- <span class="pf-c-label pf-m-green pf-m-compact">
105
- <span class="pf-c-label__content">
106
- <span class="pf-c-label__icon">
107
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
103
+ </li>
104
+ <li class="pf-c-label-group__list-item">
105
+ <span class="pf-c-label pf-m-green pf-m-compact">
106
+ <span class="pf-c-label__content">
107
+ <span class="pf-c-label__icon">
108
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
109
+ </span>
110
+ Quick starts
108
111
  </span>
109
- Quick starts
110
112
  </span>
111
- </span>
112
- </li>
113
- <li class="pf-c-label-group__list-item">
114
- <button
115
- class="pf-c-label pf-m-overflow pf-m-compact"
116
- type="button"
117
- >
118
- <span class="pf-c-label__content">1 more</span>
119
- </button>
120
- </li>
121
- </ul>
113
+ </li>
114
+ <li class="pf-c-label-group__list-item">
115
+ <button
116
+ class="pf-c-label pf-m-overflow pf-m-compact"
117
+ type="button"
118
+ >
119
+ <span class="pf-c-label__content">1 more</span>
120
+ </button>
121
+ </li>
122
+ </ul>
123
+ </div>
122
124
  </div>
123
125
  </div>
124
126
  </div>
@@ -192,10 +194,12 @@ wrapperTag: div
192
194
  </ul>
193
195
  </div>
194
196
  </div>
195
- <div
196
- class="pf-c-card__title"
197
- id="card-demo-horizontal-grid-expanded-example-title"
198
- >Getting started</div>
197
+ <div class="pf-c-card__header-main">
198
+ <div
199
+ class="pf-c-card__title"
200
+ id="card-demo-horizontal-grid-expanded-example-title"
201
+ >Getting started</div>
202
+ </div>
199
203
  </div>
200
204
  <div class="pf-c-card__expandable-content">
201
205
  <div class="pf-c-card__body">
@@ -713,7 +717,9 @@ wrapperTag: div
713
717
  ```html
714
718
  <div class="pf-c-card">
715
719
  <div class="pf-c-card__header">
716
- <h2 class="pf-c-title pf-m-lg">Status</h2>
720
+ <div class="pf-c-card__header-main">
721
+ <h2 class="pf-c-title pf-m-lg">Status</h2>
722
+ </div>
717
723
  </div>
718
724
  <div class="pf-c-card__body">
719
725
  <div class="pf-c-tabs pf-m-fill" id="status-tabs">
@@ -1819,12 +1825,14 @@ wrapperTag: div
1819
1825
  >
1820
1826
  <div class="pf-c-card" id="utilization-card-3-example">
1821
1827
  <div class="pf-c-card__header pf-u-align-items-flex-start">
1822
- <div
1823
- class="pf-c-card__title"
1824
- id="utilization-card-3-example-title1"
1825
- style="padding-top: 3px;"
1826
- >
1827
- <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1828
+ <div class="pf-c-card__header-main">
1829
+ <div
1830
+ class="pf-c-card__title"
1831
+ id="utilization-card-3-example-title1"
1832
+ style="padding-top: 3px;"
1833
+ >
1834
+ <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1835
+ </div>
1828
1836
  </div>
1829
1837
  <div class="pf-c-card__actions pf-m-no-offset">
1830
1838
  <div class="pf-c-select">
@@ -1938,8 +1946,13 @@ wrapperTag: div
1938
1946
  ```html
1939
1947
  <div class="pf-c-card" id="nested-cards-toggle-right-example">
1940
1948
  <div class="pf-c-card__header">
1941
- <div class="pf-c-card__title" id="nested-cards-toggle-right-example-title">
1942
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1949
+ <div class="pf-c-card__header-main">
1950
+ <div
1951
+ class="pf-c-card__title"
1952
+ id="nested-cards-toggle-right-example-title"
1953
+ >
1954
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1955
+ </div>
1943
1956
  </div>
1944
1957
  </div>
1945
1958
  <div
@@ -1960,11 +1973,13 @@ wrapperTag: div
1960
1973
  </span>
1961
1974
  </button>
1962
1975
  </div>
1963
- <div
1964
- class="pf-c-card__title"
1965
- id="nested-cards-toggle-right-example-group-1-title"
1966
- >
1967
- <span class="pf-u-font-weight-light">CPU 1</span>
1976
+ <div class="pf-c-card__header-main">
1977
+ <div
1978
+ class="pf-c-card__title"
1979
+ id="nested-cards-toggle-right-example-group-1-title"
1980
+ >
1981
+ <span class="pf-u-font-weight-light">CPU 1</span>
1982
+ </div>
1968
1983
  </div>
1969
1984
  </div>
1970
1985
  <div class="pf-c-card__expandable-content">
@@ -2069,11 +2084,13 @@ wrapperTag: div
2069
2084
  </span>
2070
2085
  </button>
2071
2086
  </div>
2072
- <div
2073
- class="pf-c-card__title"
2074
- id="nested-cards-toggle-right-example-group-2-title"
2075
- >
2076
- <span class="pf-u-font-weight-light">CPU 2</span>
2087
+ <div class="pf-c-card__header-main">
2088
+ <div
2089
+ class="pf-c-card__title"
2090
+ id="nested-cards-toggle-right-example-group-2-title"
2091
+ >
2092
+ <span class="pf-u-font-weight-light">CPU 2</span>
2093
+ </div>
2077
2094
  </div>
2078
2095
  </div>
2079
2096
  </div>
@@ -2095,11 +2112,13 @@ wrapperTag: div
2095
2112
  </span>
2096
2113
  </button>
2097
2114
  </div>
2098
- <div
2099
- class="pf-c-card__title"
2100
- id="nested-cards-toggle-right-example-group-3-title"
2101
- >
2102
- <span class="pf-u-font-weight-light">CPU 3</span>
2115
+ <div class="pf-c-card__header-main">
2116
+ <div
2117
+ class="pf-c-card__title"
2118
+ id="nested-cards-toggle-right-example-group-3-title"
2119
+ >
2120
+ <span class="pf-u-font-weight-light">CPU 3</span>
2121
+ </div>
2103
2122
  </div>
2104
2123
  </div>
2105
2124
  </div>
@@ -2112,8 +2131,10 @@ wrapperTag: div
2112
2131
  ```html
2113
2132
  <div class="pf-c-card" id="nested-cards-example">
2114
2133
  <div class="pf-c-card__header">
2115
- <div class="pf-c-card__title" id="nested-cards-example-title">
2116
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2134
+ <div class="pf-c-card__header-main">
2135
+ <div class="pf-c-card__title" id="nested-cards-example-title">
2136
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2137
+ </div>
2117
2138
  </div>
2118
2139
  </div>
2119
2140
  <div
@@ -2134,8 +2155,10 @@ wrapperTag: div
2134
2155
  </span>
2135
2156
  </button>
2136
2157
  </div>
2137
- <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2138
- <span class="pf-u-font-weight-light">CPU 1</span>
2158
+ <div class="pf-c-card__header-main">
2159
+ <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2160
+ <span class="pf-u-font-weight-light">CPU 1</span>
2161
+ </div>
2139
2162
  </div>
2140
2163
  </div>
2141
2164
  <div class="pf-c-card__expandable-content">
@@ -2237,8 +2260,10 @@ wrapperTag: div
2237
2260
  </span>
2238
2261
  </button>
2239
2262
  </div>
2240
- <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2241
- <span class="pf-u-font-weight-light">CPU 2</span>
2263
+ <div class="pf-c-card__header-main">
2264
+ <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2265
+ <span class="pf-u-font-weight-light">CPU 2</span>
2266
+ </div>
2242
2267
  </div>
2243
2268
  </div>
2244
2269
  </div>
@@ -2257,8 +2282,10 @@ wrapperTag: div
2257
2282
  </span>
2258
2283
  </button>
2259
2284
  </div>
2260
- <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2261
- <span class="pf-u-font-weight-light">CPU 3</span>
2285
+ <div class="pf-c-card__header-main">
2286
+ <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2287
+ <span class="pf-u-font-weight-light">CPU 3</span>
2288
+ </div>
2262
2289
  </div>
2263
2290
  </div>
2264
2291
  </div>
@@ -2271,8 +2298,10 @@ wrapperTag: div
2271
2298
  ```html
2272
2299
  <div class="pf-c-card" id="with-accordion-example">
2273
2300
  <div class="pf-c-card__header">
2274
- <div class="pf-c-card__title" id="with-accordion-example-title">
2275
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2301
+ <div class="pf-c-card__header-main">
2302
+ <div class="pf-c-card__title" id="with-accordion-example-title">
2303
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2304
+ </div>
2276
2305
  </div>
2277
2306
  </div>
2278
2307
  <div class="pf-c-card__body">
@@ -2291,8 +2320,8 @@ wrapperTag: div
2291
2320
  </span>
2292
2321
  </button>
2293
2322
  </h3>
2294
- <div class="pf-c-accordion__expanded-content pf-m-expanded">
2295
- <div class="pf-c-accordion__expanded-content-body">
2323
+ <div class="pf-c-accordion__expandable-content pf-m-expanded">
2324
+ <div class="pf-c-accordion__expandable-content-body">
2296
2325
  <div class="pf-l-grid pf-m-gutter">
2297
2326
  <div class="pf-l-grid pf-m-gutter">
2298
2327
  <div class="pf-l-grid__item pf-m-4-col-on-md">
@@ -2389,7 +2418,7 @@ wrapperTag: div
2389
2418
  </span>
2390
2419
  </button>
2391
2420
  </h3>
2392
- <div class="pf-c-accordion__expanded-content" hidden>
2421
+ <div class="pf-c-accordion__expandable-content" hidden>
2393
2422
  <div class="pf-l-grid pf-m-gutter">
2394
2423
  <div class="pf-l-grid pf-m-gutter">
2395
2424
  <div class="pf-l-grid__item pf-m-4-col-on-md">
@@ -2485,7 +2514,7 @@ wrapperTag: div
2485
2514
  </span>
2486
2515
  </button>
2487
2516
  </h3>
2488
- <div class="pf-c-accordion__expanded-content" hidden>
2517
+ <div class="pf-c-accordion__expandable-content" hidden>
2489
2518
  <div class="pf-l-grid pf-m-gutter">
2490
2519
  <div class="pf-l-grid pf-m-gutter">
2491
2520
  <div class="pf-l-grid__item pf-m-4-col-on-md">
@@ -2585,7 +2614,7 @@ wrapperTag: div
2585
2614
  >
2586
2615
  <div class="pf-c-card" id="trend-card-1-example">
2587
2616
  <div class="pf-c-card__header">
2588
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2617
+ <div class="pf-c-card__header-main">
2589
2618
  <div class="pf-c-card__title" id="trend-card-1-example-title">
2590
2619
  <h1 class="pf-c-title pf-m-2xl">1,050,765 IOPS</h1>
2591
2620
  </div>
@@ -2670,18 +2699,20 @@ wrapperTag: div
2670
2699
  >
2671
2700
  <div class="pf-c-card" id="trend-card-2-example">
2672
2701
  <div class="pf-c-card__header">
2673
- <div class="pf-l-flex pf-m-align-items-center">
2674
- <div class="pf-l-flex__item pf-m-flex-none">
2675
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2676
- <div class="pf-c-card__title" id="trend-card-2-example-title">
2677
- <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2702
+ <div class="pf-c-card__header-main">
2703
+ <div class="pf-l-flex pf-m-align-items-center">
2704
+ <div class="pf-l-flex__item pf-m-flex-none">
2705
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2706
+ <div class="pf-c-card__title" id="trend-card-2-example-title">
2707
+ <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2708
+ </div>
2709
+ <span class="pf-u-color-200">Storage capacity</span>
2678
2710
  </div>
2679
- <span class="pf-u-color-200">Storage capacity</span>
2680
2711
  </div>
2681
- </div>
2682
- <div class="pf-l-flex__item pf-m-flex-1">
2683
- <div class="ws-chart">
2684
- <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2712
+ <div class="pf-l-flex__item pf-m-flex-1">
2713
+ <div class="ws-chart">
2714
+ <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2715
+ </div>
2685
2716
  </div>
2686
2717
  </div>
2687
2718
  </div>
@@ -2769,12 +2800,14 @@ wrapperTag: div
2769
2800
  </ul>
2770
2801
  </div>
2771
2802
  </div>
2772
- <div
2773
- class="pf-c-card__title"
2774
- id="card-log-view-example-title1"
2775
- style="padding-top: 3px;"
2776
- >
2777
- <h2 class="pf-c-title pf-m-lg">Activity</h2>
2803
+ <div class="pf-c-card__header-main">
2804
+ <div
2805
+ class="pf-c-card__title"
2806
+ id="card-log-view-example-title1"
2807
+ style="padding-top: 3px;"
2808
+ >
2809
+ <h2 class="pf-c-title pf-m-lg">Activity</h2>
2810
+ </div>
2778
2811
  </div>
2779
2812
  </div>
2780
2813
  <div class="pf-c-card__body">
@@ -2914,12 +2947,14 @@ wrapperTag: div
2914
2947
  </ul>
2915
2948
  </div>
2916
2949
  </div>
2917
- <div
2918
- class="pf-c-card__title"
2919
- id="card-events-view-example-title1"
2920
- style="padding-top: 3px;"
2921
- >
2922
- <h2 class="pf-c-title pf-m-lg">Events</h2>
2950
+ <div class="pf-c-card__header-main">
2951
+ <div
2952
+ class="pf-c-card__title"
2953
+ id="card-events-view-example-title1"
2954
+ style="padding-top: 3px;"
2955
+ >
2956
+ <h2 class="pf-c-title pf-m-lg">Events</h2>
2957
+ </div>
2923
2958
  </div>
2924
2959
  </div>
2925
2960
  <div class="pf-c-card__body">
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -7,10 +7,12 @@ section: demos
7
7
 
8
8
  ```html isFullscreen
9
9
  <div class="pf-c-page" id="card-view-basic-example">
10
- <a
11
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
- href="#main-content-card-view-basic-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-card-view-basic-example"
14
+ >Skip to content</a>
15
+ </div>
14
16
  <header class="pf-c-masthead" id="card-view-basic-example-masthead">
15
17
  <span class="pf-c-masthead__toggle">
16
18
  <button
@@ -1261,9 +1263,7 @@ section: demos
1261
1263
  <div class="pf-c-empty-state__content">
1262
1264
  <i class="fas fa-plus-circle pf-c-empty-state__icon"></i>
1263
1265
  <h2 class="pf-c-title pf-m-md">Add a new card to your page</h2>
1264
- <div class="pf-c-empty-state__secondary">
1265
- <button class="pf-c-button pf-m-link" type="button">Add card</button>
1266
- </div>
1266
+ <button class="pf-c-button pf-m-link" type="button">Add card</button>
1267
1267
  </div>
1268
1268
  </div>
1269
1269
  </div>
package/docs/demos/ContextSelector/examples/ContextSelector.md CHANGED
@@ -7,10 +7,12 @@ section: components
7
7
 
8
8
  ```html isFullscreen
9
9
  <div class="pf-c-page" id="context-selector-in-masthead">
10
- <a
11
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
- href="#main-content-context-selector-in-masthead"
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-context-selector-in-masthead"
14
+ >Skip to content</a>
15
+ </div>
14
16
  <header class="pf-c-masthead" id="context-selector-in-masthead-masthead">
15
17
  <span class="pf-c-masthead__toggle">
16
18
  <button
@@ -305,10 +307,12 @@ section: components
305
307
 
306
308
  ```html isFullscreen
307
309
  <div class="pf-c-page" id="context-selector-in-sidebar-example">
308
- <a
309
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
310
- href="#main-content-context-selector-in-sidebar-example"
311
- >Skip to content</a>
310
+ <div class="pf-c-skip-to-content">
311
+ <a
312
+ class="pf-c-button pf-m-primary"
313
+ href="#main-content-context-selector-in-sidebar-example"
314
+ >Skip to content</a>
315
+ </div>
312
316
  <header
313
317
  class="pf-c-masthead"
314
318
  id="context-selector-in-sidebar-example-masthead"
@@ -1343,10 +1347,12 @@ section: components
1343
1347
 
1344
1348
  ```html isFullscreen
1345
1349
  <div class="pf-c-page" id="context-selector-in-sidebar-expanded-example">
1346
- <a
1347
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
1348
- href="#main-content-context-selector-in-sidebar-expanded-example"
1349
- >Skip to content</a>
1350
+ <div class="pf-c-skip-to-content">
1351
+ <a
1352
+ class="pf-c-button pf-m-primary"
1353
+ href="#main-content-context-selector-in-sidebar-expanded-example"
1354
+ >Skip to content</a>
1355
+ </div>
1350
1356
  <header
1351
1357
  class="pf-c-masthead"
1352
1358
  id="context-selector-in-sidebar-expanded-example-masthead"
@@ -2383,10 +2389,12 @@ section: components
2383
2389
 
2384
2390
  ```html isFullscreen
2385
2391
  <div class="pf-c-page" id="context-selector-in-page-content-example">
2386
- <a
2387
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
2388
- href="#main-content-context-selector-in-page-content-example"
2389
- >Skip to content</a>
2392
+ <div class="pf-c-skip-to-content">
2393
+ <a
2394
+ class="pf-c-button pf-m-primary"
2395
+ href="#main-content-context-selector-in-page-content-example"
2396
+ >Skip to content</a>
2397
+ </div>
2390
2398
  <header
2391
2399
  class="pf-c-masthead"
2392
2400
  id="context-selector-in-page-content-example-masthead"
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -9,10 +9,12 @@ cssPrefix: pf-d-dashboard
9
9
 
10
10
  ```html isFullscreen
11
11
  <div class="pf-c-page" id="dashboard-demo">
12
- <a
13
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
14
- href="#main-content-dashboard-demo"
15
- >Skip to content</a>
12
+ <div class="pf-c-skip-to-content">
13
+ <a
14
+ class="pf-c-button pf-m-primary"
15
+ href="#main-content-dashboard-demo"
16
+ >Skip to content</a>
17
+ </div>
16
18
  <header class="pf-c-masthead" id="dashboard-demo-masthead">
17
19
  <span class="pf-c-masthead__toggle">
18
20
  <button
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -8,10 +8,12 @@ wrapperTag: div
8
8
 
9
9
  ```html isFullscreen
10
10
  <div class="pf-c-page" id="data-list-basic-example">
11
- <a
12
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
13
- href="#main-content-data-list-basic-example"
14
- >Skip to content</a>
11
+ <div class="pf-c-skip-to-content">
12
+ <a
13
+ class="pf-c-button pf-m-primary"
14
+ href="#main-content-data-list-basic-example"
15
+ >Skip to content</a>
16
+ </div>
15
17
  <header class="pf-c-masthead" id="data-list-basic-example-masthead">
16
18
  <span class="pf-c-masthead__toggle">
17
19
  <button
@@ -1521,10 +1523,12 @@ wrapperTag: div
1521
1523
 
1522
1524
  ```html isFullscreen
1523
1525
  <div class="pf-c-page" id="data-list-actionable-example">
1524
- <a
1525
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
1526
- href="#main-content-data-list-actionable-example"
1527
- >Skip to content</a>
1526
+ <div class="pf-c-skip-to-content">
1527
+ <a
1528
+ class="pf-c-button pf-m-primary"
1529
+ href="#main-content-data-list-actionable-example"
1530
+ >Skip to content</a>
1531
+ </div>
1528
1532
  <header class="pf-c-masthead" id="data-list-actionable-example-masthead">
1529
1533
  <span class="pf-c-masthead__toggle">
1530
1534
  <button
@@ -3012,10 +3016,12 @@ wrapperTag: div
3012
3016
 
3013
3017
  ```html isFullscreen
3014
3018
  <div class="pf-c-page" id="data-list-expandable-example">
3015
- <a
3016
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
3017
- href="#main-content-data-list-expandable-example"
3018
- >Skip to content</a>
3019
+ <div class="pf-c-skip-to-content">
3020
+ <a
3021
+ class="pf-c-button pf-m-primary"
3022
+ href="#main-content-data-list-expandable-example"
3023
+ >Skip to content</a>
3024
+ </div>
3019
3025
  <header class="pf-c-masthead" id="data-list-expandable-example-masthead">
3020
3026
  <span class="pf-c-masthead__toggle">
3021
3027
  <button
@@ -3989,7 +3995,6 @@ wrapperTag: div
3989
3995
  role="listbox"
3990
3996
  aria-labelledby="-select-name-label"
3991
3997
  hidden
3992
- style="width: 175px"
3993
3998
  >
3994
3999
  <li role="presentation">
3995
4000
  <button
@@ -4029,7 +4034,7 @@ wrapperTag: div
4029
4034
  </li>
4030
4035
  </ul>
4031
4036
  </div>
4032
- <div class="pf-c-text-input-group">
4037
+ <div class="pf-c-text-input-group" style="width: auto">
4033
4038
  <div class="pf-c-text-input-group__main pf-m-icon">
4034
4039
  <span class="pf-c-text-input-group__text">
4035
4040
  <span class="pf-c-text-input-group__icon">
@@ -5112,10 +5117,12 @@ wrapperTag: div
5112
5117
 
5113
5118
  ```html isFullscreen
5114
5119
  <div class="pf-c-page" id="data-list-static-bottom-example">
5115
- <a
5116
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
5117
- href="#main-content-data-list-static-bottom-example"
5118
- >Skip to content</a>
5120
+ <div class="pf-c-skip-to-content">
5121
+ <a
5122
+ class="pf-c-button pf-m-primary"
5123
+ href="#main-content-data-list-static-bottom-example"
5124
+ >Skip to content</a>
5125
+ </div>
5119
5126
  <header class="pf-c-masthead" id="data-list-static-bottom-example-masthead">
5120
5127
  <span class="pf-c-masthead__toggle">
5121
5128
  <button
@@ -6031,7 +6038,6 @@ wrapperTag: div
6031
6038
  role="listbox"
6032
6039
  aria-labelledby="-select-name-label"
6033
6040
  hidden
6034
- style="width: 175px"
6035
6041
  >
6036
6042
  <li role="presentation">
6037
6043
  <button
@@ -6071,7 +6077,7 @@ wrapperTag: div
6071
6077
  </li>
6072
6078
  </ul>
6073
6079
  </div>
6074
- <div class="pf-c-text-input-group">
6080
+ <div class="pf-c-text-input-group" style="width: auto">
6075
6081
  <div class="pf-c-text-input-group__main pf-m-icon">
6076
6082
  <span class="pf-c-text-input-group__text">
6077
6083
  <span class="pf-c-text-input-group__icon">