diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e9b30ed87d..9005c146c42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `success` as `color` option to `EuiBadge`, `EuiTextColor`, `EuiText`, `EuiStat`, and `EuiExpression` ([#4888](https://github.com/elastic/eui/pull/4888)) +- Changed default `color` props from `secondary` to `success` where necessary ([#4888](https://github.com/elastic/eui/pull/4888)) - Added display of number of selected options in `EuiSearchBar` filters when `numActiveFilters` exists ([#4748](https://github.com/elastic/eui/pull/4748)) - Reverted `z-index: 1` on `EuiPageBody` ([#4892](https://github.com/elastic/eui/pull/4892)) - Added `updateButtonProps` to `EuiSuperDatePicker` to provide more control over the update/refresh button ([#4895](https://github.com/elastic/eui/pull/4895)) diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js index 47f85494a72..ec7652db93a 100644 --- a/src-docs/src/components/guide_rule/guide_rule_example.js +++ b/src-docs/src/components/guide_rule/guide_rule_example.js @@ -65,7 +65,7 @@ export const GuideRuleExample = ({ {children} - +

{doOrDont && {doOrDont}.} {text}

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js index 3071a4fc862..303cee75563 100644 --- a/src-docs/src/views/badge/badge.js +++ b/src-docs/src/views/badge/badge.js @@ -14,7 +14,7 @@ const badges = [ 'default', 'hollow', 'primary', - 'secondary', + 'success', 'accent', 'warning', 'danger', @@ -82,7 +82,7 @@ export default () => { - + {isDisabled ? 'Disabled badge' : 'Disable me!'} diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js index 905cd93e15e..2e3616da8b5 100644 --- a/src-docs/src/views/badge/badge_button.js +++ b/src-docs/src/views/badge/badge_button.js @@ -30,7 +30,7 @@ export default () => ( {}} diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 708b12563a8..1a03303840b 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -33,7 +33,7 @@ const badgeSnippet = [ `, `Custom `, - `Disabled + `Disabled `, ]; @@ -66,7 +66,7 @@ const badgeButtonSnippet = [ `Healthy + `Healthy `, `Warning `, diff --git a/src-docs/src/views/badge/badge_health.js b/src-docs/src/views/badge/badge_health.js index 4f60ede9955..7b6c5180dd6 100644 --- a/src-docs/src/views/badge/badge_health.js +++ b/src-docs/src/views/badge/badge_health.js @@ -9,7 +9,7 @@ import { export default () => ( - Healthy + Healthy Warning diff --git a/src-docs/src/views/badge/badge_href.js b/src-docs/src/views/badge/badge_href.js index 0a221b63afa..34e33a7100c 100644 --- a/src-docs/src/views/badge/badge_href.js +++ b/src-docs/src/views/badge/badge_href.js @@ -30,7 +30,7 @@ export default () => ( - + disabled anchor badge diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx index 6ddaf06a36d..e5c110fbe09 100644 --- a/src-docs/src/views/comment/comment_list.tsx +++ b/src-docs/src/views/comment/comment_list.tsx @@ -34,7 +34,7 @@ const complexEvent = ( sample - review + review ); diff --git a/src-docs/src/views/elastic_charts/sparklines.js b/src-docs/src/views/elastic_charts/sparklines.js index 638f0022dd7..585a89e472e 100644 --- a/src-docs/src/views/elastic_charts/sparklines.js +++ b/src-docs/src/views/elastic_charts/sparklines.js @@ -75,7 +75,7 @@ export const Sparklines = () => { @@ -93,7 +93,7 @@ export const Sparklines = () => { /> - + 15% diff --git a/src-docs/src/views/expression/colors.tsx b/src-docs/src/views/expression/colors.tsx index b5ecddc0f80..18d022e19d6 100644 --- a/src-docs/src/views/expression/colors.tsx +++ b/src-docs/src/views/expression/colors.tsx @@ -5,7 +5,7 @@ import { EuiSpacer } from '../../../../src/components/spacer'; export default () => (
- + diff --git a/src-docs/src/views/facet/facet.js b/src-docs/src/views/facet/facet.js index cc773b98a43..3c2fd1898d1 100644 --- a/src-docs/src/views/facet/facet.js +++ b/src-docs/src/views/facet/facet.js @@ -10,9 +10,7 @@ export default () => ( Simple, selected
- }> + }> Label or color indicator
diff --git a/src-docs/src/views/facet/facet_example.js b/src-docs/src/views/facet/facet_example.js index ffa51b65946..b5e7c2d151c 100644 --- a/src-docs/src/views/facet/facet_example.js +++ b/src-docs/src/views/facet/facet_example.js @@ -17,7 +17,7 @@ const facetSource = require('!!raw-loader!./facet'); const facetHtml = renderToHtml(Facet); const facetSnippet = `} + icon={} isSelected> diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js index 3606691d7fc..16ac692236d 100644 --- a/src-docs/src/views/progress/progress_chart.js +++ b/src-docs/src/views/progress/progress_chart.js @@ -21,7 +21,7 @@ export default () => ( diff --git a/src-docs/src/views/resize_observer/resize_observer_hook.js b/src-docs/src/views/resize_observer/resize_observer_hook.js index 1297d76c3d5..67952605c03 100644 --- a/src-docs/src/views/resize_observer/resize_observer_hook.js +++ b/src-docs/src/views/resize_observer/resize_observer_hook.js @@ -32,7 +32,7 @@ export const ResizeObserverHookExample = () => { {hasResizeObserver ? (

- Browser + Browser supports ResizeObserver API.

) : ( diff --git a/src-docs/src/views/stat/playground.js b/src-docs/src/views/stat/playground.js index b02ab836e33..bf57c20450a 100644 --- a/src-docs/src/views/stat/playground.js +++ b/src-docs/src/views/stat/playground.js @@ -19,6 +19,7 @@ export default () => { options: { primary: 'primary', secondary: 'secondary', + success: 'success', danger: 'danger', accent: 'accent', text: 'text', diff --git a/src-docs/src/views/stat/stat_colors.js b/src-docs/src/views/stat/stat_colors.js index 0cf44fb125c..90d6fb0b9ca 100644 --- a/src-docs/src/views/stat/stat_colors.js +++ b/src-docs/src/views/stat/stat_colors.js @@ -17,8 +17,8 @@ export default () => ( diff --git a/src-docs/src/views/stat/stat_combos.js b/src-docs/src/views/stat/stat_combos.js index e0c7ab9c539..a0630989fc4 100644 --- a/src-docs/src/views/stat/stat_combos.js +++ b/src-docs/src/views/stat/stat_combos.js @@ -48,10 +48,10 @@ export default () => { - + diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index e96b1012289..ace3000e103 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -58,7 +58,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 28 2016', magnitude: 1, - health: Healthy, + health: Healthy, }, { id: 1, @@ -70,7 +70,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 01 2016', magnitude: 1, - health: Healthy, + health: Healthy, }, { id: 2, @@ -104,7 +104,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 16 2016', magnitude: 100, - health: Healthy, + health: Healthy, }, { id: 4, @@ -126,7 +126,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Healthy, + health: Healthy, }, { id: 6, @@ -170,7 +170,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Healthy, + health: Healthy, }, { id: 10, @@ -203,7 +203,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Healthy, + health: Healthy, }, { id: 13, diff --git a/src-docs/src/views/text/text_align.js b/src-docs/src/views/text/text_align.js index 05d34fbd4e9..2c1d736c48c 100644 --- a/src-docs/src/views/text/text_align.js +++ b/src-docs/src/views/text/text_align.js @@ -22,7 +22,7 @@ export default () => ( prop

- +

And in conjunction with coloring.
diff --git a/src-docs/src/views/text/text_color.js b/src-docs/src/views/text/text_color.js index 5a577c82d80..aef31b7db25 100644 --- a/src-docs/src/views/text/text_color.js +++ b/src-docs/src/views/text/text_color.js @@ -12,7 +12,7 @@ export default () => (

You - use + use it on anything! @@ -29,7 +29,7 @@ export default () => ( Subdued text color

- Secondary text color + Success text color

Accent text color diff --git a/src-docs/src/views/text_diff/text_diff.js b/src-docs/src/views/text_diff/text_diff.js index 8e11c834740..dbc00818f34 100644 --- a/src-docs/src/views/text_diff/text_diff.js +++ b/src-docs/src/views/text_diff/text_diff.js @@ -40,7 +40,7 @@ export default () => { - {ins} Insertions, + {ins} Insertions, {del} Deletions diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap index b4e2750db4d..c20dbdd169a 100644 --- a/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -277,6 +277,23 @@ exports[`EuiBadge props color secondary is rendered 1`] = ` `; +exports[`EuiBadge props color success is rendered 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props color warning is rendered 1`] = ` `; +exports[`EuiBadge props style is rendered with success 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props style is rendered with warning 1`] = ` `; +exports[`EuiExpression props color success is rendered 1`] = ` + + + the answer is + + + + 42 + + +`; + exports[`EuiExpression props color warning is rendered 1`] = ` ; /** * Color of the `description` + * **`secondary` color is DEPRECATED, use `success` instead** */ color?: ExpressionColor; /** @@ -116,7 +118,7 @@ export const EuiExpression: FunctionComponent, 'color'> & { /** * Sets the color of the dot icon. - * It accepts any `IconColor`: `default`, `primary`, `secondary`, `success`, `accent`, `warning`, `danger`, `text`, + * It accepts any `IconColor`: `default`, `primary`, `success`, `accent`, `warning`, `danger`, `text`, * `subdued` or `ghost`; or any valid CSS color value as a `string` + * **`secondary` color is DEPRECATED, use `success` instead** */ color?: IconColor; /** diff --git a/src/components/icon/_icon.scss b/src/components/icon/_icon.scss index e307308ef44..3fcee2ae865 100644 --- a/src/components/icon/_icon.scss +++ b/src/components/icon/_icon.scss @@ -17,7 +17,7 @@ // This provides the default secondary color .euiIcon__fillSecondary { - fill: makeGraphicContrastColor($euiColorSecondary); + fill: makeGraphicContrastColor($euiColorSuccess); } } diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 0f0d42c5965..8410f7612c3 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -516,6 +516,7 @@ export type EuiIconProps = CommonProps & /** * One of EUI's color palette or a valid CSS color value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value. * Note that coloring only works if your SVG is removed of fill attributes. + * **`secondary` color is DEPRECATED, use `success` instead** */ color?: IconColor; /** diff --git a/src/components/notification/notification_event_meta.test.tsx b/src/components/notification/notification_event_meta.test.tsx index cf2810a1e2a..214875e07ad 100644 --- a/src/components/notification/notification_event_meta.test.tsx +++ b/src/components/notification/notification_event_meta.test.tsx @@ -59,7 +59,7 @@ describe('EuiNotificationEventMeta', () => { type="Alert" time={2 min ago} eventName="eventName" - badgeColor="secondary" + badgeColor="success" /> ); diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 6c9a2f064a9..b60559932e6 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -51,7 +51,8 @@ export type EuiNotificationEventMetaProps = { */ severity?: string; /** - * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`. + * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`. + * **`secondary` color is DEPRECATED, use `success` instead** */ badgeColor?: EuiBadgeProps['color']; /** diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap index 5eca6e824e1..c0726cf16b8 100644 --- a/src/components/progress/__snapshots__/progress.test.tsx.snap +++ b/src/components/progress/__snapshots__/progress.test.tsx.snap @@ -112,7 +112,7 @@ exports[`EuiProgress color warning is rendered 1`] = ` exports[`EuiProgress has labelProps 1`] = ` Array [

@@ -144,7 +144,7 @@ exports[`EuiProgress has max 1`] = ` exports[`EuiProgress has value 1`] = `
`; @@ -152,7 +152,7 @@ exports[`EuiProgress has value 1`] = ` exports[`EuiProgress has valueText and label 1`] = ` Array [