Skip to content

Commit ecb0854

Browse files
interactivellamainteractivellama
authored
Merge pull request #2477 from garygong/spinner
Add Xx-Small variant to Spinner
2 parents a8d0a41 + 5110555 commit ecb0854

File tree

6 files changed

+245
-3
lines changed

6 files changed

+245
-3
lines changed

‎components/component-docs.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15225,6 +15225,10 @@
1522515225
"type": {
1522615226
"name": "enum",
1522715227
"value": [
15228+
{
15229+
"value": "'xx-small'",
15230+
"computed": false
15231+
},
1522815232
{
1522915233
"value": "'x-small'",
1523015234
"computed": false

‎components/spinner/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,62 @@ exports[`DOM snapshots SLDSSpinner Brand Small 1`] = `
8484
</div>
8585
`;
8686

87+
exports[`DOM snapshots SLDSSpinner Brand X-Small 1`] = `
88+
<div
89+
className="slds-p-around_medium"
90+
>
91+
<div
92+
className="slds-spinner_container"
93+
>
94+
<div
95+
aria-hidden="false"
96+
className="slds-spinner slds-spinner_brand slds-spinner_x-small"
97+
role="status"
98+
>
99+
<span
100+
className="slds-assistive-text"
101+
>
102+
Loading...
103+
</span>
104+
<div
105+
className="slds-spinner__dot-a"
106+
/>
107+
<div
108+
className="slds-spinner__dot-b"
109+
/>
110+
</div>
111+
</div>
112+
</div>
113+
`;
114+
115+
exports[`DOM snapshots SLDSSpinner Brand Xx-Small 1`] = `
116+
<div
117+
className="slds-p-around_medium"
118+
>
119+
<div
120+
className="slds-spinner_container"
121+
>
122+
<div
123+
aria-hidden="false"
124+
className="slds-spinner slds-spinner_brand slds-spinner_xx-small"
125+
role="status"
126+
>
127+
<span
128+
className="slds-assistive-text"
129+
>
130+
Loading...
131+
</span>
132+
<div
133+
className="slds-spinner__dot-a"
134+
/>
135+
<div
136+
className="slds-spinner__dot-b"
137+
/>
138+
</div>
139+
</div>
140+
</div>
141+
`;
142+
87143
exports[`DOM snapshots SLDSSpinner Docs site Default 1`] = `
88144
<div
89145
className="slds-p-around_medium"
@@ -238,6 +294,84 @@ exports[`DOM snapshots SLDSSpinner Inverse Small 1`] = `
238294
</div>
239295
`;
240296

297+
exports[`DOM snapshots SLDSSpinner Inverse X-Small 1`] = `
298+
<div
299+
className="slds-p-around_medium"
300+
>
301+
<div
302+
style={
303+
Object {
304+
"backgroundColor": "#16325c",
305+
"height": "100%",
306+
"position": "absolute",
307+
"width": "100%",
308+
}
309+
}
310+
>
311+
<div
312+
className="slds-spinner_container"
313+
>
314+
<div
315+
aria-hidden="false"
316+
className="slds-spinner slds-spinner_inverse slds-spinner_x-small"
317+
role="status"
318+
>
319+
<span
320+
className="slds-assistive-text"
321+
>
322+
Loading...
323+
</span>
324+
<div
325+
className="slds-spinner__dot-a"
326+
/>
327+
<div
328+
className="slds-spinner__dot-b"
329+
/>
330+
</div>
331+
</div>
332+
</div>
333+
</div>
334+
`;
335+
336+
exports[`DOM snapshots SLDSSpinner Inverse Xx-Small 1`] = `
337+
<div
338+
className="slds-p-around_medium"
339+
>
340+
<div
341+
style={
342+
Object {
343+
"backgroundColor": "#16325c",
344+
"height": "100%",
345+
"position": "absolute",
346+
"width": "100%",
347+
}
348+
}
349+
>
350+
<div
351+
className="slds-spinner_container"
352+
>
353+
<div
354+
aria-hidden="false"
355+
className="slds-spinner slds-spinner_inverse slds-spinner_xx-small"
356+
role="status"
357+
>
358+
<span
359+
className="slds-assistive-text"
360+
>
361+
Loading...
362+
</span>
363+
<div
364+
className="slds-spinner__dot-a"
365+
/>
366+
<div
367+
className="slds-spinner__dot-b"
368+
/>
369+
</div>
370+
</div>
371+
</div>
372+
</div>
373+
`;
374+
241375
exports[`DOM snapshots SLDSSpinner Large 1`] = `
242376
<div
243377
className="slds-p-around_medium"
@@ -349,3 +483,59 @@ exports[`DOM snapshots SLDSSpinner Small 1`] = `
349483
</div>
350484
</div>
351485
`;
486+
487+
exports[`DOM snapshots SLDSSpinner X-Small 1`] = `
488+
<div
489+
className="slds-p-around_medium"
490+
>
491+
<div
492+
className="slds-spinner_container"
493+
>
494+
<div
495+
aria-hidden="false"
496+
className="slds-spinner slds-spinner_x-small"
497+
role="status"
498+
>
499+
<span
500+
className="slds-assistive-text"
501+
>
502+
Main Frame Loading...
503+
</span>
504+
<div
505+
className="slds-spinner__dot-a"
506+
/>
507+
<div
508+
className="slds-spinner__dot-b"
509+
/>
510+
</div>
511+
</div>
512+
</div>
513+
`;
514+
515+
exports[`DOM snapshots SLDSSpinner Xx-Small 1`] = `
516+
<div
517+
className="slds-p-around_medium"
518+
>
519+
<div
520+
className="slds-spinner_container"
521+
>
522+
<div
523+
aria-hidden="false"
524+
className="slds-spinner slds-spinner_xx-small"
525+
role="status"
526+
>
527+
<span
528+
className="slds-assistive-text"
529+
>
530+
Main Frame Loading...
531+
</span>
532+
<div
533+
className="slds-spinner__dot-a"
534+
/>
535+
<div
536+
className="slds-spinner__dot-b"
537+
/>
538+
</div>
539+
</div>
540+
</div>
541+
`;

‎components/spinner/__docs__/storybook-stories.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,24 @@ storiesOf(SPINNER, module)
2424
<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>
2525
</div>
2626
))
27+
.add('Xx-Small', () =>
28+
getSpinner({
29+
size: 'xx-small',
30+
variant: 'base',
31+
assistiveText: {
32+
label: 'Main Frame Loading...',
33+
},
34+
})
35+
)
36+
.add('X-Small', () =>
37+
getSpinner({
38+
size: 'x-small',
39+
variant: 'base',
40+
assistiveText: {
41+
label: 'Main Frame Loading...',
42+
},
43+
})
44+
)
2745
.add('Small', () =>
2846
getSpinner({
2947
size: 'small',
@@ -45,6 +63,18 @@ storiesOf(SPINNER, module)
4563
variant: 'base',
4664
})
4765
)
66+
.add('Brand Xx-Small', () =>
67+
getSpinner({
68+
size: 'xx-small',
69+
variant: 'brand',
70+
})
71+
)
72+
.add('Brand X-Small', () =>
73+
getSpinner({
74+
size: 'x-small',
75+
variant: 'brand',
76+
})
77+
)
4878
.add('Brand Small', () =>
4979
getSpinner({
5080
size: 'small',
@@ -71,6 +101,24 @@ storiesOf(SPINNER, module)
71101
isDelayed: true,
72102
})
73103
)
104+
.add(
105+
'Inverse Xx-Small',
106+
() =>
107+
getSpinner({
108+
size: 'xx-small',
109+
variant: 'inverse',
110+
}),
111+
{ decorators: [inverseContainer] }
112+
)
113+
.add(
114+
'Inverse X-Small',
115+
() =>
116+
getSpinner({
117+
size: 'x-small',
118+
variant: 'inverse',
119+
}),
120+
{ decorators: [inverseContainer] }
121+
)
74122
.add(
75123
'Inverse Small',
76124
() =>

‎components/spinner/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const propTypes = {
5151
/**
5252
* Determines the size of the spinner
5353
*/
54-
size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
54+
size: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'medium', 'large']),
5555
/**
5656
* Determines the color of the spinner: `base` is gray, `brand` is blue, and `inverse` is white.
5757
*/

‎utilities/warning/if-one-then-both-required-property.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
// This function will deliver an error message to the browser console one property is used but not both that are required. Either use neither or both properties.
77
import warning from 'warning';
88

9-
let ifOneThenBothRequiredProperty = function ifOneThenBothRequiredPropertyFunction() {};
9+
let ifOneThenBothRequiredProperty;
1010

1111
if (process.env.NODE_ENV !== 'production') {
1212
const hasWarned = {};

‎utilities/warning/one-of-required-property.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
// This function will deliver an error message to the browser console when all of the props passed in are undefined (falsey).
77
import warning from 'warning';
88

9-
let oneOfRequired = function oneOfRequiredFunction() {};
9+
let oneOfRequired;
1010

1111
if (process.env.NODE_ENV !== 'production') {
1212
const hasWarned = {};

0 commit comments

Comments
 (0)