Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple fix for tuncation and padding of value text #11

Merged

Conversation

cchaos
Copy link

@cchaos cchaos commented Aug 24, 2020

This reverts the need to add a new class to component simply when the label is present. You can easily adjust the styles of an element based on the presence of an element that comes before it with the sibling selector.

.euiProgress__label + .euiProgress__valueText {
  // These styles will only be added to the valueText element
  // if the label is present because it is dependent on being the 
  // next direct sibling of the label
}

This also adjusts how the flex is handled to prioritize the valueText. I know this seems backward because the more important piece of data is the label. However, for the use case of this particular instnace, I'm expecting engineers to have control over the size of the value by rounding and such, but they most likely won't have control over the label. So if they see there is like 18 decimals attached to the percentage forcing it to grow so wide the label falls off, they should be able to do Math.round(value) before passing it in.

Before

Screen Shot 2020-08-24 at 18 19 26 PM

After

Screen Shot 2020-08-24 at 18 19 35 PM

@andreadelrio andreadelrio merged commit 175ec74 into andreadelrio:expression-styles Aug 25, 2020
@cchaos cchaos deleted the ad/expression-styles branch August 25, 2020 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants