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 { css } from 'lit';
|
||||||
import componentStyles from '../../styles/component.styles.js';
|
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`
|
export default css`
|
||||||
${componentStyles}
|
${componentStyles}
|
||||||
|
|
||||||
|
@ -13,6 +20,7 @@ export default css`
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
|
flex: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
|
@ -46,7 +54,7 @@ export default css`
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
stroke-dasharray: 0.01em, 2.75em;
|
stroke-dasharray: 0.05em, 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
|
@ -56,7 +64,7 @@ export default css`
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(1080deg);
|
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)');
|
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