From 630b518254b3408e60c3ecfd161ec431039eee68 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 24 Jun 2020 12:33:04 -0700
Subject: [PATCH 1/9] adding props, first changes

---
 .../src/views/progress/progress_size_color.js |  9 +++++++-
 src/components/progress/progress.tsx          | 22 ++++++++++++++-----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/progress/progress_size_color.js b/src-docs/src/views/progress/progress_size_color.js
index 74d541c0c0f..96cb7321603 100644
--- a/src-docs/src/views/progress/progress_size_color.js
+++ b/src-docs/src/views/progress/progress_size_color.js
@@ -4,7 +4,14 @@ import { EuiProgress, EuiSpacer } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiProgress value={20} max={100} color="subdued" size="xs" />
+    <EuiProgress
+      label="Label"
+      valueText="20%"
+      value={20}
+      max={100}
+      color="subdued"
+      size="xs"
+    />
     <EuiSpacer size="l" />
 
     <EuiProgress value={40} max={100} color="accent" size="xs" />
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index 53b1b5aef67..2fc7da2e38d 100644
--- a/src/components/progress/progress.tsx
+++ b/src/components/progress/progress.tsx
@@ -70,6 +70,8 @@ type Indeterminate = EuiProgressProps & HTMLAttributes<HTMLDivElement>;
 type Determinate = EuiProgressProps &
   ProgressHTMLAttributes<HTMLProgressElement> & {
     max?: number;
+    valueText?: string;
+    label?: string;
   };
 
 export const EuiProgress: FunctionComponent<
@@ -80,6 +82,8 @@ export const EuiProgress: FunctionComponent<
   size = 'm',
   position = 'static',
   max,
