[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>

src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`EuiBottomBar is rendered 1`] = `
 Array [
   <section
     aria-label="aria-label"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 css-a95hel-euiBottomBar-fixed-m"
     data-test-subj="test subject string"
     style="left:0;right:0;bottom:0"
   >
@@ -28,7 +28,7 @@ exports[`EuiBottomBar props affordForDisplacement can be false 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -49,7 +49,7 @@ Array [
 exports[`EuiBottomBar props bodyClassName is rendered 1`] = `
 <section
   aria-label="Page level controls"
-  class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+  class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
   style="left: 0px; right: 0px; bottom: 0px;"
 >
   <h2
@@ -64,7 +64,7 @@ exports[`EuiBottomBar props landmarkHeading 1`] = `
 Array [
   <section
     aria-label="This should have been label"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -86,7 +86,7 @@ exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge css-1yr8u98-euiBottomBar-fixed-l"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -108,7 +108,7 @@ exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -130,7 +130,7 @@ exports[`EuiBottomBar props paddingSize none is rendered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed"
+    class="euiBottomBar euiBottomBar--fixed css-h1j77c-euiBottomBar-fixed"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -152,7 +152,7 @@ exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall css-s3jjcy-euiBottomBar-fixed-s"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -174,7 +174,7 @@ exports[`EuiBottomBar props position fixed is rendered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -196,7 +196,7 @@ exports[`EuiBottomBar props position props are altered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
     style="left:30px;right:30px;bottom:30px;top:30px"
   >
     <h2
@@ -218,7 +218,7 @@ exports[`EuiBottomBar props position static is rendered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium css-1rhqml2-euiBottomBar-static-m"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -240,7 +240,7 @@ exports[`EuiBottomBar props position sticky is rendered 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium css-1yvdf64-euiBottomBar-sticky-m"
     style="left:0;right:0;bottom:0"
   >
     <h2
@@ -262,7 +262,7 @@ exports[`EuiBottomBar props style is customized 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
     style="left:12px;right:0;bottom:0"
   >
     <h2
@@ -284,7 +284,7 @@ exports[`EuiBottomBar props usePortal can be false 1`] = `
 Array [
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium"
+    class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium css-a95hel-euiBottomBar-fixed-m"
     style="left:0;right:0;bottom:0"
   >
     <h2

src/components/bottom_bar/bottom_bar.styles.ts

@@ -0,0 +1,56 @@
+/*
+ * 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, keyframes } from '@emotion/react';
+import { euiCanAnimate } from '../../global_styling';
+import { UseEuiTheme, shade } from '../../services';
+import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
+
+const euiBottomBarAppear = keyframes`
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+`;
+
+export const euiBottomBarStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
+  // 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: '',
+});

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
+
             <section
               aria-label={
                 landmarkHeading ? landmarkHeading : screenReaderHeading
               }
               className={classes}
+              css={cssStyles}
               ref={setRef}
               style={newStyle}
               {...rest}
@@ -214,4 +228,16 @@ export const EuiBottomBar = forwardRef<
   }
 );
 
+export const EuiBottomBar = forwardRef<HTMLElement, EuiBottomBarProps>(
+  (props, ref) => {
+    const BottomBar = _EuiBottomBar;
+    return (
+      <EuiThemeProvider colorMode={'dark'}>
+        <BottomBar ref={ref} {...props} />
+      </EuiThemeProvider>
+    );
+  }
+);
+
 EuiBottomBar.displayName = 'EuiBottomBar';
+_EuiBottomBar.displayName = 'EuiBottomBar';

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';

src/components/page/__snapshots__/page_template.test.tsx.snap

@@ -1097,7 +1097,7 @@ exports[`EuiPageTemplate with bottomBar is rendered 1`] = `
     </div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--sticky"
+      class="euiBottomBar euiBottomBar--sticky css-1cjporg-euiBottomBar-sticky"
       style="left:0;right:0;bottom:0"
     >
       <h2

upcoming_changelogs/5823.md

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

wiki/writing-styles-with-emotion.md

@@ -307,7 +307,30 @@ export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({
   `,
 });
 ```
+## Creating `colorMode` specific components
 
+When creating components that rely on a specific `colorMode` from `<EuiThemeProvider>`, use this pattern to create a wrapper that will pass the entire component `<EuiThemeProvider>` details. 
+
+- `_EuiComponentName` is an internal component that contains the desired functionality and styles.
+- `EuiComponentName` is the exportable component that wraps `_EuiComponentName` inside of `<EuiThemeProvider>`.
+
+```tsx
+const _EuiComponentName = ({ componentProps }) => {
+  return <div />;
+}
+
+export const EuiComponentName = ({ componentProps }) => {
+    const Component = _EuiComponentName;
+    return (
+      <EuiThemeProvider colorMode={ colorMode }>
+        <Component {...componentProps} />
+      </EuiThemeProvider>
+    );
+  }
+);
+```
+
+**[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