From 0adca5a958da4d97716f88376572f30b3341b3a1 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 28 Apr 2022 11:49:50 -0500 Subject: [PATCH 1/5] convert euiskiplink to emotion styling --- src/components/accessibility/_index.scss | 1 - .../__snapshots__/skip_link.test.tsx.snap | 12 +++--- .../accessibility/skip_link/_skip_link.scss | 20 ---------- .../skip_link/skip_link.styles.ts | 38 +++++++++++++++++++ .../accessibility/skip_link/skip_link.tsx | 19 +++++++--- 5 files changed, 57 insertions(+), 33 deletions(-) delete mode 100644 src/components/accessibility/skip_link/_skip_link.scss create mode 100644 src/components/accessibility/skip_link/skip_link.styles.ts diff --git a/src/components/accessibility/_index.scss b/src/components/accessibility/_index.scss index 01ca773d2f9..0e3753cf935 100644 --- a/src/components/accessibility/_index.scss +++ b/src/components/accessibility/_index.scss @@ -1,2 +1 @@ @import 'screen_reader_only/screen_reader_only'; -@import 'skip_link/skip_link'; diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap index 2f03a9a93e3..f8d5271cd24 100644 --- a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap +++ b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiSkipLink is rendered 1`] = ` @@ -38,7 +38,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = ` exports[`EuiSkipLink props position absolute is rendered 1`] = ` @@ -54,7 +54,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = ` exports[`EuiSkipLink props position fixed is rendered 1`] = ` @@ -87,7 +87,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = ` exports[`EuiSkipLink props tabIndex is rendered 1`] = ` { + 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; + top: ${euiTheme.size.xs}; + left: ${euiTheme.size.xs}; + z-index: ${Number(euiTheme.levels.header) + 1}; + } + `, + }; +}; diff --git a/src/components/accessibility/skip_link/skip_link.tsx b/src/components/accessibility/skip_link/skip_link.tsx index 907c9769204..d22eca30cd3 100644 --- a/src/components/accessibility/skip_link/skip_link.tsx +++ b/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 = ({ 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 = ({ return ( Date: Thu, 28 Apr 2022 11:50:27 -0500 Subject: [PATCH 2/5] enforce non-null levels values --- src/global_styling/variables/levels.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/global_styling/variables/levels.ts b/src/global_styling/variables/levels.ts index 70580f3c68f..08bcb451c43 100644 --- a/src/global_styling/variables/levels.ts +++ b/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 +>; From 1516b49513b801b913f2374ea15a151ed8237817 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 28 Apr 2022 11:53:11 -0500 Subject: [PATCH 3/5] CL --- upcoming_changelogs/5851.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/5851.md diff --git a/upcoming_changelogs/5851.md b/upcoming_changelogs/5851.md new file mode 100644 index 00000000000..585c8cb0744 --- /dev/null +++ b/upcoming_changelogs/5851.md @@ -0,0 +1,3 @@ +**CSS-in-JS conversions** + +- Converted `EuiSkipLink` to Emotion \ No newline at end of file From 830059f075398670e80d4cf125fc030f009a5cd7 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 28 Apr 2022 12:40:41 -0500 Subject: [PATCH 4/5] Update src/components/accessibility/skip_link/skip_link.styles.ts Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/accessibility/skip_link/skip_link.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/accessibility/skip_link/skip_link.styles.ts b/src/components/accessibility/skip_link/skip_link.styles.ts index 76302e14945..f8578762cb1 100644 --- a/src/components/accessibility/skip_link/skip_link.styles.ts +++ b/src/components/accessibility/skip_link/skip_link.styles.ts @@ -29,8 +29,8 @@ export const euiSkipLinkStyles = ({ euiTheme }: UseEuiTheme) => { fixed: css` &:focus { position: fixed; - top: ${euiTheme.size.xs}; - left: ${euiTheme.size.xs}; + inset-block-start: ${euiTheme.size.xs}; + inset-inline-start: ${euiTheme.size.xs}; z-index: ${Number(euiTheme.levels.header) + 1}; } `, From 51345e44abc03b72b1c791103bdbe75570bf6d05 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 28 Apr 2022 13:52:52 -0500 Subject: [PATCH 5/5] snapshot --- .../skip_link/__snapshots__/skip_link.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap index f8d5271cd24..7e338c634e8 100644 --- a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap +++ b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap @@ -54,7 +54,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = ` exports[`EuiSkipLink props position fixed is rendered 1`] = `