@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/components/Accordion/examples/Accordion.md CHANGED
@@ -17,8 +17,8 @@ cssPrefix: pf-c-accordion
17
17
  </span>
18
18
  </button>
19
19
  </h3>
20
- <div class="pf-c-accordion__expanded-content" hidden>
21
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
20
+ <div class="pf-c-accordion__expandable-content" hidden>
21
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
22
22
  </div>
23
23
 
24
24
  <h3>
@@ -30,8 +30,8 @@ cssPrefix: pf-c-accordion
30
30
  </span>
31
31
  </button>
32
32
  </h3>
33
- <div class="pf-c-accordion__expanded-content" hidden>
34
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
33
+ <div class="pf-c-accordion__expandable-content" hidden>
34
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
35
35
  </div>
36
36
 
37
37
  <h3>
@@ -43,8 +43,8 @@ cssPrefix: pf-c-accordion
43
43
  </span>
44
44
  </button>
45
45
  </h3>
46
- <div class="pf-c-accordion__expanded-content" hidden>
47
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
46
+ <div class="pf-c-accordion__expandable-content" hidden>
47
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
48
48
  </div>
49
49
 
50
50
  <h3>
@@ -60,9 +60,9 @@ cssPrefix: pf-c-accordion
60
60
  </span>
61
61
  </button>
62
62
  </h3>
63
- <div class="pf-c-accordion__expanded-content pf-m-expanded">
63
+ <div class="pf-c-accordion__expandable-content pf-m-expanded">
64
64
  <div
65
- class="pf-c-accordion__expanded-content-body"
65
+ class="pf-c-accordion__expandable-content-body"
66
66
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
67
67
  </div>
68
68
 
@@ -75,8 +75,8 @@ cssPrefix: pf-c-accordion
75
75
  </span>
76
76
  </button>
77
77
  </h3>
78
- <div class="pf-c-accordion__expanded-content" hidden>
79
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
78
+ <div class="pf-c-accordion__expandable-content" hidden>
79
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
80
80
  </div>
81
81
  </div>
82
82
 
@@ -95,8 +95,8 @@ cssPrefix: pf-c-accordion
95
95
  </span>
96
96
  </button>
97
97
  </h3>
98
- <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden>
99
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
98
+ <div class="pf-c-accordion__expandable-content pf-m-fixed" hidden>
99
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
100
100
  </div>
101
101
 
102
102
  <h3>
@@ -114,19 +114,19 @@ cssPrefix: pf-c-accordion
114
114
  </button>
115
115
  </h3>
116
116
  <div
117
- class="pf-c-accordion__expanded-content pf-m-expanded pf-m-fixed"
117
+ class="pf-c-accordion__expandable-content pf-m-expanded pf-m-fixed"
118
118
  role="region"
119
119
  tabindex="0"
120
120
  aria-labelledby="accordion-fixed-item-two-toggle"
121
121
  >
122
122
  <div
123
- class="pf-c-accordion__expanded-content-body"
123
+ class="pf-c-accordion__expandable-content-body"
124
124
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
125
125
  <div
126
- class="pf-c-accordion__expanded-content-body"
126
+ class="pf-c-accordion__expandable-content-body"
127
127
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
128
128
  <div
129
- class="pf-c-accordion__expanded-content-body"
129
+ class="pf-c-accordion__expandable-content-body"
130
130
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
131
131
  </div>
132
132
 
@@ -139,8 +139,8 @@ cssPrefix: pf-c-accordion
139
139
  </span>
140
140
  </button>
141
141
  </h3>
142
- <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden>
143
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
142
+ <div class="pf-c-accordion__expandable-content pf-m-fixed" hidden>
143
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
144
144
  </div>
145
145
 
146
146
  <h3>
@@ -152,8 +152,8 @@ cssPrefix: pf-c-accordion
152
152
  </span>
153
153
  </button>
154
154
  </h3>
155
- <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden>
156
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
155
+ <div class="pf-c-accordion__expandable-content pf-m-fixed" hidden>
156
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
157
157
  </div>
158
158
 
159
159
  <h3>
@@ -165,8 +165,8 @@ cssPrefix: pf-c-accordion
165
165
  </span>
166
166
  </button>
167
167
  </h3>
168
- <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden>
169
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
168
+ <div class="pf-c-accordion__expandable-content pf-m-fixed" hidden>
169
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
170
170
  </div>
171
171
  </div>
172
172
 
@@ -185,8 +185,8 @@ cssPrefix: pf-c-accordion
185
185
  </span>
186
186
  </button>
187
187
  </dt>
