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

[CSS-in-JS] Convert EuiErrorBoundary #6053

Merged
merged 6 commits into from
Jul 20, 2022

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Jul 14, 2022

Summary

Converts EuiErrorBoundary to @emotion styling.
Note that if you run this locally, the error overlay on the Error Boundary docs page is expected.

Checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • Checked Code Sandbox works for any docs examples
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6053/

@thompsongl thompsongl marked this pull request as ready for review July 14, 2022 18:53
Copy link
Contributor

@miukimiu miukimiu left a comment

Choose a reason for hiding this comment

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

LGTM! 🎉

I just have a few questions and suggestions. Tested in Chrome, Safari, Edge, and Firefox.

src/components/error_boundary/error_boundary.tsx Outdated Show resolved Hide resolved
EuiErrorBoundaryProps,
type EuiErrorBoundaryExtendedProps = EuiErrorBoundaryProps & WithEuiThemeProps;

export class _EuiErrorBoundary extends Component<
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this component be converted to a function component?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unfortunately it's not yet possible: https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes

We need componentDidCatch for this to function and there is no way to achieve that without a class component.

src/components/error_boundary/error_boundary.styles.ts Outdated Show resolved Hide resolved
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6053/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6053/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6053/

@miukimiu
Copy link
Contributor

@thompsongl it's looking good in Safari 15.4! 🎉

Screenshot 2022-07-20 at 13 51 49

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants