[SharedUX] Replace SCSS with Emotion, Round 1

packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './collapsible_nav.scss';
 import {
   EuiThemeProvider,
   EuiCollapsibleNav,
@@ -18,6 +17,7 @@ import {
   EuiListGroupItem,
   EuiCollapsibleNavProps,
   EuiButton,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { groupBy, sortBy } from 'lodash';
@@ -36,6 +36,7 @@ import {
   createEuiButtonItem,
   createOverviewLink,
 } from './nav_link';
+import { getCollapsibleNavStyles } from './get_collapsible_nav_styles';
 
 function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
   const allCategories = {} as Record<string, AppCategory | undefined>;
@@ -149,6 +150,7 @@ export function CollapsibleNav({
       ...(needsIcon && { basePath }),
     });
   };
+  const styles = getCollapsibleNavStyles(useEuiTheme());
 
   return (
     <EuiCollapsibleNav
@@ -162,7 +164,7 @@ export function CollapsibleNav({
       button={button}
       ownFocus={false}
       size={248}
-      className="kbnCollapsibleNav"
+      css={styles.navCss}
     >
       {customNavLink && (
         <>
@@ -275,14 +277,14 @@ export function CollapsibleNav({
             color="subdued"
             gutterSize="none"
             size="s"
-            className="kbnCollapsibleNav__recentsListGroup"
+            css={styles.navRecentsListGroupCss}
           />
         </EuiCollapsibleNavGroup>
       )}
 
       <EuiHorizontalRule margin="none" />
 
-      <EuiFlexItem className="kbnCollapsibleNav__solutions">
+      <EuiFlexItem css={styles.navSolutions}>
         {/* Kibana, Observability, Security, and Management sections */}
         {orderedCategories.map((categoryName) => {
           const category = categoryDictionary[categoryName]!;
@@ -294,11 +296,12 @@ export function CollapsibleNav({
               iconType={category.euiIconType}
               iconSize="m"
               buttonElement={overviewLink ? 'div' : 'button'}
-              buttonClassName="kbnCollapsibleNav__solutionGroupButton"
+              css={styles.navSolutionGroupButton}
               title={
                 overviewLink ? (
                   <a
-                    className="eui-textInheritColor kbnCollapsibleNav__solutionGroupLink"
+                    css={styles.navSolutionGroupLink}
+                    className="eui-textInheritColor"
                     {...createOverviewLink({
                       link: overviewLink,
                       navigateToUrl,

packages/core/chrome/core-chrome-browser-internal/src/ui/header/get_collapsible_nav_styles.ts

@@ -0,0 +1,72 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { UseEuiTheme, euiYScroll, mathWithUnits } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getCollapsibleNavStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const screenHeightBreakpoint = mathWithUnits(euiTheme.size.base, (x) => x * 15);
+  const _euiYScroll = euiYScroll(euiThemeContext);
+
+  const navCss = css`
+    @media (max-height: ${screenHeightBreakpoint}) {
+      overflow-y: auto;
+    }
+  `;
+
+  const navRecentsListGroupCss = [
+    css`
+      max-height: calc(${euiTheme.size.base} * 10);
+      margin-right: -${euiTheme.size.s};
+    `,
+    _euiYScroll,
+  ];
+
+  const navSolutions = [
+    _euiYScroll,
+    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;
+      }
+    `,
+  ];
+
+  /**
+   * 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 */
+
+    &:hover {
+      text-decoration: none; /* 2 */
+    }
+  `;
+
+  const navSolutionGroupLink = css`
+    display: block; /* 1 */
+
+    &:hover {
+      text-decoration: underline; /* 2 */
+    }
+  `;
+
+  return {
+    navCss,
+    navRecentsListGroupCss,
+    navSolutions,
+    navSolutionGroupButton,
+    navSolutionGroupLink,
+  };
+};

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './header_logo.scss';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
@@ -16,6 +16,7 @@ import Url from 'url';
 import { CustomBranding } from '@kbn/core-custom-branding-common';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { ChromeNavLink } from '@kbn/core-chrome-browser';
+import { useEuiTheme } from '@elastic/eui';
 import { ElasticMark } from './elastic_mark';
 import { LoadingIndicator } from '../loading_indicator';
 
@@ -87,10 +88,23 @@ export function HeaderLogo({ href, navigateToApp, loadingCount$, ...observables
   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};
+  `;
+
   return (
     <a
       onClick={(e) => onClick(e, forceNavigation, navLinks, navigateToApp)}
-      className="chrHeaderLogo"
+      css={headerLogoCss}
       href={href}
       data-test-subj="logo"
       aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel', {
@@ -101,7 +115,7 @@ export function HeaderLogo({ href, navigateToApp, loadingCount$, ...observables
       {customizedLogo ? (
         <img
           src={customizedLogo}
-          className="chrHeaderLogo__mark"
+          css={headerLogoMarkCss}
           style={{ maxWidth: '200px', maxHeight: '84px' }}
           alt="custom mark"
         />

packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.tsx

@@ -7,15 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { css } from '@emotion/react';
 import { EuiLoadingSpinner, EuiProgress, EuiIcon, EuiImage } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import classNames from 'classnames';
 import type { Subscription } from 'rxjs';
 import type { HttpStart } from '@kbn/core-http-browser';
 
-import './loading_indicator.scss';
-
 export interface LoadingIndicatorProps {
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   showAsBar?: boolean;
@@ -59,7 +57,12 @@ export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { v
   }
 
   render() {
-    const className = classNames(!this.state.visible && 'kbnLoadingIndicator-hidden');
+    const indicatorHiddenCss = !this.state.visible
+      ? css`
+          visibility: hidden;
+          animation-play-state: paused;
+        `
+      : undefined;
 
     const testSubj = this.state.visible
       ? 'globalLoadingIndicator'
@@ -106,7 +109,7 @@ export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { v
       logo
     ) : (
       <EuiProgress
-        className={className}
+        css={indicatorHiddenCss}
         data-test-subj={testSubj}
         max={this.props.maxAmount}
         value={this.props.valueAmount}