188
- <dd class="pf-c-accordion__expanded-content" hidden>
189
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
188
+ <dd class="pf-c-accordion__expandable-content" hidden>
189
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
190
190
  </dd>
191
191
 
192
192
  <dt>
@@ -198,8 +198,8 @@ cssPrefix: pf-c-accordion
198
198
  </span>
199
199
  </button>
200
200
  </dt>
201
- <dd class="pf-c-accordion__expanded-content" hidden>
202
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
201
+ <dd class="pf-c-accordion__expandable-content" hidden>
202
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
203
203
  </dd>
204
204
 
205
205
  <dt>
@@ -211,8 +211,8 @@ cssPrefix: pf-c-accordion
211
211
  </span>
212
212
  </button>
213
213
  </dt>
214
- <dd class="pf-c-accordion__expanded-content" hidden>
215
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
214
+ <dd class="pf-c-accordion__expandable-content" hidden>
215
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
216
216
  </dd>
217
217
 
218
218
  <dt>
@@ -228,9 +228,9 @@ cssPrefix: pf-c-accordion
228
228
  </span>
229
229
  </button>
230
230
  </dt>
231
- <dd class="pf-c-accordion__expanded-content pf-m-expanded">
231
+ <dd class="pf-c-accordion__expandable-content pf-m-expanded">
232
232
  <div
233
- class="pf-c-accordion__expanded-content-body"
233
+ class="pf-c-accordion__expandable-content-body"
234
234
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
235
235
  </dd>
236
236
 
@@ -243,8 +243,8 @@ cssPrefix: pf-c-accordion
243
243
  </span>
244
244
  </button>
245
245
  </dt>
246
- <dd class="pf-c-accordion__expanded-content" hidden>
247
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
246
+ <dd class="pf-c-accordion__expandable-content" hidden>
247
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
248
248
  </dd>
249
249
  </dl>
250
250
 
@@ -263,8 +263,8 @@ cssPrefix: pf-c-accordion
263
263
  </span>
264
264
  </button>
265
265
  </h3>
266
- <div class="pf-c-accordion__expanded-content" hidden>
267
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
266
+ <div class="pf-c-accordion__expandable-content" hidden>
267
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
268
268
  </div>
269
269
 
270
270
  <h3>
@@ -280,8 +280,8 @@ cssPrefix: pf-c-accordion
280
280
  </span>
281
281
  </button>
282
282
  </h3>
283
- <div class="pf-c-accordion__expanded-content pf-m-expanded">
284
- <div class="pf-c-accordion__expanded-content-body">
283
+ <div class="pf-c-accordion__expandable-content pf-m-expanded">
284
+ <div class="pf-c-accordion__expandable-content-body">
285
285
  <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
286
286
  </div>
287
287
  </div>
@@ -295,8 +295,8 @@ cssPrefix: pf-c-accordion
295
295
  </span>
296
296
  </button>
297
297
  </h3>
298
- <div class="pf-c-accordion__expanded-content" hidden>
299
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
298
+ <div class="pf-c-accordion__expandable-content" hidden>
299
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
300
300
  </div>
301
301
 
302
302
  <h3>
@@ -308,8 +308,8 @@ cssPrefix: pf-c-accordion
308
308
  </span>
309
309
  </button>
310
310
  </h3>
311
- <div class="pf-c-accordion__expanded-content" hidden>
312
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
311
+ <div class="pf-c-accordion__expandable-content" hidden>
312
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
313
313
  </div>
314
314
 
315
315
  <h3>
@@ -321,8 +321,8 @@ cssPrefix: pf-c-accordion
321
321
  </span>
322
322
  </button>
323
323
  </h3>
324
- <div class="pf-c-accordion__expanded-content" hidden>
325
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
324
+ <div class="pf-c-accordion__expandable-content" hidden>
325
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
326
326
  </div>
327
327
  </div>
328
328
 
@@ -341,8 +341,8 @@ cssPrefix: pf-c-accordion
341
341
  </span>
342
342
  </button>
343
343
  </h3>
344
- <div class="pf-c-accordion__expanded-content" hidden>
345
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
344
+ <div class="pf-c-accordion__expandable-content" hidden>
345
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
346
346
  </div>
347
347
 
348
348
  <h3>
@@ -358,9 +358,9 @@ cssPrefix: pf-c-accordion
358
358
  </span>
359
359
  </button>
360
360
  </h3>
361
- <div class="pf-c-accordion__expanded-content pf-m-expanded">
361
+ <div class="pf-c-accordion__expandable-content pf-m-expanded">
362
362
  <div
