Skip to content

Commit

Permalink
fix(spinner): get paused attribute working and update tests
Browse files Browse the repository at this point in the history 
fixes #14811
  • Loading branch information
@brandyscarney
brandyscarney committed Jul 20, 2018
1 parent ba30671 commit 3ab1e2d
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 13 deletions.
12 changes: 8 additions & 4 deletions core/src/components/spinner/spinner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@ svg {
transform: translateZ(0);
}

:host(.spinner-paused) svg {
animation-play-state: paused;
}


// Spinner: lines / lines-small
// --------------------------------------------------
Expand Down Expand Up @@ -96,6 +92,14 @@ svg {
}


// Spinner: paused
// --------------------------------------------------

:host(.spinner-paused) svg {
animation-play-state: paused;
}


// Animation Keyframes
// --------------------------------------------------

Expand Down
2 changes: 1 addition & 1 deletion core/src/components/spinner/spinner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export class Spinner {
...createColorClasses(this.color),

[`spinner-${this.getName()}`]: true,
'spinner-paused': this.paused
'spinner-paused': !!this.paused

This comment has been minimized.

Sign in to view

Copy link
@manucorporat

manucorporat Jul 22, 2018 •
edited
Loading

Contributor

this.paused is should be already a boolean, !! changes nothing, i am not sure i like this kind of defensive programming, we should trust the TS type system and the fact that the stencil's runtime should ensure this prop is always a boolean. If that's not the case, it means there is a bug to fix in the stencil runtime (the root of the problem), this change might just silent an existing bug in another part of the stack.

I have tested, removing !! and it still works fine, I don't understand how this commit is fixing the issue.
}
};
}
Expand Down
43 changes: 35 additions & 8 deletions core/src/components/spinner/test/basic/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,35 +25,62 @@
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small
Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
Crescent
</ion-item>
</ion-list>

<ion-list>
<ion-item>
<ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner
Paused Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines" paused></ion-spinner>
Paused Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small" paused></ion-spinner>
Paused Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots" paused></ion-spinner>
Paused Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles" paused></ion-spinner>
Paused Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles" paused></ion-spinner>
Paused Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent" paused></ion-spinner>
Paused Crescent
</ion-item>
</ion-list>
</ion-content>
Expand Down

0 comments on commit 3ab1e2d

Please sign in to comment.