+  valueText,
+  label,
   value,
   ...rest
 }) => {
@@ -100,12 +104,18 @@ export const EuiProgress: FunctionComponent<
   // See https://css-tricks.com/html5-progress-element/
   if (determinate) {
     return (
-      <progress
-        className={classes}
-        max={max}
-        value={value}
-        {...rest as ProgressHTMLAttributes<HTMLProgressElement>}
-      />
+      <div>
+        <div className="euiProgress__data">
+          <div className="euiProgress__label">{label}</div>
+          <div className="euiProgress__valueText">{valueText}</div>
+        </div>
+        <progress
+          className={classes}
+          max={max}
+          value={value}
+          {...rest as ProgressHTMLAttributes<HTMLProgressElement>}
+        />
+      </div>
     );
   } else {
     return (

From af000e8929d608ade4665826b20feae61517c83f Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 25 Jun 2020 13:31:37 -0700
Subject: [PATCH 2/9] add valueText and label to EuiProgress

---
 src-docs/src/views/progress/progress_chart.js | 47 +++++++++++++
 .../src/views/progress/progress_example.js    | 41 +++++++++++
 .../src/views/progress/progress_size_color.js | 11 +--
 .../__snapshots__/progress.test.tsx.snap      | 68 +++++++++++++++----
 src/components/progress/_progress.scss        | 13 ++++
 src/components/progress/progress.test.tsx     | 14 ++++
 src/components/progress/progress.tsx          | 34 ++++++++--
 7 files changed, 200 insertions(+), 28 deletions(-)
 create mode 100644 src-docs/src/views/progress/progress_chart.js

diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
new file mode 100644
index 00000000000..3a365b7dd20
--- /dev/null
+++ 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
index a5031a8e6d3..87b7ffd06f0 100644
--- 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
index 96cb7321603..c291e4087cb 100644
--- a/src-docs/src/views/progress/progress_size_color.js
+++ b/src-docs/src/views/progress/progress_size_color.js
@@ -4,14 +4,7 @@ import { EuiProgress, EuiSpacer } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiProgress
-      label="Label"
-      valueText="20%"
-      value={20}
-      max={100}
-      color="subdued"
-      size="xs"
-    />
+    <EuiProgress value={20} max={100} color="subdued" size="xs" />
     <EuiSpacer size="l" />
 
     <EuiProgress value={40} max={100} color="accent" size="xs" />
@@ -25,4 +18,4 @@ export default () => (
 
     <EuiProgress value={90} max={100} color="danger" size="l" />
   </div>
-);
+);
\ No newline at end of file
diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap
index b0e9f5d087e..86f75b3c589 100644
--- 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
index 6178b1a6cbc..23e47b5aef5 100644
--- 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;
+}
\ No newline at end of file
diff --git a/src/components/progress/progress.test.tsx b/src/components/progress/progress.test.tsx
index 6cccc5e4947..7e6e3bbd39d 100644
--- 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
index 2fc7da2e38d..0f831a66032 100644
--- 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,8 +72,8 @@ type Indeterminate = EuiProgressProps & HTMLAttributes<HTMLDivElement>;
 type Determinate = EuiProgressProps &
   ProgressHTMLAttributes<HTMLProgressElement> & {
     max?: number;
-    valueText?: string;
-    label?: string;
+    valueText?: ReactNode;
+    label?: ReactNode;
   };
 
 export const EuiProgress: FunctionComponent<
@@ -99,16 +101,36 @@ 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 (
       <div>
-        <div className="euiProgress__data">
-          <div className="euiProgress__label">{label}</div>
-          <div className="euiProgress__valueText">{valueText}</div>
-        </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}

From 3d813e7e4e4fec990e69223efa8fa2e8ea2a3e8c Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 25 Jun 2020 14:16:22 -0700
Subject: [PATCH 3/9] cl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e649171278..ce2fe72cabf 100644
--- 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**
 

From c25a0111f75e965b1c64650714dcc56fc0b33a02 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Mon, 29 Jun 2020 16:37:56 -0700
Subject: [PATCH 4/9] remove euiText and improved design in Amsterdam

---
 .../src/views/progress/progress_size_color.js |  2 +-
 .../__snapshots__/progress.test.tsx.snap      | 64 +++++++------------
 src/components/progress/_progress.scss        | 22 ++++++-
 src/components/progress/progress.tsx          | 41 ++++++------
 .../eui-amsterdam/overrides/_index.scss       |  1 +
 .../eui-amsterdam/overrides/_progress.scss    |  3 +
 6 files changed, 68 insertions(+), 65 deletions(-)
 create mode 100644 src/themes/eui-amsterdam/overrides/_progress.scss

diff --git a/src-docs/src/views/progress/progress_size_color.js b/src-docs/src/views/progress/progress_size_color.js
index c291e4087cb..74d541c0c0f 100644
--- 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>
-);
\ No newline at end of file
+);
diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap
index 86f75b3c589..eda9aedaf29 100644
--- a/src/components/progress/__snapshots__/progress.test.tsx.snap
+++ b/src/components/progress/__snapshots__/progress.test.tsx.snap
@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiProgress has max 1`] = `
-<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>
+<progress
+  aria-label="aria-label"
+  class="euiProgress euiProgress--native euiProgress--m euiProgress--secondary testClass1 testClass2"
+  data-test-subj="test subject string"
+  max="100"
+/>
 `;
 
 exports[`EuiProgress has value 1`] = `
