diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d87d58cab6..c5d701b9b17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added a `size` prop to `EuiContextMenu` and added a smaller size ([#4409](https://github.com/elastic/eui/pull/4409)) +- Added a `textSize` prop to `EuiHealth` ([#4420](https://github.com/elastic/eui/pull/4420)) ## [`31.2.0`](https://github.com/elastic/eui/tree/v31.2.0) diff --git a/src-docs/src/views/health/health_example.js b/src-docs/src/views/health/health_example.js index dc023f3e11d..5a29f615582 100644 --- a/src-docs/src/views/health/health_example.js +++ b/src-docs/src/views/health/health_example.js @@ -4,7 +4,7 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiHealth } from '../../../../src/components'; +import { EuiHealth, EuiCode } from '../../../../src/components'; import healthConfig from './playground'; import Health from './health'; @@ -15,6 +15,14 @@ const healthSnippet = [ 'Custom color as hex', ]; +import HealthSize from './health_size'; +const healthTextSizeSource = require('!!raw-loader!./health_size'); +const healthTextSizeHtml = renderToHtml(HealthSize); +const healthTextSizeSnippet = [ + 'Text inherited from the parent element', + 'Text extra small', +]; + export const HealthExample = { title: 'Health', sections: [ @@ -43,6 +51,30 @@ export const HealthExample = { props: { EuiHealth }, demo: , }, + { + title: 'Text sizes', + source: [ + { + type: GuideSectionTypes.JS, + code: healthTextSizeSource, + }, + { + type: GuideSectionTypes.HTML, + code: healthTextSizeHtml, + }, + ], + text: ( +

+ Match the text size of EuiHealth to your context by + passing xs / s / m / inherit to the{' '} + textSize prop. The inherit style + will get its font size from the parent element. +

+ ), + snippet: healthTextSizeSnippet, + props: { EuiHealth }, + demo: , + }, ], playground: healthConfig, }; diff --git a/src-docs/src/views/health/health_size.js b/src-docs/src/views/health/health_size.js new file mode 100644 index 00000000000..1ad761dbf90 --- /dev/null +++ b/src-docs/src/views/health/health_size.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import { EuiHealth, EuiSpacer, EuiTitle } from '../../../../src/components'; + +export default () => ( +
+ + Extra small + + + + + + Small (Default) + + + + + + Medium + + + + + +

+ + Inherit + +

+ +
+); diff --git a/src/components/health/__snapshots__/health.test.tsx.snap b/src/components/health/__snapshots__/health.test.tsx.snap index 73887a83a4a..6e89b94c363 100644 --- a/src/components/health/__snapshots__/health.test.tsx.snap +++ b/src/components/health/__snapshots__/health.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiHealth is rendered 1`] = `
`; + +exports[`EuiHealth props color #000000 is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color accent is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color danger is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color default is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color ghost is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color primary is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color secondary is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color subdued is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color success is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color text is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props color warning is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props textSize inherit is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props textSize m is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props textSize s is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; + +exports[`EuiHealth props textSize xs is rendered 1`] = ` +
+
+
+ +
+
+
+
+`; diff --git a/src/components/health/_health.scss b/src/components/health/_health.scss index f3a9444d8e2..a845c952abc 100644 --- a/src/components/health/_health.scss +++ b/src/components/health/_health.scss @@ -1,4 +1,19 @@ .euiHealth { - @include euiFontSizeS; display: inline-block; } + +.euiHealth--textSizeXS { + @include euiFontSizeXS; +} + +.euiHealth--textSizeS { + @include euiFontSizeS; +} + +.euiHealth--textSizeM { + @include euiFontSizeM; +} + +.euiHealth--textSizeInherit { + font-size: inherit; +} diff --git a/src/components/health/health.test.tsx b/src/components/health/health.test.tsx index f25f95d926d..f09c800d45f 100644 --- a/src/components/health/health.test.tsx +++ b/src/components/health/health.test.tsx @@ -20,8 +20,8 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; - -import { EuiHealth } from './health'; +import { TEXT_SIZES, EuiHealth } from './health'; +import { COLORS } from '../icon/icon'; describe('EuiHealth', () => { test('is rendered', () => { @@ -29,4 +29,28 @@ describe('EuiHealth', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('textSize', () => { + TEXT_SIZES.forEach((textSize) => { + test(`${textSize} is rendered`, () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('color', () => { + [...COLORS, '#000000'].forEach((color) => { + it(`${color} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); }); diff --git a/src/components/health/health.tsx b/src/components/health/health.tsx index c2931025d37..691aa17acbb 100644 --- a/src/components/health/health.tsx +++ b/src/components/health/health.tsx @@ -19,13 +19,22 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; +import { CommonProps, keysOf } from '../common'; import { EuiIcon, IconColor } from '../icon'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; -type EuiHealthProps = CommonProps & +const sizeToClassNameMap = { + xs: 'euiHealth--textSizeXS', + s: 'euiHealth--textSizeS', + m: 'euiHealth--textSizeM', + inherit: 'euiHealth--textSizeInherit', +}; + +export const TEXT_SIZES = keysOf(sizeToClassNameMap); + +export type EuiHealthProps = CommonProps & Omit, 'color'> & { /** * Sets the color of the dot icon. @@ -33,15 +42,25 @@ type EuiHealthProps = CommonProps & * `subdued` or `ghost`; or any valid CSS color value as a `string` */ color?: IconColor; + /** + * Matches the text scales of EuiText. + * The `inherit` style will get its font size from the parent element + */ + textSize?: typeof TEXT_SIZES[number]; }; export const EuiHealth: FunctionComponent = ({ children, className, color, + textSize = 's', ...rest }) => { - const classes = classNames('euiHealth', className); + const classes = classNames( + 'euiHealth', + textSize ? sizeToClassNameMap[textSize] : null, + className + ); return (
diff --git a/src/components/health/index.ts b/src/components/health/index.ts index 99830752888..a5ddbeafdca 100644 --- a/src/components/health/index.ts +++ b/src/components/health/index.ts @@ -17,4 +17,4 @@ * under the License. */ -export { EuiHealth } from './health'; +export { EuiHealth, EuiHealthProps } from './health';