[CSS-in-JS] Convert EuiSkipLink

src/components/accessibility/_index.scss

@@ -1,2 +1 @@
 @import 'screen_reader_only/screen_reader_only';
-@import 'skip_link/skip_link';

src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiSkipLink is rendered 1`] = `
 <a
   aria-label="aria-label"
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static testClass1 testClass2"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink testClass1 testClass2 css-1methg-euiSkipLink"
   data-test-subj="test subject string"
   href="#somewhere"
   rel="noreferrer"
@@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `
 
 exports[`EuiSkipLink props onClick is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1methg-euiSkipLink"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -38,7 +38,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--absolute"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1gkoqp9-euiSkipLink-absolute"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -54,7 +54,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--fixed"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-o3tocm-euiSkipLink-fixed"
   href="#somewhere"
   rel="noreferrer"
   tabindex="0"
@@ -71,7 +71,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1methg-euiSkipLink"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -87,7 +87,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1methg-euiSkipLink"
   href="#somewhere"
   rel="noreferrer"
   tabindex="-1"

src/components/accessibility/skip_link/skip_link.styles.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { UseEuiTheme } from '../../../services';
+
+export const euiSkipLinkStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiSkipLink: css`
+      transition: none !important;
+
+      &:focus {
+        animation: none !important;
+      }
+    `,
+    // Positions
+    // Set positions on focus only as to not override screenReaderOnly position
+    // When positioned absolutely, consumers still need to tell it WHERE (top,left,etc...)
+    absolute: css`
+      &:focus {
+        position: absolute;
+      }
+    `,
+    fixed: css`
+      &:focus {
+        position: fixed;
+        inset-block-start: ${euiTheme.size.xs};
+        inset-inline-start: ${euiTheme.size.xs};
+        z-index: ${Number(euiTheme.levels.header) + 1};
+      }
+    `,
+  };
+};

src/components/accessibility/skip_link/skip_link.tsx

@@ -8,9 +8,11 @@
 
 import React, { FunctionComponent, Ref } from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
 import { EuiButton, EuiButtonProps } from '../../button/button';
-import { EuiScreenReaderOnly } from '../screen_reader_only';
 import { PropsForAnchor, PropsForButton, ExclusiveUnion } from '../../common';
+import { EuiScreenReaderOnly } from '../screen_reader_only';
+import { euiSkipLinkStyles } from './skip_link.styles';
 
 type Positions = 'static' | 'fixed' | 'absolute';
 export const POSITIONS = ['static', 'fixed', 'absolute'] as Positions[];
@@ -56,11 +58,15 @@ export const EuiSkipLink: FunctionComponent<EuiSkipLinkProps> = ({
   className,
   ...rest
 }) => {
-  const classes = classNames(
-    'euiSkipLink',
-    [`euiSkipLink--${position}`],
-    className
-  );
+  const euiTheme = useEuiTheme();
+  const styles = euiSkipLinkStyles(euiTheme);
+
+  const classes = classNames('euiSkipLink', className);
+
+  const cssStyles = [
+    styles.euiSkipLink,
+    position !== 'static' ? styles[position] : undefined,
+  ];
 
   // Create the `href` from `destinationId`
   let optionalProps = {};
@@ -73,6 +79,7 @@ export const EuiSkipLink: FunctionComponent<EuiSkipLinkProps> = ({
   return (
     <EuiScreenReaderOnly showOnFocus>
       <EuiButton
+        css={cssStyles}
         className={classes}
         tabIndex={position === 'fixed' ? 0 : tabIndex}
         size="s"

src/global_styling/variables/levels.ts

@@ -38,4 +38,7 @@ export const EuiThemeLevels = [
 
 export type _EuiThemeLevel = typeof EuiThemeLevels[number];
 
-export type _EuiThemeLevels = Record<_EuiThemeLevel, CSSProperties['zIndex']>;
+export type _EuiThemeLevels = Record<
+  _EuiThemeLevel,
+  NonNullable<CSSProperties['zIndex']>
+>;

upcoming_changelogs/5851.md

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