From 122883807891a2cd55a1fa569d4d0557ca87c1e6 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 5 Mar 2019 16:33:38 -0800 Subject: [PATCH 1/5] Loading to TS, fix ie11 shadow --- src-docs/src/views/loading/loading_chart.js | 32 -------------- src-docs/src/views/loading/loading_chart.tsx | 20 +++++++++ src-docs/src/views/loading/loading_kibana.js | 13 ------ src-docs/src/views/loading/loading_kibana.tsx | 11 +++++ src-docs/src/views/loading/loading_spinner.js | 24 ----------- .../src/views/loading/loading_spinner.tsx | 15 +++++++ src/components/index.d.ts | 1 - ...st.js.snap => loading_chart.test.tsx.snap} | 4 +- ...t.js.snap => loading_kibana.test.tsx.snap} | 2 +- ....js.snap => loading_spinner.test.tsx.snap} | 2 +- src/components/loading/_loading_kibana.scss | 4 +- src/components/loading/index.d.ts | 42 ------------------- src/components/loading/{index.js => index.ts} | 0 ...g_chart.test.js => loading_chart.test.tsx} | 14 ++----- .../{loading_chart.js => loading_chart.tsx} | 32 +++++++------- ...kibana.test.js => loading_kibana.test.tsx} | 7 +--- .../{loading_kibana.js => loading_kibana.tsx} | 23 +++++----- src/components/loading/loading_spinner.js | 33 --------------- ...inner.test.js => loading_spinner.test.tsx} | 7 +--- src/components/loading/loading_spinner.tsx | 37 ++++++++++++++++ 20 files changed, 127 insertions(+), 196 deletions(-) delete mode 100644 src-docs/src/views/loading/loading_chart.js create mode 100644 src-docs/src/views/loading/loading_chart.tsx delete mode 100644 src-docs/src/views/loading/loading_kibana.js create mode 100644 src-docs/src/views/loading/loading_kibana.tsx delete mode 100644 src-docs/src/views/loading/loading_spinner.js create mode 100644 src-docs/src/views/loading/loading_spinner.tsx rename src/components/loading/__snapshots__/{loading_chart.test.js.snap => loading_chart.test.tsx.snap} (80%) rename src/components/loading/__snapshots__/{loading_kibana.test.js.snap => loading_kibana.test.tsx.snap} (92%) rename src/components/loading/__snapshots__/{loading_spinner.test.js.snap => loading_spinner.test.tsx.snap} (68%) delete mode 100644 src/components/loading/index.d.ts rename src/components/loading/{index.js => index.ts} (100%) rename src/components/loading/{loading_chart.test.js => loading_chart.test.tsx} (54%) rename src/components/loading/{loading_chart.js => loading_chart.tsx} (53%) rename src/components/loading/{loading_kibana.test.js => loading_kibana.test.tsx} (65%) rename src/components/loading/{loading_kibana.js => loading_kibana.tsx} (54%) delete mode 100644 src/components/loading/loading_spinner.js rename src/components/loading/{loading_spinner.test.js => loading_spinner.test.tsx} (65%) create mode 100644 src/components/loading/loading_spinner.tsx diff --git a/src-docs/src/views/loading/loading_chart.js b/src-docs/src/views/loading/loading_chart.js deleted file mode 100644 index 94159b6a024..00000000000 --- a/src-docs/src/views/loading/loading_chart.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import { - EuiLoadingChart, -} from '../../../../src/components'; - -export default () => ( -
- - -    - - - -    - - - -

- - - -    - - - -    - - -
-); - diff --git a/src-docs/src/views/loading/loading_chart.tsx b/src-docs/src/views/loading/loading_chart.tsx new file mode 100644 index 00000000000..830b93fe87d --- /dev/null +++ b/src-docs/src/views/loading/loading_chart.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { EuiLoadingChart } from '../../../../src/components/loading'; + +export default () => ( +
+ +    + +    + +
+
+ +    + +    + +
+); diff --git a/src-docs/src/views/loading/loading_kibana.js b/src-docs/src/views/loading/loading_kibana.js deleted file mode 100644 index 945116f0502..00000000000 --- a/src-docs/src/views/loading/loading_kibana.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -import { - EuiLoadingKibana, -} from '../../../../src/components'; - -export default () => ( -
- - - -
-); diff --git a/src-docs/src/views/loading/loading_kibana.tsx b/src-docs/src/views/loading/loading_kibana.tsx new file mode 100644 index 00000000000..50c8c293851 --- /dev/null +++ b/src-docs/src/views/loading/loading_kibana.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { EuiLoadingKibana } from '../../../../src/components/loading'; + +export default () => ( +
+ + + +
+); diff --git a/src-docs/src/views/loading/loading_spinner.js b/src-docs/src/views/loading/loading_spinner.js deleted file mode 100644 index 79d47a9fa44..00000000000 --- a/src-docs/src/views/loading/loading_spinner.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import { - EuiLoadingSpinner, -} from '../../../../src/components'; - -export default () => ( -
- - -    - - - -    - - - -    - - -
-); - diff --git a/src-docs/src/views/loading/loading_spinner.tsx b/src-docs/src/views/loading/loading_spinner.tsx new file mode 100644 index 00000000000..c2a54693b4a --- /dev/null +++ b/src-docs/src/views/loading/loading_spinner.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { EuiLoadingSpinner } from '../../../../src/components/loading'; + +export default () => ( +
+ +    + +    + +    + +
+); diff --git a/src/components/index.d.ts b/src/components/index.d.ts index d55fe2fa0c5..7897027fc80 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -17,7 +17,6 @@ /// /// /// -/// /// /// /// diff --git a/src/components/loading/__snapshots__/loading_chart.test.js.snap b/src/components/loading/__snapshots__/loading_chart.test.tsx.snap similarity index 80% rename from src/components/loading/__snapshots__/loading_chart.test.js.snap rename to src/components/loading/__snapshots__/loading_chart.test.tsx.snap index 742164102d4..72e438a0106 100644 --- a/src/components/loading/__snapshots__/loading_chart.test.js.snap +++ b/src/components/loading/__snapshots__/loading_chart.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiLoadingChart is rendered 1`] = `
`; diff --git a/src/components/loading/_loading_kibana.scss b/src/components/loading/_loading_kibana.scss index 62eabbac10f..f08a3b6a0ab 100644 --- a/src/components/loading/_loading_kibana.scss +++ b/src/components/loading/_loading_kibana.scss @@ -7,11 +7,9 @@ position: absolute; content: ''; width: 90%; - left: 50%; - transform: translateX(-50%); + left: 5%; border-radius: 50%; opacity: .2; - transform-origin: -50% -50%; z-index: 1; } diff --git a/src/components/loading/index.d.ts b/src/components/loading/index.d.ts deleted file mode 100644 index 4916d985e11..00000000000 --- a/src/components/loading/index.d.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { CommonProps } from '../common'; - -import { FunctionComponent, HTMLAttributes } from 'react'; - -declare module '@elastic/eui' { - /** - * @see './loading_spinner.js' - */ - export type EuiLoadingSpinnerSize = 's' | 'm' | 'l' | 'xl'; - - export type EuiLoadingSpinnerProps = CommonProps & - HTMLAttributes & { - size?: EuiLoadingSpinnerSize; - }; - - export const EuiLoadingSpinner: FunctionComponent; - - /** - * @see './loading_chart.js' - */ - export type EuiLoadingChartSize = 'm' | 'l' | 'xl'; - - export type EuiLoadingChartProps = CommonProps & - HTMLAttributes & { - mono?: boolean; - size?: EuiLoadingChartSize; - }; - - export const EuiLoadingChart: FunctionComponent; - - - /** - * @see './loading_kibana.js' - */ - export interface EuiLoadingKibanaProps { - size: 'm' | 'l' | 'xl'; - } - - export const EuiLoadingKibana: FunctionComponent< - CommonProps & HTMLAttributes & EuiLoadingKibanaProps - >; -} diff --git a/src/components/loading/index.js b/src/components/loading/index.ts similarity index 100% rename from src/components/loading/index.js rename to src/components/loading/index.ts diff --git a/src/components/loading/loading_chart.test.js b/src/components/loading/loading_chart.test.tsx similarity index 54% rename from src/components/loading/loading_chart.test.js rename to src/components/loading/loading_chart.test.tsx index 5d01f548a60..d55ac56dd5b 100644 --- a/src/components/loading/loading_chart.test.js +++ b/src/components/loading/loading_chart.test.tsx @@ -6,20 +6,14 @@ import { EuiLoadingChart } from './loading_chart'; describe('EuiLoadingChart', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); test('mono is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/loading/loading_chart.js b/src/components/loading/loading_chart.tsx similarity index 53% rename from src/components/loading/loading_chart.js rename to src/components/loading/loading_chart.tsx index 6b5af4bcab4..027573f5dee 100644 --- a/src/components/loading/loading_chart.js +++ b/src/components/loading/loading_chart.tsx @@ -1,6 +1,8 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { SFC, HTMLAttributes } from 'react'; import classNames from 'classnames'; +import { CommonProps } from '../common'; + +export type EuiLoadingChartSize = 'm' | 'l' | 'xl'; const sizeToClassNameMap = { m: 'euiLoadingChart--medium', @@ -10,19 +12,25 @@ const sizeToClassNameMap = { export const SIZES = Object.keys(sizeToClassNameMap); -export const EuiLoadingChart = ({ size, mono, className, ...rest }) => { +export const EuiLoadingChart: SFC< + CommonProps & + HTMLAttributes & { + /** + * Makes the loader animation black and white + */ + mono?: boolean; + size?: EuiLoadingChartSize; + } +> = ({ size, mono, className, ...rest }) => { const classes = classNames( 'euiLoadingChart', mono === true ? 'euiLoadingChart--mono' : '', className, - sizeToClassNameMap[size], + size ? sizeToClassNameMap[size] : '' ); return ( -
+
@@ -31,11 +39,7 @@ export const EuiLoadingChart = ({ size, mono, className, ...rest }) => { ); }; -EuiLoadingChart.propTypes = { - mono: PropTypes.bool, - size: PropTypes.oneOf(SIZES) -}; - EuiLoadingChart.defaultProps = { - mono: false + mono: false, + size: 'm', }; diff --git a/src/components/loading/loading_kibana.test.js b/src/components/loading/loading_kibana.test.tsx similarity index 65% rename from src/components/loading/loading_kibana.test.js rename to src/components/loading/loading_kibana.test.tsx index 2291ccd2ce9..04c8a4f0af9 100644 --- a/src/components/loading/loading_kibana.test.js +++ b/src/components/loading/loading_kibana.test.tsx @@ -6,11 +6,8 @@ import { EuiLoadingKibana } from './loading_kibana'; describe('EuiLoadingKibana', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/loading/loading_kibana.js b/src/components/loading/loading_kibana.tsx similarity index 54% rename from src/components/loading/loading_kibana.js rename to src/components/loading/loading_kibana.tsx index 38edb72e87c..e06e4e04a29 100644 --- a/src/components/loading/loading_kibana.js +++ b/src/components/loading/loading_kibana.tsx @@ -1,8 +1,12 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { SFC, HTMLAttributes } from 'react'; import classNames from 'classnames'; +import { CommonProps } from '../common'; import { EuiIcon } from '../icon'; +export interface EuiLoadingKibanaProps { + size: 'm' | 'l' | 'xl'; +} + const sizeToClassNameMap = { m: 'euiLoadingKibana--medium', l: 'euiLoadingKibana--large', @@ -11,18 +15,17 @@ const sizeToClassNameMap = { export const SIZES = Object.keys(sizeToClassNameMap); -export const EuiLoadingKibana = ({ children, size, className, ...rest }) => { +export const EuiLoadingKibana: SFC< + CommonProps & HTMLAttributes & EuiLoadingKibanaProps +> = ({ children, size, className, ...rest }) => { const classes = classNames( 'euiLoadingKibana', sizeToClassNameMap[size], - className, + className ); return ( -
+
@@ -31,6 +34,6 @@ export const EuiLoadingKibana = ({ children, size, className, ...rest }) => { ); }; -EuiLoadingKibana.propTypes = { - size: PropTypes.oneOf(SIZES), +EuiLoadingKibana.defaultProps = { + size: 'm', }; diff --git a/src/components/loading/loading_spinner.js b/src/components/loading/loading_spinner.js deleted file mode 100644 index 64bb68e3c29..00000000000 --- a/src/components/loading/loading_spinner.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const sizeToClassNameMap = { - s: 'euiLoadingSpinner--small', - m: 'euiLoadingSpinner--medium', - l: 'euiLoadingSpinner--large', - xl: 'euiLoadingSpinner--xLarge', -}; - -export const SIZES = Object.keys(sizeToClassNameMap); - -export const EuiLoadingSpinner = ({ children, size, className, ...rest }) => { - const classes = classNames( - 'euiLoadingSpinner', - sizeToClassNameMap[size], - className - ); - - return ( -
- {children} -
- ); -}; - -EuiLoadingSpinner.propTypes = { - size: PropTypes.oneOf(SIZES), -}; diff --git a/src/components/loading/loading_spinner.test.js b/src/components/loading/loading_spinner.test.tsx similarity index 65% rename from src/components/loading/loading_spinner.test.js rename to src/components/loading/loading_spinner.test.tsx index 92f4e7d2d84..177f345361e 100644 --- a/src/components/loading/loading_spinner.test.js +++ b/src/components/loading/loading_spinner.test.tsx @@ -6,11 +6,8 @@ import { EuiLoadingSpinner } from './loading_spinner'; describe('EuiLoadingSpinner', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx new file mode 100644 index 00000000000..6545b529529 --- /dev/null +++ b/src/components/loading/loading_spinner.tsx @@ -0,0 +1,37 @@ +import React, { SFC, HTMLAttributes } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; + +export type EuiLoadingSpinnerSize = 's' | 'm' | 'l' | 'xl'; + +const sizeToClassNameMap = { + s: 'euiLoadingSpinner--small', + m: 'euiLoadingSpinner--medium', + l: 'euiLoadingSpinner--large', + xl: 'euiLoadingSpinner--xLarge', +}; + +export const SIZES = Object.keys(sizeToClassNameMap); + +export const EuiLoadingSpinner: SFC< + CommonProps & + HTMLAttributes & { + size?: EuiLoadingSpinnerSize; + } +> = ({ children, size, className, ...rest }) => { + const classes = classNames( + 'euiLoadingSpinner', + size ? sizeToClassNameMap[size] : '', + className + ); + + return ( +
+ {children} +
+ ); +}; + +EuiLoadingSpinner.defaultProps = { + size: 'm', +}; From 128a6b7b77d63e00f5ed4b05b7d1b17f35bbe1d4 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 5 Mar 2019 16:39:57 -0800 Subject: [PATCH 2/5] cl --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa79be5d83e..ae23d514cde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ - Added `fullWidth` prop to `EuiButton` ([#1665](https://github.com/elastic/eui/pull/1665)) - Added `.eui-fullWidth` utility class ([#1665](https://github.com/elastic/eui/pull/1665)) - Added `EuiPopoverFooter` and converted `EuiPopoverTitle` to TS ([#1666](https://github.com/elastic/eui/pull/1666)) +- Converted `EuiLoadingSpinner`, `EuiLoadingKibana`, and `EuiLoadingChart` to TS ([#1683](https://github.com/elastic/eui/pull/1683)) + +**Bug fixes** + +- Fixed IE11 rendering issue in `EuiLoadingKibana` ([#1683](https://github.com/elastic/eui/pull/1683)) ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1) From 713bf87a49e2e8dec266b4612f47a025a3489c80 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Wed, 6 Mar 2019 12:08:43 -0800 Subject: [PATCH 3/5] Update src/components/loading/loading_chart.tsx Co-Authored-By: snide --- src/components/loading/loading_chart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/loading/loading_chart.tsx b/src/components/loading/loading_chart.tsx index 027573f5dee..359eb6ef585 100644 --- a/src/components/loading/loading_chart.tsx +++ b/src/components/loading/loading_chart.tsx @@ -24,7 +24,7 @@ export const EuiLoadingChart: SFC< > = ({ size, mono, className, ...rest }) => { const classes = classNames( 'euiLoadingChart', - mono === true ? 'euiLoadingChart--mono' : '', + { 'euiLoadingChart--mono' : mono }, className, size ? sizeToClassNameMap[size] : '' ); From 8961d4e03f4639bcab12a1b0c0f0ba10cd702b3b Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 6 Mar 2019 13:30:32 -0800 Subject: [PATCH 4/5] address feedback, add some tests --- .../__snapshots__/loading_chart.test.tsx.snap | 57 +++++++++ .../loading_kibana.test.tsx.snap | 111 ++++++++++++++++++ .../loading_spinner.test.tsx.snap | 24 ++++ src/components/loading/loading_chart.test.tsx | 11 +- src/components/loading/loading_chart.tsx | 23 ++-- .../loading/loading_kibana.test.tsx | 14 ++- src/components/loading/loading_kibana.tsx | 23 ++-- .../loading/loading_spinner.test.tsx | 12 +- src/components/loading/loading_spinner.tsx | 26 ++-- .../field_value_selection_filter.test.js.snap | 9 -- 10 files changed, 252 insertions(+), 58 deletions(-) diff --git a/src/components/loading/__snapshots__/loading_chart.test.tsx.snap b/src/components/loading/__snapshots__/loading_chart.test.tsx.snap index 72e438a0106..8505d80a232 100644 --- a/src/components/loading/__snapshots__/loading_chart.test.tsx.snap +++ b/src/components/loading/__snapshots__/loading_chart.test.tsx.snap @@ -39,3 +39,60 @@ exports[`EuiLoadingChart mono is rendered 1`] = ` />
`; + +exports[`EuiLoadingChart size l is rendered 1`] = ` +
+
+
+
+
+
+`; + +exports[`EuiLoadingChart size m is rendered 1`] = ` +
+
+
+
+
+
+`; + +exports[`EuiLoadingChart size xl is rendered 1`] = ` +
+
+
+
+
+
+`; diff --git a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap b/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap index e3e20e667ed..4a32a07247d 100644 --- a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap +++ b/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap @@ -38,3 +38,114 @@ exports[`EuiLoadingKibana is rendered 1`] = `
`; + +exports[`EuiLoadingKibana size l is rendered 1`] = ` +
+
+ + + + + + + +
+
+`; + +exports[`EuiLoadingKibana size m is rendered 1`] = ` +
+
+ + + + + + + +
+
+`; + +exports[`EuiLoadingKibana size xl is rendered 1`] = ` +
+
+ + + + + + + +
+
+`; diff --git a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap index af2e749586d..c40ac4a73bb 100644 --- a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap +++ b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap @@ -7,3 +7,27 @@ exports[`EuiLoadingSpinner is rendered 1`] = ` data-test-subj="test subject string" /> `; + +exports[`EuiLoadingSpinner size l is rendered 1`] = ` +
+`; + +exports[`EuiLoadingSpinner size m is rendered 1`] = ` +
+`; + +exports[`EuiLoadingSpinner size s is rendered 1`] = ` +
+`; + +exports[`EuiLoadingSpinner size xl is rendered 1`] = ` +
+`; diff --git a/src/components/loading/loading_chart.test.tsx b/src/components/loading/loading_chart.test.tsx index d55ac56dd5b..ce4c1d1f487 100644 --- a/src/components/loading/loading_chart.test.tsx +++ b/src/components/loading/loading_chart.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiLoadingChart } from './loading_chart'; +import { EuiLoadingChart, SIZES } from './loading_chart'; describe('EuiLoadingChart', () => { test('is rendered', () => { @@ -16,4 +16,13 @@ describe('EuiLoadingChart', () => { expect(component).toMatchSnapshot(); }); + describe('size', () => { + SIZES.forEach(size => { + test(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); diff --git a/src/components/loading/loading_chart.tsx b/src/components/loading/loading_chart.tsx index 359eb6ef585..2eef9b272c7 100644 --- a/src/components/loading/loading_chart.tsx +++ b/src/components/loading/loading_chart.tsx @@ -1,8 +1,6 @@ -import React, { SFC, HTMLAttributes } from 'react'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; - -export type EuiLoadingChartSize = 'm' | 'l' | 'xl'; +import { CommonProps, keysOf } from '../common'; const sizeToClassNameMap = { m: 'euiLoadingChart--medium', @@ -10,9 +8,11 @@ const sizeToClassNameMap = { xl: 'euiLoadingChart--xLarge', }; -export const SIZES = Object.keys(sizeToClassNameMap); +export const SIZES = keysOf(sizeToClassNameMap); + +export type EuiLoadingChartSize = keyof typeof sizeToClassNameMap; -export const EuiLoadingChart: SFC< +export const EuiLoadingChart: FunctionComponent< CommonProps & HTMLAttributes & { /** @@ -21,12 +21,12 @@ export const EuiLoadingChart: SFC< mono?: boolean; size?: EuiLoadingChartSize; } -> = ({ size, mono, className, ...rest }) => { +> = ({ size = 'm', mono = false, className, ...rest }) => { const classes = classNames( 'euiLoadingChart', - { 'euiLoadingChart--mono' : mono }, + { 'euiLoadingChart--mono': mono }, className, - size ? sizeToClassNameMap[size] : '' + sizeToClassNameMap[size] ); return ( @@ -38,8 +38,3 @@ export const EuiLoadingChart: SFC<
); }; - -EuiLoadingChart.defaultProps = { - mono: false, - size: 'm', -}; diff --git a/src/components/loading/loading_kibana.test.tsx b/src/components/loading/loading_kibana.test.tsx index 04c8a4f0af9..9c7ade207fb 100644 --- a/src/components/loading/loading_kibana.test.tsx +++ b/src/components/loading/loading_kibana.test.tsx @@ -2,12 +2,22 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiLoadingKibana } from './loading_kibana'; +import { EuiLoadingKibana, SIZES } from './loading_kibana'; describe('EuiLoadingKibana', () => { test('is rendered', () => { - const component = render(); + const component = render(); expect(component).toMatchSnapshot(); }); + + describe('size', () => { + SIZES.forEach(size => { + test(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); diff --git a/src/components/loading/loading_kibana.tsx b/src/components/loading/loading_kibana.tsx index e06e4e04a29..d3826231aab 100644 --- a/src/components/loading/loading_kibana.tsx +++ b/src/components/loading/loading_kibana.tsx @@ -1,23 +1,23 @@ -import React, { SFC, HTMLAttributes } from 'react'; +import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; +import { CommonProps, keysOf } from '../common'; import { EuiIcon } from '../icon'; -export interface EuiLoadingKibanaProps { - size: 'm' | 'l' | 'xl'; -} - const sizeToClassNameMap = { m: 'euiLoadingKibana--medium', l: 'euiLoadingKibana--large', xl: 'euiLoadingKibana--xLarge', }; -export const SIZES = Object.keys(sizeToClassNameMap); +export const SIZES = keysOf(sizeToClassNameMap); + +export interface EuiLoadingKibanaProps { + size?: keyof typeof sizeToClassNameMap; +} -export const EuiLoadingKibana: SFC< +export const EuiLoadingKibana: FunctionComponent< CommonProps & HTMLAttributes & EuiLoadingKibanaProps -> = ({ children, size, className, ...rest }) => { +> = ({ size = 'm', className, ...rest }) => { const classes = classNames( 'euiLoadingKibana', sizeToClassNameMap[size], @@ -29,11 +29,6 @@ export const EuiLoadingKibana: SFC<
- {children}
); }; - -EuiLoadingKibana.defaultProps = { - size: 'm', -}; diff --git a/src/components/loading/loading_spinner.test.tsx b/src/components/loading/loading_spinner.test.tsx index 177f345361e..5bf0fc3f341 100644 --- a/src/components/loading/loading_spinner.test.tsx +++ b/src/components/loading/loading_spinner.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiLoadingSpinner } from './loading_spinner'; +import { EuiLoadingSpinner, SIZES } from './loading_spinner'; describe('EuiLoadingSpinner', () => { test('is rendered', () => { @@ -10,4 +10,14 @@ describe('EuiLoadingSpinner', () => { expect(component).toMatchSnapshot(); }); + + describe('size', () => { + SIZES.forEach(size => { + test(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx index 6545b529529..9436dc74855 100644 --- a/src/components/loading/loading_spinner.tsx +++ b/src/components/loading/loading_spinner.tsx @@ -1,9 +1,7 @@ -import React, { SFC, HTMLAttributes } from 'react'; -import { CommonProps } from '../common'; +import React, { HTMLAttributes, FunctionComponent } from 'react'; +import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; -export type EuiLoadingSpinnerSize = 's' | 'm' | 'l' | 'xl'; - const sizeToClassNameMap = { s: 'euiLoadingSpinner--small', m: 'euiLoadingSpinner--medium', @@ -11,27 +9,21 @@ const sizeToClassNameMap = { xl: 'euiLoadingSpinner--xLarge', }; -export const SIZES = Object.keys(sizeToClassNameMap); +export const SIZES = keysOf(sizeToClassNameMap); + +export type EuiLoadingSpinnerSize = keyof typeof sizeToClassNameMap; -export const EuiLoadingSpinner: SFC< +export const EuiLoadingSpinner: FunctionComponent< CommonProps & HTMLAttributes & { size?: EuiLoadingSpinnerSize; } -> = ({ children, size, className, ...rest }) => { +> = ({ size = 'm', className, ...rest }) => { const classes = classNames( 'euiLoadingSpinner', - size ? sizeToClassNameMap[size] : '', + sizeToClassNameMap[size], className ); - return ( -
- {children} -
- ); -}; - -EuiLoadingSpinner.defaultProps = { - size: 'm', + return
; }; diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap index c7202d190d7..74a089b47c2 100644 --- a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap +++ b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap @@ -32,7 +32,6 @@ exports[`FieldValueSelectionFilter active - field is global 1`] = ` className="euiFilterSelect__noteContent" > Date: Wed, 6 Mar 2019 13:47:01 -0800 Subject: [PATCH 5/5] add snippets --- src-docs/src/views/loading/loading_example.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src-docs/src/views/loading/loading_example.js b/src-docs/src/views/loading/loading_example.js index 47a3d99417f..bb5d82e043d 100644 --- a/src-docs/src/views/loading/loading_example.js +++ b/src-docs/src/views/loading/loading_example.js @@ -42,6 +42,7 @@ export const LoadingExample = { ), props: { EuiLoadingKibana }, demo: , + snippet: `` }, { title: 'Chart', source: [{ @@ -61,6 +62,7 @@ export const LoadingExample = { ), props: { EuiLoadingChart }, demo: , + snippet: `` }, { title: 'Spinner', source: [{ @@ -77,5 +79,6 @@ export const LoadingExample = { ), props: { EuiLoadingSpinner }, demo: , + snippet: `` }], };