@patternfly/patternfly 4.162.2 → 4.164.2
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 +31 -0
- package/components/Dropdown/dropdown.css +4 -4
- package/components/Dropdown/dropdown.scss +11 -8
- package/components/Form/form.css +121 -1
- package/components/Form/form.scss +26 -1
- package/components/MultipleFileUpload/multiple-file-upload.css +180 -0
- package/components/MultipleFileUpload/multiple-file-upload.scss +214 -0
- package/components/Truncate/truncate.css +46 -0
- package/components/Truncate/truncate.scss +56 -0
- package/components/_all.scss +2 -0
- package/docs/components/Dropdown/examples/Dropdown.css +2 -1
- package/docs/components/Dropdown/examples/Dropdown.md +139 -0
- package/docs/components/Form/examples/Form.md +69 -41
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +685 -0
- package/docs/components/Truncate/examples/Truncate.md +71 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +352 -5
- package/patternfly.css +352 -5
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
.pf-c-multiple-file-upload {
|
|
2
|
+
--pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
|
|
3
|
+
--pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
|
|
4
|
+
|
|
5
|
+
// main
|
|
6
|
+
--pf-c-multiple-file-upload__main--TextAlign: center;
|
|
7
|
+
--pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
|
|
8
|
+
--pf-c-multiple-file-upload__main--GridTemplateRows: auto;
|
|
9
|
+
--pf-c-multiple-file-upload__main--GridTemplateAreas:
|
|
10
|
+
"title"
|
|
11
|
+
"upload"
|
|
12
|
+
"info";
|
|
13
|
+
--pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
|
|
14
|
+
--pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
|
|
15
|
+
--pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
|
|
16
|
+
--pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
|
|
17
|
+
--pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
|
|
18
|
+
--pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
19
|
+
--pf-c-multiple-file-upload__main--BorderStyle: dashed;
|
|
20
|
+
--pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
|
|
21
|
+
--pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
22
|
+
|
|
23
|
+
// title
|
|
24
|
+
--pf-c-multiple-file-upload__title--Display: grid;
|
|
25
|
+
--pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
|
|
26
|
+
--pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
|
|
27
|
+
|
|
28
|
+
// title icon
|
|
29
|
+
--pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
|
|
30
|
+
|
|
31
|
+
// title text separator
|
|
32
|
+
--pf-c-multiple-file-upload__title-text-separator--Display: block;
|
|
33
|
+
--pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
|
|
34
|
+
|
|
35
|
+
// info
|
|
36
|
+
--pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
|
|
37
|
+
--pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
|
|
38
|
+
--pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
|
|
39
|
+
|
|
40
|
+
// drag-over
|
|
41
|
+
--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
|
|
42
|
+
--pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
|
|
43
|
+
--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
|
|
44
|
+
--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
|
|
45
|
+
--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
|
|
46
|
+
--pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
|
|
47
|
+
|
|
48
|
+
// horizontal
|
|
49
|
+
--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
|
|
50
|
+
--pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
|
|
51
|
+
--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
|
|
52
|
+
--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
|
|
53
|
+
"title upload"
|
|
54
|
+
"info upload";
|
|
55
|
+
--pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
|
|
56
|
+
--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
|
|
57
|
+
--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
|
|
58
|
+
--pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
|
|
59
|
+
--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
|
|
60
|
+
--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
|
|
61
|
+
--pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
|
|
62
|
+
|
|
63
|
+
// status progress
|
|
64
|
+
--pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
|
|
65
|
+
--pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
|
|
66
|
+
|
|
67
|
+
// status progress icon
|
|
68
|
+
--pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
|
|
69
|
+
|
|
70
|
+
// status item
|
|
71
|
+
--pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
|
|
72
|
+
--pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
|
|
73
|
+
--pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
|
|
74
|
+
--pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
|
|
75
|
+
--pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
|
|
76
|
+
--pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
77
|
+
--pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
|
|
78
|
+
|
|
79
|
+
// status item icon
|
|
80
|
+
--pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
|
|
81
|
+
|
|
82
|
+
// status item close
|
|
83
|
+
--pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
|
84
|
+
|
|
85
|
+
// status item progress
|
|
86
|
+
--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
|
|
87
|
+
--pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
|
|
88
|
+
|
|
89
|
+
// status item progress text
|
|
90
|
+
--pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
|
|
91
|
+
|
|
92
|
+
// status item progress size
|
|
93
|
+
--pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
|
|
94
|
+
|
|
95
|
+
display: grid;
|
|
96
|
+
gap: var(--pf-c-multiple-file-upload--Gap);
|
|
97
|
+
grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
|
|
98
|
+
|
|
99
|
+
&.pf-m-horizontal {
|
|
100
|
+
--pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
|
|
101
|
+
--pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
|
|
102
|
+
--pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
|
|
103
|
+
--pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
|
|
104
|
+
--pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
|
|
105
|
+
--pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
|
|
106
|
+
--pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
|
|
107
|
+
--pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
|
|
108
|
+
--pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
|
|
109
|
+
--pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
|
|
110
|
+
--pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&.pf-m-drag-over {
|
|
114
|
+
--pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
|
|
115
|
+
--pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
|
|
116
|
+
--pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
|
|
117
|
+
--pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
|
|
118
|
+
--pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
|
|
119
|
+
--pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.pf-c-multiple-file-upload__main {
|
|
124
|
+
display: grid;
|
|
125
|
+
padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
|
|
126
|
+
text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
|
|
127
|
+
background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
|
|
128
|
+
border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
|
|
129
|
+
grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
|
|
130
|
+
grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
|
|
131
|
+
grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
|
|
132
|
+
gap: var(--pf-c-multiple-file-upload__main--Gap);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.pf-c-multiple-file-upload__title {
|
|
136
|
+
display: var(--pf-c-multiple-file-upload__title--Display);
|
|
137
|
+
grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
|
|
138
|
+
gap: var(--pf-c-multiple-file-upload__title--Gap);
|
|
139
|
+
grid-area: title;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.pf-c-multiple-file-upload__title-icon {
|
|
143
|
+
color: var(--pf-c-multiple-file-upload__title-icon--Color);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.pf-c-multiple-file-upload__title-text {
|
|
147
|
+
color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.pf-c-multiple-file-upload__title-text-separator {
|
|
151
|
+
display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
|
|
152
|
+
margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.pf-c-multiple-file-upload__upload {
|
|
156
|
+
grid-area: upload;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.pf-c-multiple-file-upload__info {
|
|
160
|
+
grid-area: info;
|
|
161
|
+
margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
|
|
162
|
+
font-size: var(--pf-c-multiple-file-upload__info--FontSize);
|
|
163
|
+
color: var(--pf-c-multiple-file-upload__info--Color);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.pf-c-multiple-file-upload__status,
|
|
167
|
+
.pf-c-multiple-file-upload__status-item-main {
|
|
168
|
+
min-width: 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.pf-c-multiple-file-upload__status-progress {
|
|
172
|
+
display: grid;
|
|
173
|
+
grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
|
|
174
|
+
gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.pf-c-multiple-file-upload__status-progress-icon {
|
|
178
|
+
color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.pf-c-multiple-file-upload__status-item {
|
|
182
|
+
display: grid;
|
|
183
|
+
grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
|
|
184
|
+
gap: var(--pf-c-multiple-file-upload__status-item--Gap);
|
|
185
|
+
padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
|
|
186
|
+
padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
|
|
187
|
+
border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
|
|
188
|
+
|
|
189
|
+
&:first-child {
|
|
190
|
+
--pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.pf-c-multiple-file-upload__status-item-icon {
|
|
195
|
+
color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.pf-c-multiple-file-upload__status-item-close {
|
|
199
|
+
margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.pf-c-multiple-file-upload__status-item-progress {
|
|
203
|
+
display: grid;
|
|
204
|
+
grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
|
|
205
|
+
gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.pf-c-multiple-file-upload__status-item-progress-text {
|
|
209
|
+
color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.pf-c-multiple-file-upload__status-item-progress-size {
|
|
213
|
+
color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
|
|
214
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
.pf-c-truncate {
|
|
2
|
+
--pf-c-truncate--FontSize: 1rem;
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
flex-wrap: nowrap;
|
|
5
|
+
max-width: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.pf-c-truncate__start,
|
|
9
|
+
.pf-c-truncate__end {
|
|
10
|
+
flex-shrink: 1;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
text-overflow: ellipsis;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.pf-c-truncate__end {
|
|
17
|
+
direction: rtl;
|
|
18
|
+
text-align: left;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@supports (text-overflow: "") {
|
|
22
|
+
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
23
|
+
text-overflow: "";
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
@supports not (text-overflow: "") {
|
|
27
|
+
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
28
|
+
font-size: 0;
|
|
29
|
+
}
|
|
30
|
+
.pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
|
|
31
|
+
font-size: var(--pf-c-truncate--FontSize);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
@supports (-webkit-hyphens: none) {
|
|
35
|
+
.pf-c-truncate {
|
|
36
|
+
display: inline-block;
|
|
37
|
+
max-width: 100%;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
text-overflow: ellipsis;
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.pf-c-truncate__end {
|
|
44
|
+
direction: ltr;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
.pf-c-truncate {
|
|
2
|
+
--pf-c-truncate--FontSize: 1rem;
|
|
3
|
+
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
flex-wrap: nowrap;
|
|
6
|
+
max-width: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// Start, end
|
|
10
|
+
.pf-c-truncate__start,
|
|
11
|
+
.pf-c-truncate__end {
|
|
12
|
+
flex-shrink: 1;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
text-overflow: ellipsis;
|
|
15
|
+
white-space: nowrap;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// End
|
|
19
|
+
.pf-c-truncate__end {
|
|
20
|
+
direction: rtl;
|
|
21
|
+
text-align: left;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// text-overflow: <string>
|
|
25
|
+
@supports (text-overflow: "") {
|
|
26
|
+
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
27
|
+
text-overflow: "";
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// text-overflow: ellipsis
|
|
32
|
+
@supports not (text-overflow: "") {
|
|
33
|
+
// Start + end = middle truncation
|
|
34
|
+
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
35
|
+
font-size: 0; // shrink ellipsis size to zero
|
|
36
|
+
|
|
37
|
+
.pf-c-truncate__text {
|
|
38
|
+
font-size: var(--pf-c-truncate--FontSize);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// safari not supported
|
|
44
|
+
@supports (-webkit-hyphens: none) {
|
|
45
|
+
.pf-c-truncate {
|
|
46
|
+
display: inline-block;
|
|
47
|
+
max-width: 100%;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
text-overflow: ellipsis;
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.pf-c-truncate__end {
|
|
54
|
+
direction: ltr;
|
|
55
|
+
}
|
|
56
|
+
}
|
package/components/_all.scss
CHANGED
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
@import "./Menu/menu";
|
|
52
52
|
@import "./MenuToggle/menu-toggle";
|
|
53
53
|
@import "./ModalBox/modal-box";
|
|
54
|
+
@import "./MultipleFileUpload/multiple-file-upload";
|
|
54
55
|
@import "./Nav/nav";
|
|
55
56
|
@import "./NotificationBadge/notification-badge";
|
|
56
57
|
@import "./NotificationDrawer/notification-drawer";
|
|
@@ -83,6 +84,7 @@
|
|
|
83
84
|
@import "./Title/title";
|
|
84
85
|
@import "./ToggleGroup/toggle-group";
|
|
85
86
|
@import "./Tooltip/tooltip";
|
|
87
|
+
@import "./Truncate/truncate";
|
|
86
88
|
@import "./NumberInput/number-input";
|
|
87
89
|
@import "./TreeView/tree-view";
|
|
88
90
|
@import "./Wizard/wizard";
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
#ws-core-c-dropdown-primary-toggle,
|
|
10
10
|
#ws-core-c-dropdown-secondary-toggle,
|
|
11
11
|
#ws-core-c-dropdown-menu-item-icons,
|
|
12
|
-
#ws-core-c-dropdown-aria-disabled-items
|
|
12
|
+
#ws-core-c-dropdown-aria-disabled-items,
|
|
13
|
+
#ws-core-c-dropdown-plain-with-text {
|
|
13
14
|
min-height: 310px;
|
|
14
15
|
}
|
|
15
16
|
|
|
@@ -571,6 +571,144 @@ cssPrefix: pf-c-dropdown
|
|
|
571
571
|
|
|
572
572
|
```
|
|
573
573
|
|
|
574
|
+
### Plain with text
|
|
575
|
+
|
|
576
|
+
```html
|
|
577
|
+
<div class="pf-c-dropdown">
|
|
578
|
+
<button
|
|
579
|
+
class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
|
|
580
|
+
id="plain-with-text-example-disabled-button"
|
|
581
|
+
aria-expanded="false"
|
|
582
|
+
type="button"
|
|
583
|
+
disabled
|
|
584
|
+
>
|
|
585
|
+
<span class="pf-c-dropdown__toggle-text">Custom text</span>
|
|
586
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
587
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
588
|
+
</span>
|
|
589
|
+
</button>
|
|
590
|
+
<ul
|
|
591
|
+
class="pf-c-dropdown__menu"
|
|
592
|
+
aria-labelledby="plain-with-text-example-disabled-button"
|
|
593
|
+
hidden
|
|
594
|
+
>
|
|
595
|
+
<li>
|
|
596
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
597
|
+
</li>
|
|
598
|
+
<li>
|
|
599
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
600
|
+
</li>
|
|
601
|
+
<li>
|
|
602
|
+
<a
|
|
603
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
604
|
+
href="#"
|
|
605
|
+
aria-disabled="true"
|
|
606
|
+
tabindex="-1"
|
|
607
|
+
>Disabled link</a>
|
|
608
|
+
</li>
|
|
609
|
+
<li>
|
|
610
|
+
<button
|
|
611
|
+
class="pf-c-dropdown__menu-item"
|
|
612
|
+
type="button"
|
|
613
|
+
disabled
|
|
614
|
+
>Disabled action</button>
|
|
615
|
+
</li>
|
|
616
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
617
|
+
<li>
|
|
618
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
619
|
+
</li>
|
|
620
|
+
</ul>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="pf-c-dropdown">
|
|
623
|
+
<button
|
|
624
|
+
class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
|
|
625
|
+
id="plain-with-text-example-button"
|
|
626
|
+
aria-expanded="false"
|
|
627
|
+
type="button"
|
|
628
|
+
>
|
|
629
|
+
<span class="pf-c-dropdown__toggle-text">Custom text</span>
|
|
630
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
631
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
632
|
+
</span>
|
|
633
|
+
</button>
|
|
634
|
+
<ul
|
|
635
|
+
class="pf-c-dropdown__menu"
|
|
636
|
+
aria-labelledby="plain-with-text-example-button"
|
|
637
|
+
hidden
|
|
638
|
+
>
|
|
639
|
+
<li>
|
|
640
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
641
|
+
</li>
|
|
642
|
+
<li>
|
|
643
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
644
|
+
</li>
|
|
645
|
+
<li>
|
|
646
|
+
<a
|
|
647
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
648
|
+
href="#"
|
|
649
|
+
aria-disabled="true"
|
|
650
|
+
tabindex="-1"
|
|
651
|
+
>Disabled link</a>
|
|
652
|
+
</li>
|
|
653
|
+
<li>
|
|
654
|
+
<button
|
|
655
|
+
class="pf-c-dropdown__menu-item"
|
|
656
|
+
type="button"
|
|
657
|
+
disabled
|
|
658
|
+
>Disabled action</button>
|
|
659
|
+
</li>
|
|
660
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
661
|
+
<li>
|
|
662
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
663
|
+
</li>
|
|
664
|
+
</ul>
|
|
665
|
+
</div>
|
|
666
|
+
<div class="pf-c-dropdown pf-m-expanded">
|
|
667
|
+
<button
|
|
668
|
+
class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
|
|
669
|
+
id="plain-with-text-example-expanded-button"
|
|
670
|
+
aria-expanded="true"
|
|
671
|
+
type="button"
|
|
672
|
+
>
|
|
673
|
+
<span class="pf-c-dropdown__toggle-text">Custom text (expanded)</span>
|
|
674
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
675
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
676
|
+
</span>
|
|
677
|
+
</button>
|
|
678
|
+
<ul
|
|
679
|
+
class="pf-c-dropdown__menu"
|
|
680
|
+
aria-labelledby="plain-with-text-example-expanded-button"
|
|
681
|
+
>
|
|
682
|
+
<li>
|
|
683
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
684
|
+
</li>
|
|
685
|
+
<li>
|
|
686
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
687
|
+
</li>
|
|
688
|
+
<li>
|
|
689
|
+
<a
|
|
690
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
691
|
+
href="#"
|
|
692
|
+
aria-disabled="true"
|
|
693
|
+
tabindex="-1"
|
|
694
|
+
>Disabled link</a>
|
|
695
|
+
</li>
|
|
696
|
+
<li>
|
|
697
|
+
<button
|
|
698
|
+
class="pf-c-dropdown__menu-item"
|
|
699
|
+
type="button"
|
|
700
|
+
disabled
|
|
701
|
+
>Disabled action</button>
|
|
702
|
+
</li>
|
|
703
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
704
|
+
<li>
|
|
705
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
706
|
+
</li>
|
|
707
|
+
</ul>
|
|
708
|
+
</div>
|
|
709
|
+
|
|
710
|
+
```
|
|
711
|
+
|
|
574
712
|
### Badge toggle
|
|
575
713
|
|
|
576
714
|
```html
|
|
@@ -1794,6 +1932,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
1794
1932
|
| `.pf-m-action` | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
|
|
1795
1933
|
| `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
|
|
1796
1934
|
| `.pf-m-plain` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with no border. |
|
|
1935
|
+
| `.pf-m-text` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle for the text variation. |
|
|
1797
1936
|
| `.pf-m-primary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
|
|
1798
1937
|
| `.pf-m-secondary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
|
|
1799
1938
|
| `.pf-m-full-height` | `.pf-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
|
|
@@ -118,6 +118,34 @@ cssPrefix: pf-c-form
|
|
|
118
118
|
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
+
### Horizontal layout at a custom breakpoint
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<form novalidate class="pf-c-form pf-m-horizontal-on-sm">
|
|
125
|
+
<div class="pf-c-form__group">
|
|
126
|
+
<div class="pf-c-form__group-label">
|
|
127
|
+
<label class="pf-c-form__label" for="form-horizontal-name">
|
|
128
|
+
<span class="pf-c-form__label-text">Name</span>
|
|
129
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
130
|
+
</label>
|
|
131
|
+
<button class="pf-c-form__group-label-help" aria-label="More info">
|
|
132
|
+
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
133
|
+
</button>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="pf-c-form__group-control">
|
|
136
|
+
<input
|
|
137
|
+
class="pf-c-form-control"
|
|
138
|
+
type="text"
|
|
139
|
+
id="form-horizontal-name"
|
|
140
|
+
name="form-horizontal-name"
|
|
141
|
+
required
|
|
142
|
+
/>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</form>
|
|
146
|
+
|
|
147
|
+
```
|
|
148
|
+
|
|
121
149
|
### Form sections
|
|
122
150
|
|
|
123
151
|
```html
|
|
@@ -1119,44 +1147,44 @@ cssPrefix: pf-c-form
|
|
|
1119
1147
|
|
|
1120
1148
|
### Usage
|
|
1121
1149
|
|
|
1122
|
-
| Class
|
|
1123
|
-
|
|
|
1124
|
-
| `.pf-c-form`
|
|
1125
|
-
| `.pf-c-form__section`
|
|
1126
|
-
| `.pf-c-form__section-title`
|
|
1127
|
-
| `.pf-c-form__group`
|
|
1128
|
-
| `.pf-c-form__group-label`
|
|
1129
|
-
| `.pf-c-form__label`
|
|
1130
|
-
| `.pf-c-form__label-text`
|
|
1131
|
-
| `.pf-c-form__label-required`
|
|
1132
|
-
| `.pf-c-form__group-label-main`
|
|
1133
|
-
| `.pf-c-form__group-label-info`
|
|
1134
|
-
| `.pf-c-form__group-label-help`
|
|
1135
|
-
| `.pf-c-form__group-control`
|
|
1136
|
-
| `.pf-c-form__actions`
|
|
1137
|
-
| `.pf-c-form__helper-text`
|
|
1138
|
-
| `.pf-c-form__helper-text-icon`
|
|
1139
|
-
| `.pf-c-form__alert`
|
|
1140
|
-
| `.pf-c-form__field-group`
|
|
1141
|
-
| `.pf-c-form__field-group-toggle`
|
|
1142
|
-
| `.pf-c-form__field-group-toggle-button`
|
|
1143
|
-
| `.pf-c-form__field-group-toggle-icon`
|
|
1144
|
-
| `.pf-c-form__field-group-header`
|
|
1145
|
-
| `.pf-c-form__field-group-header-main`
|
|
1146
|
-
| `.pf-c-form__field-group-header-title`
|
|
1147
|
-
| `.pf-c-form__field-group-header-title-text`
|
|
1148
|
-
| `.pf-c-form__field-group-header-description`
|
|
1149
|
-
| `.pf-c-form__field-group-header-actions`
|
|
1150
|
-
| `.pf-c-form__field-group-body`
|
|
1151
|
-
| `.pf-m-horizontal`
|
|
1152
|
-
| `.pf-m-info`
|
|
1153
|
-
| `.pf-m-action`
|
|
1154
|
-
| `.pf-m-success`
|
|
1155
|
-
| `.pf-m-warning`
|
|
1156
|
-
| `.pf-m-error`
|
|
1157
|
-
| `.pf-m-inactive`
|
|
1158
|
-
| `.pf-m-disabled`
|
|
1159
|
-
| `.pf-m-no-padding-top`
|
|
1160
|
-
| `.pf-m-inline`
|
|
1161
|
-
| `.pf-m-stack`
|
|
1162
|
-
| `.pf-m-expanded`
|
|
1150
|
+
| Class | Applied to | Outcome |
|
|
1151
|
+
| ------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
|
1152
|
+
| `.pf-c-form` | `<form>` | Initiates a standard form. **Required** |
|
|
1153
|
+
| `.pf-c-form__section` | `<div>, <section>` | Initiates a form section. |
|
|
1154
|
+
| `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title. |
|
|
1155
|
+
| `.pf-c-form__group` | `<div>` | Initiates a form group. |
|
|
1156
|
+
| `.pf-c-form__group-label` | `<div>` | Initiates a form group label. |
|
|
1157
|
+
| `.pf-c-form__label` | `<label>`, `<span>` | Initiates a form label. **Required** |
|
|
1158
|
+
| `.pf-c-form__label-text` | `<span>` | Initiates a form label text. **Required** |
|
|
1159
|
+
| `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
|
|
1160
|
+
| `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
|
|
1161
|
+
| `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
|
|
1162
|
+
| `.pf-c-form__group-label-help` | `<button>` | Initiates a field level help button. |
|
|
1163
|
+
| `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
|
|
1164
|
+
| `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
|
|
1165
|
+
| `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
|
|
1166
|
+
| `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon. |
|
|
1167
|
+
| `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
|
|
1168
|
+
| `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
|
|
1169
|
+
| `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
|
|
1170
|
+
| `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
|
|
1171
|
+
| `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
|
|
1172
|
+
| `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
|
|
1173
|
+
| `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
|
|
1174
|
+
| `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
|
|
1175
|
+
| `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
|
|
1176
|
+
| `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
|
|
1177
|
+
| `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
|
|
1178
|
+
| `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
|
|
1179
|
+
| `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
|
|
1180
|
+
| `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
|
|
1181
|
+
| `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
|
|
1182
|
+
| `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
|
|
1183
|
+
| `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
|
|
1184
|
+
| `.pf-m-error` | `.pf-c-form__helper-text` | Modifies text color of helper text for error state. |
|
|
1185
|
+
| `.pf-m-inactive` | `.pf-c-form__helper-text` | Modifies display of helper text to none. |
|
|
1186
|
+
| `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
|
|
1187
|
+
| `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
|
|
1188
|
+
| `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
|
|
1189
|
+
| `.pf-m-stack` | `.pf-c-form__group-control` | Modifies form group children to be stacked with space between children. |
|
|
1190
|
+
| `.pf-m-expanded` | `.pf-c-form__field-group` | Modifies an expandable field group for the expanded state. |
|