[Emotion] Convert the rest of the Loading components by cchaos · Pull Request #5845 · elastic/eui

cchaos · 2022-04-26T18:14:52Z

Includes: EuiLoadingContent, EuiLoadingLogo, EuiLoadingElastic, and EuiLoadingSpinner

See further enhancements described in the comments below...

Checklist

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
[ ] Props have proper autodocs and playground toggles
[ ] Added documentation
~~[ ] Checked Code Sandbox works for any docs examples~~
Added or updated jest and cypress tests
~~[ ] Checked for breaking changes and labeled appropriately~~
Checked for accessibility including keyboard-only and screenreader modes
~~[ ] Updated the Figma library counterpart~~
A changelog entry exists and is marked appropriately

…ng_content

…ding_content

kibanamachine · 2022-04-26T18:43:33Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/

…ding_content # Conflicts: # src/components/loading/_index.scss

cchaos · 2022-04-26T18:25:14Z

src/components/loading/_loading_strings.tsx

+export const useLoadingAriaLabel = (): string => {
+  return useEuiI18n('euiLoadingStrings.ariaLabel', 'Loading');
+};


Using one i18n string for all loading aria-labels.

cchaos · 2022-04-26T18:27:14Z

src/components/loading/loading_content.tsx

-        <span className="euiLoadingContent__singleLineBackground" />
-      </span>
-    );
+    lineElements.push(<span key={i} css={lineCssStyles} />);


I was able to reduce the DOM elements by using pseudo element ::after instead

cchaos · 2022-04-26T18:29:41Z

src/components/loading/loading_elastic.styles.ts

+        // Hide outline mainly for dark mode
+        &:nth-of-type(1) {
+          display: none;
+        }


This is new and fixes dark mode where the white outline wasn't animating nicely with the rest of the nodes.

**Before **

After

src/components/loading/loading_spinner.styles.ts

cchaos · 2022-04-26T18:33:30Z

src/components/loading/loading_spinner.styles.ts

+    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;
+    `,


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

Much better! 😍

src/components/loading/loading_logo.tsx

cchaos · 2022-04-26T18:40:04Z

src/components/loading/loading_logo.tsx

+// TODO
 const sizeToClassNameMap = {
  m: 'euiLoadingLogo--medium',


I was going to do the same thing here as I did in EuiLoadingSpinner, but I need help with TS syntax.

cchaos · 2022-04-26T18:47:33Z

src/components/loading/loading_logo.styles.ts

+     * 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
+        );
+      }


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

kibanamachine · 2022-04-26T20:05:35Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/

elizabetdev

It's looking good but I found one issue.

elizabetdev · 2022-04-27T12:45:28Z

src/components/loading/loading_logo.styles.ts

+  return {
+    euiLoadingLogo__icon: css`
+      ${euiCanAnimate} {
+        animation: 1s ${loadingBounce('m')} ${euiTheme.animation.resistance}


This animation is not working. The logos are not bouncing.

Screen.Recording.2022-04-27.at.01.37.54.PM.mp4

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.

The animation should be fixed now :)

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.

…ding_content

kibanamachine · 2022-04-27T14:55:40Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/

thompsongl

Code LGTM! Just the one change.

src/components/loading/loading_spinner.tsx

elizabetdev

Thanks, @cchaos! Tested again in Chrome, Safari, Firefox, and Edge.

LGTM! 🎉

kibanamachine · 2022-04-27T15:35:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/

cchaos · 2022-04-28T04:22:05Z

Jenkins, test this

kibanamachine · 2022-04-28T04:51:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5845/

cchaos added 12 commits April 19, 2022 23:04

[Emotion] Converted EuiLoadingContent

f6d4e10

[Emotion] Converted EuiLoadingLogo

0e7ee5c

[Emotion] Converted EuiLoadingElastic

39b12d8

Added jest tests for EuiLoadingElastic

b750d1d

[Emotion] Converted EuiLoadingSpinner

bed70dc

more snaps

b64092a

Merge remote-tracking branch origin/main into css-in-js-convert/loadi…

90f0978

…ng_content

Updated to the const verson of euiCanAnimate

b61ab12

Added re-usable useLoadingAriaLabel single string and role attributes

803d0cf

Merge remote-tracking branch 'origin/main' into css-in-js-convert/loa…

8a412d9

…ding_content

Trying TS pattern

4bcf099

Fixed some animated logo affordance and cant animate styles

d620c81

cchaos added 2 commits April 26, 2022 14:49

Merge remote-tracking branch 'origin/main' into css-in-js-convert/loa…

9544c4b

…ding_content # Conflicts: # src/components/loading/_index.scss

Cleanup & CL

de875f6

cchaos commented Apr 26, 2022

View reviewed changes

cchaos marked this pull request as ready for review April 26, 2022 19:37

elizabetdev self-requested a review April 27, 2022 12:08

elizabetdev suggested changes Apr 27, 2022

View reviewed changes

cchaos added 2 commits April 27, 2022 10:02

Merge remote-tracking branch 'origin/main' into css-in-js-convert/loa…

531d25c

…ding_content

Fix logo animation

7f304c2

Fix TS type maps

740df0c

thompsongl approved these changes Apr 27, 2022

View reviewed changes

src/components/loading/loading_spinner.tsx Outdated Show resolved Hide resolved

elizabetdev approved these changes Apr 27, 2022

View reviewed changes

cchaos added 2 commits April 27, 2022 12:26

Cleanup

7619322

[EuiLoadingContent] Fix animation in Safari, but cant fix border-radius

be66bdc

cchaos enabled auto-merge (squash) April 27, 2022 18:30

cchaos merged commit 7eb4fa5 into elastic:main Apr 28, 2022

cchaos mentioned this pull request Apr 29, 2022

[Meta][CSS-in-JS] Component conversions #5685

Closed

49 tasks

breehall mentioned this pull request May 16, 2022

Upgrade EUI to v58.0.0 elastic/kibana#132257

Merged

Conversation

cchaos commented Apr 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Includes: EuiLoadingContent, EuiLoadingLogo, EuiLoadingElastic, and EuiLoadingSpinner

Checklist

Uh oh!

kibanamachine commented Apr 26, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Apr 26, 2022

Uh oh!

elizabetdev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Apr 27, 2022

Uh oh!

thompsongl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elizabetdev left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Apr 27, 2022

Uh oh!

cchaos commented Apr 28, 2022

Uh oh!

kibanamachine commented Apr 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cchaos commented Apr 26, 2022 •

edited

Loading