363
- class="pf-c-accordion__expanded-content-body"
363
+ class="pf-c-accordion__expandable-content-body"
364
364
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
365
365
  </div>
366
366
 
@@ -373,8 +373,8 @@ cssPrefix: pf-c-accordion
373
373
  </span>
374
374
  </button>
375
375
  </h3>
376
- <div class="pf-c-accordion__expanded-content" hidden>
377
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
376
+ <div class="pf-c-accordion__expandable-content" hidden>
377
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
378
378
  </div>
379
379
 
380
380
  <h3>
@@ -390,11 +390,11 @@ cssPrefix: pf-c-accordion
390
390
  </span>
391
391
  </button>
392
392
  </h3>
393
- <div class="pf-c-accordion__expanded-content pf-m-expanded">
393
+ <div class="pf-c-accordion__expandable-content pf-m-expanded">
394
394
  <div
395
- class="pf-c-accordion__expanded-content-body"
395
+ class="pf-c-accordion__expandable-content-body"
396
396
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
397
- <div class="pf-c-accordion__expanded-content-body">
397
+ <div class="pf-c-accordion__expandable-content-body">
398
398
  <button
399
399
  class="pf-c-button pf-m-link pf-m-inline pf-m-display-lg"
400
400
  type="button"
@@ -416,8 +416,8 @@ cssPrefix: pf-c-accordion
416
416
  </span>
417
417
  </button>
418
418
  </h3>
419
- <div class="pf-c-accordion__expanded-content" hidden>
420
- <div class="pf-c-accordion__expanded-content-body">This text is hidden</div>
419
+ <div class="pf-c-accordion__expandable-content" hidden>
420
+ <div class="pf-c-accordion__expandable-content-body">This text is hidden</div>
421
421
  </div>
422
422
  </div>
423
423
 
@@ -429,22 +429,22 @@ cssPrefix: pf-c-accordion
429
429
 
430
430
  There are two variations to build the accordion component:
431
431
  One way uses `<div>` and `<h1 - h6>` tags to build the component.
432
- In these examples `.pf-c-accordion` uses `<div>`, `.pf-c-accordion__toggle` uses `<h3><button>`, and `.pf-c-accordion__expanded-content` uses `<div>`. The heading level that you use should fit within the rest of the headings outlined on your page.
432
+ In these examples `.pf-c-accordion` uses `<div>`, `.pf-c-accordion__toggle` uses `<h3><button>`, and `.pf-c-accordion__expandable-content` uses `<div>`. The heading level that you use should fit within the rest of the headings outlined on your page.
433
433
 
434
434
  Another variation is using the definition list:
435
- In these examples `.pf-c-accordion` uses `<dl>`, `.pf-c-accordion__toggle` uses `<dt><button>`, and `.pf-c-accordion__expanded-content` uses `<dd>`.
435
+ In these examples `.pf-c-accordion` uses `<dl>`, `.pf-c-accordion__toggle` uses `<dt><button>`, and `.pf-c-accordion__expandable-content` uses `<dd>`.
436
436
 
437
437
  ### Usage
438
438
 
439
- | Class | Applied to | Outcome |
440
- | ---------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
441
- | `.pf-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required** |
442
- | `.pf-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
443
- | `.pf-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
444
- | `.pf-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
445
- | `.pf-c-accordion__expanded-content` | `<div>`, `<dd>` | Initiates expanded content. **Must be paired with a button** |
446
- | `.pf-c-accordion__expanded-content-body` | `<div>` | Initiates expanded content body. **Required** |
447
- | `.pf-m-bordered` | `.pf-c-accordion` | Modifies the accordion to add borders between items. |
448
- | `.pf-m-display-lg` | `.pf-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
449
- | `.pf-m-expanded` | `.pf-c-accordion__toggle`, `.pf-c-accordion__expanded-content` | Modifies the accordion button and expanded content for the expanded state. |
450
- | `.pf-m-fixed` | `.pf-c-accordion__expanded-content` | Modifies the expanded content for the fixed state. |
439
+ | Class | Applied to | Outcome |
440
+ | ------------------------------------------ | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
441
+ | `.pf-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required** |
442
+ | `.pf-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
443
+ | `.pf-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
444
+ | `.pf-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
445
+ | `.pf-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
446
+ | `.pf-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
447
+ | `.pf-m-bordered` | `.pf-c-accordion` | Modifies the accordion to add borders between items. |
448
+ | `.pf-m-display-lg` | `.pf-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
449
+ | `.pf-m-expanded` | `.pf-c-accordion__toggle`, `.pf-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state. |
450
+ | `.pf-m-fixed` | `.pf-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |
package/docs/components/Card/examples/Card.md CHANGED
@@ -144,10 +144,12 @@ cssPrefix: pf-c-card
144
144
  />
