From 73bb3a8759df2023639a94de5985ffb268071448 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 12 Nov 2024 12:51:05 -0700 Subject: [PATCH 01/13] Use Emotion for loading-indicator CSS --- .../src/ui/loading_indicator.scss | 9 --------- .../src/ui/loading_indicator.tsx | 13 ++++++++----- 2 files changed, 8 insertions(+), 14 deletions(-) delete mode 100644 packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss deleted file mode 100644 index d12331d9c042..000000000000 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss +++ /dev/null @@ -1,9 +0,0 @@ -.kbnLoadingIndicator-hidden { - visibility: hidden; - animation-play-state: paused; -} - -.euiHeaderSectionItem .euiButtonEmpty__text { - // stop global header buttons from jumping during loading state - display: flex; -} \ No newline at end of file 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 index 2c9d5f6b931d..38339b7bc82d 100644 --- 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 @@ -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; showAsBar?: boolean; @@ -59,7 +57,12 @@ export class LoadingIndicator extends React.Component Date: Tue, 12 Nov 2024 13:31:20 -0700 Subject: [PATCH 02/13] Use Emotion for header-logo CSS --- .../src/ui/header/header_logo.scss | 11 ---------- .../src/ui/header/header_logo.tsx | 20 ++++++++++++++++--- 2 files changed, 17 insertions(+), 14 deletions(-) delete mode 100644 packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss deleted file mode 100644 index 6bdc0b8777ec..000000000000 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss +++ /dev/null @@ -1,11 +0,0 @@ -.chrHeaderLogo { - display: flex; - align-items: center; - height: $euiSizeXXL; - padding-inline: $euiSizeS; -} - -.chrHeaderLogo__mark { - margin-left: $euiSizeS; - fill: $euiColorGhost; -} 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 index b7ceb4b52aa4..b36ec01997c8 100644 --- 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 @@ -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 ( 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 ? ( custom mark From d3fe030fcd81ed74ce48f75c8f15a85f21a66125 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 12 Nov 2024 15:38:44 -0700 Subject: [PATCH 03/13] Use Emotion for collapsible-nav CSS --- .../src/ui/header/collapsible_nav.scss | 46 ------------ .../src/ui/header/collapsible_nav.tsx | 15 ++-- .../ui/header/get_collapsible_nav_styles.ts | 72 +++++++++++++++++++ 3 files changed, 81 insertions(+), 52 deletions(-) delete mode 100644 packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss create mode 100644 packages/core/chrome/core-chrome-browser-internal/src/ui/header/get_collapsible_nav_styles.ts 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 deleted file mode 100644 index 1086e30ebec0..000000000000 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ /dev/null @@ -1,46 +0,0 @@ -$screenHeightBreakpoint: $euiSize * 15; - -.kbnCollapsibleNav { - @media (max-height: $screenHeightBreakpoint) { - overflow-y: auto; - } -} - -.kbnCollapsibleNav__recentsListGroup { - max-height: $euiSize * 10; - margin-right: -$euiSizeS; - @include euiYScroll; -} - -.kbnCollapsibleNav__solutions { - @include euiYScroll; - - /** - * 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 - */ - -.kbnCollapsibleNav__solutionGroupButton { - display: block; /* 1 */ - - &:hover { - text-decoration: none; /* 2 */ - } -} - -.kbnCollapsibleNav__solutionGroupLink { - display: block; /* 1 */ - - &:hover { - text-decoration: underline; /* 2 */ - } -} 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 index 2ad507a95838..cd13d3f22872 100644 --- 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) { const allCategories = {} as Record; @@ -149,6 +150,7 @@ export function CollapsibleNav({ ...(needsIcon && { basePath }), }); }; + const styles = getCollapsibleNavStyles(useEuiTheme()); return ( {customNavLink && ( <> @@ -275,14 +277,14 @@ export function CollapsibleNav({ color="subdued" gutterSize="none" size="s" - className="kbnCollapsibleNav__recentsListGroup" + css={styles.navRecentsListGroupCss} /> )} - + {/* 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 ? ( { + 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, + }; +}; From 3ce08ce57aca99d219ec188ad8ae19255ca7ce9d Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 12 Nov 2024 16:31:46 -0700 Subject: [PATCH 04/13] =?UTF-8?q?Use=20=E2=80=9Cobject=20styles=E2=80=9D?= =?UTF-8?q?=20syntax?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/header/get_collapsible_nav_styles.ts | 52 +++++++++---------- .../src/ui/header/header_logo.tsx | 28 +++++----- .../src/ui/loading_indicator.tsx | 8 +-- 3 files changed, 45 insertions(+), 43 deletions(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/get_collapsible_nav_styles.ts b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/get_collapsible_nav_styles.ts index 77b244f7de1a..cf283f633e48 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/get_collapsible_nav_styles.ts +++ b/packages/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 index b36ec01997c8..aa3d4582bc3b 100644 --- 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 ( 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 ? ( 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 index 38339b7bc82d..c9f7f8fefa11 100644 --- 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 Date: Wed, 13 Nov 2024 11:05:55 -0700 Subject: [PATCH 05/13] Restore className props --- .../src/ui/header/collapsible_nav.tsx | 7 +++++-- .../src/ui/header/header_logo.tsx | 4 +++- .../src/ui/loading_indicator.tsx | 3 +++ 3 files changed, 11 insertions(+), 3 deletions(-) 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 index cd13d3f22872..e93b527a5d2b 100644 --- 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 @@ -164,6 +164,7 @@ export function CollapsibleNav({ button={button} ownFocus={false} size={248} + className="kbnCollapsibleNav" css={styles.navCss} > {customNavLink && ( @@ -277,6 +278,7 @@ export function CollapsibleNav({ color="subdued" gutterSize="none" size="s" + className="kbnCollapsibleNav__recentsListGroup" css={styles.navRecentsListGroupCss} /> @@ -284,7 +286,7 @@ export function CollapsibleNav({ - + {/* Kibana, Observability, Security, and Management sections */} {orderedCategories.map((categoryName) => { const category = categoryDictionary[categoryName]!; @@ -296,12 +298,13 @@ export function CollapsibleNav({ iconType={category.euiIconType} iconSize="m" buttonElement={overviewLink ? 'div' : 'button'} + buttonClassName="kbnCollapsibleNav__solutionGroupButton" css={styles.navSolutionGroupButton} title={ overviewLink ? ( onClick(e, forceNavigation, navLinks, navigateToApp)} + className="chrHeaderLogo" css={styles.logoCss} href={href} data-test-subj="logo" @@ -117,12 +118,13 @@ export function HeaderLogo({ href, navigateToApp, loadingCount$, ...observables {customizedLogo ? ( 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 index c9f7f8fefa11..19fefc9fb855 100644 --- 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 @@ -11,6 +11,7 @@ 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'; @@ -57,6 +58,7 @@ export class LoadingIndicator extends React.Component Date: Wed, 13 Nov 2024 10:09:21 -0700 Subject: [PATCH 06/13] update test snapshots --- .../header/__snapshots__/collapsible_nav.test.tsx.snap | 10 +++++----- .../src/ui/header/__snapshots__/header.test.tsx.snap | 2 ++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap index 62b40f0d05e9..acd172471142 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap @@ -168,7 +168,7 @@ Array [ >