@@ -20,53 +18,39 @@ exports[`EuiProgress has value 1`] = `
 `;
 
 exports[`EuiProgress has valueText and Label 1`] = `
-<div>
+Array [
   <div
-    class="euiProgress__data"
+    class="euiProgress__data euiProgress__data--secondary"
   >
-    <div
+    <span
       class="euiProgress__label"
     >
-      <div
-        class="euiText euiText--extraSmall eui-textTruncate"
-      >
-        Label
-      </div>
-    </div>
-    <div
+      Label
+    </span>
+    <span
       class="euiProgress__valueText"
     >
-      <div
-        class="euiText euiText--extraSmall eui-textTruncate"
-      >
-        <div
-          class="euiTextColor euiTextColor--secondary"
-        >
-          50
-        </div>
-      </div>
-    </div>
-  </div>
+      50
+    </span>
+  </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`] = `
-<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>
+<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"
+/>
 `;
 
 exports[`EuiProgress is indeterminate 1`] = `
diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss
index 23e47b5aef5..df44439334b 100644
--- a/src/components/progress/_progress.scss
+++ b/src/components/progress/_progress.scss
@@ -117,6 +117,12 @@ $euiProgressColors: (
       }
     }
   }
+
+  .euiProgress__data--#{$name} {
+    .euiProgress__valueText {
+      color: $color;
+    }
+  }
 }
 
 @keyframes euiProgress {
@@ -134,10 +140,20 @@ $euiProgressColors: (
   justify-content: space-between;
 
   .euiProgress__label {
-    overflow: hidden;
+    @include euiTextTruncate;
   }
 }
 
-.euiProgress__data--primary .euiProgress__valueText {
-  color: $euiColorPrimary;
+.euiProgress__label,
+.euiProgress__valueText {
+  @include euiText;
+  @include euiFontSize;
+  @include fontSize($euiFontSizeXS);
+}
+
+.euiProgress__data--l {
+  .euiProgress__label,
+  .euiProgress__valueText {
+    @include fontSize($euiFontSizeS);
+  }
 }
\ No newline at end of file
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index 0f831a66032..0b36d3af4f5 100644
--- a/src/components/progress/progress.tsx
+++ b/src/components/progress/progress.tsx
@@ -22,11 +22,11 @@ import React, {
   HTMLAttributes,
   ProgressHTMLAttributes,
   ReactNode,
+  Fragment,
 } 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',
@@ -51,6 +51,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',
@@ -101,32 +109,23 @@ export const EuiProgress: FunctionComponent<
     positionsToClassNameMap[position],
     className
   );
-  const dataClasses = classNames('euiProgress__data', {
-    'euiProgress__data--primary': color === 'primary',
-  });
+  const dataClasses = classNames(
+    'euiProgress__data',
+    {
+      'euiProgress__data--l': size === 'l',
+    },
+    dataColorToClassNameMap[color]
+  );
 
   // Because of a Firefox animation issue, indeterminate progress needs to not use <progress />.
   // See https://css-tricks.com/html5-progress-element/
   if (determinate) {
     return (
-      <div>
+      <Fragment>
         {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>
+            <span className="euiProgress__label">{label}</span>
+            <span className="euiProgress__valueText">{valueText}</span>
           </div>
         ) : (
           undefined
@@ -137,7 +136,7 @@ export const EuiProgress: FunctionComponent<
           value={value}
           {...rest as ProgressHTMLAttributes<HTMLProgressElement>}
         />
-      </div>
+      </Fragment>
     );
   } else {
     return (
diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss
index a8fcf7a02d1..62618cf0c41 100644
--- a/src/themes/eui-amsterdam/overrides/_index.scss
+++ b/src/themes/eui-amsterdam/overrides/_index.scss
@@ -10,5 +10,6 @@
 @import 'modal';
 @import 'overlay_mask';
 @import 'popover';
+@import 'progress';
 @import 'text';
 
diff --git a/src/themes/eui-amsterdam/overrides/_progress.scss b/src/themes/eui-amsterdam/overrides/_progress.scss
new file mode 100644
index 00000000000..f9aecd478f3
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_progress.scss
@@ -0,0 +1,3 @@
+.euiProgress--native {
+  border-radius: $euiBorderRadius;
+}

From 0969284e48d8dc8bba7839d1f4524f7943f66d93 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 30 Jun 2020 13:17:44 -0700
Subject: [PATCH 5/9] a11y and changing the way valueText works

---
 src-docs/src/views/progress/progress_chart.js | 18 +++++------
 .../__snapshots__/progress.test.tsx.snap      |  5 +++-
 src/components/progress/progress.test.tsx     |  2 +-
 src/components/progress/progress.tsx          | 30 +++++++++++++++++--
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
index 3a365b7dd20..4af42fe9e0a 100644
--- a/src-docs/src/views/progress/progress_chart.js
+++ b/src-docs/src/views/progress/progress_chart.js
@@ -3,11 +3,11 @@ 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' },
+  { 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 () => (
@@ -17,8 +17,8 @@ export default () => (
         <>
           <EuiProgress
             label={item.label}
-            valueText={`${item.valueText}%`}
-            value={item.valueText}
+            valueText={true}
+            value={item.value}
             max={100}
             color="secondary"
             size="s"
@@ -33,8 +33,8 @@ export default () => (
         <>
           <EuiProgress
             label={item.label}
-            valueText={`${item.valueText}%`}
-            value={item.valueText}
+            valueText={true}
+            value={item.value}
             max={100}
             color="primary"
             size="m"
diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap
index eda9aedaf29..8126b6616f2 100644
--- a/src/components/progress/__snapshots__/progress.test.tsx.snap
+++ b/src/components/progress/__snapshots__/progress.test.tsx.snap
@@ -2,6 +2,7 @@
 
 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"
@@ -30,10 +31,11 @@ Array [
     <span
       class="euiProgress__valueText"
     >
-      50
+      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"
@@ -45,6 +47,7 @@ Array [
 
 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"
diff --git a/src/components/progress/progress.test.tsx b/src/components/progress/progress.test.tsx
index 7e6e3bbd39d..ac5ffc4c75d 100644
--- a/src/components/progress/progress.test.tsx
+++ b/src/components/progress/progress.test.tsx
@@ -63,7 +63,7 @@ describe('EuiProgress', () => {
   test('has valueText and Label', () => {
     const component = render(
       <EuiProgress
-        valueText="50"
+        valueText="150"
         label="Label"
         value={50}
         max={100}
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index 0b36d3af4f5..b01172425d2 100644
--- a/src/components/progress/progress.tsx
+++ b/src/components/progress/progress.tsx
@@ -25,6 +25,7 @@ import React, {
   Fragment,
 } from 'react';
 import classNames from 'classnames';
+import { EuiI18n } from '../i18n';
 import { CommonProps, ExclusiveUnion } from '../common';
 import { isNil } from '../../services/predicate';
 
@@ -80,7 +81,10 @@ type Indeterminate = EuiProgressProps & HTMLAttributes<HTMLDivElement>;
 type Determinate = EuiProgressProps &
   ProgressHTMLAttributes<HTMLProgressElement> & {
     max?: number;
-    valueText?: ReactNode;
+    /*
+     * If true, will render the percentage, otherwise pass a custom node
+     */
+    valueText?: boolean | ReactNode;
     label?: ReactNode;
   };
 
@@ -92,7 +96,7 @@ export const EuiProgress: FunctionComponent<
   size = 'm',
   position = 'static',
   max,
-  valueText,
+  valueText = false,
   label,
   value,
   ...rest
@@ -117,15 +121,34 @@ export const EuiProgress: FunctionComponent<
     dataColorToClassNameMap[color]
   );
 
+  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 (
       <Fragment>
         {label || valueText ? (
           <div className={dataClasses}>
             <span className="euiProgress__label">{label}</span>
-            <span className="euiProgress__valueText">{valueText}</span>
+            <span className="euiProgress__valueText">{valueRender}</span>
           </div>
         ) : (
           undefined
@@ -134,6 +157,7 @@ export const EuiProgress: FunctionComponent<
           className={classes}
           max={max}
           value={value}
+          aria-hidden={label && valueText ? true : false}
           {...rest as ProgressHTMLAttributes<HTMLProgressElement>}
         />
       </Fragment>

From 2a5d98583b678dc363f889c4ae4d7648ec53f9c3 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 30 Jun 2020 13:30:33 -0700
Subject: [PATCH 6/9] update docs

---
 .../src/views/progress/progress_example.js    | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/progress/progress_example.js b/src-docs/src/views/progress/progress_example.js
index 87b7ffd06f0..2b648100db4 100644
--- a/src-docs/src/views/progress/progress_example.js
+++ b/src-docs/src/views/progress/progress_example.js
@@ -170,13 +170,21 @@ export const ProgressExample = {
         },
       ],
       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>
+        <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,

From c02d1a5df4e4fee906469303c23a661886b8dd54 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 30 Jun 2020 17:29:25 -0700
Subject: [PATCH 7/9] add labelProps prop

---
 .../__snapshots__/progress.test.tsx.snap      | 28 ++++++++++++++++++-
 src/components/progress/progress.test.tsx     | 16 ++++++++++-
 src/components/progress/progress.tsx          | 13 ++++++++-
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap
index 8126b6616f2..2470334fd1e 100644
--- a/src/components/progress/__snapshots__/progress.test.tsx.snap
+++ b/src/components/progress/__snapshots__/progress.test.tsx.snap
@@ -1,5 +1,31 @@
 // 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"
@@ -18,7 +44,7 @@ exports[`EuiProgress has value 1`] = `
 />
 `;
 
-exports[`EuiProgress has valueText and Label 1`] = `
+exports[`EuiProgress has valueText and label 1`] = `
 Array [
   <div
     class="euiProgress__data euiProgress__data--secondary"
diff --git a/src/components/progress/progress.test.tsx b/src/components/progress/progress.test.tsx
index ac5ffc4c75d..3ec99a55473 100644
--- a/src/components/progress/progress.test.tsx
+++ b/src/components/progress/progress.test.tsx
@@ -60,7 +60,7 @@ describe('EuiProgress', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('has valueText and Label', () => {
+  test('has valueText and label', () => {
     const component = render(
       <EuiProgress
         valueText="150"
@@ -73,4 +73,18 @@ describe('EuiProgress', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('has labelProps', () => {
+    const component = render(
+      <EuiProgress
+        max={100}
+        value={50}
+        labelProps={{ title: 'Custom title' }}
+        valueText="150"
+        {...requiredProps}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index b01172425d2..3cc7d253552 100644
--- a/src/components/progress/progress.tsx
+++ b/src/components/progress/progress.tsx
@@ -86,6 +86,10 @@ type Determinate = EuiProgressProps &
      */
     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<
@@ -99,6 +103,7 @@ export const EuiProgress: FunctionComponent<
   valueText = false,
   label,
   value,
+  labelProps,
   ...rest
 }) => {
   const determinate = !isNil(max);
@@ -120,6 +125,10 @@ export const EuiProgress: FunctionComponent<
     },
     dataColorToClassNameMap[color]
   );
+  const labelClasses = classNames(
+    'euiProgress__label',
+    labelProps && labelProps.className
+  );
 
   let valueRender;
   if (typeof valueText === 'boolean' && valueText) {
@@ -147,7 +156,9 @@ export const EuiProgress: FunctionComponent<
       <Fragment>
         {label || valueText ? (
           <div className={dataClasses}>
-            <span className="euiProgress__label">{label}</span>
+            <span {...labelProps} className={labelClasses}>
+              {label}
+            </span>
             <span className="euiProgress__valueText">{valueRender}</span>
           </div>
         ) : (

From 69585c66bf276103825486e632b34545539ed05c Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 2 Jul 2020 12:06:37 -0700
Subject: [PATCH 8/9] pr feedback

---
 .../src/views/progress/progress_example.js    |  6 ++---
 .../__snapshots__/progress.test.tsx.snap      | 26 ++++++++++++++++---
 src/components/progress/_progress.scss        |  6 +++++
 src/components/progress/progress.test.tsx     |  8 ++++++
 src/components/progress/progress.tsx          | 13 ++++++----
 .../eui-amsterdam/overrides/_progress.scss    |  2 +-
 6 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src-docs/src/views/progress/progress_example.js b/src-docs/src/views/progress/progress_example.js
index 2b648100db4..1f53304a29f 100644
--- a/src-docs/src/views/progress/progress_example.js
+++ b/src-docs/src/views/progress/progress_example.js
@@ -42,7 +42,7 @@ const progressChartSource = require('!!raw-loader!./progress_chart');
 const progressChartHtml = renderToHtml(ProgressChart);
 const progressChartSnippet = `<EuiProgress 
   value={20}
