Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert EuiStat to TSX, add isLoading prop, add tests #1848

Merged
merged 17 commits into from
Apr 23, 2019
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
**Bug fixes**

- Fixed `EuiComboBox` to not pass its `inputRef` prop down to the DOM ([#1867](https://github.com/elastic/eui/pull/1867))
- Fixed `euiBreakpoint()` warning to give accurate feedback ([#1874](https://github.com/elastic/eui/pull/1874))
- Fixed type definitions around `EuiI18n`'s `default` prop to better support use cases ([#1861](https://github.com/elastic/eui/pull/1861))
snide marked this conversation as resolved.
Show resolved Hide resolved
- Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848))
- Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848))

## [`10.1.0`](https://github.com/elastic/eui/tree/v10.1.0)

Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/stat/stat.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default () => (
<EuiFlexItem>
<EuiStat
title="7,600 mm"
description="Total People"
description="Total people"
/>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
138 changes: 84 additions & 54 deletions src-docs/src/views/stat/stat_combos.js
Original file line number Diff line number Diff line change
@@ -1,63 +1,93 @@
import React from 'react';
import React, {
Component,
} from 'react';

import {
EuiStat,
EuiFlexItem,
EuiFlexGroup,
EuiPanel,
EuiIcon,
EuiSwitch,
EuiSpacer,
} from '../../../../src/components';

export default () => (
<div>
<EuiFlexGroup>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="8,888"
description="Total widgets"
textAlign="right"
>
<EuiIcon type="empty" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="2,000"
description="Pending widgets"
titleColor="accent"
textAlign="right"
>
<EuiIcon type="clock" color="accent" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="6,800"
description="Success widgets"
titleColor="secondary"
textAlign="right"
>
<EuiIcon type="check" color="secondary" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="88"
description="Error widgets"
titleColor="danger"
textAlign="right"
>
<EuiIcon type="alert" color="danger" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
export default class extends Component {
constructor(props) {
super(props);

this.state = {
isLoading: false,
};
}

onToggleChange = (e) => {
this.setState({ isLoading: e.target.checked });
}

render() {
return (
<div>
<EuiFlexGroup>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="8,888"
description="Total widgets"
textAlign="right"
isLoading={this.state.isLoading}
>
<EuiIcon type="empty" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="2,000"
description="Pending widgets"
titleColor="accent"
textAlign="right"
isLoading={this.state.isLoading}
>
<EuiIcon type="clock" color="accent" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="6,800"
description="Success widgets"
titleColor="secondary"
textAlign="right"
isLoading={this.state.isLoading}
>
<EuiIcon type="check" color="secondary" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel>
<EuiStat
title="88"
description="Error widgets"
titleColor="danger"
textAlign="right"
isLoading={this.state.isLoading}
>
<EuiIcon type="alert" color="danger" />
</EuiStat>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<EuiSwitch
label="Show as loading"
checked={this.state.isLoading}
onChange={this.onToggleChange}
/>
</div>
);
}
}
61 changes: 61 additions & 0 deletions src-docs/src/views/stat/stat_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,66 @@ import {
import Stat from './stat';
const statSource = require('!!raw-loader!./stat');
const statHtml = renderToHtml(Stat);
const statSnippet = `<EuiStat
title="22,123"
description="Total people"
/>
`;

import StatColors from './stat_colors';
const statColorsSource = require('!!raw-loader!./stat_colors');
const statColorsHtml = renderToHtml(StatColors);
const statColorSnippet = `<EuiStat
title="22,123"
description="Total people"
color="primary"
/>
`;

import StatAlign from './stat_align';
const statAlignSource = require('!!raw-loader!./stat_align');
const statAlignHtml = renderToHtml(StatAlign);
const statAlignSnippet = `<EuiStat
title="22,123"
description="Total people"
textAlign="right"
/>
`;

import StatSize from './stat_size';
const statSizeSource = require('!!raw-loader!./stat_size');
const statSizeHtml = renderToHtml(StatSize);
const statSizeSnippet = `<EuiStat
title="22,123"
description="Total people"
size="xxl"
/>
`;

import StatOrder from './stat_order';
const statOrderSource = require('!!raw-loader!./stat_order');
const statOrderHtml = renderToHtml(StatOrder);
const statOrderSnippet = `<EuiStat
title="22,123"
description="Total people"
reverse
/>
`;

import StatCombos from './stat_combos';
const statCombosSource = require('!!raw-loader!./stat_combos');
const statCombosHtml = renderToHtml(StatCombos);

import StatLoading from './stat_loading';
const statLoadingSource = require('!!raw-loader!./stat_loading');
const statLoadingHtml = renderToHtml(StatLoading);
const statLoadingSnippet = `<EuiStat
title={someNumber}
description="Total people"
isLoading={someNumber == undefined}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

/>
`;

export const StatExample = {
title: 'Stat',
sections: [{
Expand All @@ -53,6 +92,7 @@ export const StatExample = {
),
props: { EuiStat },
demo: <Stat />,
snippet: statSnippet,
}, {
title: 'Applying color',
source: [{
Expand All @@ -68,6 +108,7 @@ export const StatExample = {
For proper color contrast, only a limited set of EUI colors are offered. See the Props tab above for a list of available colors.
</p>
),
snippet: statColorSnippet,
demo: <StatColors />,
}, {
title: 'Text alignment',
Expand All @@ -83,6 +124,7 @@ export const StatExample = {
<EuiCode>EuiStat</EuiCode> also offers alignment options. By default, text will be left aligned.
</p>
),
snippet: statAlignSnippet,
demo: <StatAlign />,
}, {
title: 'Title size',
Expand All @@ -101,6 +143,7 @@ export const StatExample = {
component properties.
</p>
),
snippet: statSizeSnippet,
demo: <StatSize />,
}, {
title: 'Reverse the order',
Expand All @@ -117,7 +160,25 @@ export const StatExample = {
the <EuiCode>reverse</EuiCode> property to true. By default, the description (label) is displayed above the title (value).
</p>
),
snippet: statOrderSnippet,
demo: <StatOrder />,
}, {
title: 'Stat loading',
source: [{
type: GuideSectionTypes.JS,
code: statLoadingSource,
}, {
type: GuideSectionTypes.HTML,
code: statLoadingHtml,
}],
text: (
<p>
If you apply the <EuiCode>isLoading</EuiCode> prop, the title will indicate the loading status by
swapping the provided title with two flashing dashes.
</p>
),
snippet: statLoadingSnippet,
demo: <StatLoading />,
}, {
title: 'Putting it all together',
source: [{
Expand Down
41 changes: 41 additions & 0 deletions src-docs/src/views/stat/stat_loading.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, {
Component,
} from 'react';

import {
EuiSwitch,
EuiStat,
EuiSpacer,
} from '../../../../src/components';

export default class extends Component {
constructor(props) {
super(props);

this.state = {
isLoading: true,
};
}

onToggleChange = (e) => {
this.setState({ isLoading: e.target.checked });
}

render() {
return (
<div>
<EuiStat
title="7,600 mm"
description="Total People"
isLoading={this.state.isLoading}
/>
<EuiSpacer />
<EuiSwitch
label="Show as loading"
checked={this.state.isLoading}
onChange={this.onToggleChange}
/>
</div>
);
}
}
22 changes: 0 additions & 22 deletions src/components/stat/__snapshots__/stat.test.js.snap

This file was deleted.

Loading