@patternfly/patternfly 4.222.4 → 5.0.0-alpha.1
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.
- package/README.md +2 -2
- package/RELEASE-NOTES.md +0 -30
- package/base/_fonts.scss +0 -188
- package/base/_globals.scss +0 -6
- package/base/_icons.scss +28 -0
- package/base/_variables.scss +0 -14
- package/base/patternfly-fonts.css +0 -120
- package/base/patternfly-globals.css +0 -4
- package/base/patternfly-icons.scss +0 -28
- package/base/patternfly-variables.css +6 -19
- package/components/AboutModalBox/about-modal-box.css +1 -28
- package/components/AboutModalBox/about-modal-box.scss +1 -27
- package/components/Accordion/accordion.css +64 -62
- package/components/Accordion/accordion.scss +62 -64
- package/components/Alert/alert.css +0 -4
- package/components/Alert/alert.scss +0 -7
- package/components/Banner/banner.css +1 -1
- package/components/Banner/banner.scss +1 -1
- package/components/Breadcrumb/breadcrumb.css +0 -6
- package/components/Breadcrumb/breadcrumb.scss +0 -9
- package/components/Button/button.css +0 -4
- package/components/Button/button.scss +0 -7
- package/components/Card/card.css +0 -4
- package/components/Card/card.scss +0 -7
- package/components/Check/check.css +4 -2
- package/components/Check/check.scss +2 -2
- package/components/Content/content.css +1 -11
- package/components/Content/content.scss +1 -15
- package/components/DataList/data-list.css +0 -15
- package/components/Divider/divider.css +0 -16
- package/components/Divider/divider.scss +0 -1
- package/components/Drawer/drawer.css +0 -14
- package/components/Drawer/drawer.scss +0 -5
- package/components/Dropdown/dropdown.css +0 -15
- package/components/Dropdown/dropdown.scss +0 -20
- package/components/EmptyState/empty-state.css +0 -4
- package/components/EmptyState/empty-state.scss +0 -9
- package/components/ExpandableSection/expandable-section.css +0 -4
- package/components/ExpandableSection/expandable-section.scss +0 -7
- package/components/Form/form.css +0 -1
- package/components/Form/form.scss +0 -1
- package/components/FormControl/form-control.css +1 -1
- package/components/FormControl/themes/dark/form-control.scss +1 -1
- package/components/InlineEdit/inline-edit.css +1 -12
- package/components/InlineEdit/inline-edit.scss +1 -10
- package/components/InputGroup/input-group.css +0 -14
- package/components/InputGroup/input-group.scss +0 -9
- package/components/InputGroup/themes/dark/input-group.scss +0 -8
- package/components/JumpLinks/jump-links.css +0 -43
- package/components/JumpLinks/jump-links.scss +0 -13
- package/components/Label/label.css +0 -3
- package/components/Label/label.scss +0 -4
- package/components/Menu/menu.css +0 -20
- package/components/Menu/menu.scss +0 -6
- package/components/NotificationDrawer/notification-drawer.css +1 -0
- package/components/NotificationDrawer/notification-drawer.scss +1 -0
- package/components/Page/page.css +0 -15
- package/components/Pagination/pagination.css +0 -175
- package/components/Pagination/pagination.scss +1 -49
- package/components/Progress/progress.css +0 -1
- package/components/Progress/progress.scss +0 -1
- package/components/Radio/radio.css +4 -2
- package/components/Radio/radio.scss +2 -2
- package/components/SimpleList/simple-list.css +1 -1
- package/components/SimpleList/simple-list.scss +1 -1
- package/components/SkipToContent/skip-to-content.css +1 -1
- package/components/SkipToContent/skip-to-content.scss +1 -1
- package/components/Slider/slider.css +7 -0
- package/components/Slider/slider.scss +9 -0
- package/components/Switch/switch.css +0 -1
- package/components/Switch/switch.scss +0 -1
- package/components/Table/table-grid.css +0 -10
- package/components/Table/table-grid.scss +0 -2
- package/components/Table/table-tree-view.css +0 -16
- package/components/Table/table-tree-view.scss +0 -4
- package/components/Table/table.css +0 -16
- package/components/Table/table.scss +0 -1
- package/components/Tabs/tabs.css +1 -34
- package/components/Tabs/tabs.scss +0 -15
- package/components/Title/title.css +0 -5
- package/components/Title/title.scss +0 -8
- package/components/Toolbar/toolbar.css +0 -31
- package/components/Toolbar/toolbar.scss +0 -6
- package/components/Wizard/wizard.css +0 -9
- package/components/Wizard/wizard.scss +0 -9
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
- package/docs/components/Accordion/examples/Accordion.md +67 -67
- package/docs/components/Dropdown/examples/Dropdown.md +0 -216
- package/docs/components/InputGroup/examples/InputGroup.md +0 -1
- package/docs/components/Pagination/examples/Pagination.md +30 -129
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
- package/docs/components/Slider/examples/Slider.md +6 -6
- package/docs/components/Tabs/examples/Tabs.md +1 -2
- package/docs/components/Wizard/examples/Wizard.md +6 -6
- package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
- package/docs/demos/Alert/examples/Alert.md +18 -12
- package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
- package/docs/demos/Banner/examples/Banner.md +14 -10
- package/docs/demos/Card/examples/Card.md +4 -4
- package/docs/demos/CardView/examples/CardView.md +6 -4
- package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
- package/docs/demos/Dashboard/examples/Dashboard.md +7 -4
- package/docs/demos/DataList/examples/DataList.md +24 -16
- package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -12
- package/docs/demos/Drawer/examples/Drawer.md +30 -20
- package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
- package/docs/demos/Masthead/examples/Masthead.md +54 -36
- package/docs/demos/Modal/examples/Modal.md +36 -24
- package/docs/demos/Nav/examples/Nav.md +784 -721
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
- package/docs/demos/Page/examples/Page.md +54 -36
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +44 -28
- package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
- package/docs/demos/Table/examples/Table.md +84 -56
- package/docs/demos/Tabs/examples/Tabs.md +579 -70
- package/docs/demos/Toolbar/examples/Toolbar.md +6 -4
- package/docs/demos/Wizard/examples/Wizard.md +67 -45
- package/package.json +7 -6
- package/patternfly-base-no-reset.css +30 -139
- package/patternfly-base.css +30 -143
- package/patternfly-charts.css +1 -1
- package/patternfly-no-reset.css +118 -665
- package/patternfly.css +118 -669
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +0 -6
- package/sass-utilities/placeholders.scss +0 -7
- package/sass-utilities/scss-variables.scss +6 -12
- package/assets/fonts/overpass-mono-webfont/example.html +0 -15
- package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
- package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
- package/assets/fonts/overpass-webfont/example.html +0 -18
- package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
- package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
- package/assets/fonts/overpass-webfont/overpass.css +0 -141
|
@@ -17,8 +17,8 @@ cssPrefix: pf-c-accordion
|
|
|
17
17
|
</span>
|
|
18
18
|
</button>
|
|
19
19
|
</h3>
|
|
20
|
-
<div class="pf-c-
|
|
21
|
-
<div class="pf-c-
|
|
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-
|
|
34
|
-
<div class="pf-c-
|
|
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-
|
|
47
|
-
<div class="pf-c-
|
|
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-
|
|
63
|
+
<div class="pf-c-accordion__expandable-content pf-m-expanded">
|
|
64
64
|
<div
|
|
65
|
-
class="pf-c-
|
|
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-
|
|
79
|
-
<div class="pf-c-
|
|
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-
|
|
99
|
-
<div class="pf-c-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
143
|
-
<div class="pf-c-
|
|
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-
|
|
156
|
-
<div class="pf-c-
|
|
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-
|
|
169
|
-
<div class="pf-c-
|
|
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-
|
|
189
|
-
<div class="pf-c-
|
|
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-
|
|
202
|
-
<div class="pf-c-
|
|
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-
|
|
215
|
-
<div class="pf-c-
|
|
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-
|
|
231
|
+
<dd class="pf-c-accordion__expandable-content pf-m-expanded">
|
|
232
232
|
<div
|
|
233
|
-
class="pf-c-
|
|
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-
|
|
247
|
-
<div class="pf-c-
|
|
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-
|
|
267
|
-
<div class="pf-c-
|
|
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-
|
|
284
|
-
<div class="pf-c-
|
|
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-
|
|
299
|
-
<div class="pf-c-
|
|
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-
|
|
312
|
-
<div class="pf-c-
|
|
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-
|
|
325
|
-
<div class="pf-c-
|
|
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-
|
|
345
|
-
<div class="pf-c-
|
|
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-
|
|
361
|
+
<div class="pf-c-accordion__expandable-content pf-m-expanded">
|
|
362
362
|
<div
|
|
363
|
-
class="pf-c-
|
|
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-
|
|
377
|
-
<div class="pf-c-
|
|
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-
|
|
393
|
+
<div class="pf-c-accordion__expandable-content pf-m-expanded">
|
|
394
394
|
<div
|
|
395
|
-
class="pf-c-
|
|
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-
|
|
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-
|
|
420
|
-
<div class="pf-c-
|
|
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-
|
|
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-
|
|
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
|
|
440
|
-
|
|
|
441
|
-
| `.pf-c-accordion`
|
|
442
|
-
| `.pf-c-accordion__toggle`
|
|
443
|
-
| `.pf-c-accordion__toggle-text`
|
|
444
|
-
| `.pf-c-accordion__toggle-icon`
|
|
445
|
-
| `.pf-c-
|
|
446
|
-
| `.pf-c-
|
|
447
|
-
| `.pf-m-bordered`
|
|
448
|
-
| `.pf-m-display-lg`
|
|
449
|
-
| `.pf-m-expanded`
|
|
450
|
-
| `.pf-m-fixed`
|
|
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. |
|
|
@@ -982,220 +982,6 @@ cssPrefix: pf-c-dropdown
|
|
|
982
982
|
|
|
983
983
|
```
|
|
984
984
|
|
|
985
|
-
### Split button (progress checkbox)
|
|
986
|
-
|
|
987
|
-
```html isBeta
|
|
988
|
-
<div class="pf-c-dropdown">
|
|
989
|
-
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
990
|
-
<label
|
|
991
|
-
class="pf-c-dropdown__toggle-check"
|
|
992
|
-
for="dropdown-split-button-progress-toggle-check"
|
|
993
|
-
>
|
|
994
|
-
<input
|
|
995
|
-
type="checkbox"
|
|
996
|
-
id="dropdown-split-button-progress-toggle-check"
|
|
997
|
-
aria-label="Select all"
|
|
998
|
-
/>
|
|
999
|
-
<span class="pf-c-dropdown__toggle-progress">
|
|
1000
|
-
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1001
|
-
<circle
|
|
1002
|
-
class="pf-c-spinner__path"
|
|
1003
|
-
cx="50"
|
|
1004
|
-
cy="50"
|
|
1005
|
-
r="45"
|
|
1006
|
-
fill="none"
|
|
1007
|
-
/>
|
|
1008
|
-
</svg>
|
|
1009
|
-
</span>
|
|
1010
|
-
</label>
|
|
1011
|
-
|
|
1012
|
-
<button
|
|
1013
|
-
class="pf-c-dropdown__toggle-button"
|
|
1014
|
-
type="button"
|
|
1015
|
-
aria-expanded="false"
|
|
1016
|
-
id="dropdown-split-button-progress-toggle-button"
|
|
1017
|
-
aria-label="Dropdown toggle"
|
|
1018
|
-
>
|
|
1019
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1020
|
-
</button>
|
|
1021
|
-
</div>
|
|
1022
|
-
<ul class="pf-c-dropdown__menu" hidden>
|
|
1023
|
-
<li>
|
|
1024
|
-
<button class="pf-c-dropdown__menu-item" type="button">Actions</button>
|
|
1025
|
-
</li>
|
|
1026
|
-
<li>
|
|
1027
|
-
<button
|
|
1028
|
-
class="pf-c-dropdown__menu-item"
|
|
1029
|
-
type="button"
|
|
1030
|
-
disabled
|
|
1031
|
-
>Disabled action</button>
|
|
1032
|
-
</li>
|
|
1033
|
-
<li>
|
|
1034
|
-
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1035
|
-
</li>
|
|
1036
|
-
</ul>
|
|
1037
|
-
</div>
|
|
1038
|
-
<div class="pf-c-dropdown">
|
|
1039
|
-
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1040
|
-
<label
|
|
1041
|
-
class="pf-c-dropdown__toggle-check pf-m-in-progress"
|
|
1042
|
-
for="dropdown-split-button-in-progress-toggle-check"
|
|
1043
|
-
>
|
|
1044
|
-
<input
|
|
1045
|
-
type="checkbox"
|
|
1046
|
-
id="dropdown-split-button-in-progress-toggle-check"
|
|
1047
|
-
disabled
|
|
1048
|
-
aria-label="Select all"
|
|
1049
|
-
/>
|
|
1050
|
-
<span class="pf-c-dropdown__toggle-progress">
|
|
1051
|
-
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1052
|
-
<circle
|
|
1053
|
-
class="pf-c-spinner__path"
|
|
1054
|
-
cx="50"
|
|
1055
|
-
cy="50"
|
|
1056
|
-
r="45"
|
|
1057
|
-
fill="none"
|
|
1058
|
-
/>
|
|
1059
|
-
</svg>
|
|
1060
|
-
</span>
|
|
1061
|
-
</label>
|
|
1062
|
-
|
|
1063
|
-
<button
|
|
1064
|
-
class="pf-c-dropdown__toggle-button"
|
|
1065
|
-
type="button"
|
|
1066
|
-
aria-expanded="false"
|
|
1067
|
-
id="dropdown-split-button-in-progress-toggle-button"
|
|
1068
|
-
aria-label="Dropdown toggle"
|
|
1069
|
-
>
|
|
1070
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1071
|
-
</button>
|
|
1072
|
-
</div>
|
|
1073
|
-
<ul class="pf-c-dropdown__menu" hidden>
|
|
1074
|
-
<li>
|
|
1075
|
-
<button class="pf-c-dropdown__menu-item" type="button">Actions</button>
|
|
1076
|
-
</li>
|
|
1077
|
-
<li>
|
|
1078
|
-
<button
|
|
1079
|
-
class="pf-c-dropdown__menu-item"
|
|
1080
|
-
type="button"
|
|
1081
|
-
disabled
|
|
1082
|
-
>Disabled action</button>
|
|
1083
|
-
</li>
|
|
1084
|
-
<li>
|
|
1085
|
-
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1086
|
-
</li>
|
|
1087
|
-
</ul>
|
|
1088
|
-
</div>
|
|
1089
|
-
<div class="pf-c-dropdown">
|
|
1090
|
-
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1091
|
-
<label
|
|
1092
|
-
class="pf-c-dropdown__toggle-check"
|
|
1093
|
-
for="dropdown-split-button-progress-text-toggle-check"
|
|
1094
|
-
>
|
|
1095
|
-
<input
|
|
1096
|
-
type="checkbox"
|
|
1097
|
-
id="dropdown-split-button-progress-text-toggle-check"
|
|
1098
|
-
aria-label="Select all"
|
|
1099
|
-
checked
|
|
1100
|
-
aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
|
|
1101
|
-
/>
|
|
1102
|
-
<span class="pf-c-dropdown__toggle-progress">
|
|
1103
|
-
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1104
|
-
<circle
|
|
1105
|
-
class="pf-c-spinner__path"
|
|
1106
|
-
cx="50"
|
|
1107
|
-
cy="50"
|
|
1108
|
-
r="45"
|
|
1109
|
-
fill="none"
|
|
1110
|
-
/>
|
|
1111
|
-
</svg>
|
|
1112
|
-
</span>
|
|
1113
|
-
<span
|
|
1114
|
-
class="pf-c-dropdown__toggle-text"
|
|
1115
|
-
aria-hidden="true"
|
|
1116
|
-
id="dropdown-split-button-progress-text-toggle-check-text"
|
|
1117
|
-
>10 selected</span>
|
|
1118
|
-
</label>
|
|
1119
|
-
|
|
1120
|
-
<button
|
|
1121
|
-
class="pf-c-dropdown__toggle-button"
|
|
1122
|
-
type="button"
|
|
1123
|
-
aria-expanded="false"
|
|
1124
|
-
id="dropdown-split-button-progress-text-toggle-button"
|
|
1125
|
-
aria-label="Dropdown toggle"
|
|
1126
|
-
>
|
|
1127
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1128
|
-
</button>
|
|
1129
|
-
</div>
|
|
1130
|
-
<ul class="pf-c-dropdown__menu" hidden>
|
|
1131
|
-
<li>
|
|
1132
|
-
<button class="pf-c-dropdown__menu-item" type="button">Select all</button>
|
|
1133
|
-
</li>
|
|
1134
|
-
<li>
|
|
1135
|
-
<button class="pf-c-dropdown__menu-item" type="button">Select none</button>
|
|
1136
|
-
</li>
|
|
1137
|
-
<li>
|
|
1138
|
-
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1139
|
-
</li>
|
|
1140
|
-
</ul>
|
|
1141
|
-
</div>
|
|
1142
|
-
<div class="pf-c-dropdown">
|
|
1143
|
-
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1144
|
-
<label
|
|
1145
|
-
class="pf-c-dropdown__toggle-check pf-m-in-progress"
|
|
1146
|
-
for="dropdown-split-button-in-progress-text-toggle-check"
|
|
1147
|
-
>
|
|
1148
|
-
<input
|
|
1149
|
-
type="checkbox"
|
|
1150
|
-
id="dropdown-split-button-in-progress-text-toggle-check"
|
|
1151
|
-
disabled
|
|
1152
|
-
aria-label="Select all"
|
|
1153
|
-
checked
|
|
1154
|
-
aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
|
|
1155
|
-
/>
|
|
1156
|
-
<span class="pf-c-dropdown__toggle-progress">
|
|
1157
|
-
<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
|
|
1158
|
-
<circle
|
|
1159
|
-
class="pf-c-spinner__path"
|
|
1160
|
-
cx="50"
|
|
1161
|
-
cy="50"
|
|
1162
|
-
r="45"
|
|
1163
|
-
fill="none"
|
|
1164
|
-
/>
|
|
1165
|
-
</svg>
|
|
1166
|
-
</span>
|
|
1167
|
-
<span
|
|
1168
|
-
class="pf-c-dropdown__toggle-text"
|
|
1169
|
-
aria-hidden="true"
|
|
1170
|
-
id="dropdown-split-button-in-progress-text-toggle-check-text"
|
|
1171
|
-
>10 selected</span>
|
|
1172
|
-
</label>
|
|
1173
|
-
|
|
1174
|
-
<button
|
|
1175
|
-
class="pf-c-dropdown__toggle-button"
|
|
1176
|
-
type="button"
|
|
1177
|
-
aria-expanded="false"
|
|
1178
|
-
id="dropdown-split-button-in-progress-text-toggle-button"
|
|
1179
|
-
aria-label="Dropdown toggle"
|
|
1180
|
-
>
|
|
1181
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1182
|
-
</button>
|
|
1183
|
-
</div>
|
|
1184
|
-
<ul class="pf-c-dropdown__menu" hidden>
|
|
1185
|
-
<li>
|
|
1186
|
-
<button class="pf-c-dropdown__menu-item" type="button">Select all</button>
|
|
1187
|
-
</li>
|
|
1188
|
-
<li>
|
|
1189
|
-
<button class="pf-c-dropdown__menu-item" type="button">Select none</button>
|
|
1190
|
-
</li>
|
|
1191
|
-
<li>
|
|
1192
|
-
<button class="pf-c-dropdown__menu-item" type="button">Other action</button>
|
|
1193
|
-
</li>
|
|
1194
|
-
</ul>
|
|
1195
|
-
</div>
|
|
1196
|
-
|
|
1197
|
-
```
|
|
1198
|
-
|
|
1199
985
|
### Split button (action)
|
|
1200
986
|
|
|
1201
987
|
```html
|
|
@@ -2294,7 +2080,6 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2294
2080
|
| `.pf-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
|
|
2295
2081
|
| `.pf-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
|
|
2296
2082
|
| `.pf-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
|
|
2297
|
-
| `.pf-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
|
|
2298
2083
|
| `.pf-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
|
|
2299
2084
|
| `.pf-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
|
|
2300
2085
|
| `.pf-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
|
|
@@ -2322,4 +2107,3 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2322
2107
|
| `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
|
|
2323
2108
|
| `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
|
|
2324
2109
|
| `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
|
|
2325
|
-
| `.pf-m-in-progress` | `.pf-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |
|
|
@@ -233,4 +233,3 @@ When using the `.pf-c-input-group` always ensure labels are used outside the inp
|
|
|
233
233
|
| `.pf-c-input-group__text` | `<span>` | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
|
|
234
234
|
| `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
|
|
235
235
|
| `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
|
|
236
|
-
| `.pf-m-disabled` | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group. |
|