Skip to content

Add Xx-Small variant to Spinner #2477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
interactivellama merged 3 commits into from
Feb 28, 2020
+245 −3
Merged

Add Xx-Small variant to Spinner #2477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b871a68
Add Xx-Small variant to Spinner
garygong Feb 25, 2020
c258aa7
Update snapshots
garygong Feb 25, 2020
5110555
Fix DeepScan warnings
garygong Feb 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions components/component-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15225,6 +15225,10 @@
"type": {
"name": "enum",
"value": [
{
"value": "'xx-small'",
"computed": false
},
{
"value": "'x-small'",
"computed": false
Expand Down
190 changes: 190 additions & 0 deletions components/spinner/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,62 @@ exports[`DOM snapshots SLDSSpinner Brand Small 1`] = `
</div>
`;

exports[`DOM snapshots SLDSSpinner Brand X-Small 1`] = `
<div
className="slds-p-around_medium"
>
<div
className="slds-spinner_container"
>
<div
aria-hidden="false"
className="slds-spinner slds-spinner_brand slds-spinner_x-small"
role="status"
>
<span
className="slds-assistive-text"
>
Loading...
</span>
<div
className="slds-spinner__dot-a"
/>
<div
className="slds-spinner__dot-b"
/>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSSpinner Brand Xx-Small 1`] = `
<div
className="slds-p-around_medium"
>
<div
className="slds-spinner_container"
>
<div
aria-hidden="false"
className="slds-spinner slds-spinner_brand slds-spinner_xx-small"
role="status"
>
<span
className="slds-assistive-text"
>
Loading...
</span>
<div
className="slds-spinner__dot-a"
/>
<div
className="slds-spinner__dot-b"
/>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSSpinner Docs site Default 1`] = `
<div
className="slds-p-around_medium"
Expand Down Expand Up @@ -238,6 +294,84 @@ exports[`DOM snapshots SLDSSpinner Inverse Small 1`] = `
</div>
`;

exports[`DOM snapshots SLDSSpinner Inverse X-Small 1`] = `
<div
className="slds-p-around_medium"
>
<div
style={
Object {
"backgroundColor": "#16325c",
"height": "100%",
"position": "absolute",
"width": "100%",
}
}
>
<div
className="slds-spinner_container"
>
<div
aria-hidden="false"
className="slds-spinner slds-spinner_inverse slds-spinner_x-small"
role="status"
>
<span
className="slds-assistive-text"
>
Loading...
</span>
<div
className="slds-spinner__dot-a"
/>
<div
className="slds-spinner__dot-b"
/>
</div>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSSpinner Inverse Xx-Small 1`] = `
<div
className="slds-p-around_medium"
>
<div
style={
Object {
"backgroundColor": "#16325c",
"height": "100%",
"position": "absolute",
"width": "100%",
}
}
>
<div
className="slds-spinner_container"
>
<div
aria-hidden="false"
className="slds-spinner slds-spinner_inverse slds-spinner_xx-small"
role="status"
>
<span
className="slds-assistive-text"
>
Loading...
</span>
<div
className="slds-spinner__dot-a"
/>
<div
className="slds-spinner__dot-b"
/>
</div>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSSpinner Large 1`] = `
<div
className="slds-p-around_medium"
Expand Down Expand Up @@ -349,3 +483,59 @@ exports[`DOM snapshots SLDSSpinner Small 1`] = `
</div>
</div>
`;

exports[`DOM snapshots SLDSSpinner X-Small 1`] = `
<div
className="slds-p-around_medium"
>
<div
className="slds-spinner_container"
>
<div
aria-hidden="false"
className="slds-spinner slds-spinner_x-small"
role="status"
>
<span
className="slds-assistive-text"
>
Main Frame Loading...
</span>
<div
className="slds-spinner__dot-a"
/>
<div
className="slds-spinner__dot-b"
/>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSSpinner Xx-Small 1`] = `
<div
className="slds-p-around_medium"
>
<div
className="slds-spinner_container"
>
<div
aria-hidden="false"
className="slds-spinner slds-spinner_xx-small"
role="status"
>
<span
className="slds-assistive-text"
>
Main Frame Loading...
</span>
<div
className="slds-spinner__dot-a"
/>
<div
className="slds-spinner__dot-b"
/>
</div>
</div>
</div>
`;
48 changes: 48 additions & 0 deletions components/spinner/__docs__/storybook-stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,24 @@ storiesOf(SPINNER, module)
<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>
</div>
))
.add('Xx-Small', () =>
getSpinner({
size: 'xx-small',
variant: 'base',
assistiveText: {
label: 'Main Frame Loading...',
},
})
)
.add('X-Small', () =>
getSpinner({
size: 'x-small',
variant: 'base',
assistiveText: {
label: 'Main Frame Loading...',
},
})
)
.add('Small', () =>
getSpinner({
size: 'small',
Expand All @@ -45,6 +63,18 @@ storiesOf(SPINNER, module)
variant: 'base',
})
)
.add('Brand Xx-Small', () =>
getSpinner({
size: 'xx-small',
variant: 'brand',
})
)
.add('Brand X-Small', () =>
getSpinner({
size: 'x-small',
variant: 'brand',
})
)
.add('Brand Small', () =>
getSpinner({
size: 'small',
Expand All @@ -71,6 +101,24 @@ storiesOf(SPINNER, module)
isDelayed: true,
})
)
.add(
'Inverse Xx-Small',
() =>
getSpinner({
size: 'xx-small',
variant: 'inverse',
}),
{ decorators: [inverseContainer] }
)
.add(
'Inverse X-Small',
() =>
getSpinner({
size: 'x-small',
variant: 'inverse',
}),
{ decorators: [inverseContainer] }
)
.add(
'Inverse Small',
() =>
Expand Down
2 changes: 1 addition & 1 deletion components/spinner/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const propTypes = {
/**
* Determines the size of the spinner
*/
size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
size: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'medium', 'large']),
/**
* Determines the color of the spinner: `base` is gray, `brand` is blue, and `inverse` is white.
*/
Expand Down
2 changes: 1 addition & 1 deletion utilities/warning/if-one-then-both-required-property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// 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.
import warning from 'warning';

let ifOneThenBothRequiredProperty = function ifOneThenBothRequiredPropertyFunction() {};
let ifOneThenBothRequiredProperty;

if (process.env.NODE_ENV !== 'production') {
const hasWarned = {};
Expand Down
2 changes: 1 addition & 1 deletion utilities/warning/one-of-required-property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// This function will deliver an error message to the browser console when all of the props passed in are undefined (falsey).
import warning from 'warning';

let oneOfRequired = function oneOfRequiredFunction() {};
let oneOfRequired;

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