-  valueText={valueText}
+  valueText={true}
   label={label}
   max={100} 
 />`;
@@ -174,8 +174,8 @@ export const ProgressExample = {
           <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{' '}
+            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>
diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap
index 2470334fd1e..8ab061269c2 100644
--- a/src/components/progress/__snapshots__/progress.test.tsx.snap
+++ b/src/components/progress/__snapshots__/progress.test.tsx.snap
@@ -5,10 +5,6 @@ Array [
   <div
     class="euiProgress__data euiProgress__data--secondary"
   >
-    <span
-      class="euiProgress__label"
-      title="Custom title"
-    />
     <span
       class="euiProgress__valueText"
     >
@@ -97,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"
+  />,
+]
+`;
diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss
index df44439334b..d88c6ebaa48 100644
--- a/src/components/progress/_progress.scss
+++ b/src/components/progress/_progress.scss
@@ -141,6 +141,12 @@ $euiProgressColors: (
 
   .euiProgress__label {
     @include euiTextTruncate;
+    flex-basis: 80%;
+  }
+
+  .euiProgress__valueText {
+    @include euiTextTruncate;
+    margin-left: auto;
   }
 }
 
diff --git a/src/components/progress/progress.test.tsx b/src/components/progress/progress.test.tsx
index 3ec99a55473..39aa8739747 100644
--- a/src/components/progress/progress.test.tsx
+++ b/src/components/progress/progress.test.tsx
@@ -74,6 +74,14 @@ describe('EuiProgress', () => {
     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
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index 3cc7d253552..60709aef019 100644
--- a/src/components/progress/progress.tsx
+++ b/src/components/progress/progress.tsx
@@ -142,7 +142,6 @@ export const EuiProgress: FunctionComponent<
         }}
       />
     );
