Add label and valueText props to EuiProgress

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>

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"
+  />,
+]
+`;

src/components/progress/_progress.scss

@@ -141,6 +141,12 @@ $euiProgressColors: (
 
   .euiProgress__label {
     @include euiTextTruncate;
+    flex-basis: 80%;
+  }
+
+  .euiProgress__valueText {
+    @include euiTextTruncate;
+    margin-left: auto;
   }
 }
 

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

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

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

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