[8.x] [SharedUX] Replace Sass with Emotion, Round 1 (#199885) (#203314)

# Backport This will backport the following commits from `main` to `8.x`: - [[SharedUX] Replace Sass with Emotion, Round 1 (#199885)](#199885)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Dec 9, 2024 · d90731a · d90731a
1 parent 1d3bed7
commit d90731a
Show file tree

Hide file tree

Showing 14 changed files with 222 additions and 130 deletions.
diff --git a/.../chrome/core-chrome-browser-internal/src/ui/__snapshots__/loading_indicator.test.tsx.snap b/.../chrome/core-chrome-browser-internal/src/ui/__snapshots__/loading_indicator.test.tsx.snap
diff --git a/...me/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/...me/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
diff --git a/...core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap b/...core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx b/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"
+                    className="eui-textInheritColor"
+                    css={styles.navSolutionGroupLink}
                     {...createOverviewLink({
                       link: overviewLink,
                       navigateToUrl,