-    `${value}%`;
   } else if (valueText) {
     // valueText exists
     valueRender = valueText;
@@ -156,10 +155,14 @@ export const EuiProgress: FunctionComponent<
       <Fragment>
         {label || valueText ? (
           <div className={dataClasses}>
-            <span {...labelProps} className={labelClasses}>
-              {label}
-            </span>
-            <span className="euiProgress__valueText">{valueRender}</span>
+            {label && (
+              <span {...labelProps} className={labelClasses}>
+                {label}
+              </span>
+            )}
+            {valueRender && (
+              <span className="euiProgress__valueText">{valueRender}</span>
+            )}
           </div>
         ) : (
           undefined
diff --git a/src/themes/eui-amsterdam/overrides/_progress.scss b/src/themes/eui-amsterdam/overrides/_progress.scss
index f9aecd478f3..01f6550be46 100644
--- a/src/themes/eui-amsterdam/overrides/_progress.scss
+++ b/src/themes/eui-amsterdam/overrides/_progress.scss
@@ -1,3 +1,3 @@
 .euiProgress--native {
-  border-radius: $euiBorderRadius;
+  border-radius: $euiSizeS;
 }

From 17cc9fa935c0845742ebc8530b5e344e930ea458 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 2 Jul 2020 14:06:54 -0700
Subject: [PATCH 9/9] last bit of feedback

---
 CHANGELOG.md                           | 2 +-
 src/components/progress/_progress.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab815471baa..d3060a91214 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
+- 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)
 
 - Expanded `EuiBasicTable`'s default action's name configuration to accept any React node ([#3688](https://github.com/elastic/eui/pull/3688))
-- Add `label`, `labelProps` and `valueText` props to `EuiProgress` ([#3661](https://github.com/elastic/eui/pull/3661))
 
 ## [`26.2.0`](https://github.com/elastic/eui/tree/v26.2.0)
 
diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss
index d88c6ebaa48..c07e82e53d5 100644
--- a/src/components/progress/_progress.scss
+++ b/src/components/progress/_progress.scss
@@ -142,6 +142,7 @@ $euiProgressColors: (
   .euiProgress__label {
     @include euiTextTruncate;
     flex-basis: 80%;
+    flex-grow: 1;
   }
 
   .euiProgress__valueText {