elastic · andreadelrio · Jul 6, 2020 · Jun 24, 2020 · Jun 25, 2020 · Jun 25, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added `gutterSize` prop to `EuiFacetGroup` ([#3639](https://github.com/elastic/eui/pull/3639))
 - Updated props of `EuiCode` and `EuiCodeBlock` to reflect only functional props ([#3647](https://github.com/elastic/eui/pull/3647))
+- Add `label` and `valueText` props to `EuiProgress` ([#3661](https://github.com/elastic/eui/pull/3661))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
@@ -0,0 +1,47 @@
+import React, { Fragment } from 'react';
+
+import { EuiProgress, EuiSpacer } from '../../../../src/components';
+
+const data = [
+  { label: "Men's Clothing", valueText: '80' },
+  { label: "Women's Clothing", valueText: '60' },
+  { label: "Women's Shoes", valueText: '45' },
+  { label: "Men's Shoes", valueText: '40' },
+  { label: "Women's Accessories", valueText: '24' },
+];
+
+export default () => (
+  <Fragment>
+    <div style={{ maxWidth: 140 }}>
+      {data.map(item => (
+        <>
+          <EuiProgress
+            label={item.label}
+            valueText={`${item.valueText}%`}
+            value={item.valueText}
+            max={100}
+            color="secondary"
+            size="s"
+          />
+          <EuiSpacer size="s" />
+        </>
+      ))}
+    </div>
+    <EuiSpacer size="m" />
+    <div style={{ maxWidth: 200 }}>
+      {data.map(item => (
+        <>
+          <EuiProgress
+            label={item.label}
+            valueText={`${item.valueText}%`}
+            value={item.valueText}
+            max={100}
+            color="primary"
+            size="m"
+          />
+          <EuiSpacer size="s" />
+        </>
+      ))}
+    </div>
+  </Fragment>
+);
diff --git a/src-docs/src/views/progress/progress_example.js b/src-docs/src/views/progress/progress_example.js
@@ -30,6 +30,22 @@ const progressFixedSnippet = `<!-- Position at top of parent container -->
 import ProgressSizeColor from './progress_size_color';
 const progressSizeColorSource = require('!!raw-loader!./progress_size_color');
 const progressSizeColorHtml = renderToHtml(ProgressSizeColor);
+const progressSizeColorSnippet = `<EuiProgress
+  value={20}
+  max={100} 
+  size="s"
+  color="accent"
+/>`;
+
+import ProgressChart from './progress_chart';
+const progressChartSource = require('!!raw-loader!./progress_chart');
+const progressChartHtml = renderToHtml(ProgressChart);
+const progressChartSnippet = `<EuiProgress 
+  value={20}
+  valueText={valueText}
+  label={label}
+  max={100} 
+/>`;
 
 export const ProgressExample = {
   title: 'Progress',
@@ -139,6 +155,31 @@ export const ProgressExample = {
         </p>
       ),
       demo: <ProgressSizeColor />,
+      snippet: progressSizeColorSnippet,
+    },
+    {
+      title: 'Progress for charts',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: progressChartSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: progressChartHtml,
+        },
+      ],
+      text: (
+        <p>
+          Determinate progress bar can be used as simple bar charts. Use them
+          with the <EuiCode>label</EuiCode> and <EuiCode>valueText</EuiCode>{' '}
+          props to show the data corresponding to each bar.{' '}
+          <EuiCode>valueText</EuiCode> takes the same color that is passed to{' '}
+          <strong>EuiProgress</strong>.
+        </p>
+      ),
+      demo: <ProgressChart />,
+      snippet: progressChartSnippet,
     },
   ],
 };
diff --git a/src-docs/src/views/progress/progress_size_color.js b/src-docs/src/views/progress/progress_size_color.js
@@ -18,4 +18,4 @@ export default () => (
 
     <EuiProgress value={90} max={100} color="danger" size="l" />
   </div>
-);
+);
diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap
@@ -1,12 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiProgress has max 1`] = `
-<progress
-  aria-label="aria-label"
-  class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
-  data-test-subj="test subject string"
-  max="100"
-/>
+<div>
+  <progress
+    aria-label="aria-label"
+    class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
+    data-test-subj="test subject string"
+    max="100"
+  />
+</div>
 `;
 
 exports[`EuiProgress has value 1`] = `
@@ -17,14 +19,54 @@ exports[`EuiProgress has value 1`] = `
 />
 `;
 
+exports[`EuiProgress has valueText and Label 1`] = `
+<div>
+  <div
+    class="euiProgress__data"
+  >
+    <div
+      class="euiProgress__label"
+    >
+      <div
+        class="euiText euiText--extraSmall eui-textTruncate"
+      >
+        Label
+      </div>
+    </div>
+    <div
+      class="euiProgress__valueText"
+    >
+      <div
+        class="euiText euiText--extraSmall eui-textTruncate"
+      >
+        <div
+          class="euiTextColor euiTextColor--secondary"
+        >
+          50
+        </div>
+      </div>
+    </div>
+  </div>
+  <progress
+    aria-label="aria-label"
+    class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
+    data-test-subj="test subject string"
+    max="100"
+    value="50"
+  />
+</div>
+`;
+
 exports[`EuiProgress is determinate 1`] = `
-<progress
-  aria-label="aria-label"
-  class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
-  data-test-subj="test subject string"
-  max="100"
-  value="50"
-/>
+<div>
+  <progress
+    aria-label="aria-label"
+    class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
+    data-test-subj="test subject string"
+    max="100"
+    value="50"
+  />
+</div>
 `;
 
 exports[`EuiProgress is indeterminate 1`] = `

diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss
@@ -128,3 +128,16 @@ $euiProgressColors: (
     transform: scaleX(1) translateX(100%);
   }
 }
+
+.euiProgress__data {
+  display: flex;
+  justify-content: space-between;
+
+  .euiProgress__label {
+    overflow: hidden;
+  }
+}
+
+.euiProgress__data--primary .euiProgress__valueText {
+  color: $euiColorPrimary;
+}
diff --git a/src/components/progress/progress.test.tsx b/src/components/progress/progress.test.tsx
@@ -59,4 +59,18 @@ describe('EuiProgress', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('has valueText and Label', () => {
+    const component = render(
+      <EuiProgress
+        valueText="50"
+        label="Label"
+        value={50}
+        max={100}
+        {...requiredProps}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
@@ -21,10 +21,12 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
   ProgressHTMLAttributes,
+  ReactNode,
 } from 'react';
 import classNames from 'classnames';
 import { CommonProps, ExclusiveUnion } from '../common';
 import { isNil } from '../../services/predicate';
+import { EuiText } from '../text';
 
 const sizeToClassNameMap = {
   xs: 'euiProgress--xs',
@@ -70,6 +72,8 @@ type Indeterminate = EuiProgressProps & HTMLAttributes<HTMLDivElement>;
 type Determinate = EuiProgressProps &
   ProgressHTMLAttributes<HTMLProgressElement> & {
     max?: number;
+    valueText?: ReactNode;
+    label?: ReactNode;
   };
 
 export const EuiProgress: FunctionComponent<
@@ -80,6 +84,8 @@ export const EuiProgress: FunctionComponent<
   size = 'm',
   position = 'static',
   max,
+  valueText,
+  label,
   value,
   ...rest
 }) => {
@@ -95,17 +101,43 @@ export const EuiProgress: FunctionComponent<
     positionsToClassNameMap[position],
     className
   );
+  const dataClasses = classNames('euiProgress__data', {
+    'euiProgress__data--primary': color === 'primary',
+  });
 
   // Because of a Firefox animation issue, indeterminate progress needs to not use <progress />.
   // See https://css-tricks.com/html5-progress-element/
   if (determinate) {
     return (
-      <progress
-        className={classes}
-        max={max}
-        value={value}
-        {...rest as ProgressHTMLAttributes<HTMLProgressElement>}
-      />
+      <div>
+        {label || valueText ? (
+          <div className={dataClasses}>
+            <div className="euiProgress__label">
+              <EuiText
+                className="eui-textTruncate"
+                size={size === 'l' ? 's' : 'xs'}>
+                {label}
+              </EuiText>
+            </div>
+            <div className="euiProgress__valueText">
+              <EuiText
+                className="eui-textTruncate"
+                size={size === 'l' ? 's' : 'xs'}
+                color={color !== 'primary' ? color : undefined}>
+                {valueText}
+              </EuiText>
+            </div>
+          </div>
+        ) : (
+          undefined
+        )}
+        <progress
+          className={classes}
+          max={max}
+          value={value}
+          {...rest as ProgressHTMLAttributes<HTMLProgressElement>}
+        />
+      </div>
     );
   } else {
     return (
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,4 +18,4 @@ export default () => ( @@
         <EuiProgress value={90} max={100} color="danger" size="l" />
       </div>
-    );
+    );