145
145
  </div>
146
146
  </div>
147
- <div
148
- class="pf-c-card__title"
149
- id="card-action-example-2-check-label"
150
- >This is a really really really really really really really really really really long title</div>
147
+ <div class="pf-c-card__header-main">
148
+ <div
149
+ class="pf-c-card__title"
150
+ id="card-action-example-2-check-label"
151
+ >This is a really really really really really really really really really really long title</div>
152
+ </div>
151
153
  </div>
152
154
  <div class="pf-c-card__body">Body</div>
153
155
  <div class="pf-c-card__footer">Footer</div>
@@ -230,10 +232,12 @@ cssPrefix: pf-c-card
230
232
  <div class="pf-c-card__actions pf-m-no-offset">
231
233
  <button class="pf-c-button pf-m-primary" type="button">Action</button>
232
234
  </div>
233
- <h1
234
- class="pf-c-title pf-m-2xl"
235
- id="card-action-no-offset-check-label"
236
- >This is a card title</h1>
235
+ <div class="pf-c-card__header-main">
236
+ <h1
237
+ class="pf-c-title pf-m-2xl"
238
+ id="card-action-no-offset-check-label"
239
+ >This is a card title</h1>
240
+ </div>
237
241
  </div>
238
242
  <div class="pf-c-card__body">Body</div>
239
243
  <div class="pf-c-card__footer">Footer</div>
@@ -555,7 +559,9 @@ cssPrefix: pf-c-card
555
559
  />
556
560
  </div>
557
561
  </div>
558
- <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
562
+ <div class="pf-c-card__header-main">
563
+ <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
564
+ </div>
559
565
  </div>
560
566
  </div>
561
567
 
@@ -579,11 +585,13 @@ cssPrefix: pf-c-card
579
585
  </span>
580
586
  </button>
581
587
  </div>
582
- <img
583
- src="/assets/images/pf-logo-small.svg"
584
- alt="PatternFly logo"
585
- width="27px"
586
- />
588
+ <div class="pf-c-card__header-main">
589
+ <img
590
+ src="/assets/images/pf-logo-small.svg"
591
+ alt="PatternFly logo"
592
+ width="27px"
593
+ />
594
+ </div>
587
595
  <div class="pf-c-card__actions">
588
596
  <div class="pf-c-dropdown">
589
597
  <button
@@ -713,7 +721,9 @@ cssPrefix: pf-c-card
713
721
  />
714
722
  </div>
715
723
  </div>
716
- <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
724
+ <div class="pf-c-card__header-main">
725
+ <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
726
+ </div>
717
727
  </div>
718
728
  <div class="pf-c-card__expandable-content">
719
729
  <div class="pf-c-card__body">Body</div>
@@ -781,7 +791,9 @@ cssPrefix: pf-c-card
781
791
  />
782
792
  </div>
783
793
  </div>
784
- <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
794
+ <div class="pf-c-card__header-main">
795
+ <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
796
+ </div>
785
797
  </div>
786
798
  <div class="pf-c-card__body">Body</div>
787
799
  <div class="pf-c-card__footer">Footer</div>
@@ -847,7 +859,12 @@ cssPrefix: pf-c-card
847
859
  />
848
860
  </div>
849
861
  </div>
850
- <div class="pf-c-card__title" id="card-toggle-on-right-example-title">Title</div>
862
+ <div class="pf-c-card__header-main">
863
+ <div
864
+ class="pf-c-card__title"
865
+ id="card-toggle-on-right-example-title"
866
+ >Title</div>
867
+ </div>
851
868
  <div class="pf-c-card__header-toggle">
852
869
  <button
853
870
  class="pf-c-button pf-m-plain"
@@ -889,30 +906,30 @@ A card is a generic rectangular container that can be used to build other compon
889
906
 
890
907
  ### Usage
891
908
 
