@patternfly/patternfly 5.0.0-alpha.40 → 5.0.0-alpha.41
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 +4 -4
- package/components/Spinner/spinner.css +0 -129
- package/components/Spinner/spinner.scss +0 -169
- package/docs/components/Button/examples/Button.md +16 -20
- package/docs/components/FileUpload/examples/FileUpload.md +4 -5
- package/docs/components/Menu/examples/Menu.md +10 -5
- package/docs/components/Select/examples/Select.md +4 -5
- package/docs/components/Spinner/examples/Spinner.md +0 -49
- package/docs/demos/Button/examples/Button.md +10 -5
- package/docs/demos/Card/examples/Card.md +30 -15
- package/docs/demos/Dashboard/examples/Dashboard.md +10 -5
- package/docs/demos/Table/examples/Table.md +10 -5
- package/package.json +6 -6
- package/patternfly-no-globals.css +0 -129
- package/patternfly.css +0 -129
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
- This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
|
|
6
6
|
- run `npm install @patternfly/patternfly --save`
|
|
7
7
|
|
|
8
|
-
When you install PatternFly
|
|
8
|
+
When you install PatternFly 5, the package includes:
|
|
9
9
|
|
|
10
10
|
- a single file for the entire compiled library: `node_modules/@patternfly/patternfly/patternfly.css`
|
|
11
11
|
- individual files with each component compiled separately: `node_modules/@patternfly/patternfly/<ComponentName>/styles.css`
|
|
@@ -16,9 +16,9 @@ Any of the files above are meant for use in consuming the library. The recommend
|
|
|
16
16
|
|
|
17
17
|
## Development
|
|
18
18
|
|
|
19
|
-
**PatternFly 5 Development requires Node
|
|
19
|
+
**PatternFly 5 Development requires Node v16.0.0 or greater**
|
|
20
20
|
|
|
21
|
-
To setup the PatternFly
|
|
21
|
+
To setup the PatternFly 5 development environment:
|
|
22
22
|
|
|
23
23
|
- clone the project
|
|
24
24
|
- run `yarn install` from the project root
|
|
@@ -106,7 +106,7 @@ If you have any suggestions about ways that we can improve how we use this tool,
|
|
|
106
106
|
[How do I use CSS variables to customize the library?](https://pf4.patternfly.org/guidelines#variables)
|
|
107
107
|
|
|
108
108
|
#### Browser support
|
|
109
|
-
PatternFly
|
|
109
|
+
PatternFly 5 is supported on the latest two major versions of the following browsers:
|
|
110
110
|
|
|
111
111
|
- Chrome
|
|
112
112
|
- Firefox
|
|
@@ -28,135 +28,6 @@
|
|
|
28
28
|
--pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
span.pf-c-spinner {
|
|
32
|
-
--pf-c-spinner--AnimationDuration: 1.5s;
|
|
33
|
-
--pf-c-spinner--AnimationTimingFunction: cubic-bezier(.77, .005, .315, 1);
|
|
34
|
-
--pf-c-spinner--stroke-width-multiplier: .1;
|
|
35
|
-
--pf-c-spinner--stroke-width: calc(var(--pf-c-spinner--diameter) * var(--pf-c-spinner--stroke-width-multiplier));
|
|
36
|
-
--pf-c-spinner__clipper--Width: var(--pf-c-spinner--diameter);
|
|
37
|
-
--pf-c-spinner__clipper--Height: var(--pf-c-spinner--diameter);
|
|
38
|
-
--pf-c-spinner__clipper--after--BoxShadowColor: var(--pf-c-spinner--Color);
|
|
39
|
-
--pf-c-spinner__clipper--after--Width: var(--pf-c-spinner--diameter);
|
|
40
|
-
--pf-c-spinner__clipper--after--Height: var(--pf-c-spinner--diameter);
|
|
41
|
-
--pf-c-spinner__clipper--after--BoxShadowSpreadRadius: var(--pf-c-spinner--stroke-width);
|
|
42
|
-
--pf-c-spinner__lead-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
|
|
43
|
-
--pf-c-spinner__ball--after--Width: var(--pf-c-spinner--stroke-width);
|
|
44
|
-
--pf-c-spinner__ball--after--Height: var(--pf-c-spinner--stroke-width);
|
|
45
|
-
--pf-c-spinner__tail-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
|
|
46
|
-
position: relative;
|
|
47
|
-
display: inline-block;
|
|
48
|
-
text-align: left;
|
|
49
|
-
animation: pf-animation-spinner-parent calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@keyframes pf-animation-spinner-parent {
|
|
53
|
-
0% {
|
|
54
|
-
transform: rotate(0deg);
|
|
55
|
-
}
|
|
56
|
-
50% {
|
|
57
|
-
transform: rotate(540deg);
|
|
58
|
-
}
|
|
59
|
-
100% {
|
|
60
|
-
transform: rotate(1080deg);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
.pf-c-spinner__clipper {
|
|
64
|
-
position: absolute;
|
|
65
|
-
width: var(--pf-c-spinner__clipper--Width);
|
|
66
|
-
height: var(--pf-c-spinner__clipper--Height);
|
|
67
|
-
clip-path: inset(0 0 50% 50%);
|
|
68
|
-
animation: pf-animation-spinner__clipper var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
@keyframes pf-animation-spinner__clipper {
|
|
72
|
-
0% {
|
|
73
|
-
transform: rotate(90deg);
|
|
74
|
-
}
|
|
75
|
-
100% {
|
|
76
|
-
transform: rotate(360deg);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
.pf-c-spinner__clipper::after {
|
|
80
|
-
position: absolute;
|
|
81
|
-
width: var(--pf-c-spinner__clipper--after--Width);
|
|
82
|
-
height: var(--pf-c-spinner__clipper--after--Height);
|
|
83
|
-
clip-path: inset(0 0 0 50%);
|
|
84
|
-
content: "";
|
|
85
|
-
border-radius: 50%;
|
|
86
|
-
box-shadow: inset 0 0 0 var(--pf-c-spinner__clipper--after--BoxShadowSpreadRadius) var(--pf-c-spinner__clipper--after--BoxShadowColor);
|
|
87
|
-
animation: pf-animation-spinner__clipper-after var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@keyframes pf-animation-spinner__clipper-after {
|
|
91
|
-
0% {
|
|
92
|
-
transform: rotate(-180deg);
|
|
93
|
-
}
|
|
94
|
-
100% {
|
|
95
|
-
transform: rotate(90deg);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
.pf-c-spinner__lead-ball {
|
|
99
|
-
position: absolute;
|
|
100
|
-
top: 0;
|
|
101
|
-
left: 0;
|
|
102
|
-
width: 100%;
|
|
103
|
-
height: 100%;
|
|
104
|
-
animation: pf-animation-spinner__lead-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
105
|
-
}
|
|
106
|
-
.pf-c-spinner__lead-ball::after {
|
|
107
|
-
position: absolute;
|
|
108
|
-
top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
|
|
109
|
-
right: 0;
|
|
110
|
-
width: var(--pf-c-spinner__ball--after--Width);
|
|
111
|
-
height: var(--pf-c-spinner__ball--after--Height);
|
|
112
|
-
content: "";
|
|
113
|
-
background-color: var(--pf-c-spinner__lead-ball--after--BackgroundColor);
|
|
114
|
-
border-radius: 50%;
|
|
115
|
-
transform-origin: top right;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
@keyframes pf-animation-spinner__lead-ball {
|
|
119
|
-
0% {
|
|
120
|
-
transform: rotate(0deg);
|
|
121
|
-
}
|
|
122
|
-
33% {
|
|
123
|
-
transform: rotate(180deg);
|
|
124
|
-
}
|
|
125
|
-
100% {
|
|
126
|
-
transform: rotate(360deg);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
.pf-c-spinner__tail-ball {
|
|
130
|
-
position: absolute;
|
|
131
|
-
top: 0;
|
|
132
|
-
left: 0;
|
|
133
|
-
width: 100%;
|
|
134
|
-
height: 100%;
|
|
135
|
-
animation: pf-animation-spinner__tail-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
136
|
-
}
|
|
137
|
-
.pf-c-spinner__tail-ball::after {
|
|
138
|
-
position: absolute;
|
|
139
|
-
top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
|
|
140
|
-
right: 0;
|
|
141
|
-
width: var(--pf-c-spinner__ball--after--Width);
|
|
142
|
-
height: var(--pf-c-spinner__ball--after--Height);
|
|
143
|
-
content: "";
|
|
144
|
-
background-color: var(--pf-c-spinner__tail-ball--after--BackgroundColor);
|
|
145
|
-
border-radius: 50%;
|
|
146
|
-
transform-origin: top right;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
@keyframes pf-animation-spinner__tail-ball {
|
|
150
|
-
0% {
|
|
151
|
-
transform: rotate(0deg);
|
|
152
|
-
}
|
|
153
|
-
66% {
|
|
154
|
-
transform: rotate(180deg);
|
|
155
|
-
}
|
|
156
|
-
100% {
|
|
157
|
-
transform: rotate(360deg);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
31
|
svg.pf-c-spinner {
|
|
161
32
|
--pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
|
|
162
33
|
--pf-c-spinner--AnimationDuration: 1.4s;
|
|
@@ -41,175 +41,6 @@
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
// stylelint-disable selector-no-qualifying-type
|
|
45
|
-
span.pf-c-spinner {
|
|
46
|
-
--pf-c-spinner--AnimationDuration: 1.5s;
|
|
47
|
-
--pf-c-spinner--AnimationTimingFunction: cubic-bezier(.77, .005, .315, 1);
|
|
48
|
-
|
|
49
|
-
// These conceptual variables are used to size the stroke width, which is accomplished using various properties in the clipper:after and the ball animations
|
|
50
|
-
--pf-c-spinner--stroke-width-multiplier: .1;
|
|
51
|
-
--pf-c-spinner--stroke-width: calc(var(--pf-c-spinner--diameter) * var(--pf-c-spinner--stroke-width-multiplier));
|
|
52
|
-
|
|
53
|
-
// Clipper variables
|
|
54
|
-
--pf-c-spinner__clipper--Width: var(--pf-c-spinner--diameter);
|
|
55
|
-
--pf-c-spinner__clipper--Height: var(--pf-c-spinner--diameter);
|
|
56
|
-
|
|
57
|
-
// Clipper:after (circle) values
|
|
58
|
-
--pf-c-spinner__clipper--after--BoxShadowColor: var(--pf-c-spinner--Color);
|
|
59
|
-
--pf-c-spinner__clipper--after--Width: var(--pf-c-spinner--diameter);
|
|
60
|
-
--pf-c-spinner__clipper--after--Height: var(--pf-c-spinner--diameter);
|
|
61
|
-
|
|
62
|
-
// This creates the stroke and needs to match the spinner__ball:after Height and Width
|
|
63
|
-
--pf-c-spinner__clipper--after--BoxShadowSpreadRadius: var(--pf-c-spinner--stroke-width);
|
|
64
|
-
|
|
65
|
-
// Lead ball variables
|
|
66
|
-
--pf-c-spinner__lead-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
|
|
67
|
-
|
|
68
|
-
// These sizes need to match the stroke width, i.e. clipper:after BoxShadowSpreadRadius
|
|
69
|
-
--pf-c-spinner__ball--after--Width: var(--pf-c-spinner--stroke-width);
|
|
70
|
-
--pf-c-spinner__ball--after--Height: var(--pf-c-spinner--stroke-width);
|
|
71
|
-
|
|
72
|
-
// Tail ball variables
|
|
73
|
-
--pf-c-spinner__tail-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
|
|
74
|
-
|
|
75
|
-
position: relative;
|
|
76
|
-
display: inline-block;
|
|
77
|
-
text-align: left;
|
|
78
|
-
animation: pf-animation-spinner-parent calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
|
|
79
|
-
}
|
|
80
|
-
// stylelint-enable
|
|
81
|
-
|
|
82
|
-
// Rotate the parent 360deg as the basic line animation happens, repeat that twice, and another rotation overall. This adds up to 3 complete rotations.
|
|
83
|
-
@keyframes pf-animation-spinner-parent {
|
|
84
|
-
0% {
|
|
85
|
-
transform: rotate(0deg);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
50% {
|
|
89
|
-
transform: rotate(540deg);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
100% {
|
|
93
|
-
transform: rotate(1080deg);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// Clipper is a rotating rectangle clipped to one quarter the size of the spinner, starting in the upper right
|
|
98
|
-
.pf-c-spinner__clipper {
|
|
99
|
-
position: absolute;
|
|
100
|
-
width: var(--pf-c-spinner__clipper--Width);
|
|
101
|
-
height: var(--pf-c-spinner__clipper--Height);
|
|
102
|
-
clip-path: inset(0 0 50% 50%);
|
|
103
|
-
animation: pf-animation-spinner__clipper var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
@keyframes pf-animation-spinner__clipper {
|
|
107
|
-
0% {
|
|
108
|
-
transform: rotate(90deg);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
100% {
|
|
112
|
-
transform: rotate(360deg);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
// The :after of the Clipper is a rotating semicircle that has the part that you see moving around (inset box shadow), growing and shrinking because it is moving into and out of the Clipper box
|
|
117
|
-
.pf-c-spinner__clipper::after {
|
|
118
|
-
position: absolute;
|
|
119
|
-
width: var(--pf-c-spinner__clipper--after--Width);
|
|
120
|
-
height: var(--pf-c-spinner__clipper--after--Height);
|
|
121
|
-
clip-path: inset(0 0 0 50%);
|
|
122
|
-
content: "";
|
|
123
|
-
border-radius: 50%;
|
|
124
|
-
box-shadow: inset 0 0 0 var(--pf-c-spinner__clipper--after--BoxShadowSpreadRadius) var(--pf-c-spinner__clipper--after--BoxShadowColor);
|
|
125
|
-
animation: pf-animation-spinner__clipper-after var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
// The Clipper:after moves rotates 270deg in relation to its parent (so that it appears to grow and then shrink)
|
|
129
|
-
@keyframes pf-animation-spinner__clipper-after {
|
|
130
|
-
0% {
|
|
131
|
-
transform: rotate(-180deg);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
100% {
|
|
135
|
-
transform: rotate(90deg);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
// The Lead ball is at the front of the stroke to round out the leading end
|
|
140
|
-
.pf-c-spinner__lead-ball {
|
|
141
|
-
position: absolute;
|
|
142
|
-
top: 0;
|
|
143
|
-
left: 0;
|
|
144
|
-
width: 100%;
|
|
145
|
-
height: 100%;
|
|
146
|
-
animation: pf-animation-spinner__lead-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
147
|
-
|
|
148
|
-
&::after {
|
|
149
|
-
position: absolute;
|
|
150
|
-
top: calc(50% - (var(--pf-c-spinner__ball--after--Height) / 2));
|
|
151
|
-
right: 0;
|
|
152
|
-
width: var(--pf-c-spinner__ball--after--Width);
|
|
153
|
-
height: var(--pf-c-spinner__ball--after--Height);
|
|
154
|
-
content: "";
|
|
155
|
-
background-color: var(--pf-c-spinner__lead-ball--after--BackgroundColor);
|
|
156
|
-
border-radius: 50%;
|
|
157
|
-
transform-origin: top right;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// The Lead ball rotates to match the line that grows and shrinks - first following the Clipper:after and then the Clipper itself.
|
|
162
|
-
@keyframes pf-animation-spinner__lead-ball {
|
|
163
|
-
0% {
|
|
164
|
-
transform: rotate(0deg);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
33% {
|
|
168
|
-
transform: rotate(180deg);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
100% {
|
|
172
|
-
transform: rotate(360deg);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
// The tail ball is at the end of the stroke to round out the tail end
|
|
177
|
-
.pf-c-spinner__tail-ball {
|
|
178
|
-
position: absolute;
|
|
179
|
-
top: 0;
|
|
180
|
-
left: 0;
|
|
181
|
-
width: 100%;
|
|
182
|
-
height: 100%;
|
|
183
|
-
animation: pf-animation-spinner__tail-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
|
|
184
|
-
|
|
185
|
-
&::after {
|
|
186
|
-
position: absolute;
|
|
187
|
-
top: calc(50% - (var(--pf-c-spinner__ball--after--Height) / 2));
|
|
188
|
-
right: 0;
|
|
189
|
-
width: var(--pf-c-spinner__ball--after--Width);
|
|
190
|
-
height: var(--pf-c-spinner__ball--after--Height);
|
|
191
|
-
content: "";
|
|
192
|
-
background-color: var(--pf-c-spinner__tail-ball--after--BackgroundColor);
|
|
193
|
-
border-radius: 50%;
|
|
194
|
-
transform-origin: top right;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
// The Tail ball rotates to match the tail end of the line that grows and shrinks - first following the Clipper and then the Clipper:after
|
|
199
|
-
@keyframes pf-animation-spinner__tail-ball {
|
|
200
|
-
0% {
|
|
201
|
-
transform: rotate(0deg);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
66% {
|
|
205
|
-
transform: rotate(180deg);
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
100% {
|
|
209
|
-
transform: rotate(360deg);
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
44
|
// stylelint-disable selector-no-qualifying-type
|
|
214
45
|
svg.pf-c-spinner {
|
|
215
46
|
--pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
|
|
@@ -368,15 +368,14 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
368
368
|
type="button"
|
|
369
369
|
>
|
|
370
370
|
<span class="pf-c-button__progress">
|
|
371
|
-
<
|
|
371
|
+
<svg
|
|
372
372
|
class="pf-c-spinner pf-m-md"
|
|
373
373
|
role="progressbar"
|
|
374
|
+
viewBox="0 0 100 100"
|
|
374
375
|
aria-label="Loading..."
|
|
375
376
|
>
|
|
376
|
-
<
|
|
377
|
-
|
|
378
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
379
|
-
</span>
|
|
377
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
378
|
+
</svg>
|
|
380
379
|
</span>
|
|
381
380
|
Primary loading
|
|
382
381
|
</button>
|
|
@@ -391,15 +390,14 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
391
390
|
type="button"
|
|
392
391
|
>
|
|
393
392
|
<span class="pf-c-button__progress">
|
|
394
|
-
<
|
|
393
|
+
<svg
|
|
395
394
|
class="pf-c-spinner pf-m-md"
|
|
396
395
|
role="progressbar"
|
|
396
|
+
viewBox="0 0 100 100"
|
|
397
397
|
aria-label="Loading..."
|
|
398
398
|
>
|
|
399
|
-
<
|
|
400
|
-
|
|
401
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
402
|
-
</span>
|
|
399
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
400
|
+
</svg>
|
|
403
401
|
</span>
|
|
404
402
|
Secondary loading
|
|
405
403
|
</button>
|
|
@@ -410,15 +408,14 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
410
408
|
|
|
411
409
|
<button class="pf-c-button pf-m-in-progress pf-m-plain" type="button">
|
|
412
410
|
<span class="pf-c-button__progress">
|
|
413
|
-
<
|
|
411
|
+
<svg
|
|
414
412
|
class="pf-c-spinner pf-m-md"
|
|
415
413
|
role="progressbar"
|
|
414
|
+
viewBox="0 0 100 100"
|
|
416
415
|
aria-label="Uploading..."
|
|
417
416
|
>
|
|
418
|
-
<
|
|
419
|
-
|
|
420
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
421
|
-
</span>
|
|
417
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
418
|
+
</svg>
|
|
422
419
|
</span>
|
|
423
420
|
|
|
424
421
|
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
@@ -434,15 +431,14 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
434
431
|
type="button"
|
|
435
432
|
>
|
|
436
433
|
<span class="pf-c-button__progress">
|
|
437
|
-
<
|
|
434
|
+
<svg
|
|
438
435
|
class="pf-c-spinner pf-m-inline"
|
|
439
436
|
role="progressbar"
|
|
437
|
+
viewBox="0 0 100 100"
|
|
440
438
|
aria-label="Loading..."
|
|
441
439
|
>
|
|
442
|
-
<
|
|
443
|
-
|
|
444
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
445
|
-
</span>
|
|
440
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
441
|
+
</svg>
|
|
446
442
|
</span>
|
|
447
443
|
Inline loading
|
|
448
444
|
</button>
|
|
@@ -275,15 +275,14 @@ cssPrefix: pf-c-file-upload
|
|
|
275
275
|
</textarea>
|
|
276
276
|
|
|
277
277
|
<div class="pf-c-file-upload__file-details-spinner">
|
|
278
|
-
<
|
|
278
|
+
<svg
|
|
279
279
|
class="pf-c-spinner pf-m-lg"
|
|
280
280
|
role="progressbar"
|
|
281
|
+
viewBox="0 0 100 100"
|
|
281
282
|
aria-label="Loading..."
|
|
282
283
|
>
|
|
283
|
-
<
|
|
284
|
-
|
|
285
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
286
|
-
</span>
|
|
284
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
285
|
+
</svg>
|
|
287
286
|
</div>
|
|
288
287
|
</div>
|
|
289
288
|
</div>
|
|
@@ -5713,15 +5713,20 @@ cssPrefix: pf-c-menu
|
|
|
5713
5713
|
</a>
|
|
5714
5714
|
</li>
|
|
5715
5715
|
<li class="pf-c-menu__list-item pf-m-loading" role="none">
|
|
5716
|
-
<
|
|
5716
|
+
<svg
|
|
5717
5717
|
class="pf-c-spinner pf-m-lg"
|
|
5718
5718
|
role="progressbar"
|
|
5719
|
+
viewBox="0 0 100 100"
|
|
5719
5720
|
aria-label="Loading items"
|
|
5720
5721
|
>
|
|
5721
|
-
<
|
|
5722
|
-
|
|
5723
|
-
|
|
5724
|
-
|
|
5722
|
+
<circle
|
|
5723
|
+
class="pf-c-spinner__path"
|
|
5724
|
+
cx="50"
|
|
5725
|
+
cy="50"
|
|
5726
|
+
r="45"
|
|
5727
|
+
fill="none"
|
|
5728
|
+
/>
|
|
5729
|
+
</svg>
|
|
5725
5730
|
</li>
|
|
5726
5731
|
</ul>
|
|
5727
5732
|
</div>
|
|
@@ -3105,15 +3105,14 @@ The plain select variation should be used when you do not want a border applied
|
|
|
3105
3105
|
<button class="pf-c-select__menu-item" role="option">Needs maintenance</button>
|
|
3106
3106
|
</li>
|
|
3107
3107
|
<li role="presentation" class="pf-c-select__list-item pf-m-loading">
|
|
3108
|
-
<
|
|
3108
|
+
<svg
|
|
3109
3109
|
class="pf-c-spinner pf-m-lg"
|
|
3110
3110
|
role="progressbar"
|
|
3111
|
+
viewBox="0 0 100 100"
|
|
3111
3112
|
aria-label="Loading items"
|
|
3112
3113
|
>
|
|
3113
|
-
<
|
|
3114
|
-
|
|
3115
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
3116
|
-
</span>
|
|
3114
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
3115
|
+
</svg>
|
|
3117
3116
|
</li>
|
|
3118
3117
|
</ul>
|
|
3119
3118
|
</div>
|
|
@@ -90,46 +90,6 @@ An inline spinner inherits its font-size, so its size will match the content aro
|
|
|
90
90
|
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
### Basic (legacy)
|
|
94
|
-
|
|
95
|
-
```html
|
|
96
|
-
<span class="pf-c-spinner" role="progressbar" aria-label="Loading...">
|
|
97
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
98
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
99
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
100
|
-
</span>
|
|
101
|
-
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
### Sizes (legacy)
|
|
105
|
-
|
|
106
|
-
```html
|
|
107
|
-
<span class="pf-c-spinner pf-m-sm" role="progressbar" aria-label="Loading...">
|
|
108
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
109
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
110
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
111
|
-
</span>
|
|
112
|
-
|
|
113
|
-
<span class="pf-c-spinner pf-m-md" role="progressbar" aria-label="Loading...">
|
|
114
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
115
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
116
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
117
|
-
</span>
|
|
118
|
-
|
|
119
|
-
<span class="pf-c-spinner pf-m-lg" role="progressbar" aria-label="Loading...">
|
|
120
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
121
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
122
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
123
|
-
</span>
|
|
124
|
-
|
|
125
|
-
<span class="pf-c-spinner pf-m-xl" role="progressbar" aria-label="Loading...">
|
|
126
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
127
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
128
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
129
|
-
</span>
|
|
130
|
-
|
|
131
|
-
```
|
|
132
|
-
|
|
133
93
|
## Documentation
|
|
134
94
|
|
|
135
95
|
### Accessibility
|
|
@@ -153,15 +113,6 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
|
|
|
153
113
|
| `.pf-c-spinner__path` | `<circle>` | Creates a spinner circle component. **Required**|
|
|
154
114
|
| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration. |
|
|
155
115
|
|
|
156
|
-
### Usage (legacy)
|
|
157
|
-
|
|
158
|
-
| Class | Applied to | Outcome |
|
|
159
|
-
| -- | -- | -- |
|
|
160
|
-
| `.pf-c-spinner` | `<span>` | Creates a spinner component. The default is an extra large spinner. **Required**|
|
|
161
|
-
| `.pf-c-spinner__clipper` | `<span>` | Creates the spinning line. **Required**|
|
|
162
|
-
| `.pf-c-spinner__lead-ball` | `<span>` | Rounds out the beginning of the spinning line. **Required**|
|
|
163
|
-
| `.pf-c-spinner__tail-ball` | `<span>` | Rounds out the end of the spinning line. **Required**|
|
|
164
|
-
|
|
165
116
|
### Modifiers
|
|
166
117
|
|
|
167
118
|
| Class | Applied to | Outcome |
|
|
@@ -97,15 +97,20 @@ cssPrefix: pf-d-button
|
|
|
97
97
|
type="submit"
|
|
98
98
|
>
|
|
99
99
|
<span class="pf-c-button__progress">
|
|
100
|
-
<
|
|
100
|
+
<svg
|
|
101
101
|
class="pf-c-spinner pf-m-md"
|
|
102
102
|
role="progressbar"
|
|
103
|
+
viewBox="0 0 100 100"
|
|
103
104
|
aria-label="Loading..."
|
|
104
105
|
>
|
|
105
|
-
<
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
106
|
+
<circle
|
|
107
|
+
class="pf-c-spinner__path"
|
|
108
|
+
cx="50"
|
|
109
|
+
cy="50"
|
|
110
|
+
r="45"
|
|
111
|
+
fill="none"
|
|
112
|
+
/>
|
|
113
|
+
</svg>
|
|
109
114
|
</span>
|
|
110
115
|
Linking account
|
|
111
116
|
</button>
|
|
@@ -794,15 +794,20 @@ wrapperTag: div
|
|
|
794
794
|
<span class="pf-c-description-list__text">
|
|
795
795
|
<div class="pf-l-grid">
|
|
796
796
|
<div class="pf-l-grid__item pf-m-3-col">
|
|
797
|
-
<
|
|
797
|
+
<svg
|
|
798
798
|
class="pf-c-spinner pf-m-md"
|
|
799
799
|
role="progressbar"
|
|
800
|
+
viewBox="0 0 100 100"
|
|
800
801
|
aria-label="Loading"
|
|
801
802
|
>
|
|
802
|
-
<
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
803
|
+
<circle
|
|
804
|
+
class="pf-c-spinner__path"
|
|
805
|
+
cx="50"
|
|
806
|
+
cy="50"
|
|
807
|
+
r="45"
|
|
808
|
+
fill="none"
|
|
809
|
+
/>
|
|
810
|
+
</svg>
|
|
806
811
|
</div>
|
|
807
812
|
<div class="pf-l-grid__item pf-m-9-col">
|
|
808
813
|
<h3 class="pf-c-title pf-m-md">Running</h3>
|
|
@@ -846,15 +851,20 @@ wrapperTag: div
|
|
|
846
851
|
<span class="pf-c-description-list__text">
|
|
847
852
|
<div class="pf-l-grid">
|
|
848
853
|
<div class="pf-l-grid__item pf-m-3-col">
|
|
849
|
-
<
|
|
854
|
+
<svg
|
|
850
855
|
class="pf-c-spinner pf-m-md"
|
|
851
856
|
role="progressbar"
|
|
857
|
+
viewBox="0 0 100 100"
|
|
852
858
|
aria-label="Loading"
|
|
853
859
|
>
|
|
854
|
-
<
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
860
|
+
<circle
|
|
861
|
+
class="pf-c-spinner__path"
|
|
862
|
+
cx="50"
|
|
863
|
+
cy="50"
|
|
864
|
+
r="45"
|
|
865
|
+
fill="none"
|
|
866
|
+
/>
|
|
867
|
+
</svg>
|
|
858
868
|
</div>
|
|
859
869
|
<div class="pf-l-grid__item pf-m-9-col">
|
|
860
870
|
<h3 class="pf-c-title pf-m-md">Running</h3>
|
|
@@ -3037,15 +3047,20 @@ wrapperTag: div
|
|
|
3037
3047
|
<dt class="pf-c-description-list__term">
|
|
3038
3048
|
<div class="pf-l-flex pf-m-nowrap">
|
|
3039
3049
|
<div class="pf-l-flex__item">
|
|
3040
|
-
<
|
|
3050
|
+
<svg
|
|
3041
3051
|
class="pf-c-spinner pf-m-md"
|
|
3042
3052
|
role="progressbar"
|
|
3053
|
+
viewBox="0 0 100 100"
|
|
3043
3054
|
aria-label="Loading"
|
|
3044
3055
|
>
|
|
3045
|
-
<
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3056
|
+
<circle
|
|
3057
|
+
class="pf-c-spinner__path"
|
|
3058
|
+
cx="50"
|
|
3059
|
+
cy="50"
|
|
3060
|
+
r="45"
|
|
3061
|
+
fill="none"
|
|
3062
|
+
/>
|
|
3063
|
+
</svg>
|
|
3049
3064
|
</div>
|
|
3050
3065
|
<div class="pf-l-flex__item">Pulling image</div>
|
|
3051
3066
|
</div>
|