[EuiProgress] Add support for more colors

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Improved `EuiButtonGroup` focus, hover, selected and disabled states ([#4142](https://github.com/elastic/eui/pull/4142))
 - Added `display` prop to `EuiToolTip` for common display block needs ([#4148](https://github.com/elastic/eui/pull/4148))
+- Added support for more colors in `EuiProgress` such as `vis0` through `vis9`, `warning`, `success`  and custom colors ([#4130](https://github.com/elastic/eui/pull/4130))
 
 **Bug fixes**
 

src-docs/src/views/progress/progress_colors.js

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiProgress,
+  EuiSpacer,
+} from '../../../../src/components';
+
+const mainColors = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+  'subdued',
+  'accent',
+];
+
+const vizBars = [];
+
+for (let i = 0; i < 10; i++) {
+  vizBars.push(
+    <>
+      <EuiProgress
+        label={`vis${i}`}
+        valueText={true}
+        value={80}
+        max={100}
+        color={`vis${i}`}
+        size="m"
+      />
+      <EuiSpacer size="s" />
+    </>
+  );
+}
+
+export default () => (
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      {mainColors.map((value) => (
+        <>
+          <EuiProgress
+            label={value}
+            valueText={true}
+            value={80}
+            max={100}
+            color={value}
+            size="m"
+          />
+          <EuiSpacer size="s" />
+        </>
+      ))}
+    </EuiFlexItem>
+    <EuiFlexItem>{vizBars}</EuiFlexItem>
+    <EuiFlexItem>
+      <EuiProgress
+        valueText={true}
+        label="#32CD32"
+        color="#32CD32"
+        value={80}
+        max={100}
+        size="m"
+      />
+      <EuiSpacer size="s" />
+      <EuiProgress
+        valueText={true}
+        label="mediumslateblue"
+        color="mediumslateblue"
+        value={80}
+        max={100}
+        size="m"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/progress/progress_example.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { renderToHtml } from '../../services';
 
@@ -28,14 +29,22 @@ const progressFixedSnippet = `<!-- Position at top of parent container -->
   <EuiProgress size="xs" color="accent" position="fixed" />
 </EuiPortal>`;
 
-import ProgressSizeColor from './progress_size_color';
-const progressSizeColorSource = require('!!raw-loader!./progress_size_color');
-const progressSizeColorHtml = renderToHtml(ProgressSizeColor);
-const progressSizeColorSnippet = `<EuiProgress
+import ProgressSizes from './progress_sizes';
+const progressSizesSource = require('!!raw-loader!./progress_sizes');
+const progressSizesHtml = renderToHtml(ProgressSizes);
+const progressSizesSnippet = `<EuiProgress
   value={20}
   max={100} 
   size="s"
-  color="accent"
+/>`;
+
+import ProgressColors from './progress_colors';
+const progressColorsSource = require('!!raw-loader!./progress_colors');
+const progressColorsHtml = renderToHtml(ProgressColors);
+const progressColorsSnippet = `<EuiProgress
+  value={20}
+  max={100} 
+  color="vis4"
 />`;
 
 import ProgressChart from './progress_chart';
@@ -137,26 +146,67 @@ export const ProgressExample = {
       demo: <ProgressFixed />,
     },
     {
-      title: 'Progress has a range of sizes and colors',
+      title: 'Sizes',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: progressSizeColorSource,
+          code: progressSizesSource,
         },
         {
           type: GuideSectionTypes.HTML,
-          code: progressSizeColorHtml,
+          code: progressSizesHtml,
         },
       ],
       text: (
         <p>
-          Both <EuiCode>size</EuiCode> and <EuiCode>color</EuiCode> can be
-          provided as props. These values will work on both determinate and
+          You can adjust the <EuiCode>size</EuiCode> of both determinate and
           indeterminate progress bars.
         </p>
       ),
-      demo: <ProgressSizeColor />,
-      snippet: progressSizeColorSnippet,
+      demo: <ProgressSizes />,
+      snippet: progressSizesSnippet,
+    },
+    {
+      title: 'Colors',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: progressColorsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: progressColorsHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <strong>EuiProgress</strong> supports a few options for{' '}
+            <EuiCode>color</EuiCode>. You can pass any value from our basic
+            color set or from our visualization palette (<EuiCode>vis0</EuiCode>{' '}
+            through <EuiCode>vis9</EuiCode>). To learn more about color usage,
+            go to the <Link to="/guidelines/colors">Color guidelines</Link>{' '}
+            page.
+          </p>
+          <p>
+            Additionally, you can pass any valid color string like a hex value
+            or named color.
+          </p>
+          <EuiCallOut
+            title="Note about using custom colors"
+            iconType="accessibility"
+            color="warning">
+            <p>
+              Usually, we calculate a high contrast color for{' '}
+              <EuiCode>valueText</EuiCode> based on <EuiCode>color</EuiCode>.
+              This is not possible when using a custom color. In such cases,{' '}
+              <EuiCode>valueText</EuiCode> will just use the custom color.
+            </p>
+          </EuiCallOut>
+        </div>
+      ),
+      demo: <ProgressColors />,
+      snippet: progressColorsSnippet,
     },
     {
       title: 'Progress for charts',

src-docs/src/views/progress/progress_sizes.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { EuiProgress, EuiSpacer } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiProgress value={20} max={100} size="xs" />
+    <EuiSpacer size="l" />
+
+    <EuiProgress value={40} max={100} size="xs" />
+    <EuiSpacer size="l" />
+
+    <EuiProgress value={60} max={100} size="s" />
+    <EuiSpacer size="l" />
+
+    <EuiProgress value={80} max={100} size="m" />
+    <EuiSpacer size="l" />
+
+    <EuiProgress value={90} max={100} size="l" />
+  </div>
+);

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

@@ -1,5 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiProgress color #885522 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--customColor"
+  style="color:#885522"
+/>
+`;
+
+exports[`EuiProgress color accent is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--accent"
+/>
+`;
+
+exports[`EuiProgress color danger is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--danger"
+/>
+`;
+
+exports[`EuiProgress color primary is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--primary"
+/>
+`;
+
+exports[`EuiProgress color secondary is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--secondary"
+/>
+`;
+
+exports[`EuiProgress color subdued is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--subdued"
+/>
+`;
+
+exports[`EuiProgress color success is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--success"
+/>
+`;
+
+exports[`EuiProgress color vis0 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis0"
+/>
+`;
+
+exports[`EuiProgress color vis1 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis1"
+/>
+`;
+
+exports[`EuiProgress color vis2 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis2"
+/>
+`;
+
+exports[`EuiProgress color vis3 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis3"
+/>
+`;
+
+exports[`EuiProgress color vis4 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis4"
+/>
+`;
+
+exports[`EuiProgress color vis5 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis5"
+/>
+`;
+
+exports[`EuiProgress color vis6 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis6"
+/>
+`;
+
+exports[`EuiProgress color vis7 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis7"
+/>
+`;
+
+exports[`EuiProgress color vis8 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis8"
+/>
+`;
+
+exports[`EuiProgress color vis9 is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis9"
+/>
+`;
+
+exports[`EuiProgress color warning is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--warning"
+/>
+`;
+
 exports[`EuiProgress has labelProps 1`] = `
 Array [
   <div
@@ -94,6 +203,30 @@ exports[`EuiProgress is rendered 1`] = `
 />
 `;
 
+exports[`EuiProgress size l is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--l euiProgress--secondary"
+/>
+`;
+
+exports[`EuiProgress size m is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--secondary"
+/>
+`;
+
+exports[`EuiProgress size s is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--s euiProgress--secondary"
+/>
+`;
+
+exports[`EuiProgress size xs is rendered 1`] = `
+<div
+  class="euiProgress euiProgress--indeterminate euiProgress--xs euiProgress--secondary"
+/>
+`;
+
 exports[`EuiProgress valueText is true 1`] = `
 Array [
   <div

src/components/progress/_index.scss

@@ -1 +1,2 @@
+@import 'variables';
 @import 'progress';