892
- | Class | Applied | Outcome |
893
- | -------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
894
- | `.pf-c-card` | `<div>` | Creates a card component. **Required** |
895
- | `.pf-c-card__title` | `<div>` | Creates the title of a card. |
896
- | `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
897
- | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
898
- | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
899
- | `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
900
- | `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
901
- | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
902
- | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. |
903
- | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
904
- | `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
905
- | `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
906
- | `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
907
- | `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
908
- | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
909
- | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
910
- | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
911
- | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
912
- | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
913
- | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
914
- | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
915
- | `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
916
- | `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
917
- | `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
918
- | `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
909
+ | Class | Applied | Outcome |
910
+ | -------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
911
+ | `.pf-c-card` | `<div>` | Creates a card component. **Required** |
912
+ | `.pf-c-card__title` | `<div>` | Creates the title of a card. |
913
+ | `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
914
+ | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
915
+ | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
916
+ | `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
917
+ | `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
918
+ | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
919
+ | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
920
+ | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
921
+ | `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
922
+ | `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
923
+ | `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
924
+ | `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
925
+ | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
926
+ | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
927
+ | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
928
+ | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
929
+ | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
930
+ | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
931
+ | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
932
+ | `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
933
+ | `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
934
+ | `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
935
+ | `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -172,9 +172,9 @@ name: azure-sample-repo<div
172
172
  | Class | Applied to | Outcome |
173
173
  | -------------------------------- | ---------- | ------------------------------------------------------- |
174
174
  | `.pf-c-code-block` | `<div>` | Initiates the code block component. **Required** |
175
- | `.pf-c-chip-group__header` | `<div>` | Initiates the code block header. |
176
- | `.pf-c-chip-group__actions` | `<div>` | Initiates the code block actions. |
177
- | `.pf-c-chip-group__actions-item` | `<div>` | Initiates a code block action item. |
178
- | `.pf-c-chip-group__content` | `<div>` | Initiates the code block content. **Required** |
179
- | `.pf-c-chip-group__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
180
- | `.pf-c-chip-group__code` | `<code>` | Initiates the code block `<code>` element. **Required** |
175
+ | `.pf-c-code-block__header` | `<div>` | Initiates the code block header. |
176
+ | `.pf-c-code-block__actions` | `<div>` | Initiates the code block actions. |
177
+ | `.pf-c-code-block__actions-item` | `<div>` | Initiates a code block action item. |
178
+ | `.pf-c-code-block__content` | `<div>` | Initiates the code block content. **Required** |
179
+ | `.pf-c-code-block__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
180
+ | `.pf-c-code-block__code` | `<code>` | Initiates the code block `<code>` element. **Required** |
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -123,9 +123,7 @@ cssPrefix: pf-c-code-editor
123
123
  class="pf-c-empty-state__body"
124
124
  >Drag a file here or browse to upload.</div>
125
125
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
126
- <div class="pf-c-empty-state__secondary">
127
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
128
- </div>
126
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
129
127
  </div>
130
128
  </div>
131
129
  </div>
@@ -157,9 +155,7 @@ cssPrefix: pf-c-code-editor
157
155
  class="pf-c-empty-state__body"
158
156
  >Drag a file here or browse to upload.</div>
159
157
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
160
- <div class="pf-c-empty-state__secondary">
161
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
162
- </div>
158
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
163
159
  </div>
164
160
  </div>
165
161
  </div>
package/docs/components/Content/examples/Content.md CHANGED
@@ -75,33 +75,6 @@ cssPrefix: pf-c-content
75
75
  <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
76
76
  </p>
77
77
  <hr />
78
- <h3>Plain list example</h3>
79
- <ol class="pf-m-plain">
80
- <li>Donec blandit a lorem id convallis.</li>
81
- <li>Cras gravida arcu at diam gravida gravida.</li>
82
- <li>Integer in volutpat libero.</li>
83
- <li>Donec a diam tellus.</li>
84
- <li>
85
- Etiam auctor nisl et.
86
- <ul>
87
- <li>Regular list</li>
88
- <li>Donec blandit a lorem id convallis.</li>
89
- <li>Cras gravida arcu at diam gravida gravida.</li>
90
- <li>
91
- Integer in volutpat libero.
92
- <ol class="pf-m-plain">
93
- <li>Nested plain list</li>
94
- <li>Donec blandit a lorem id convallis.</li>
95
- <li>Cras gravida arcu at diam gravida gravida.</li>
96
- </ol>
97
- </li>
98
- </ul>
99
- </li>
100
- <li>Aenean nec tortor orci.</li>
101
- <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
102
- <li>Vivamus maximus ultricies pulvinar.</li>
103
- </ol>
104
- <hr />
105
78
  <h3>Visited link example</h3>
106
79
  <p>
107
80
  <a class="pf-m-visited" href>Visited link</a>
@@ -179,4 +152,3 @@ This component is an exception to the variable system since we style type select
179
152
  | --------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
180
153
  | `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements. |
181
154
  | `.pf-m-visited` | `.pf-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
182
- | `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |