Convert .eui-isFocusable global to Emotion

+ convert mixin to accept the entire euiThemeContext instead of just the euiTheme to match all other mixins
elastic · Aug 11, 2022 · 6d390a2 · 6d390a2
1 parent c674551
commit 6d390a2
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 19 deletions.
diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts
@@ -81,10 +81,10 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     // Types
     page: css`
       &:is(a):focus {
-        ${euiFocusRing(euiTheme, 'inset')};
+        ${euiFocusRing(euiThemeContext, 'inset')};
       }
       &:is(button):focus {
-        ${euiFocusRing(euiTheme, 'center')};
+        ${euiFocusRing(euiThemeContext, 'center')};
       }
     `,
     application: css`
@@ -109,7 +109,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
         color: ${euiTheme.colors.link};
 
         :focus {
-          ${euiFocusRing(euiTheme, 'inset')};
+          ${euiFocusRing(euiThemeContext, 'inset')};
 
           :focus-visible {
             border-radius: ${euiTheme.border.radius.medium};

diff --git a/src/components/image/image_button.styles.ts b/src/components/image/image_button.styles.ts
@@ -51,7 +51,7 @@ export const euiImageButtonStyles = (euiThemeContext: UseEuiTheme) => {
       }
 
       &:focus {
-        ${euiFocusRing(euiTheme, 'outset')}
+        ${euiFocusRing(euiThemeContext, 'outset')}
       }
     `,
     fullWidth: css`

diff --git a/src/components/link/link.styles.ts b/src/components/link/link.styles.ts
@@ -39,7 +39,8 @@ export const euiLinkFocusCSS = (euiTheme: UseEuiTheme['euiTheme']) => {
   `;
 };
 
-export const euiLinkCSS = (euiTheme: UseEuiTheme['euiTheme']) => {
+export const euiLinkCSS = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return `
     font-weight: ${euiTheme.font.weight.medium};
     text-align: left;
@@ -49,16 +50,17 @@ export const euiLinkCSS = (euiTheme: UseEuiTheme['euiTheme']) => {
     }
 
     &:focus {
-      ${euiFocusRing(euiTheme, 'outset')}
+      ${euiFocusRing(euiThemeContext, 'outset')}
       ${euiLinkFocusCSS(euiTheme)}
     }
   `;
 };
 
-export const euiLinkStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiLinkStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiLink: css`
-      ${euiLinkCSS(euiTheme)}
+      ${euiLinkCSS(euiThemeContext)}
       user-select: text;
 
       &[target='_blank'] {

diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
@@ -226,7 +226,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
       // Style anchors that don't have a class. This prevents overwriting "buttons"
       // and other stylized elements passed in.
       a:not([class]) {
-        ${euiLinkCSS(euiTheme)}
+        ${euiLinkCSS(euiThemeContext)}
       }
 
       img {

diff --git a/src/global_styling/mixins/_states.ts b/src/global_styling/mixins/_states.ts
@@ -24,7 +24,7 @@ export type _EuiFocusRingOffset =
  * @param color Accepts any CSS color, **Note: only works in -webkit-**
  */
 export const euiFocusRing = (
-  euiTheme: UseEuiTheme['euiTheme'],
+  { euiTheme }: UseEuiTheme,
   offset: _EuiFocusRingOffset = 'center',
   options?: { color?: CSSProperties['outlineColor'] }
 ) => {
@@ -66,6 +66,6 @@ export const useEuiFocusRing = (
   offset?: _EuiFocusRingOffset,
   color?: CSSProperties['outlineColor']
 ) => {
-  const { euiTheme } = useEuiTheme();
+  const euiTheme = useEuiTheme();
   return euiFocusRing(euiTheme, offset, { color });
 };
diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx
@@ -85,7 +85,7 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => {
     }
 
     *:focus {
-      ${euiFocusRing(euiTheme)}
+      ${euiFocusRing(euiThemeContext)}
     }
 
     // Dark mode's highlighted doesn't work well so lets just set it the same as our focus background

diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
@@ -45,10 +45,3 @@
     flex-basis: 0%;
   }
 }
-
-/**
-  * Forcing focus ring on non-EUI elements
-  */
-.eui-isFocusable:focus {
-  @include euiFocusRing('large');
-}
diff --git a/src/global_styling/utility/utility.tsx b/src/global_styling/utility/utility.tsx
@@ -12,6 +12,7 @@ import { Global, css } from '@emotion/react';
 import { useEuiTheme, UseEuiTheme } from '../../services/theme/hooks';
 import { euiScreenReaderOnly } from '../../components/accessibility/screen_reader_only/screen_reader_only.styles';
 import {
+  euiFocusRing,
   euiFullHeight,
   euiTextBreakWord,
   euiTextTruncate,
@@ -29,6 +30,10 @@ const globalStyles = (euiThemeContext: UseEuiTheme) => {
     .euiScreenReaderOnly {
       ${euiScreenReaderOnly()}
     }
+    .eui-isFocusable:focus {
+      // Forcing focus ring on non-EUI elements
+      ${euiFocusRing(euiThemeContext)}
+    }
 
     // Vertical alignment
     .eui-alignBaseline {