Fix EuiProgress styles (#3948)

Co-authored-by: cchaos <[email protected]>
elastic · Aug 25, 2020 · 399883b · 399883b
1 parent b571e6b
commit 399883b
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Fixed bug in `EuiDataGrid` which sometimes prevented header cells from being focusabled ([#3943](https://github.com/elastic/eui/pull/3943))
 - Fixed bug in `EuiFieldSearch` where a default value would not include the clear button ([#3958](https://github.com/elastic/eui/pull/3958))
 - Fixed focus fighting bug when `EuiDataGrid` cell content manages its own popover ([#3951](https://github.com/elastic/eui/pull/3951))
+- Fixed `valueText` getting cut off in `EuiProgress` ([#3948](https://github.com/elastic/eui/pull/3948))
 
 ## [`28.2.0`](https://github.com/elastic/eui/tree/v28.2.0)
 

diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
@@ -3,25 +3,27 @@ import React, { Fragment } from 'react';
 import { EuiProgress, EuiSpacer } from '../../../../src/components';
 
 const data = [
-  { label: "Men's Clothing", value: '80' },
-  { label: "Women's Clothing", value: '60' },
-  { label: "Women's Shoes", value: '45' },
-  { label: "Men's Shoes", value: '40' },
-  { label: "Women's Accessories", value: '24' },
+  { label: 'Basic percentage', value: '80' },
+  {
+    label: 'Long percentage',
+    value: '60.0703850454546453168415365451354641354684531',
+  },
+  { label: 'Another basic percent', value: '45' },
+  { label: 'Custom valueText', value: '40', valueText: <span>4,005,678</span> },
+  { label: "Women's Accessories", value: '24.0256' },
 ];
 
 export default () => (
   <Fragment>
-    <div style={{ maxWidth: 140 }}>
+    <div style={{ maxWidth: 160 }}>
       {data.map(item => (
         <>
           <EuiProgress
-            label={item.label}
             valueText={true}
-            value={item.value}
             max={100}
             color="secondary"
             size="s"
+            {...item}
           />
           <EuiSpacer size="s" />
         </>
@@ -32,12 +34,11 @@ export default () => (
       {data.map(item => (
         <>
           <EuiProgress
-            label={item.label}
             valueText={true}
-            value={item.value}
             max={100}
             color="primary"
             size="m"
+            {...item}
           />
           <EuiSpacer size="s" />
         </>

diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss
@@ -120,7 +120,7 @@ $euiProgressColors: (
 
   .euiProgress__data--#{$name} {
     .euiProgress__valueText {
-      color: $color;
+      color: makeHighContrastColor($color);
     }
   }
 }
@@ -138,29 +138,37 @@ $euiProgressColors: (
 .euiProgress__data {
   display: flex;
   justify-content: space-between;
+}
 
-  .euiProgress__label {
-    @include euiTextTruncate;
-    flex-basis: 80%;
-    flex-grow: 1;
-  }
+.euiProgress__label,
+.euiProgress__valueText {
+  @include euiText;
+  @include euiFontSizeXS;
+  @include euiTextTruncate;
+}
 
-  .euiProgress__valueText {
-    @include euiTextTruncate;
-    margin-left: auto;
+.euiProgress__label {
+  flex-grow: 1;
+
+  // Only restrict the valueText if it's the sibling of the label
+  // Gives width precedence to the value text forcing consumers to round their values
+  + .euiProgress__valueText {
+    padding-left: $euiSizeXS;
+    flex-grow: 1;
+    text-align: right;
+    flex-shrink: 0;
   }
 }
 
-.euiProgress__label,
 .euiProgress__valueText {
-  @include euiText;
-  @include euiFontSize;
-  @include fontSize($euiFontSizeXS);
+  // Tabular numbers ensure the line up nicely when right-aligned
+  font-feature-settings: 'tnum' 1;
+  margin-left: auto;
 }
 
 .euiProgress__data--l {
   .euiProgress__label,
   .euiProgress__valueText {
-    @include fontSize($euiFontSizeS);
+    @include euiFontSizeS;
   }
-}
+}
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
@@ -26,6 +26,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
+import { EuiInnerText } from '../inner_text';
 import { CommonProps, ExclusiveUnion } from '../common';
 import { isNil } from '../../services/predicate';
 
@@ -131,9 +132,9 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
     labelProps && labelProps.className
   );
 
-  let valueRender;
-  if (typeof valueText === 'boolean' && valueText) {
-    // valueText is a true boolean
+  let valueRender: ReactNode;
+  if (valueText === true) {
+    // valueText is true
     valueRender = (
       <EuiI18n
         token="euiProgress.valueText"
@@ -157,12 +158,29 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
         {label || valueText ? (
           <div className={dataClasses}>
             {label && (
-              <span {...labelProps} className={labelClasses}>
-                {label}
-              </span>
+              <EuiInnerText>
+                {(ref, innerText) => (
+                  <span
+                    title={innerText}
+                    ref={ref}
+                    {...labelProps}
+                    className={labelClasses}>
+                    {label}
+                  </span>
+                )}
+              </EuiInnerText>
             )}
             {valueRender && (
-              <span className="euiProgress__valueText">{valueRender}</span>
+              <EuiInnerText>
+                {(ref, innerText) => (
+                  <span
+                    title={innerText}
+                    ref={ref}
+                    className="euiProgress__valueText">
+                    {valueRender}
+                  </span>
+                )}
+              </EuiInnerText>
             )}
           </div>
         ) : (

diff --git a/yarn.lock b/yarn.lock