[CSS-in-JS] Convert EuiErrorBoundary (#6053)

* convert euierrorboundary to styling via emotion

* CL

* use classNames

* WIP: background-image

* safari 15.4 repeating-linear-gradient fix

src/components/error_boundary/error_boundary.styles.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { transparentize, UseEuiTheme } from '../../services';
+
+export const euiErrorBoundaryStyles = ({ euiTheme }: UseEuiTheme) => {
+  const color1 = transparentize(euiTheme.colors.danger, 0.25);
+  const color2 = transparentize(euiTheme.colors.danger, 0.05);
+
+  return {
+    euiErrorBoundary: css`
+      background-image: repeating-linear-gradient(
+        45deg,
+        ${color1},
+        ${color1} 1px,
+        ${color2} 1px,
+        ${color2} 19px
+      );
+      background-size: 54px 54px; // Fix for Safari 15.4+
+      ${logicalCSS('padding-horizontal', euiTheme.size.base)};
+      ${logicalCSS('padding-vertical', euiTheme.size.base)};
+    `,
+  };
+};

src/components/error_boundary/error_boundary.tsx

@@ -7,12 +7,15 @@
  */
 
 import React, { Component, HTMLAttributes, ReactNode } from 'react';
-import { CommonProps } from '../common';
 import classNames from 'classnames';
+import { CommonProps } from '../common';
 
 import { EuiTitle } from '../title';
 import { EuiCodeBlock } from '../code';
 import { EuiI18n } from '../i18n';
+import { withEuiTheme, WithEuiThemeProps } from '../../services';
+
+import { euiErrorBoundaryStyles } from './error_boundary.styles';
 
 interface EuiErrorBoundaryState {
   hasError: boolean;
@@ -27,11 +30,13 @@ export type EuiErrorBoundaryProps = CommonProps &
     children: ReactNode;
   };
 
-export class EuiErrorBoundary extends Component<
-  EuiErrorBoundaryProps,
+type EuiErrorBoundaryExtendedProps = EuiErrorBoundaryProps & WithEuiThemeProps;
+
+export class _EuiErrorBoundary extends Component<
+  EuiErrorBoundaryExtendedProps,
   EuiErrorBoundaryState
 > {
-  constructor(props: EuiErrorBoundaryProps) {
+  constructor(props: EuiErrorBoundaryExtendedProps) {
     super(props);
 
     const errorState: EuiErrorBoundaryState = {
@@ -57,14 +62,22 @@ ${stackStr}`;
   }
 
   render() {
-    const { children, 'data-test-subj': _dataTestSubj, ...rest } = this.props;
+    const {
+      className,
+      children,
+      'data-test-subj': _dataTestSubj,
+      theme,
+      ...rest
+    } = this.props;
     const dataTestSubj = classNames('euiErrorBoundary', _dataTestSubj);
+    const styles = euiErrorBoundaryStyles(theme);
 
     if (this.state.hasError) {
       // You can render any custom fallback UI
       return (
         <div
-          className="euiErrorBoundary"
+          css={styles.euiErrorBoundary}
+          className={classNames('euiErrorBoundary', className)}
           data-test-subj={dataTestSubj}
           {...rest}
         >
@@ -83,3 +96,7 @@ ${stackStr}`;
     return children;
   }
 }
+
+export const EuiErrorBoundary = withEuiTheme<EuiErrorBoundaryProps>(
+  _EuiErrorBoundary
+);

src/components/index.scss

@@ -18,7 +18,6 @@
 @import 'description_list/index';
 @import 'drag_and_drop/index';
 @import 'empty_prompt/index';
-@import 'error_boundary/index';
 @import 'filter_group/index';
 @import 'flex/index';
 @import 'flyout/index';

upcoming_changelogs/6053.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiErrorBoundary` to Emotion