Use “object styles” syntax

elastic · Nov 12, 2024 · 3ce08ce · 3ce08ce
1 parent d3fe030
commit 3ce08ce
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 43 deletions.
diff --git a/...ages/core/chrome/core-chrome-browser-internal/src/ui/header/get_collapsible_nav_styles.ts b/...ages/core/chrome/core-chrome-browser-internal/src/ui/header/get_collapsible_nav_styles.ts
@@ -15,52 +15,52 @@ export const getCollapsibleNavStyles = (euiThemeContext: UseEuiTheme) => {
   const screenHeightBreakpoint = mathWithUnits(euiTheme.size.base, (x) => x * 15);
   const _euiYScroll = euiYScroll(euiThemeContext);
 
-  const navCss = css`
-    @media (max-height: ${screenHeightBreakpoint}) {
-      overflow-y: auto;
-    }
-  `;
+  const navCss = css({
+    [`@media (max-height: ${screenHeightBreakpoint})`]: {
+      overflowY: 'auto',
+    },
+  });
 
   const navRecentsListGroupCss = [
-    css`
-      max-height: calc(${euiTheme.size.base} * 10);
-      margin-right: -${euiTheme.size.s};
-    `,
+    css({
+      maxHeight: `calc(${euiTheme.size.base} * 10)`,
+      marginRight: `-${euiTheme.size.s}`,
+    }),
     _euiYScroll,
   ];
 
   const navSolutions = [
     _euiYScroll,
-    css`
+    css({
       /**
        * Allows the solutions nav group to be viewed on
        * very small screen sizes and when the browser Zoom is high
        */
-      @media (max-height: ${screenHeightBreakpoint}) {
-        flex: 1 0 auto;
-      }
-    `,
+      [`@media (max-height: ${screenHeightBreakpoint})`]: {
+        flex: '1 0 auto',
+      },
+    }),
   ];
 
   /**
    * 1. Increase the hit area of the link (anchor)
    * 2. Only show the text underline when hovering on the text/anchor portion
    */
-  const navSolutionGroupButton = css`
-    display: block; /* 1 */
+  const navSolutionGroupButton = css({
+    display: 'block' /* 1 */,
 
-    &:hover {
-      text-decoration: none; /* 2 */
-    }
-  `;
+    '&:hover': {
+      textDecoration: 'none' /* 2 */,
+    },
+  });
 
-  const navSolutionGroupLink = css`
-    display: block; /* 1 */
+  const navSolutionGroupLink = css({
+    display: 'block' /* 1 */,
 
-    &:hover {
-      text-decoration: underline; /* 2 */
-    }
-  `;
+    '&:hover': {
+      textDecoration: 'underline' /* 2 */,
+    },
+  });
 
   return {
     navCss,

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.tsx
@@ -84,27 +84,29 @@ interface Props {
 }
 
 export function HeaderLogo({ href, navigateToApp, loadingCount$, ...observables }: Props) {
+  const { euiTheme } = useEuiTheme();
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
   const customBranding = useObservable(observables.customBranding$, {});
   const { customizedLogo, logo } = customBranding;
 
-  const { euiTheme } = useEuiTheme();
-  const headerLogoCss = css`
-    display: flex;
-    align-items: center;
-    height: ${euiTheme.size.xxl};
-    padding-inline: ${euiTheme.size.s};
-  `;
-  const headerLogoMarkCss = css`
-    margin-left: ${euiTheme.size.s};
-    fill: ${euiTheme.colors.ghost};
-  `;
+  const styles = {
+    logoCss: css({
+      display: 'flex',
+      alignItems: 'center',
+      height: euiTheme.size.xxl,
+      paddingInline: euiTheme.size.s,
+    }),
+    logoMarkCss: css({
+      marginLeft: euiTheme.size.s,
+      fill: euiTheme.colors.ghost,
+    }),
+  };
 
   return (
     <a
       onClick={(e) => onClick(e, forceNavigation, navLinks, navigateToApp)}
-      css={headerLogoCss}
+      css={styles.logoCss}
       href={href}
       data-test-subj="logo"
       aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel', {
@@ -115,7 +117,7 @@ export function HeaderLogo({ href, navigateToApp, loadingCount$, ...observables
       {customizedLogo ? (
         <img
           src={customizedLogo}
-          css={headerLogoMarkCss}
+          css={styles.logoMarkCss}
           style={{ maxWidth: '200px', maxHeight: '84px' }}
           alt="custom mark"
         />

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.tsx
@@ -58,10 +58,10 @@ export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { v
 
   render() {
     const indicatorHiddenCss = !this.state.visible
-      ? css`
-          visibility: hidden;
-          animation-play-state: paused;
-        `
+      ? css({
+          visibility: 'hidden',
+          animationPlayState: 'paused',
+        })
       : undefined;
 
     const testSubj = this.state.visible