This repository has been archived by the owner on Aug 21, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Spinner: Update UI + Add isLoading to Button (V2) (#579)
* Spinner: Refactor + Integrate into Button This update refactors the Spinner component to be an animated SVG, rather than a spinner Icon. It also refactors Spinner with `css.js` and all of the latest HSDS: React conventions. Spinner has also been integrated into components like `Button` under a new `isLoading` prop. * Adjust Button + Loading UI. Add + fix tests * Hide text on isLoading
- Loading branch information
Jon Quach
committed
Apr 18, 2019
1 parent
e513037
commit f690fa5
Showing
16 changed files
with
404 additions
and
162 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import baseStyles from '../../styles/resets/base.css.js' | ||
import styled from '../styled' | ||
|
||
export const config = { | ||
defaultSize: 16, | ||
shades: { | ||
extraMuted: '0.3', | ||
faint: '0.4', | ||
muted: '0.5', | ||
slightlyMuted: '0.6', | ||
subtle: '0.7', | ||
}, | ||
} | ||
|
||
export const SpinnerUI = styled('div')(props => { | ||
const { spinnerSize } = props | ||
|
||
return ` | ||
${baseStyles}; | ||
display: block; | ||
width: ${spinnerSize}px; | ||
height: ${spinnerSize}px; | ||
` | ||
}) | ||
|
||
export const SpinnerSVGUI = styled('svg')(props => { | ||
const { speed, spinnerSize } = props | ||
|
||
return ` | ||
${baseStyles}; | ||
animation: SpinnerUIAnimation ${speed}ms linear infinite; | ||
display: block; | ||
width: ${spinnerSize}px; | ||
height: ${spinnerSize}px; | ||
x: 0px; | ||
y: 0px; | ||
will-change: transform; | ||
@keyframes SpinnerUIAnimation { | ||
100% { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
` | ||
}) | ||
|
||
export const SpinnerCircleUI = styled('circle')(props => { | ||
const { color, shade, isRounded, speed } = props | ||
|
||
const lineCap = isRounded ? 'round' : 'square' | ||
const opacity = config.shades[shade] | ||
|
||
return ` | ||
${baseStyles}; | ||
animation: SpinnerCircleUIAnimation ${speed}ms ease-in-out infinite; | ||
display: block; | ||
fill: transparent; | ||
opacity: ${opacity}; | ||
stroke: ${color}; | ||
stroke-width: 3.6; | ||
stroke-linecap: ${lineCap}; | ||
stroke-dasharray: 80px, 200px; | ||
stroke-dashoffset: 0px; | ||
will-change: transform, stroke-dashoffset; | ||
@keyframes SpinnerCircleUIAnimation { | ||
0% { | ||
stroke-dasharray: 1px, 200px; | ||
stroke-dashoffset: 0px; | ||
opacity: 0; | ||
} | ||
0.1% { | ||
opacity: 1; | ||
} | ||
50% { | ||
stroke-dasharray: 100px, 200px; | ||
stroke-dashoffset: -15px; | ||
} | ||
100% { | ||
stroke-dasharray: 100px, 200px; | ||
stroke-dashoffset: -125px; | ||
} | ||
} | ||
` | ||
}) |
Oops, something went wrong.