[mixins] Memoize useEuiButtonFocusCSS

+ fix animation relying on existing Sass CSS instead of generating actual keyframes from Emotion

src/themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useEuiButtonFocusCSS 1`] = `
+Object {
+  "map": undefined,
+  "name": "1s8jae7-focusCSS",
+  "next": Object {
+    "name": "animation-70pju1",
+    "next": undefined,
+    "styles": "@keyframes animation-70pju1{
+  50% {
+    transform: translateY(1px);
+  }
+}",
+  },
+  "styles": "@media screen and (prefers-reduced-motion: no-preference){transition:transform 250ms ease-in-out,background-color 250ms ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:animation-70pju1 250ms cubic-bezier(.34, 1.61, .7, 1);}&:active:not(:disabled){transform:translateY(1px);}};",
+  "toString": [Function],
+}
+`;

src/themes/amsterdam/global_styling/mixins/button.test.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 { renderHook } from '@testing-library/react';
+
+import { useEuiButtonFocusCSS } from './button';
+
+test('useEuiButtonFocusCSS', () => {
+  const { result } = renderHook(() => useEuiButtonFocusCSS());
+  expect(result.current).toMatchSnapshot();
+});

src/themes/amsterdam/global_styling/mixins/button.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import { euiBackgroundColor, euiCanAnimate } from '../../../../global_styling';
 import {
   hexToRgb,
@@ -17,6 +17,7 @@ import {
   transparentize,
   useEuiTheme,
   UseEuiTheme,
+  useEuiMemoizedStyles,
 } from '../../../../services';
 
 export const BUTTON_COLORS = [
@@ -219,10 +220,16 @@ export const useEuiButtonColorCSS = (options: _EuiButtonOptions = {}) => {
  * Creates the translate animation when button is in focus.
  * @returns string
  */
-export const useEuiButtonFocusCSS = () => {
-  const { euiTheme } = useEuiTheme();
+export const useEuiButtonFocusCSS = () =>
+  useEuiMemoizedStyles<any>(euiButtonFocusCSS);
 
-  return `
+const euiButtonFocusAnimation = keyframes`
+  50% {
+    transform: translateY(1px);
+  }
+`;
+const euiButtonFocusCSS = ({ euiTheme }: UseEuiTheme) => {
+  const focusCSS = css`
     ${euiCanAnimate} {
       transition: transform ${euiTheme.animation.normal} ease-in-out,
         background-color ${euiTheme.animation.normal} ease-in-out;
@@ -232,7 +239,7 @@ export const useEuiButtonFocusCSS = () => {
       }
 
       &:focus {
-        animation: euiButtonActive ${euiTheme.animation.normal}
+        animation: ${euiButtonFocusAnimation} ${euiTheme.animation.normal}
           ${euiTheme.animation.bounce};
       }
 
@@ -241,6 +248,11 @@ export const useEuiButtonFocusCSS = () => {
       }
     }
   `;
+  // Remove the auto-generated label.
+  // We could typically avoid a label by using a plain string `` instead of css``,
+  // but we need css`` for keyframes`` to work for the focus animation
+  focusCSS.styles = focusCSS.styles.replace('label:focusCSS;', '');
+  return focusCSS;
 };
 
 /**