[Emotion] Convert the rest of the Loading components #5845
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/ |
…ding_content # Conflicts: # src/components/loading/_index.scss
| export const useLoadingAriaLabel = (): string => { | ||
| return useEuiI18n('euiLoadingStrings.ariaLabel', 'Loading'); | ||
| }; |
There was a problem hiding this comment.
Using one i18n string for all loading aria-labels.
| <span className="euiLoadingContent__singleLineBackground" /> | ||
| </span> | ||
| ); | ||
| lineElements.push(<span key={i} css={lineCssStyles} />); |
There was a problem hiding this comment.
I was able to reduce the DOM elements by using pseudo element ::after instead
| // Hide outline mainly for dark mode | ||
| &:nth-of-type(1) { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
This is new and fixes dark mode where the white outline wasn't animating nicely with the rest of the nodes.
**Before **
After
| s: css` | ||
| width: ${euiTheme.size[spinnerSizes.s]}; | ||
| height: ${euiTheme.size[spinnerSizes.s]}; | ||
| border-width: 1.5px; | ||
| `, | ||
| m: css` | ||
| width: ${euiTheme.size[spinnerSizes.m]}; | ||
| height: ${euiTheme.size[spinnerSizes.m]}; | ||
| border-width: 1.5px; | ||
| `, |
There was a problem hiding this comment.
The one change I did here was increate the border-width from 1px to 1.5px to beef up the appearance. This is something we're incrementally doing with our icons.
It's most noticeable in inputs and buttons:
Before
After
| // TODO | ||
| const sizeToClassNameMap = { | ||
| m: 'euiLoadingLogo--medium', |
There was a problem hiding this comment.
I was going to do the same thing here as I did in EuiLoadingSpinner, but I need help with TS syntax.
| * 2. Add a half the amount of animation distance padding to the top to give it more room | ||
| */ | ||
| m: css` | ||
| ${euiCanAnimate} { | ||
| /* 2 */ | ||
| padding-block-start: calc( | ||
| ${euiTheme.size[loadingAnimationDistance.m]} / 2 | ||
| ); | ||
| } |
There was a problem hiding this comment.
I added this no. 2 because the bouncing logos were go way out of their own bounds, so this just adds a bit of separation from it and it's parent.
Before
After
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/ |
| return { | ||
| euiLoadingLogo__icon: css` | ||
| ${euiCanAnimate} { | ||
| animation: 1s ${loadingBounce('m')} ${euiTheme.animation.resistance} |
There was a problem hiding this comment.
This animation is not working. The logos are not bouncing.
Screen.Recording.2022-04-27.at.01.37.54.PM.mp4
There was a problem hiding this comment.
Well this is fun... So on page load, the Emotion component styles will load within the global cache layer. But, the way that dev changes are injected, those styles are appended (comes after the CSS styles). @thompsongl , @chandlerprall I can see this happening a lot where we think something is working while we work on it, but on hard refresh it no longer is because the cascade order has changed.
There was a problem hiding this comment.
The animation should be fixed now :)
There was a problem hiding this comment.
where we think something is working while we work on it, but on hard refresh it no longer is because the cascade order has changed
Hmm I don't have any ideas for this at the moment. It's probably webpack, but I'd need to investigate further.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/ |
|
Jenkins, test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/ |
Includes: EuiLoadingContent, EuiLoadingLogo, EuiLoadingElastic, and EuiLoadingSpinner
See further enhancements described in the comments below...
Checklist
[ ] Props have proper autodocs and playground toggles[ ] Added documentation[ ] Checked Code Sandbox works for any docs examples[ ] Checked for breaking changes and labeled appropriately[ ] Updated the Figma library counterpart