Timeout and color config, fix dimensions, pull in loaders.css, SSR, currentColor, spinnerName

merrywhether commented 7 years ago

This PR addresses a few issues:

33 : Since the fade in is set as a CSS animation, I couldn't do full configurability, but added 2 smaller intervals of fadeIn timing (half second and quarter second). This includes transitioning away from the noFadeIn prop with a deprecation warning.
37 : This allows colorizing the spinners via props and inline styling for easier use. There were 2 spinners that weren't compatible with this approach because they relied on before/after pseudo-elements, and there are appropriate warnings for people who attempt to do that.
48 : A few of the spinners had misconfigured dimensions on the containing div, resulting in difficulty centering them via flexbox, etc. Their dimensions have been adjusted accordingly.
14 : Pulls in loaders.css for more spinners, with efforts to minimize package size growth. I omitted spinners from that repo that were very similar to pre-existing "native" spinners.
20 / #51 : Made style imports dynamic based on environment variable, allowing server side rendering without lots of hacks. This is similar to react's dynamic behavior based on process.env.PRODUCTION and is a specific enough variable that it shouldn't collide.

Additionally, updated tests, README, and demo site for all new features, and made changes to the test file to appease eslint (change to .jsx, convert tabs to spaces, etc) as well as organizational improvements (describe blocks to group related tests).

All changes were tested inside of a working app for functionality and proper centering alignment.

merrywhether commented 7 years ago

Second commit refactors everything to be classed-divs with anonymous children divs so that code can be DRYed, relying heavily on the suggestion in #27. This should make on-boarding future loader repos easier. Also makes it so that all spinners accept colorization. Additionally, fixed a bug in the CSS for the folding-cube.

Also does a similar thing for the demos page, using iteration to render all spinners (with colored versions too).

merrywhether commented 7 years ago

This also addresses #53 indirectly.

merrywhether commented 7 years ago

Since this represents a lot of changes, pulled in #19 as well, and maybe this could result in a 3.0 release.

KyleAMathews commented 7 years ago

This is awesome! Thanks for giving things a nice cleanup / upgrade! Adding colors support + loaders.css is 💯

Merging and releasing a 3.0.

The next frontier I see for this module is adding tree shaking support. That or perhaps switch to a lerna monorepo approach where there's a package per spinner to keep the size of the package to a minimum.

KyleAMathews / react-spinkit

Timeout and color config, fix dimensions, pull in loaders.css, SSR, currentColor, spinnerName #58

33 : Since the fade in is set as a CSS animation, I couldn't do full configurability, but added 2 smaller intervals of fadeIn timing (half second and quarter second). This includes transitioning away from the `noFadeIn` prop with a deprecation warning.

37 : This allows colorizing the spinners via props and inline styling for easier use. There were 2 spinners that weren't compatible with this approach because they relied on before/after pseudo-elements, and there are appropriate warnings for people who attempt to do that.

48 : A few of the spinners had misconfigured dimensions on the containing div, resulting in difficulty centering them via flexbox, etc. Their dimensions have been adjusted accordingly.

14 : Pulls in loaders.css for more spinners, with efforts to minimize package size growth. I omitted spinners from that repo that were very similar to pre-existing "native" spinners.

20 / #51 : Made style imports dynamic based on environment variable, allowing server side rendering without lots of hacks. This is similar to react's dynamic behavior based on `process.env.PRODUCTION` and is a specific enough variable that it shouldn't collide.

KyleAMathews / react-spinkit

Timeout and color config, fix dimensions, pull in loaders.css, SSR, currentColor, spinnerName #58

33 : Since the fade in is set as a CSS animation, I couldn't do full configurability, but added 2 smaller intervals of fadeIn timing (half second and quarter second). This includes transitioning away from the noFadeIn prop with a deprecation warning.

37 : This allows colorizing the spinners via props and inline styling for easier use. There were 2 spinners that weren't compatible with this approach because they relied on before/after pseudo-elements, and there are appropriate warnings for people who attempt to do that.

48 : A few of the spinners had misconfigured dimensions on the containing div, resulting in difficulty centering them via flexbox, etc. Their dimensions have been adjusted accordingly.

14 : Pulls in loaders.css for more spinners, with efforts to minimize package size growth. I omitted spinners from that repo that were very similar to pre-existing "native" spinners.

20 / #51 : Made style imports dynamic based on environment variable, allowing server side rendering without lots of hacks. This is similar to react's dynamic behavior based on process.env.PRODUCTION and is a specific enough variable that it shouldn't collide.

33 : Since the fade in is set as a CSS animation, I couldn't do full configurability, but added 2 smaller intervals of fadeIn timing (half second and quarter second). This includes transitioning away from the `noFadeIn` prop with a deprecation warning.

20 / #51 : Made style imports dynamic based on environment variable, allowing server side rendering without lots of hacks. This is similar to react's dynamic behavior based on `process.env.PRODUCTION` and is a specific enough variable that it shouldn't collide.