From e07ee756120607b338d522ee8bcedd4228d02673 Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Fri, 29 Apr 2022 16:17:26 -0400 Subject: [PATCH] [Emotion] Convert `EuiBottomBar` to Emotion (#5823) * Converted EuiBottomBar to Emotion and updated related EuiBottomBar jest tests * Updated EuiBottomBar tests to include the shouldRenderCustomStyles utility * Updated the EuiBottomBar component by making creating a new component that wraps the original inside of EuiThemeProvider to pass the dark theme to the entire component. Removed the shouldRenderCustomStyles test utility * Updated the EuiBottomBar props. Updated BottomBar snapshots * Handle PR comments and resolve a merge conflict in index.scss * Re-adding index.scss file chanes * Small PR change requests * Added documentation for colorMode specific component pattern creation * Update wiki/writing-styles-with-emotion.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update wiki/writing-styles-with-emotion.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../__snapshots__/bottom_bar.test.tsx.snap | 28 +++++----- src/components/bottom_bar/_bottom_bar.scss | 44 --------------- src/components/bottom_bar/_index.scss | 1 - .../bottom_bar/bottom_bar.styles.ts | 56 +++++++++++++++++++ src/components/bottom_bar/bottom_bar.tsx | 30 +++++++++- src/components/index.scss | 1 - .../__snapshots__/page_template.test.tsx.snap | 2 +- upcoming_changelogs/5823.md | 3 + wiki/writing-styles-with-emotion.md | 23 ++++++++ 9 files changed, 125 insertions(+), 63 deletions(-) delete mode 100644 src/components/bottom_bar/_bottom_bar.scss delete mode 100644 src/components/bottom_bar/_index.scss create mode 100644 src/components/bottom_bar/bottom_bar.styles.ts create mode 100644 upcoming_changelogs/5823.md diff --git a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap index 2f3fe4a42ac..927bccc2e87 100644 --- a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap +++ b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap @@ -4,7 +4,7 @@ exports[`EuiBottomBar is rendered 1`] = ` Array [
@@ -28,7 +28,7 @@ exports[`EuiBottomBar props affordForDisplacement can be false 1`] = ` Array [

({ + // Base + // Text color needs to be reapplied to properly scope the forced `colorMode` + euiBottomBar: css` + ${euiShadowFlat(euiTheme, undefined, colorMode)}; + background: ${shade(euiTheme.colors.lightestShade, 0.5)}; + color: ${euiTheme.colors.text}; + ${euiCanAnimate} { + animation: ${euiBottomBarAppear} ${euiTheme.animation.slow} + ${euiTheme.animation.resistance}; + } + `, + static: css``, + fixed: css` + z-index: ${Number(euiTheme.levels.header) - 2}; + `, + sticky: css` + z-index: ${Number(euiTheme.levels.header) - 2}; + `, + // Padding + s: css` + padding: ${euiTheme.size.s}; + `, + m: css` + padding: ${euiTheme.size.base}; + `, + l: css` + padding: ${euiTheme.size.l}; + `, + none: '', +}); diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx index fa2028f376e..0d27aed7920 100644 --- a/src/components/bottom_bar/bottom_bar.tsx +++ b/src/components/bottom_bar/bottom_bar.tsx @@ -14,12 +14,14 @@ import React, { useEffect, useState, } from 'react'; -import { useCombinedRefs } from '../../services'; +import { useCombinedRefs, useEuiTheme } from '../../services'; import { EuiScreenReaderOnly } from '../accessibility'; import { CommonProps, ExclusiveUnion } from '../common'; import { EuiI18n } from '../i18n'; import { useResizeObserver } from '../observer/resize_observer'; import { EuiPortal } from '../portal'; +import { euiBottomBarStyles } from './bottom_bar.styles'; +import { EuiThemeProvider } from '../../services/theme/provider'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l'; @@ -96,7 +98,7 @@ export type EuiBottomBarProps = CommonProps & left?: CSSProperties['left']; }; -export const EuiBottomBar = forwardRef< +const _EuiBottomBar = forwardRef< HTMLElement, // type of element or component the ref will be passed to EuiBottomBarProps // what properties apart from `ref` the component accepts >( @@ -119,6 +121,9 @@ export const EuiBottomBar = forwardRef< }, ref ) => { + const euiTheme = useEuiTheme(); + const styles = euiBottomBarStyles(euiTheme); + // Force some props if `fixed` position, but not if the user has supplied these affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement; @@ -156,6 +161,13 @@ export const EuiBottomBar = forwardRef< className ); + const cssStyles = [ + styles.euiBottomBar, + styles[position], + styles[paddingSize], + { position }, + ]; + const newStyle = { left, right, @@ -173,11 +185,13 @@ export const EuiBottomBar = forwardRef< {(screenReaderHeading: string) => ( // Though it would be better to use aria-labelledby than aria-label and not repeat the same string twice // A bug in voiceover won't list some landmarks in the rotor without an aria-label +
( + (props, ref) => { + const BottomBar = _EuiBottomBar; + return ( + + + + ); + } +); + EuiBottomBar.displayName = 'EuiBottomBar'; +_EuiBottomBar.displayName = 'EuiBottomBar'; diff --git a/src/components/index.scss b/src/components/index.scss index d5f69c531f7..351b66c0014 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 'bottom_bar/index'; @import 'button/index'; @import 'breadcrumbs/index'; @import 'call_out/index'; diff --git a/src/components/page/__snapshots__/page_template.test.tsx.snap b/src/components/page/__snapshots__/page_template.test.tsx.snap index b35638fcf15..fd827bedfab 100644 --- a/src/components/page/__snapshots__/page_template.test.tsx.snap +++ b/src/components/page/__snapshots__/page_template.test.tsx.snap @@ -1097,7 +1097,7 @@ exports[`EuiPageTemplate with bottomBar is rendered 1`] = `

({ `, }); ``` +## Creating `colorMode` specific components +When creating components that rely on a specific `colorMode` from ``, use this pattern to create a wrapper that will pass the entire component `` details. + +- `_EuiComponentName` is an internal component that contains the desired functionality and styles. +- `EuiComponentName` is the exportable component that wraps `_EuiComponentName` inside of ``. + +```tsx +const _EuiComponentName = ({ componentProps }) => { + return
; +} + +export const EuiComponentName = ({ componentProps }) => { + const Component = _EuiComponentName; + return ( + + + + ); + } +); +``` + +**[Refer to EuiBottomBar to see an example of this pattern in practice and as an example of using `forwardRef`.](../src/components/bottom_bar/bottom_bar.tsx)** ## FAQ