kopia lustrzana https://github.com/shoelace-style/shoelace
fix(spinner): fix spinner animation, prevent spinner resize in flex containers (#1787)
rodzic
7891dbef93
commit
d909f4f73d
|
@ -1,6 +1,13 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles.js';
|
||||
|
||||
// Note on flex:none on the :host
|
||||
// Resizing a spinner element using anything but font-size will break the animation
|
||||
// mostly because the animation uses em units. Therefore, if a spinner is used in a flex container,
|
||||
// without flex:none applied, the spinner can grow/shrink and break the animation
|
||||
// flex:none hopes to prevent this by always having the spinner sized according to its actual dimensions
|
||||
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
||||
|
@ -13,6 +20,7 @@ export default css`
|
|||
display: inline-flex;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
|
@ -46,7 +54,7 @@ export default css`
|
|||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
stroke-dasharray: 0.01em, 2.75em;
|
||||
stroke-dasharray: 0.05em, 3em;
|
||||
}
|
||||
|
||||
50% {
|
||||
|
@ -56,7 +64,7 @@ export default css`
|
|||
|
||||
100% {
|
||||
transform: rotate(1080deg);
|
||||
stroke-dasharray: 0.01em, 2.75em;
|
||||
stroke-dasharray: 0.05em, 3em;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -27,5 +27,12 @@ describe('<sl-spinner>', () => {
|
|||
//
|
||||
expect(getComputedStyle(indicator).transform).to.equal('matrix(1, 0, 0, 1, 0, 0)');
|
||||
});
|
||||
|
||||
it('should have flex:none to prevent flex re-sizing', async () => {
|
||||
const spinner = await fixture<SlSpinner>(html` <sl-spinner></sl-spinner> `);
|
||||
|
||||
// 0 0 auto is a comiled value for `none`
|
||||
expect(getComputedStyle(spinner).flex).to.equal('0 0 auto');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Ładowanie…
Reference in New Issue