@patternfly/patternfly 5.0.0-alpha.1 → 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.
- package/RELEASE-NOTES.md +30 -0
- package/base/_common.scss +0 -22
- package/base/patternfly-common.css +0 -10
- package/components/Card/card.css +9 -12
- package/components/Card/card.scss +11 -17
- package/components/ChipGroup/chip-group.css +29 -17
- package/components/ChipGroup/chip-group.scss +39 -22
- package/components/Drawer/drawer.css +0 -1
- package/components/Drawer/drawer.scss +0 -1
- package/components/Dropdown/dropdown.css +15 -0
- package/components/Dropdown/dropdown.scss +20 -0
- package/components/EmptyState/empty-state.css +46 -52
- package/components/EmptyState/empty-state.scss +58 -57
- package/components/FormControl/form-control.css +1 -1
- package/components/FormControl/themes/dark/form-control.scss +1 -1
- package/components/InputGroup/input-group.css +14 -0
- package/components/InputGroup/input-group.scss +9 -0
- package/components/InputGroup/themes/dark/input-group.scss +8 -0
- package/components/LabelGroup/label-group.css +26 -22
- package/components/LabelGroup/label-group.scss +31 -26
- package/components/Menu/menu.css +4 -0
- package/components/Menu/menu.scss +5 -0
- package/components/Pagination/pagination.css +228 -0
- package/components/Pagination/pagination.scss +30 -1
- package/components/Popover/popover.css +1 -6
- package/components/Popover/themes/dark/popover.scss +1 -7
- package/components/Slider/slider.css +0 -7
- package/components/Slider/slider.scss +0 -9
- package/components/Toolbar/toolbar.css +30 -2
- package/components/Toolbar/toolbar.scss +37 -3
- package/components/Tooltip/themes/dark/tooltip.scss +3 -6
- package/components/Tooltip/tooltip.css +2 -5
- package/docs/components/Card/examples/Card.md +61 -44
- package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
- package/docs/components/Dropdown/examples/Dropdown.md +216 -0
- package/docs/components/EmptyState/examples/EmptyState.md +127 -79
- package/docs/components/InputGroup/examples/InputGroup.md +1 -0
- package/docs/components/Pagination/examples/Pagination.md +129 -30
- package/docs/components/Slider/examples/Slider.md +6 -6
- package/docs/components/Tabs/examples/Tabs.md +1 -1
- package/docs/components/Toolbar/examples/Toolbar.md +19 -16
- package/docs/components/Wizard/examples/Wizard.md +4 -7
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/Card/examples/Card.md +144 -109
- package/docs/demos/CardView/examples/CardView.md +1 -3
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
- package/docs/demos/DataList/examples/DataList.md +2 -4
- package/docs/demos/Masthead/examples/Masthead.md +3 -6
- package/docs/demos/Nav/examples/Nav.md +671 -718
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -8
- package/docs/demos/Table/examples/Table.md +18 -32
- package/docs/demos/Tabs/examples/Tabs.md +42 -539
- package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
- package/docs/demos/Wizard/examples/Wizard.md +0 -4
- package/package.json +5 -5
- package/patternfly-base-no-reset.css +0 -10
- package/patternfly-base.css +0 -10
- package/patternfly-no-reset.css +405 -135
- package/patternfly.css +405 -135
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/scss-variables.scss +0 -1
|
@@ -26,12 +26,16 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
|
|
|
26
26
|
|
|
27
27
|
### Modifiers
|
|
28
28
|
|
|
29
|
-
| Class | Applied to
|
|
30
|
-
| ------------------------------------- |
|
|
31
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *`
|
|
32
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *`
|
|
33
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *`
|
|
34
|
-
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *`
|
|
29
|
+
| Class | Applied to | Outcome |
|
|
30
|
+
| ------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
32
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
33
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
34
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
35
|
+
| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
|
|
36
|
+
| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
|
|
37
|
+
| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
|
|
38
|
+
| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
|
|
35
39
|
|
|
36
40
|
### Special notes
|
|
37
41
|
|
|
@@ -489,7 +493,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
489
493
|
role="listbox"
|
|
490
494
|
aria-labelledby="toolbar-toggle-group-example-select-name-label"
|
|
491
495
|
hidden
|
|
492
|
-
style="width: 175px"
|
|
493
496
|
>
|
|
494
497
|
<li role="presentation">
|
|
495
498
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -520,7 +523,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
520
523
|
</li>
|
|
521
524
|
</ul>
|
|
522
525
|
</div>
|
|
523
|
-
<div class="pf-c-text-input-group">
|
|
526
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
524
527
|
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
525
528
|
<span class="pf-c-text-input-group__text">
|
|
526
529
|
<span class="pf-c-text-input-group__icon">
|
|
@@ -810,7 +813,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
810
813
|
role="listbox"
|
|
811
814
|
aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
|
|
812
815
|
hidden
|
|
813
|
-
style="width: 175px"
|
|
814
816
|
>
|
|
815
817
|
<li role="presentation">
|
|
816
818
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -841,7 +843,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
841
843
|
</li>
|
|
842
844
|
</ul>
|
|
843
845
|
</div>
|
|
844
|
-
<div class="pf-c-text-input-group">
|
|
846
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
845
847
|
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
846
848
|
<span class="pf-c-text-input-group__text">
|
|
847
849
|
<span class="pf-c-text-input-group__icon">
|
|
@@ -1192,7 +1194,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1192
1194
|
role="listbox"
|
|
1193
1195
|
aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
|
|
1194
1196
|
hidden
|
|
1195
|
-
style="width: 175px"
|
|
1196
1197
|
>
|
|
1197
1198
|
<li role="presentation">
|
|
1198
1199
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -1223,7 +1224,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1223
1224
|
</li>
|
|
1224
1225
|
</ul>
|
|
1225
1226
|
</div>
|
|
1226
|
-
<div class="pf-c-text-input-group">
|
|
1227
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
1227
1228
|
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
1228
1229
|
<span class="pf-c-text-input-group__text">
|
|
1229
1230
|
<span class="pf-c-text-input-group__icon">
|
|
@@ -1774,7 +1775,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1774
1775
|
role="listbox"
|
|
1775
1776
|
aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
|
|
1776
1777
|
hidden
|
|
1777
|
-
style="width: 175px"
|
|
1778
1778
|
>
|
|
1779
1779
|
<li role="presentation">
|
|
1780
1780
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -1805,7 +1805,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1805
1805
|
</li>
|
|
1806
1806
|
</ul>
|
|
1807
1807
|
</div>
|
|
1808
|
-
<div class="pf-c-text-input-group">
|
|
1808
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
1809
1809
|
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
1810
1810
|
<span class="pf-c-text-input-group__text">
|
|
1811
1811
|
<span class="pf-c-text-input-group__icon">
|
|
@@ -3842,7 +3842,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3842
3842
|
role="listbox"
|
|
3843
3843
|
aria-labelledby="toolbar-expanded-elements-example-select-name-label"
|
|
3844
3844
|
hidden
|
|
3845
|
-
style="width: 175px"
|
|
3846
3845
|
>
|
|
3847
3846
|
<li role="presentation">
|
|
3848
3847
|
<button class="pf-c-select__menu-item" role="option">Running</button>
|
|
@@ -3873,7 +3872,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3873
3872
|
</li>
|
|
3874
3873
|
</ul>
|
|
3875
3874
|
</div>
|
|
3876
|
-
<div class="pf-c-text-input-group">
|
|
3875
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
3877
3876
|
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
3878
3877
|
<span class="pf-c-text-input-group__text">
|
|
3879
3878
|
<span class="pf-c-text-input-group__icon">
|
|
@@ -4219,6 +4218,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4219
4218
|
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4220
4219
|
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4221
4220
|
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4221
|
+
| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
|
|
4222
|
+
| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
|
|
4223
|
+
| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
|
|
4224
|
+
| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
|
|
4222
4225
|
| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
|
|
4223
4226
|
| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
4224
4227
|
| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
|
|
@@ -1214,10 +1214,9 @@ wrapperTag: div
|
|
|
1214
1214
|
<div class="pf-l-bullseye">
|
|
1215
1215
|
<div class="pf-c-empty-state pf-m-lg">
|
|
1216
1216
|
<div class="pf-c-empty-state__content">
|
|
1217
|
-
<
|
|
1218
|
-
class="fas fa- fa-cogs
|
|
1219
|
-
|
|
1220
|
-
></i>
|
|
1217
|
+
<div class="pf-c-empty-state__icon">
|
|
1218
|
+
<i class="fas fa- fa-cogs" aria-hidden="true"></i>
|
|
1219
|
+
</div>
|
|
1221
1220
|
|
|
1222
1221
|
<h1
|
|
1223
1222
|
class="pf-c-title pf-m-lg"
|
|
@@ -1251,9 +1250,7 @@ wrapperTag: div
|
|
|
1251
1250
|
<div
|
|
1252
1251
|
class="pf-c-empty-state__body"
|
|
1253
1252
|
>Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
|
|
1254
|
-
<
|
|
1255
|
-
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
1256
|
-
</div>
|
|
1253
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
1257
1254
|
</div>
|
|
1258
1255
|
</div>
|
|
1259
1256
|
</div>
|
|
@@ -892,7 +892,7 @@ wrapperTag: div
|
|
|
892
892
|
</div>
|
|
893
893
|
</div>
|
|
894
894
|
</section>
|
|
895
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
895
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
896
896
|
<div class="pf-c-page__main-body">
|
|
897
897
|
<div class="pf-l-gallery pf-m-gutter">
|
|
898
898
|
<div class="pf-c-card">
|
|
@@ -2009,7 +2009,7 @@ wrapperTag: div
|
|
|
2009
2009
|
</div>
|
|
2010
2010
|
</div>
|
|
2011
2011
|
</section>
|
|
2012
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
2012
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2013
2013
|
<div class="pf-c-page__main-body">
|
|
2014
2014
|
<div class="pf-l-gallery pf-m-gutter">
|
|
2015
2015
|
<div class="pf-c-card">
|
|
@@ -68,57 +68,59 @@ wrapperTag: div
|
|
|
68
68
|
</ul>
|
|
69
69
|
</div>
|
|
70
70
|
</div>
|
|
71
|
-
<div class="pf-
|
|
72
|
-
<div
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<div class="pf-c-label-
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
<span class="pf-c-
|
|
86
|
-
<span class="pf-c-
|
|
87
|
-
<
|
|
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
|
-
</
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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
|
-
</
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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
|
-
</
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
</
|
|
120
|
-
</
|
|
121
|
-
</
|
|
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
|
-
|
|
197
|
-
|
|
198
|
-
|
|
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
|
-
<
|
|
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">
|
|
@@ -990,7 +996,7 @@ wrapperTag: div
|
|
|
990
996
|
1
|
|
991
997
|
</span>
|
|
992
998
|
</span>
|
|
993
|
-
<span class="pf-c-label pf-m-orange
|
|
999
|
+
<span class="pf-c-label pf-m-orange">
|
|
994
1000
|
<span class="pf-c-label__content">
|
|
995
1001
|
<span class="pf-c-label__icon">
|
|
996
1002
|
<i
|
|
@@ -1183,7 +1189,7 @@ wrapperTag: div
|
|
|
1183
1189
|
1
|
|
1184
1190
|
</span>
|
|
1185
1191
|
</span>
|
|
1186
|
-
<span class="pf-c-label pf-m-orange
|
|
1192
|
+
<span class="pf-c-label pf-m-orange">
|
|
1187
1193
|
<span class="pf-c-label__content">
|
|
1188
1194
|
<span class="pf-c-label__icon">
|
|
1189
1195
|
<i
|
|
@@ -1630,7 +1636,7 @@ wrapperTag: div
|
|
|
1630
1636
|
1
|
|
1631
1637
|
</span>
|
|
1632
1638
|
</span>
|
|
1633
|
-
<span class="pf-c-label pf-m-orange
|
|
1639
|
+
<span class="pf-c-label pf-m-orange">
|
|
1634
1640
|
<span class="pf-c-label__content">
|
|
1635
1641
|
<span class="pf-c-label__icon">
|
|
1636
1642
|
<i
|
|
@@ -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
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
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-
|
|
1942
|
-
<
|
|
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
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
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
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
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
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
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-
|
|
2116
|
-
<
|
|
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-
|
|
2138
|
-
<
|
|
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-
|
|
2241
|
-
<
|
|
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-
|
|
2261
|
-
<
|
|
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-
|
|
2275
|
-
<
|
|
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">
|
|
@@ -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-
|
|
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-
|
|
2674
|
-
<div class="pf-l-
|
|
2675
|
-
<div class="pf-l-
|
|
2676
|
-
<div class="pf-
|
|
2677
|
-
<
|
|
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
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
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
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
|
|
2777
|
-
|
|
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
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
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">
|
|
@@ -1263,9 +1263,7 @@ section: demos
|
|
|
1263
1263
|
<div class="pf-c-empty-state__content">
|
|
1264
1264
|
<i class="fas fa-plus-circle pf-c-empty-state__icon"></i>
|
|
1265
1265
|
<h2 class="pf-c-title pf-m-md">Add a new card to your page</h2>
|
|
1266
|
-
<
|
|
1267
|
-
<button class="pf-c-button pf-m-link" type="button">Add card</button>
|
|
1268
|
-
</div>
|
|
1266
|
+
<button class="pf-c-button pf-m-link" type="button">Add card</button>
|
|
1269
1267
|
</div>
|
|
1270
1268
|
</div>
|
|
1271
1269
|
</div>
|
|
@@ -869,7 +869,6 @@ cssPrefix: pf-d-dashboard
|
|
|
869
869
|
</div>
|
|
870
870
|
</div>
|
|
871
871
|
</section>
|
|
872
|
-
|
|
873
872
|
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
874
873
|
<div class="pf-c-page__main-body">
|
|
875
874
|
<div class="pf-l-grid pf-m-gutter">
|
|
@@ -1345,9 +1344,7 @@ cssPrefix: pf-d-dashboard
|
|
|
1345
1344
|
</span>
|
|
1346
1345
|
</li>
|
|
1347
1346
|
<li class="pf-c-label-group__list-item">
|
|
1348
|
-
<span
|
|
1349
|
-
class="pf-c-label pf-m-orange pf-m-default"
|
|
1350
|
-
>
|
|
1347
|
+
<span class="pf-c-label pf-m-orange">
|
|
1351
1348
|
<span class="pf-c-label__content">
|
|
1352
1349
|
<span class="pf-c-label__icon">
|
|
1353
1350
|
<i
|
|
@@ -3995,7 +3995,6 @@ wrapperTag: div
|
|
|
3995
3995
|
role="listbox"
|
|
3996
3996
|
aria-labelledby="-select-name-label"
|
|
3997
3997
|
hidden
|
|
3998
|
-
style="width: 175px"
|
|
3999
3998
|
>
|
|
4000
3999
|
<li role="presentation">
|
|
4001
4000
|
<button
|
|
@@ -4035,7 +4034,7 @@ wrapperTag: div
|
|
|
4035
4034
|
</li>
|
|
4036
4035
|
</ul>
|
|
4037
4036
|
</div>
|
|
4038
|
-
<div class="pf-c-text-input-group">
|
|
4037
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
4039
4038
|
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
4040
4039
|
<span class="pf-c-text-input-group__text">
|
|
4041
4040
|
<span class="pf-c-text-input-group__icon">
|
|
@@ -6039,7 +6038,6 @@ wrapperTag: div
|
|
|
6039
6038
|
role="listbox"
|
|
6040
6039
|
aria-labelledby="-select-name-label"
|
|
6041
6040
|
hidden
|
|
6042
|
-
style="width: 175px"
|
|
6043
6041
|
>
|
|
6044
6042
|
<li role="presentation">
|
|
6045
6043
|
<button
|
|
@@ -6079,7 +6077,7 @@ wrapperTag: div
|
|
|
6079
6077
|
</li>
|
|
6080
6078
|
</ul>
|
|
6081
6079
|
</div>
|
|
6082
|
-
<div class="pf-c-text-input-group">
|
|
6080
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
6083
6081
|
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
6084
6082
|
<span class="pf-c-text-input-group__text">
|
|
6085
6083
|
<span class="pf-c-text-input-group__icon">
|