Fix EuiProgress styles

[andreadelrio]

Summary

I tried to implement the new EuiProgress props into Kibana (Lens/Discover sidebars) and run into some small styling issues. See:

What I'm proposing is to add an extra class for when euiProgress__data has a label to apply different styling.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
  - [ ] Props have proper autodocs
  - [ ] Added documentation
  - [ ] Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

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

[cchaos]

The good thing is that I'm not seeing any differences between the old and new versions. Though I am slightly confused as to why you were getting such a different render in Kibana. The Kibana version looks like it just wasn't handling the truncation properly?

Could you copy/paste what the DOM render looks like on the Kibana side? Just to see what the configuration is over there and why it ended up so different. My main concern is just that negative margin. We've already seen this break other components like EuiFacetGroup.

[andreadelrio]

Could you copy/paste what the DOM render looks like on the Kibana side? Just to see what the configuration is over there and why it ended up so different. My main concern is just that negative margin. We've already seen this break other components like EuiFacetGroup.

@cchaos Not sure if this is what you meant but

1. Custom implementation using EuiFlexGroup and EuiFlexItem (what we currently have in Kibana). Progress + label/value in one FlexItem (which in turns contains a FlexGroup). Filter icons in another FlexItem (not shown in the screenshot below).
   
   file: https://github.com/elastic/kibana/blob/master/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx#L51

2. DOM render with current EuiProgress
   

[andreadelrio]

@cchaos thanks for your PR, just merged it. Just one question, what are tabular numbers?

Also I added margin-left: auto; back for valueText for the case when there are no labels.

[kibanamachine]

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

[cchaos]

Essentially tabular numbers makes the numbers of a font behave almost like they are a monospace font so that when they are lined up in a column, they align better. Here's a screenshot of how it's supposed to behave with Inter. As I mentioned in the meeting, however, this is not currently working with the Google font. So I'll have to explore that later.

[cchaos]

👍 Changes LGTM. I think this solution is he best situation we can get to while enforcing consumers to modify their values to ensure proper display.

[andreadelrio]

@cchaos Thanks for the explanation! merging now.