From aad3eb0729aa92289eda5b43cbd0155173922740 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 10 May 2022 16:02:32 -0400 Subject: [PATCH 1/5] Simplify shadow parameters --- src-docs/src/views/theme/other/_shadow_js.tsx | 1 - .../bottom_bar/bottom_bar.styles.ts | 66 +++++----- .../amsterdam/global_styling/mixins/shadow.ts | 116 ++++++++++-------- 3 files changed, 97 insertions(+), 86 deletions(-) diff --git a/src-docs/src/views/theme/other/_shadow_js.tsx b/src-docs/src/views/theme/other/_shadow_js.tsx index 979d05472cb..42aedd95da8 100644 --- 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 index 86b511c254e..ce01dbaa309 100644 --- 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 = (_euiTheme: UseEuiTheme) => { + const { euiTheme } = _euiTheme; + + return { + // Base + // Text color needs to be reapplied to properly scope the forced `colorMode` + euiBottomBar: css` + ${euiShadowFlat(_euiTheme)}; + 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 index 079107f2d45..382971e06a4 100644 --- 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,12 @@ export interface EuiShadowCustomColor { * euiSlightShadow */ export const euiShadowXSmall = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + _euiTheme: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const { euiTheme, colorMode } = _euiTheme; + + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 .8px .8px ${getShadowColor(color, 0.04, colorMode)}, @@ -38,11 +38,12 @@ box-shadow: * bottomShadowSmall */ export const euiShadowSmall = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + _euiTheme: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const { euiTheme, colorMode } = _euiTheme; + + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)}, @@ -55,11 +56,12 @@ box-shadow: * bottomShadowMedium */ export const euiShadowMedium = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + _euiTheme: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const { euiTheme, colorMode } = _euiTheme; + + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 .9px 4px -1px ${getShadowColor(color, 0.08, colorMode)}, @@ -73,12 +75,12 @@ box-shadow: * bottomShadow */ export const euiShadowLarge = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color }: _EuiThemeShadowCustomColor = {}, - colorMode: UseEuiTheme['colorMode'] + _euiTheme: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const { euiTheme, colorMode } = _euiTheme; + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, @@ -95,12 +97,12 @@ export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor { reverse?: boolean; } export const euiShadowXLarge = ( - { colors }: UseEuiTheme['euiTheme'], - { color: _color, reverse }: EuiShadowXLarge = {}, - colorMode: UseEuiTheme['colorMode'] + _euiTheme: UseEuiTheme, + { color: _color, reverse }: EuiShadowXLarge = {} ) => { - const color = _color || colors.shadow; + const { euiTheme, colorMode } = _euiTheme; + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)}, @@ -114,11 +116,12 @@ 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: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const color = _color || colors.shadow; + const { euiTheme, colorMode } = _euiTheme; + + const color = _color || euiTheme.colors.shadow; return ` box-shadow: 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, @@ -127,9 +130,12 @@ box-shadow: 0 23px 35px ${getShadowColor(color, 0.05, colorMode)}; `; }; -export const useEuiSlightShadowHover = createStyleHookFromMixin( - euiSlightShadowHover -); +export const useEuiSlightShadowHover = ( + color?: _EuiThemeShadowCustomColor['color'] +) => { + const euiTheme = useEuiTheme(); + return euiSlightShadowHover(euiTheme, { color }); +}; /** * bottomShadowFlat @@ -138,52 +144,54 @@ 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: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const _color = color || colors.shadow; + const { euiTheme, colorMode } = _euiTheme; + + 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 euiTheme = useEuiTheme(); + return euiShadowFlat(euiTheme, { 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'] + euiTheme: UseEuiTheme, + size: _EuiThemeShadowSize = 'l', + { color }: _EuiThemeShadowCustomColor = {} ) => { switch (size) { case 'xs': - return euiShadowXSmall(euiTheme, { color }, colorMode); + return euiShadowXSmall(euiTheme, { color }); case 's': - return euiShadowSmall(euiTheme, { color }, colorMode); + return euiShadowSmall(euiTheme, { color }); case 'm': - return euiShadowMedium(euiTheme, { color }, colorMode); + return euiShadowMedium(euiTheme, { color }); case 'l': - return euiShadowLarge(euiTheme, { color }, colorMode); + return euiShadowLarge(euiTheme, { color }); case 'xl': - return euiShadowXLarge(euiTheme, { color }, colorMode); + return euiShadowXLarge(euiTheme, { 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 euiTheme = useEuiTheme(); + return euiShadow(euiTheme, size, { color }); }; From db807fa9af4d7a4960b6d125d7c2c284b30749e9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 10 May 2022 16:12:13 -0400 Subject: [PATCH 2/5] cl --- upcoming_changelogs/5892.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 upcoming_changelogs/5892.md diff --git a/upcoming_changelogs/5892.md b/upcoming_changelogs/5892.md new file mode 100644 index 00000000000..ef115da79c5 --- /dev/null +++ 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? })` From 3e8d27ce665c6719ca849acf8dfd163aa1205756 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 May 2022 10:06:27 -0400 Subject: [PATCH 3/5] Update naming and simplify some destructuring --- .../amsterdam/global_styling/mixins/shadow.ts | 52 +++++++------------ 1 file changed, 19 insertions(+), 33 deletions(-) diff --git a/src/themes/amsterdam/global_styling/mixins/shadow.ts b/src/themes/amsterdam/global_styling/mixins/shadow.ts index 382971e06a4..a27bbff945e 100644 --- a/src/themes/amsterdam/global_styling/mixins/shadow.ts +++ b/src/themes/amsterdam/global_styling/mixins/shadow.ts @@ -21,11 +21,9 @@ export interface EuiShadowCustomColor { * euiSlightShadow */ export const euiShadowXSmall = ( - _euiTheme: UseEuiTheme, + { euiTheme, colorMode }: UseEuiTheme, { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const { euiTheme, colorMode } = _euiTheme; - const color = _color || euiTheme.colors.shadow; return ` box-shadow: @@ -38,11 +36,9 @@ box-shadow: * bottomShadowSmall */ export const euiShadowSmall = ( - _euiTheme: UseEuiTheme, + { euiTheme, colorMode }: UseEuiTheme, { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const { euiTheme, colorMode } = _euiTheme; - const color = _color || euiTheme.colors.shadow; return ` box-shadow: @@ -56,11 +52,9 @@ box-shadow: * bottomShadowMedium */ export const euiShadowMedium = ( - _euiTheme: UseEuiTheme, + { euiTheme, colorMode }: UseEuiTheme, { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const { euiTheme, colorMode } = _euiTheme; - const color = _color || euiTheme.colors.shadow; return ` box-shadow: @@ -75,11 +69,9 @@ box-shadow: * bottomShadow */ export const euiShadowLarge = ( - _euiTheme: UseEuiTheme, + { euiTheme, colorMode }: UseEuiTheme, { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const { euiTheme, colorMode } = _euiTheme; - const color = _color || euiTheme.colors.shadow; return ` box-shadow: @@ -97,11 +89,9 @@ export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor { reverse?: boolean; } export const euiShadowXLarge = ( - _euiTheme: UseEuiTheme, + { euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }: EuiShadowXLarge = {} ) => { - const { euiTheme, colorMode } = _euiTheme; - const color = _color || euiTheme.colors.shadow; return ` box-shadow: @@ -116,11 +106,9 @@ box-shadow: * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there */ export const euiSlightShadowHover = ( - _euiTheme: UseEuiTheme, + { euiTheme, colorMode }: UseEuiTheme, { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const { euiTheme, colorMode } = _euiTheme; - const color = _color || euiTheme.colors.shadow; return ` box-shadow: @@ -133,8 +121,8 @@ box-shadow: export const useEuiSlightShadowHover = ( color?: _EuiThemeShadowCustomColor['color'] ) => { - const euiTheme = useEuiTheme(); - return euiSlightShadowHover(euiTheme, { color }); + const euiThemeContext = useEuiTheme(); + return euiSlightShadowHover(euiThemeContext, { color }); }; /** @@ -144,11 +132,9 @@ export const useEuiSlightShadowHover = ( * Useful for popovers that drop UP rather than DOWN. */ export const euiShadowFlat = ( - _euiTheme: UseEuiTheme, + { euiTheme, colorMode }: UseEuiTheme, { color: _color }: _EuiThemeShadowCustomColor = {} ) => { - const { euiTheme, colorMode } = _euiTheme; - const color = _color || euiTheme.colors.shadow; return ` box-shadow: @@ -161,26 +147,26 @@ box-shadow: export const useEuiShadowFlat = ( color?: _EuiThemeShadowCustomColor['color'] ) => { - const euiTheme = useEuiTheme(); - return euiShadowFlat(euiTheme, { color }); + const euiThemeContext = useEuiTheme(); + return euiShadowFlat(euiThemeContext, { color }); }; export const euiShadow = ( - euiTheme: UseEuiTheme, + euiThemeContext: UseEuiTheme, size: _EuiThemeShadowSize = 'l', { color }: _EuiThemeShadowCustomColor = {} ) => { switch (size) { case 'xs': - return euiShadowXSmall(euiTheme, { color }); + return euiShadowXSmall(euiThemeContext, { color }); case 's': - return euiShadowSmall(euiTheme, { color }); + return euiShadowSmall(euiThemeContext, { color }); case 'm': - return euiShadowMedium(euiTheme, { color }); + return euiShadowMedium(euiThemeContext, { color }); case 'l': - return euiShadowLarge(euiTheme, { color }); + return euiShadowLarge(euiThemeContext, { color }); case 'xl': - return euiShadowXLarge(euiTheme, { color }); + return euiShadowXLarge(euiThemeContext, { color }); default: console.warn('Please provide a valid size option to useEuiShadow'); @@ -192,6 +178,6 @@ export const useEuiShadow = ( size: _EuiThemeShadowSize = 'l', color?: _EuiThemeShadowCustomColor['color'] ) => { - const euiTheme = useEuiTheme(); - return euiShadow(euiTheme, size, { color }); + const _euiTheme = useEuiTheme(); + return euiShadow(_euiTheme, size, { color }); }; From fb3cd34a62c83fb08750841054d2ca181b26d97a Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 May 2022 16:36:25 -0400 Subject: [PATCH 4/5] One more --- src/themes/amsterdam/global_styling/mixins/shadow.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/themes/amsterdam/global_styling/mixins/shadow.ts b/src/themes/amsterdam/global_styling/mixins/shadow.ts index a27bbff945e..8a66c4d5d8f 100644 --- a/src/themes/amsterdam/global_styling/mixins/shadow.ts +++ b/src/themes/amsterdam/global_styling/mixins/shadow.ts @@ -178,6 +178,6 @@ export const useEuiShadow = ( size: _EuiThemeShadowSize = 'l', color?: _EuiThemeShadowCustomColor['color'] ) => { - const _euiTheme = useEuiTheme(); - return euiShadow(_euiTheme, size, { color }); + const euiThemeContext = useEuiTheme(); + return euiShadow(euiThemeContext, size, { color }); }; From d0c3cfe9ad18e6f49608bf4aec027f06f4b431c7 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Wed, 11 May 2022 17:20:39 -0400 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: Constance --- src/components/bottom_bar/bottom_bar.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/bottom_bar/bottom_bar.styles.ts b/src/components/bottom_bar/bottom_bar.styles.ts index ce01dbaa309..3c707337cfb 100644 --- a/src/components/bottom_bar/bottom_bar.styles.ts +++ b/src/components/bottom_bar/bottom_bar.styles.ts @@ -23,14 +23,14 @@ const euiBottomBarAppear = keyframes` } `; -export const euiBottomBarStyles = (_euiTheme: UseEuiTheme) => { - const { euiTheme } = _euiTheme; +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(_euiTheme)}; + ${euiShadowFlat(euiThemeContext)}; background: ${shade(euiTheme.colors.lightestShade, 0.5)}; color: ${euiTheme.colors.text}; ${euiCanAnimate} {