diff --git a/CHANGELOG.md b/CHANGELOG.md index 05ebb6b7f1c..292062fa85c 100644 --- a/CHANGELOG.md +++ b/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) 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..4af42fe9e0a --- /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", 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 () => ( + +
+ {data.map(item => ( + <> + + + + ))} +
+ +
+ {data.map(item => ( + <> + + + + ))} +
+
+); diff --git a/src-docs/src/views/progress/progress_example.js b/src-docs/src/views/progress/progress_example.js index a5031a8e6d3..1f53304a29f 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 = ` import ProgressSizeColor from './progress_size_color'; const progressSizeColorSource = require('!!raw-loader!./progress_size_color'); const progressSizeColorHtml = renderToHtml(ProgressSizeColor); +const progressSizeColorSnippet = ``; + +import ProgressChart from './progress_chart'; +const progressChartSource = require('!!raw-loader!./progress_chart'); +const progressChartHtml = renderToHtml(ProgressChart); +const progressChartSnippet = ``; export const ProgressExample = { title: 'Progress', @@ -139,6 +155,39 @@ export const ProgressExample = {

), demo: , + snippet: progressSizeColorSnippet, + }, + { + title: 'Progress for charts', + source: [ + { + type: GuideSectionTypes.JS, + code: progressChartSource, + }, + { + type: GuideSectionTypes.HTML, + code: progressChartHtml, + }, + ], + text: ( +
+

+ Determinate progress bar can be used as simple bar charts. Use them + with the label and valueText{' '} + props to show the data corresponding to each bar. The{' '} + valueText renders as the same color as the{' '} + EuiProgress. +

+

+ Setting {'valueText={true}'} will + add a % sign next to thevalue passed. If you want + to display a custom valueText, you can pass a + node instead. +

+
+ ), + demo: , + snippet: progressChartSnippet, }, ], }; diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap index b0e9f5d087e..8ab061269c2 100644 --- a/src/components/progress/__snapshots__/progress.test.tsx.snap +++ b/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 [ +
+ + 150 + +
, + , +] +`; + exports[`EuiProgress has max 1`] = ` `; +exports[`EuiProgress has valueText and label 1`] = ` +Array [ +
+ + Label + + + 150 + +
, +