Add spinner pattern and Spinner component
#132
Conversation
| @@ -0,0 +1,76 @@ | |||
| // CSS Spinner modified from http://dabblet.com/gist/7615212 | |||
There was a problem hiding this comment.
Pretty much a direct c-n-p from the client.
src/components/Spinner.js
Outdated
| */ | ||
| export function Spinner({ classes = '' }) { | ||
| return ( | ||
| <span className={classnames('Hyp-Spinner', classes)}> |
There was a problem hiding this comment.
Currently LMS uses an SVG. I don't have a strong preference for either, but I think the svg was added after the css spinner in the client. We could discuss tomorrow and pick one or othe other and then replace as we move forward.
|
@LMS007 Wow, I'm so glad you pointed the SVG implementation out from LMS! That is dead simple implementation; let me poke around and see if it can work for our needs. I tend to find the client one more visually attractive—that's why I used it here—but it was daft of me to not at least take a look at the |
Need the recently-added `math.div` function for `spinner` styling.
Codecov Report
@@ Coverage Diff @@
## main #132 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 10 11 +1
Lines 134 138 +4
Branches 41 42 +1
=========================================
+ Hits 134 138 +4
Continue to review full report at Codecov.
|
|
OK! Reboot! Thank you @LMS007 for the heads up; I've opted for the much simpler LMS variant here, which uses an animated SVG. While I'm still not 100% in love with the exact visual styling of the animated SVG per our own design style (p.s. I did take a look at other options in the originating SVG repo and this seemed to be one of the best alternatives). There's nothing wrong with the SVG! I just think the visual style of the (complexly-styled) version in the client is a little more in line with our design language. The good news is that it's dead simple to drop in a different SVG in future if we find or make one that fits our style better! Another argument for centralizing this component... For developer ergonomics, I added, in this latest implementation, a |
| @@ -0,0 +1,36 @@ | |||
| <!-- | |||
yep, I think the size prop is useful, thx |
This PR adds a shared
spinnerpattern and correspondingSpinnercomponent.Motivation: The spinners are styled differently in our applications, and their usage within a single application is also inconsistent. In the immediate term, I'd like to use a loading spinner within a component on LMS, so this feels like the right time to drop this in.
This implementation is copied over from theclient, with a little bit of simplification, and I made theSpinnercomponent take aclassesprop for better developer control.This implementation is a variant of the
lmsSpinner, using an animated SVG.To implement this, I had to update thesassdependency in this package. Needed themath.divfunction. The version here is in line with what theclientandlmshave.The above is no longer the case, since the implementation is SVG-based, but there's no harm in bumping SASS.
This PR currently depends on #131 for my own convenience, but it doesn't strictly need to if that one gets mired.Try it out
On this branch, run
make devand visit the Pattern Library's spinner pattern and Spinner components pages.Screen shot (doesn't show animation):