diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f6c76d51b6..480ff65973a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # [`master`](https://github.com/elastic/eui/tree/master) - Modified `link` and all buttons to support both href and onClick ([554](https://github.com/elastic/eui/pull/554)) +- Added `color` prop to `EuiIconTip` ([580](https://github.com/elastic/eui/pull/580)) # [`0.0.34`](https://github.com/elastic/eui/tree/v0.0.34) diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js index 1c40b4fbd10..441c47ce812 100644 --- a/src-docs/src/views/tool_tip/icon_tip.js +++ b/src-docs/src/views/tool_tip/icon_tip.js @@ -32,6 +32,7 @@ export default () => ( diff --git a/src-docs/src/views/tool_tip/tool_tip_example.js b/src-docs/src/views/tool_tip/tool_tip_example.js index e804f803ddb..0619e4de5b5 100644 --- a/src-docs/src/views/tool_tip/tool_tip_example.js +++ b/src-docs/src/views/tool_tip/tool_tip_example.js @@ -75,7 +75,8 @@ export const ToolTipExample = {

It accepts all the same props as EuiToolTip. - For convenience, you can also specify an optional icon type prop. + For convenience, you can also specify optional icon type and + color props.

), diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap index 4567c32c117..aab0c0f70e0 100644 --- a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap +++ b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap @@ -24,6 +24,30 @@ exports[`EuiIconTip is rendered 1`] = ` `; +exports[`EuiIconTip props color is rendered as the icon color 1`] = ` + + + + + + +`; + exports[`EuiIconTip props type is rendered as the icon 1`] = ` ( +export const EuiIconTip = ({ type, 'aria-label': ariaLabel, color, ...rest }) => ( - + ); @@ -16,6 +16,11 @@ EuiIconTip.propTypes = { */ type: PropTypes.string, + /** + * The icon color. + */ + color: PropTypes.string, + /** * Explain what this icon means for screen readers. */ diff --git a/src/components/tool_tip/icon_tip.test.js b/src/components/tool_tip/icon_tip.test.js index 37775d5fb9c..7b5e8f049a9 100644 --- a/src/components/tool_tip/icon_tip.test.js +++ b/src/components/tool_tip/icon_tip.test.js @@ -25,5 +25,16 @@ describe('EuiIconTip', () => { .toMatchSnapshot(); }); }); + + describe('color', () => { + test('is rendered as the icon color', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + }); }); });