diff --git a/src-docs/src/views/theme/other/_animation_js.tsx b/src-docs/src/views/theme/other/_animation_js.tsx
index 803fe4b4280..7f99972b28e 100644
--- a/src-docs/src/views/theme/other/_animation_js.tsx
+++ b/src-docs/src/views/theme/other/_animation_js.tsx
@@ -39,21 +39,21 @@ export default ({
description={speedDescription}
example={
Hover me
}
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={
Hover me
}
snippetLanguage="ts"
snippet={
- 'css(euiCanAnimate(`transition: padding ${euiTheme.animation.slow} ${euiTheme.animation.resistance}`))'
+ 'css`${euiCanAnimate}{transition: padding ${euiTheme.animation.slow} ${euiTheme.animation.resistance};}`'
}
/>
diff --git a/src-docs/src/views/theme/other/other.tsx b/src-docs/src/views/theme/other/other.tsx
index e1ccc7cb69b..ef940638827 100644
--- a/src-docs/src/views/theme/other/other.tsx
+++ b/src-docs/src/views/theme/other/other.tsx
@@ -141,16 +141,17 @@ export default () => {
euiCanAnimate()}
+ title={euiCanAnimate
}
>
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 prefers-reduced-motion{' '}
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 euiCantAnimate().
+ {showSass ? 'mixin' : 'constant'} for applying content only if the
+ user has the setting turned off called{' '}
+ euiCantAnimate.
diff --git a/src/components/beacon/__snapshots__/beacon.test.tsx.snap b/src/components/beacon/__snapshots__/beacon.test.tsx.snap
index 27a4f6d7e95..0a60d8c1e1e 100644
--- a/src/components/beacon/__snapshots__/beacon.test.tsx.snap
+++ b/src/components/beacon/__snapshots__/beacon.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`EuiBeacon accepts size 1`] = `
@@ -12,7 +12,7 @@ exports[`EuiBeacon accepts size 1`] = `
exports[`EuiBeacon is rendered 1`] = `
diff --git a/src/components/beacon/_beacon.scss b/src/components/beacon/_beacon.scss
deleted file mode 100644
index d7f845610d4..00000000000
--- a/src/components/beacon/_beacon.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.euiBeacon {
- position: relative;
- background-color: $euiColorVis0;
- border-radius: 50%;
-
- &:before,
- &:after {
- position: absolute;
- content: '';
- height: 100%;
- width: 100%;
- left: 0;
- top: 0;
- background-color: transparent;
- border-radius: 50%;
- box-shadow: 0 0 1px 1px $euiColorVis0;
- }
-
- &:before {
- animation: euiBeaconPulseLarge 2.5s infinite ease-out;
- }
-
- &:after {
- animation: euiBeaconPulseSmall 2.5s infinite ease-out .25s;
- }
-}
-
-@keyframes euiBeaconPulseLarge {
- 0% {
- transform: scale(.1);
- opacity: 1;
- }
-
- 70% {
- transform: scale(3);
- opacity: 0;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-@keyframes euiBeaconPulseSmall {
- 0% {
- transform: scale(.1);
- opacity: 1;
- }
-
- 70% {
- transform: scale(2);
- opacity: 0;
- }
-
- 100% {
- opacity: 0;
- }
-}
diff --git a/src/components/beacon/_index.scss b/src/components/beacon/_index.scss
deleted file mode 100644
index 8f87073812b..00000000000
--- a/src/components/beacon/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'beacon';
diff --git a/src/components/beacon/beacon.styles.ts b/src/components/beacon/beacon.styles.ts
new file mode 100644
index 00000000000..4b72542e30d
--- /dev/null
+++ b/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;
+ }
+ }
+ `,
+});
diff --git a/src/components/beacon/beacon.test.tsx b/src/components/beacon/beacon.test.tsx
index a26d20eaf5c..7cf40e15166 100644
--- a/src/components/beacon/beacon.test.tsx
+++ b/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();
+
test('is rendered', () => {
const component = render();
diff --git a/src/components/beacon/beacon.tsx b/src/components/beacon/beacon.tsx
index 7ff5982557e..e893e44064a 100644
--- a/src/components/beacon/beacon.tsx
+++ b/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, 'children'> &
CommonProps & {
/**
@@ -25,12 +27,16 @@ export const EuiBeacon: FunctionComponent = ({
...rest
}) => {
const classes = classNames('euiBeacon', className);
+ const styles = euiBeaconStyles();
+ const cssStyles = [styles.euiBeacon];
- const styles = {
+ const beaconStyle = {
...style,
height: size,
width: size,
};
- return ;
+ return (
+
+ );
};
diff --git a/src/components/index.scss b/src/components/index.scss
index 86d7d5bae0c..c99fc65d4d3 100644
--- a/src/components/index.scss
+++ b/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';
diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index e6c9f201278..34c06abc6d9 100644
--- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/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;"
>
@@ -153,7 +153,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
style="left: 0px; top: 10px;"
>
@@ -255,7 +255,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
style="left: 0px; top: 10px;"
>
@@ -433,7 +433,7 @@ exports[`EuiTourStep is rendered 1`] = `
style="left: 0px; top: 10px;"
>
diff --git a/src/global_styling/variables/_animations.ts b/src/global_styling/variables/_animations.ts
index 6d50757743a..d239768e990 100644
--- a/src/global_styling/variables/_animations.ts
+++ b/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'];
diff --git a/upcoming_changelogs/5814.md b/upcoming_changelogs/5814.md
new file mode 100644
index 00000000000..34013afacfc
--- /dev/null
+++ b/upcoming_changelogs/5814.md
@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiBeacon` to Emotion
+- Changed `euiCanAnimate` to a constant
\ No newline at end of file