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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
cb387ac
Add isLoading prop to EuiStat
snide Apr 17, 2019
c385a8e
convert stat to TSX
snide Apr 18, 2019
5f98beb
snaps
snide Apr 18, 2019
aec7577
add prop docs back in
snide Apr 18, 2019
476e51f
Update src-docs/src/views/stat/stat_example.js
cchaos Apr 22, 2019
623971b
Update src/components/stat/stat.tsx
cchaos Apr 22, 2019
1a9baa3
tests and feedback
snide Apr 22, 2019
c244e11
snippets
snide Apr 22, 2019
db2aa39
cl and switch for demo
snide Apr 22, 2019
bf8b1bc
stat combo set to false for isloading state
snide Apr 22, 2019
762cdce
Merge remote-tracking branch 'upstream/master' into feature/loading_stat
snide Apr 22, 2019
4893eca
described by and snap mocks
snide Apr 22, 2019
2311513
cl
snide Apr 23, 2019
efb367a
cl
snide Apr 23, 2019
71a24c6
cl, labelledby
snide Apr 23, 2019
a042b3b
fix sass to the way i like it, which caroline reminded me of, even th…
snide Apr 23, 2019
fce5159
fix CL cuz git is stupid, or i am
snide Apr 23, 2019
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
134 changes: 80 additions & 54 deletions src-docs/src/views/stat/stat_combos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,89 @@
import React from 'react';
import React, {
Component,
} from 'react';

import {
EuiStat,
EuiFlexItem,
EuiFlexGroup,
EuiPanel,
EuiIcon,
EuiButtonToggle,
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: true,
snide marked this conversation as resolved.
Show resolved Hide resolved
};
}

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 />
<EuiButtonToggle onChange={this.onToggleChange} label={`isLoading: ${this.state.isLoading}`} isSelected={this.state.isLoading} />
snide marked this conversation as resolved.
Show resolved Hide resolved
</div>
);
}
}
19 changes: 19 additions & 0 deletions src-docs/src/views/stat/stat_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ 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);

export const StatExample = {
title: 'Stat',
sections: [{
Expand Down Expand Up @@ -118,6 +122,21 @@ export const StatExample = {
</p>
),
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 animate.
snide marked this conversation as resolved.
Show resolved Hide resolved
</p>
),
demo: <StatLoading />,
}, {
title: 'Putting it all together',
source: [{
Expand Down
37 changes: 37 additions & 0 deletions src-docs/src/views/stat/stat_loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, {
Component,
} from 'react';

import {
EuiButtonToggle,
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 />
<EuiButtonToggle onChange={this.onToggleChange} label={`isLoading: ${this.state.isLoading}`} isSelected={this.state.isLoading} />
snide marked this conversation as resolved.
Show resolved Hide resolved
</div>
);
}
}
10 changes: 10 additions & 0 deletions src/components/stat/_stat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
.euiStat__title {
color: $euiColorFullShade;

&.euiStat__title-isLoading {
snide marked this conversation as resolved.
Show resolved Hide resolved
animation: euiStatPulse 1.5s infinite ease-in-out;
}

// Create color classes based upon the map.
@each $name, $color in $titleColors {
&--#{$name} {
Expand All @@ -37,4 +41,10 @@
text-align: right;
align-items: flex-end;
}

@keyframes euiStatPulse {
snide marked this conversation as resolved.
Show resolved Hide resolved
0% { opacity: 1; }
50% { opacity: .25; }
100% { opacity: 1; }
}
}
3 changes: 0 additions & 3 deletions src/components/stat/index.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/components/stat/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { EuiStat } from './stat';
138 changes: 0 additions & 138 deletions src/components/stat/stat.js
View file
Open in desktop

This file was deleted.

Loading