Skip to content
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.

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

refactor Spinner, kill SVGSpinner #2477

Merged
merged 4 commits into from
May 8, 2018
Merged

refactor Spinner, kill SVGSpinner #2477

merged 4 commits into from
May 8, 2018

Conversation

giladgray
Copy link
Contributor

@giladgray giladgray commented May 8, 2018

  • refactor Spinner markup considerably:
    • remove all wrapper elements so svg is the root
    • overflow:visible means no need to switch viewBox anymore!
    • animate only the track head path, not the whole thing
  • 🔥 delete SVGSpinner since Spinner can now be used inside an SVG (no DOM elements)
  • 🔥 delete Classes.SPINNER_SVG_CONTAINER and Classes.SVG_SPINNER

Gilad Gray added 3 commits May 8, 2018 11:34
- remove all wrapper elements so svg is the root
- overflow:visible means no need to switch viewBox anymore!
- animate only the track head path, not the whole thing
- add style prop
.#{$ns}-spinner {
@include spinner-size($spinner-width-factor, $spinner-stroke-width, $spinner-speed);
// allow paths to overflow container -- critical for edges of circles!
overflow: visible;
vertical-align: top;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is vertical align necessary? is this going to mess with existing uses?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm good thought. i'll change to middle

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it even needed?

@giladgray
Copy link
Contributor Author

need to add height property to ensure spinner is square

@blueprint-bot
Copy link

vertical-align, set height alongside width

Preview: documentation | landing | table

@@ -193,8 +193,6 @@ export const SPINNER = `${NS}-spinner`;
export const SPINNER_HEAD = `${SPINNER}-head`;
export const SPINNER_NO_SPIN = `${NS}-no-spin`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

while we're at it, thoughts on a better name for this? something more generic like .pt-static maybe? or maybe indeterminate vs determinate loading?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

meh i have no problems with this name. there's also PROGRESS_NO_STRIPES/ANIMATION

<div className={classes}>
<div className={Classes.SPINNER_SVG_CONTAINER}>{content}</div>
</div>
<svg className={classes} viewBox="0 0 100 100">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't fully understand SVG/viewBox and stuff, but it's amazing that you were able to dramatically simplify

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes!!

Copy link
Contributor

@llorca llorca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

design +1, looking great! defer on the implementation

@giladgray giladgray merged commit 21db581 into develop May 8, 2018
@giladgray giladgray deleted the gg/spinner branch May 8, 2018 21:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants