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

Conversation

snide
Copy link
Contributor

@snide snide commented Apr 17, 2019

Summary

WIP, but feel free to comment on the actual solution. I'm wanna see if I can convert this to TS quickly while I'm in here.

cc @angorayc since she had some need for something like this and we discussed it in her earlier PR.

Checklist

  • This was checked in mobile
  • This was checked in IE11
  • This was checked in dark mode
  • Any props added have proper autodocs
  • Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios
  • This required updates to Framer X components

src/components/stat/stat.js Outdated Show resolved Hide resolved
@ryankeairns
Copy link
Contributor

👍 Nice, simple solution.

@snide snide changed the title Add isLoading prop to EuiStat Convert EuiStat to TSX, add isLoading prop Apr 18, 2019
// @ts-ignore
<EuiI18n token="euiStat.loadingText" default="Statistic is loading">
{/* // @ts-ignore */}
{(loadingText: string) => <p aria-label={loadingText}>--</p>}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@chandlerprall

re: TS error around EuiI18n usage.

@snide
Copy link
Contributor Author

snide commented Apr 18, 2019

K, went ahead and converted this component to TS. Had a minor hiccup with our 18n service, but otherwise should be reviewable.

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

TypeScript & code changes LGTM

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

I like the simplicity and it's not an overwhelming animation when there are a lot of them on the screen at once.

Checked Chrome, FF and IE 👍

Renders well, just had some code comments.

src/components/stat/_stat.scss Outdated Show resolved Hide resolved
src/components/stat/_stat.scss Outdated Show resolved Hide resolved
src/components/stat/stat.tsx Outdated Show resolved Hide resolved
src-docs/src/views/stat/stat_example.js Outdated Show resolved Hide resolved
src-docs/src/views/stat/stat_loading.js Outdated Show resolved Hide resolved
src-docs/src/views/stat/stat_combos.js Outdated Show resolved Hide resolved
src-docs/src/views/stat/stat_combos.js Outdated Show resolved Hide resolved
src/components/stat/stat.tsx Outdated Show resolved Hide resolved
@cchaos
Copy link
Contributor

cchaos commented Apr 22, 2019

We should also think about beefing up the tests https://github.com/elastic/eui/blob/aec7577e20036f998981ca8fdbc0e3267ec36b5a/src/components/stat/stat.test.js and adding some snippets.

@snide
Copy link
Contributor Author

snide commented Apr 22, 2019

"Oh, I'll just add a prop" somehow turned into "Let me rewrite this in typescript, add tests and fix a bunch of accessibility and docs issues".

I think I got to all the requests though 😉

@snide snide requested a review from cchaos April 23, 2019 04:07
@snide snide changed the title Convert EuiStat to TSX, add isLoading prop Convert EuiStat to TSX, add isLoading prop, add tests Apr 23, 2019
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

I just saw a couple of things, the only blocking one being the aria label, but feel free to merge when fixed.

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!

src/components/stat/_stat.scss Outdated Show resolved Hide resolved
src/components/stat/stat.test.tsx Show resolved Hide resolved
src/components/stat/stat.tsx Outdated Show resolved Hide resolved
CHANGELOG.md Outdated Show resolved Hide resolved
CHANGELOG.md Show resolved Hide resolved
@snide snide merged commit c49a998 into elastic:master Apr 23, 2019
@snide snide deleted the feature/loading_stat branch April 23, 2019 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants