[CSS-in-JS] Simplify shadow parameters (#5892)

elastic · May 16, 2022 · 6719905 · 6719905
1 parent 74f5f35
commit 6719905
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 88 deletions.
diff --git a/src-docs/src/views/theme/other/_shadow_js.tsx b/src-docs/src/views/theme/other/_shadow_js.tsx
@@ -15,7 +15,6 @@ import {
 import { getPropsFromComponent } from '../../../services/props/get_props';
 import { getDescription } from '../../../services/props/get_description';
 
-// TODO: Update imports
 import {
   useEuiShadow,
   useEuiShadowFlat,

diff --git a/src/components/bottom_bar/bottom_bar.styles.ts b/src/components/bottom_bar/bottom_bar.styles.ts
@@ -23,34 +23,38 @@ const euiBottomBarAppear = keyframes`
   }
 `;
 
-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: '',
-});
+export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    // Base
+    // Text color needs to be reapplied to properly scope the forced `colorMode`
+    euiBottomBar: css`
+      ${euiShadowFlat(euiThemeContext)};
+      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/themes/amsterdam/global_styling/mixins/shadow.ts b/src/themes/amsterdam/global_styling/mixins/shadow.ts
@@ -8,7 +8,6 @@
 
 import { useEuiTheme, UseEuiTheme } from '../../../../services/theme';
 import { getShadowColor } from '../functions';
-import { createStyleHookFromMixin } from '../../../../global_styling/utils';
 import {
   _EuiThemeShadowSize,
   _EuiThemeShadowCustomColor,
@@ -22,11 +21,10 @@ export interface EuiShadowCustomColor {
  * euiSlightShadow
  */
 export const euiShadowXSmall = (
-  { colors }: UseEuiTheme['euiTheme'],
-  { color: _color }: _EuiThemeShadowCustomColor = {},
-  colorMode: UseEuiTheme['colorMode']
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
 ) => {
-  const color = _color || colors.shadow;
+  const color = _color || euiTheme.colors.shadow;
   return `
 box-shadow:
   0 .8px .8px ${getShadowColor(color, 0.04, colorMode)},
@@ -38,11 +36,10 @@ box-shadow:
  * bottomShadowSmall
  */
 export const euiShadowSmall = (
-  { colors }: UseEuiTheme['euiTheme'],
-  { color: _color }: _EuiThemeShadowCustomColor = {},
-  colorMode: UseEuiTheme['colorMode']
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
 ) => {
-  const color = _color || colors.shadow;
+  const color = _color || euiTheme.colors.shadow;
   return `
 box-shadow:
   0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)},
@@ -55,11 +52,10 @@ box-shadow:
  * bottomShadowMedium
  */
 export const euiShadowMedium = (
-  { colors }: UseEuiTheme['euiTheme'],
-  { color: _color }: _EuiThemeShadowCustomColor = {},
-  colorMode: UseEuiTheme['colorMode']
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
 ) => {
-  const color = _color || colors.shadow;
+  const color = _color || euiTheme.colors.shadow;
   return `
 box-shadow:
   0 .9px 4px -1px ${getShadowColor(color, 0.08, colorMode)},
@@ -73,12 +69,10 @@ box-shadow:
  * bottomShadow
  */
 export const euiShadowLarge = (
-  { colors }: UseEuiTheme['euiTheme'],
-  { color: _color }: _EuiThemeShadowCustomColor = {},
-  colorMode: UseEuiTheme['colorMode']
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
 ) => {
-  const color = _color || colors.shadow;
-
+  const color = _color || euiTheme.colors.shadow;
   return `
 box-shadow:
   0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
@@ -95,12 +89,10 @@ export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
   reverse?: boolean;
 }
 export const euiShadowXLarge = (
-  { colors }: UseEuiTheme['euiTheme'],
-  { color: _color, reverse }: EuiShadowXLarge = {},
-  colorMode: UseEuiTheme['colorMode']
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color, reverse }: EuiShadowXLarge = {}
 ) => {
-  const color = _color || colors.shadow;
-
+  const color = _color || euiTheme.colors.shadow;
   return `
 box-shadow:
   0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)},
@@ -114,11 +106,10 @@ box-shadow:
  * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
  */
 export const euiSlightShadowHover = (
-  { colors }: UseEuiTheme['euiTheme'],
-  { color: _color }: _EuiThemeShadowCustomColor = {},
-  colorMode: UseEuiTheme['colorMode']
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
 ) => {
-  const color = _color || colors.shadow;
+  const color = _color || euiTheme.colors.shadow;
   return `
 box-shadow:
   0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
@@ -127,9 +118,12 @@ box-shadow:
   0 23px 35px ${getShadowColor(color, 0.05, colorMode)};
 `;
 };
-export const useEuiSlightShadowHover = createStyleHookFromMixin(
-  euiSlightShadowHover
-);
+export const useEuiSlightShadowHover = (
+  color?: _EuiThemeShadowCustomColor['color']
+) => {
+  const euiThemeContext = useEuiTheme();
+  return euiSlightShadowHover(euiThemeContext, { color });
+};
 
 /**
  * bottomShadowFlat
@@ -138,52 +132,52 @@ export const useEuiSlightShadowHover = createStyleHookFromMixin(
  * Useful for popovers that drop UP rather than DOWN.
  */
 export const euiShadowFlat = (
-  { colors }: UseEuiTheme['euiTheme'],
-  color: _EuiThemeShadowCustomColor['color'] = undefined,
-  colorMode: UseEuiTheme['colorMode']
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
 ) => {
-  const _color = color || colors.shadow;
+  const color = _color || euiTheme.colors.shadow;
   return `
 box-shadow:
-  0 0 .8px ${getShadowColor(_color, 0.06, colorMode)},
-  0 0 2px ${getShadowColor(_color, 0.04, colorMode)},
-  0 0 5px ${getShadowColor(_color, 0.04, colorMode)},
-  0 0 17px ${getShadowColor(_color, 0.03, colorMode)};
+  0 0 .8px ${getShadowColor(color, 0.06, colorMode)},
+  0 0 2px ${getShadowColor(color, 0.04, colorMode)},
+  0 0 5px ${getShadowColor(color, 0.04, colorMode)},
+  0 0 17px ${getShadowColor(color, 0.03, colorMode)};
 `;
 };
-export const useEuiShadowFlat = createStyleHookFromMixin(euiShadowFlat);
+export const useEuiShadowFlat = (
+  color?: _EuiThemeShadowCustomColor['color']
+) => {
+  const euiThemeContext = useEuiTheme();
+  return euiShadowFlat(euiThemeContext, { color });
+};
 
-// One hook to rule them all
-interface EuiShadowStyles {
-  size?: _EuiThemeShadowSize;
-  color?: _EuiThemeShadowCustomColor['color'];
-}
 export const euiShadow = (
-  euiTheme: UseEuiTheme['euiTheme'],
-  { size = 'l', color = undefined }: EuiShadowStyles = {},
-  colorMode: UseEuiTheme['colorMode']
+  euiThemeContext: UseEuiTheme,
+  size: _EuiThemeShadowSize = 'l',
+  { color }: _EuiThemeShadowCustomColor = {}
 ) => {
   switch (size) {
     case 'xs':
-      return euiShadowXSmall(euiTheme, { color }, colorMode);
+      return euiShadowXSmall(euiThemeContext, { color });
     case 's':
-      return euiShadowSmall(euiTheme, { color }, colorMode);
+      return euiShadowSmall(euiThemeContext, { color });
     case 'm':
-      return euiShadowMedium(euiTheme, { color }, colorMode);
+      return euiShadowMedium(euiThemeContext, { color });
     case 'l':
-      return euiShadowLarge(euiTheme, { color }, colorMode);
+      return euiShadowLarge(euiThemeContext, { color });
     case 'xl':
-      return euiShadowXLarge(euiTheme, { color }, colorMode);
+      return euiShadowXLarge(euiThemeContext, { color });
 
     default:
       console.warn('Please provide a valid size option to useEuiShadow');
       return '';
   }
 };
+
 export const useEuiShadow = (
-  size: EuiShadowStyles['size'] = 'l',
-  color?: EuiShadowStyles['color']
+  size: _EuiThemeShadowSize = 'l',
+  color?: _EuiThemeShadowCustomColor['color']
 ) => {
-  const { euiTheme, colorMode } = useEuiTheme();
-  return euiShadow(euiTheme, { size, color }, colorMode);
+  const euiThemeContext = useEuiTheme();
+  return euiShadow(euiThemeContext, size, { color });
 };
diff --git a/upcoming_changelogs/5892.md b/upcoming_changelogs/5892.md
@@ -0,0 +1,2 @@
+- Updated all CSS-in-JS shadow functions parameters to match a `(euiTheme, { color? })` order
+- Updated `euiShadow()` parameters to `(euiTheme, size, { color? })`
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		- Updated all CSS-in-JS shadow functions parameters to match a `(euiTheme, { color? })` order
		- Updated `euiShadow()` parameters to `(euiTheme, size, { color? })`