Add label and valueText props to EuiProgress (#3661)

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
 - Added `isClearable` and `placeholder` options to `EuiColorPicker` ([#3689](https://github.com/elastic/eui/pull/3689))
 - Added SASS helper files for EUI theme globals ([#3691](https://github.com/elastic/eui/pull/3691))
+- Add `label`, `labelProps` and `valueText` props to `EuiProgress` ([#3661](https://github.com/elastic/eui/pull/3661))
 
 ## [`26.3.0`](https://github.com/elastic/eui/tree/v26.3.0)
 

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", 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' },
+];
+
+export default () => (
+  <Fragment>
+    <div style={{ maxWidth: 140 }}>
+      {data.map(item => (
+        <>
+          <EuiProgress
+            label={item.label}
+            valueText={true}
+            value={item.value}
+            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={true}
+            value={item.value}
+            max={100}
+            color="primary"
+            size="m"
+          />
+          <EuiSpacer size="s" />
+        </>
+      ))}
+    </div>
+  </Fragment>
+);

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={true}
+  label={label}
+  max={100} 
+/>`;
 
 export const ProgressExample = {
   title: 'Progress',
@@ -139,6 +155,39 @@ export const ProgressExample = {
         </p>
       ),
       demo: <ProgressSizeColor />,
+      snippet: progressSizeColorSnippet,
+    },
+    {
+      title: 'Progress for charts',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: progressChartSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: progressChartHtml,
+        },
+      ],
+      text: (
+        <div>
+          <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. The{' '}
+            <EuiCode>valueText</EuiCode> renders as the same color as the{' '}
+            <strong>EuiProgress</strong>.
+          </p>
+          <p>
+            Setting <EuiCode language="ts">{'valueText={true}'}</EuiCode> will
+            add a % sign next to the<EuiCode>value</EuiCode> passed. If you want
+            to display a custom <EuiCode>valueText</EuiCode>, you can pass a
+            node instead.
+          </p>
+        </div>
+      ),
+      demo: <ProgressChart />,
+      snippet: progressChartSnippet,
     },
   ],
 };

src/components/progress/__snapshots__/progress.test.tsx.snap

@@ -1,7 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiProgress has labelProps 1`] = `
+Array [
+  <div
+    class="euiProgress__data euiProgress__data--secondary"
+  >
+    <span
+      class="euiProgress__valueText"
+    >
+      150
+    </span>
+  </div>,
+  <progress
+    aria-hidden="false"
+    aria-label="aria-label"
+    class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
+    data-test-subj="test subject string"
+    max="100"
+    value="50"
+  />,
+]
+`;
+
 exports[`EuiProgress has max 1`] = `
 <progress
+  aria-hidden="false"
   aria-label="aria-label"
   class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
   data-test-subj="test subject string"
@@ -17,8 +40,36 @@ exports[`EuiProgress has value 1`] = `
 />
 `;
 
+exports[`EuiProgress has valueText and label 1`] = `
+Array [
+  <div
+    class="euiProgress__data euiProgress__data--secondary"
+  >
+    <span
+      class="euiProgress__label"
+    >
+      Label
+    </span>
+    <span
+      class="euiProgress__valueText"
+    >
+      150
+    </span>
+  </div>,
+  <progress
+    aria-hidden="true"
+    aria-label="aria-label"
+    class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
+    data-test-subj="test subject string"
+    max="100"
+    value="50"
+  />,
+]
+`;
+
 exports[`EuiProgress is determinate 1`] = `
 <progress
+  aria-hidden="false"
   aria-label="aria-label"
   class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
   data-test-subj="test subject string"
@@ -42,3 +93,25 @@ exports[`EuiProgress is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiProgress valueText is true 1`] = `
+Array [
+  <div
+    class="euiProgress__data euiProgress__data--secondary"
+  >
+    <span
+      class="euiProgress__valueText"
+    >
+      50%
+    </span>
+  </div>,
+  <progress
+    aria-hidden="false"
+    aria-label="aria-label"
+    class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
+    data-test-subj="test subject string"
+    max="100"
+    value="50"
+  />,
+]
+`;

src/components/progress/_progress.scss

@@ -117,6 +117,12 @@ $euiProgressColors: (
       }
     }
   }
+
+  .euiProgress__data--#{$name} {
+    .euiProgress__valueText {
+      color: $color;
+    }
+  }
 }
 
 @keyframes euiProgress {
@@ -128,3 +134,33 @@ $euiProgressColors: (
     transform: scaleX(1) translateX(100%);
   }
 }
+
+.euiProgress__data {
+  display: flex;
+  justify-content: space-between;
+
+  .euiProgress__label {
+    @include euiTextTruncate;
+    flex-basis: 80%;
+    flex-grow: 1;
+  }
+
+  .euiProgress__valueText {
+    @include euiTextTruncate;
+    margin-left: auto;
+  }
+}
+
+.euiProgress__label,
+.euiProgress__valueText {
+  @include euiText;
+  @include euiFontSize;
+  @include fontSize($euiFontSizeXS);
+}
+
+.euiProgress__data--l {
+  .euiProgress__label,
+  .euiProgress__valueText {
+    @include fontSize($euiFontSizeS);
+  }
+}

src/components/progress/progress.test.tsx

@@ -59,4 +59,40 @@ describe('EuiProgress', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('has valueText and label', () => {
+    const component = render(
+      <EuiProgress
+        valueText="150"
+        label="Label"
+        value={50}
+        max={100}
+        {...requiredProps}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('valueText is true', () => {
+    const component = render(
+      <EuiProgress valueText={true} value={50} max={100} {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('has labelProps', () => {
+    const component = render(
+      <EuiProgress
+        max={100}
+        value={50}
+        labelProps={{ title: 'Custom title' }}
+        valueText="150"
+        {...requiredProps}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });