[Emotion] Convert EuiProgress

[cee-chen]

Summary

Converts EuiProgress to Emotion and removes all Sass variables (no instances of usage in Kibana) and modifier classes (no usages in Kibana). I opted not to remove child euiProgress__data, euiProgress__label, and euiProgress__valueText classes for ease of hooking in for non-Emotion users, but we could easily remove them if we prefer it.

I strongly recommend following along by commit, as I did some clean-up along the way that are noted in commit messages.

Things to look out for when moving styles

• Convert global Sass vars to JS version like sizing
• Convert component-specific Sass vars to exported JS versions
• Convert side specific padding, margin, and position to -inline and -block (Logical properties)
• Use gap property to add margin between items if using flex
• Reduce specificity where possible (usually by reducing class name chaining)
• All animations or transitions are wrapped in euiCanAnimate (preferred euiCantAnimate instead for simplicity)

- [ ] Anything in the backlog that could be a quick fix for that component? Nothing I saw was a quick fix
- [ ] Can any still existing .js files be converted to TS?

QA

• Does the output CSS match the previous CSS / as expected
• Does the rendered class read as expected

[thompsongl]

jenkins test this

[kibanamachine]

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

[cee-chen]

@cchaos and @miukimiu, I wasn't sure if just one or both of you would be interested in reviewing this PR so I tagged both of you, but please feel free to skip if it's just one.

Just to follow up from my demo today on passing props/JS variables to our Emotion styles - for completeness, this approach works well for EuiProgress which mostly handles conditional color CSS, but may not always work for all scenarios/components as Emotion will no longer statically generate all CSS together (conditional CSS is generated separately). This can be seen in the below screenshot, by the two different CSS blocks with the same selector:

I also investigated the nested keys approach (example in prod) that @cchaos mentioned but ended up deciding against it for EuiProgress specifically, for two reasons:

1. It looks like Emotion doesn't output the parent key in its className. In a hello: { world: css`` } } example, the output className becomes css-{hash}-world, and hello isn't used at all. I didn't super love that because EuiProgress does need an actual native and indeterminate class.

2. Using nested keys instead of functions doubled the amount of keys as well in this case:

{
  native: {
     vis0: // etc
     // ... through
     vis9: // etc
  },
  indeterminate: {
     vis0: // etc
     // ... through
     vis9: // etc
  },
}

which felt more repetitive than using JS logic. I'll definitely keep nested keys in mind for future cases however, I think for this specific component a flag just "felt" like it made the code cleaner. (Also we should def document nested keys in our Emotion wiki!)

[kibanamachine]

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

[kibanamachine]

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

[kibanamachine]

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

[elizabetdev]

@constancecchen, now that we're using emotion, is it possible to calculate a high contrast color for the valueText when the color is custom?

[elizabetdev]

LGTM! 🎉

Tested in Chrome, Safari, Edge, and Firefox. I also tested using the playground and looked at the code.

[kibanamachine]

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