Add label and valueText props to EuiProgress

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**
 

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={valueText}
+  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.{' '}
+            <EuiCode>valueText</EuiCode> takes the same color that is passed to{' '}
+            <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,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiProgress has labelProps 1`] = `
+Array [
+  <div
+    class="euiProgress__data euiProgress__data--secondary"
+  >
+    <span
+      class="euiProgress__label"
+      title="Custom title"
+    />
+    <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 +44,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"

src/components/progress/_progress.scss

@@ -117,6 +117,12 @@ $euiProgressColors: (
       }
     }
   }
+
+  .euiProgress__data--#{$name} {
+    .euiProgress__valueText {
+      color: $color;
+    }
+  }
 }
 
 @keyframes euiProgress {
@@ -128,3 +134,26 @@ $euiProgressColors: (
     transform: scaleX(1) translateX(100%);
   }
 }
+
+.euiProgress__data {
+  display: flex;
+  justify-content: space-between;
+
+  .euiProgress__label {
+    @include euiTextTruncate;
+  }
+}
+
+.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,32 @@ 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('has labelProps', () => {
+    const component = render(
+      <EuiProgress
+        max={100}
+        value={50}
+        labelProps={{ title: 'Custom title' }}
+        valueText="150"
+        {...requiredProps}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/progress/progress.tsx

@@ -21,8 +21,11 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
   ProgressHTMLAttributes,
+  ReactNode,
+  Fragment,
 } from 'react';
 import classNames from 'classnames';
+import { EuiI18n } from '../i18n';
 import { CommonProps, ExclusiveUnion } from '../common';
 import { isNil } from '../../services/predicate';
 
@@ -49,6 +52,14 @@ export const COLORS = Object.keys(colorToClassNameMap);
 
 export type EuiProgressColor = keyof typeof colorToClassNameMap;
 
+const dataColorToClassNameMap = {
+  primary: 'euiProgress__data--primary',
+  secondary: 'euiProgress__data--secondary',
+  danger: 'euiProgress__data--danger',
+  subdued: 'euiProgress__data--subdued',
+  accent: 'euiProgress__data--accent',
+};
+
 const positionsToClassNameMap = {
   fixed: 'euiProgress--fixed',
   absolute: 'euiProgress--absolute',
@@ -70,6 +81,15 @@ type Indeterminate = EuiProgressProps & HTMLAttributes<HTMLDivElement>;
 type Determinate = EuiProgressProps &
   ProgressHTMLAttributes<HTMLProgressElement> & {
     max?: number;
+    /*
+     * If true, will render the percentage, otherwise pass a custom node
+     */
+    valueText?: boolean | ReactNode;
+    label?: ReactNode;
+    /**
+     * Object of props passed to the <span/> wrapping the determinate progress's label
+     */
+    labelProps?: HTMLAttributes<HTMLSpanElement>;
   };
 
 export const EuiProgress: FunctionComponent<
@@ -80,7 +100,10 @@ export const EuiProgress: FunctionComponent<
   size = 'm',
   position = 'static',
   max,
+  valueText = false,
+  label,
   value,
+  labelProps,
   ...rest
 }) => {
   const determinate = !isNil(max);
@@ -95,17 +118,60 @@ export const EuiProgress: FunctionComponent<
     positionsToClassNameMap[position],
     className
   );
+  const dataClasses = classNames(
+    'euiProgress__data',
+    {
+      'euiProgress__data--l': size === 'l',
+    },
+    dataColorToClassNameMap[color]
+  );
+  const labelClasses = classNames(
+    'euiProgress__label',
+    labelProps && labelProps.className
+  );
+
+  let valueRender;
+  if (typeof valueText === 'boolean' && valueText) {
+    // valueText is a true boolean
+    valueRender = (
+      <EuiI18n
+        token="euiProgress.valueText"
+        default="{value}%"
+        values={{
+          value,
+        }}
+      />
+    );
+    `${value}%`;
+  } else if (valueText) {
+    // valueText exists
+    valueRender = valueText;
+  }
 
   // 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>}
-      />
+      <Fragment>
+        {label || valueText ? (
+          <div className={dataClasses}>
+            <span {...labelProps} className={labelClasses}>
+              {label}
+            </span>
+            <span className="euiProgress__valueText">{valueRender}</span>
+          </div>
+        ) : (
+          undefined
+        )}
+        <progress
+          className={classes}
+          max={max}
+          value={value}
+          aria-hidden={label && valueText ? true : false}
+          {...rest as ProgressHTMLAttributes<HTMLProgressElement>}
+        />
+      </Fragment>
     );
   } else {
     return (

src/themes/eui-amsterdam/overrides/_index.scss

@@ -10,5 +10,6 @@
 @import 'modal';
 @import 'overlay_mask';
 @import 'popover';
+@import 'progress';
 @import 'text';
 

src/themes/eui-amsterdam/overrides/_progress.scss

@@ -0,0 +1,3 @@
+.euiProgress--native {
+  border-radius: $euiBorderRadius;
+}