From 6d55aa3b93473c43111189981ee449c1a9f00a41 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 21 Feb 2024 10:24:33 -0800 Subject: [PATCH] [EuiSideNav] Remove Sass mixin and replace with `hasEmbellish` prop - for the medium breakpoint/collapsed EuiFlyout usage, this requires nesting an `EuiPageSidebar` in the flyout - also requires some extra Security CSS selector tweaks --- .../src/__snapshots__/with_solution_nav.test.tsx.snap | 2 ++ .../shared-ux/page/solution_nav/src/solution_nav.scss | 7 ++++--- packages/shared-ux/page/solution_nav/src/solution_nav.tsx | 8 +++++--- .../shared-ux/page/solution_nav/src/with_solution_nav.tsx | 1 + .../public/page_template/solution_nav/solution_nav.scss | 4 ---- .../public/app/home/template_wrapper/index.tsx | 2 +- 6 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap index f55fc4c110b11..749ba0d58422e 100644 --- a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap +++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap @@ -53,6 +53,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = ` pageSideBarProps={ Object { "className": "kbnSolutionNav__sidebar css-c34ez9", + "hasEmbellish": true, "minWidth": undefined, "paddingSize": "none", } @@ -113,6 +114,7 @@ exports[`WithSolutionNav with children 1`] = ` pageSideBarProps={ Object { "className": "kbnSolutionNav__sidebar css-c34ez9", + "hasEmbellish": true, "minWidth": undefined, "paddingSize": "none", } diff --git a/packages/shared-ux/page/solution_nav/src/solution_nav.scss b/packages/shared-ux/page/solution_nav/src/solution_nav.scss index 9db81e1b1a062..3456364009e60 100644 --- a/packages/shared-ux/page/solution_nav/src/solution_nav.scss +++ b/packages/shared-ux/page/solution_nav/src/solution_nav.scss @@ -1,14 +1,15 @@ -$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7); -@import '@elastic/eui/src/components/side_nav/mixins'; @import 'variables'; // Put the page background color in the flyout version too .kbnSolutionNav__flyout { background-color: $euiPageBackgroundColor; + + .kbnSolutionNav { + flex: auto; // Override default EuiPageSideBar flex CSS when in a flyout + } } .kbnSolutionNav { - @include euiSideNavEmbellish; @include euiYScroll; display: flex; diff --git a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx index 000176eb371b1..14b03c508fe5c 100644 --- a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx +++ b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx @@ -25,6 +25,7 @@ import { useIsWithinMinBreakpoint, useEuiTheme, useEuiThemeCSSVariables, + EuiPageSidebar, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; @@ -102,6 +103,7 @@ export const SolutionNav: FC = ({ canBeCollapsed = true, ...rest }) => { + const euiThemeContext = useEuiTheme(); const isSmallerBreakpoint = useIsWithinBreakpoints(mobileBreakpoints); const isMediumBreakpoint = useIsWithinBreakpoints(['m']); const isLargerBreakpoint = useIsWithinMinBreakpoint('l'); @@ -177,7 +179,7 @@ export const SolutionNav: FC = ({ ); }, [children, headingID, isCustomSideNav, isHidden, items, rest]); - const { euiTheme } = useEuiTheme(); + const { euiTheme } = euiThemeContext; const navWidth = useMemo(() => { if (isLargerBreakpoint) { return isOpenOnDesktop ? FLYOUT_SIZE_CSS : euiTheme.size.xxl; @@ -234,11 +236,11 @@ export const SolutionNav: FC = ({ className="kbnSolutionNav__flyout" hideCloseButton={!canBeCollapsed} > -
+ {titleText} {sideNavContent} -
+ )} {canBeCollapsed && ( diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx index 2e4879a4093cb..7689a739ebbe9 100644 --- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx +++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx @@ -76,6 +76,7 @@ export const withSolutionNav =

(WrappedComponent: Compo ...props.pageSideBarProps, minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined, className: sideBarClasses, + hasEmbellish: !isSidebarShrunk, }; return ( diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss index d0070cef729b7..af40e4d14ff2d 100644 --- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss +++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss @@ -1,13 +1,9 @@ -$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7); -@import '@elastic/eui/src/components/side_nav/mixins'; - // Put the page background color in the flyout version too .kbnPageTemplateSolutionNav__flyout { background-color: $euiPageBackgroundColor; } .kbnPageTemplateSolutionNav { - @include euiSideNavEmbellish; @include euiYScroll; @include euiBreakpoint('m' ,'l', 'xl') { diff --git a/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx b/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx index 5213a24172357..c81d17e18ff1e 100644 --- a/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx +++ b/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx @@ -35,7 +35,7 @@ const StyledKibanaPageTemplate = styled(KibanaPageTemplate)< theme: EuiThemeComputed; // using computed EUI theme to be consistent with user profile theming } >` - .kbnSolutionNav { + .kbnSolutionNav__sidebar:not(.kbnSolutionNav__sidebar--shrink) { background-color: ${({ theme }) => theme.colors.emptyShade}; }