[Emotion] Converted EuiBeacon (#5814)

* Convert EuiBeacon to emotion

* Adding CL

* Adding `keyframes`

* adding animation only for prefers reduce motion no preference

* Adding `shouldRenderCustomStyles`

* Better styles for when reduce motion is turned on

* Addressing PR review

* Adding new snapshots

* Adding comment

* change euiCanAnimate to a constant

* Removing `renderWithStyles()` test

* Updating CL

* Updating CL

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

src-docs/src/views/theme/other/_animation_js.tsx

@@ -39,21 +39,21 @@ export default ({
         description={speedDescription}
         example={
           <div
-            css={css(
-              euiCanAnimate(`
-              transition: background ${euiTheme.animation.slow};
+            css={css`
+              ${euiCanAnimate} {
+                transition: background ${euiTheme.animation.slow};
 
-              :hover {
-                background: ${transparentize(euiTheme.colors.danger, 0.25)};
+                :hover {
+                  background: ${transparentize(euiTheme.colors.danger, 0.25)};
+                }
               }
-            `)
-            )}
+            `}
           >
             <strong>Hover me</strong>
           </div>
         }
         snippet={
-          'css(euiCanAnimate(`transition: background ${euiTheme.animation.slow};`))'
+          'css`${euiCanAnimate}{transition: background ${euiTheme.animation.slow};}`'
         }
         snippetLanguage="ts"
       />
@@ -89,24 +89,24 @@ export default ({
         description={easeDescription}
         example={
           <div
-            css={css(
-              euiCanAnimate(`
-              padding: ${euiTheme.size.s};
-              transition: padding ${euiTheme.animation.slow}
-                ${euiTheme.animation.resistance};
+            css={css`
+              ${euiCanAnimate} {
+                padding: ${euiTheme.size.s};
+                transition: padding ${euiTheme.animation.slow}
+                  ${euiTheme.animation.resistance};
 
-              &:hover {
-                padding: ${euiTheme.size.xl};
+                &:hover {
+                  padding: ${euiTheme.size.xl};
+                }
               }
-            `)
-            )}
+            `}
           >
             <strong>Hover me</strong>
           </div>
         }
         snippetLanguage="ts"
         snippet={
-          'css(euiCanAnimate(`transition: padding ${euiTheme.animation.slow} ${euiTheme.animation.resistance}`))'
+          'css`${euiCanAnimate}{transition: padding ${euiTheme.animation.slow} ${euiTheme.animation.resistance};}`'
         }
       />
 

src-docs/src/views/theme/other/other.tsx

@@ -141,16 +141,17 @@ export default () => {
       <EuiCallOut
         color="warning"
         iconType="accessibility"
-        title={<code>euiCanAnimate()</code>}
+        title={<code>euiCanAnimate</code>}
       >
         <p>
           For accessbility support, we highly recommend always wrapping
-          animations and transitions with this {showSass ? 'mixin' : 'function'}
+          animations and transitions with this {showSass ? 'mixin' : 'constant'}
           . It wraps the contents in a <EuiCode>prefers-reduced-motion</EuiCode>{' '}
           media query to ensure the animations do not run if the user has this
           preference turned off. There is also a counterpart{' '}
-          {showSass ? 'mixin' : 'function'} for running content only if the user
-          has the setting turned off called <EuiCode>euiCantAnimate()</EuiCode>.
+          {showSass ? 'mixin' : 'constant'} for applying content only if the
+          user has the setting turned off called{' '}
+          <EuiCode>euiCantAnimate</EuiCode>.
         </p>
       </EuiCallOut>
 

src/components/beacon/__snapshots__/beacon.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiBeacon accepts size 1`] = `
 <div
   aria-label="aria-label"
-  class="euiBeacon testClass1 testClass2"
+  class="euiBeacon testClass1 testClass2 css-c8h4zr-euiBeacon"
   data-test-subj="test subject string"
   style="height:14px;width:14px"
 />
@@ -12,7 +12,7 @@ exports[`EuiBeacon accepts size 1`] = `
 exports[`EuiBeacon is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiBeacon testClass1 testClass2"
+  class="euiBeacon testClass1 testClass2 css-c8h4zr-euiBeacon"
   data-test-subj="test subject string"
   style="height:12px;width:12px"
 />

src/components/beacon/beacon.styles.ts

@@ -0,0 +1,88 @@
+/*
+ * 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 { keyframes, css } from '@emotion/react';
+import { euiPaletteColorBlind } from '../../services';
+import { euiCanAnimate } from '../../global_styling/variables/_animations';
+
+const visColors = euiPaletteColorBlind();
+
+const euiBeaconPulseLarge = keyframes`
+ 0% {
+    transform: scale(.1);
+    opacity: 1;
+  }
+
+  70% {
+    transform: scale(3);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`;
+
+const euiBeaconPulseSmall = keyframes`
+   0% {
+    transform: scale(.1);
+    opacity: 1;
+  }
+
+  70% {
+    transform: scale(2);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`;
+
+export const euiBeaconStyles = () => ({
+  // Base
+  euiBeacon: css`
+    position: relative;
+    background-color: ${visColors[0]};
+    border-radius: 50%;
+
+    &:before,
+    &:after {
+      position: absolute;
+      content: '';
+      height: 100%;
+      width: 100%;
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      background-color: transparent;
+      border-radius: 50%;
+      box-shadow: 0 0 1px 1px ${visColors[0]};
+    }
+
+    // Without the animation, we only display one ring around the circle
+    // If the animation is allowed the transform and opacity are overriden
+    &:before {
+      transform: scale(1.6);
+      opacity: 0.4;
+    }
+
+    &:after {
+      opacity: 0;
+    }
+
+    ${euiCanAnimate} {
+      &:before {
+        animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out;
+      }
+
+      &:after {
+        animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s;
+      }
+    }
+  `,
+});

src/components/beacon/beacon.test.tsx

@@ -9,10 +9,13 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiBeacon } from './beacon';
 
 describe('EuiBeacon', () => {
+  shouldRenderCustomStyles(<EuiBeacon />);
+
   test('is rendered', () => {
     const component = render(<EuiBeacon {...requiredProps} />);
 

src/components/beacon/beacon.tsx

@@ -10,6 +10,8 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
+import { euiBeaconStyles } from './beacon.styles';
+
 export type EuiBeaconProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
   CommonProps & {
     /**
@@ -25,12 +27,16 @@ export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiBeacon', className);
+  const styles = euiBeaconStyles();
+  const cssStyles = [styles.euiBeacon];
 
-  const styles = {
+  const beaconStyle = {
     ...style,
     height: size,
     width: size,
   };
 
-  return <div className={classes} style={styles} {...rest} />;
+  return (
+    <div className={classes} css={cssStyles} style={beaconStyle} {...rest} />
+  );
 };

src/components/index.scss

@@ -4,7 +4,6 @@
 @import 'accordion/index';
 @import 'badge/index';
 @import 'basic_table/index';
-@import 'beacon/index';
 @import 'bottom_bar/index';
 @import 'button/index';
 @import 'breadcrumbs/index';

src/components/tour/__snapshots__/tour_step.test.tsx.snap

@@ -56,7 +56,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-c8h4zr-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -153,7 +153,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-c8h4zr-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -255,7 +255,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-c8h4zr-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -433,7 +433,7 @@ exports[`EuiTourStep is rendered 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-c8h4zr-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>

src/global_styling/variables/_animations.ts

@@ -5,34 +5,21 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 import { CSSProperties } from 'react';
 
 /**
- * A quick wrapping function around the provided content that adds the
- * `prefers-reduced-motion` media query so that when it is turn off,
- * animations are not run.
- * @param content
- * @returns string
+ * A constant storing the `prefers-reduced-motion` media query
+ * so that when it is turned off, animations are not run.
  */
-export const euiCanAnimate = (content: string) => `
-@media screen and (prefers-reduced-motion: no-preference) {
-    ${content}
-  }
-`;
+export const euiCanAnimate =
+  '@media screen and (prefers-reduced-motion: no-preference)';
 
 /**
- * A quick wrapping function around the provided content that adds the
- * `prefers-reduced-motion` media query that will only run the content if
- * the setting is off (reduce).
- * @param content
- * @returns string
+ * A constant storing the `prefers-reduced-motion` media query that will
+ * only apply the content if the setting is off (reduce).
  */
-export const euiCantAnimate = (content: string) => `
-@media screen and (prefers-reduced-motion: reduce) {
-    ${content}
-  }
-`;
+export const euiCantAnimate =
+  '@media screen and (prefers-reduced-motion: reduce)';
 
 export interface _EuiThemeAnimationSpeed {
   extraFast: CSSProperties['animationDuration'];

upcoming_changelogs/5814.md

@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiBeacon` to Emotion
+- Changed `euiCanAnimate` to a constant