[Workspace Chrome] Visual Improvements

src/core/packages/chrome/browser-internal/src/chrome_service.tsx

@@ -73,7 +73,6 @@ import { handleSystemColorModeChange } from './handle_system_colormode_change';
 import { AppMenuBar } from './ui/project/app_menu';
 import { GridLayoutProjectSideNav } from './ui/project/sidenav/grid_layout_sidenav';
 import { FixedLayoutProjectSideNav } from './ui/project/sidenav/fixed_layout_sidenav';
-import { SideNavCollapseButton } from './ui/project/sidenav/collapse_button';
 import type { NavigationProps } from './ui/project/sidenav/types';
 
 const IS_SIDENAV_COLLAPSED_KEY = 'core.chrome.isSideNavCollapsed';
@@ -422,6 +421,7 @@ export class ChromeService {
       dataTestSubj$: activeDataTestSubj$,
       isFeedbackBtnVisible$: this.isFeedbackBtnVisible$,
       feedbackUrlParams$,
+      onToggleCollapsed: setIsSideNavCollapsed,
     };
 
     const getProjectHeader = ({
@@ -471,19 +471,13 @@ export class ChromeService {
         kibanaVersion={injectedMetadata.getKibanaVersion()}
         prependBasePath={http.basePath.prepend}
       >
-        {includeSideNav ? (
+        {includeSideNav && (
           <Router history={application.history}>
             <FixedLayoutProjectSideNav
               isCollapsed$={this.isSideNavCollapsed$}
-              toggle={setIsSideNavCollapsed}
               navProps={navProps}
             />
           </Router>
-        ) : (
-          <SideNavCollapseButton
-            isCollapsed={this.isSideNavCollapsed$}
-            toggle={setIsSideNavCollapsed}
-          />
         )}
       </ProjectHeader>
     );

src/core/packages/chrome/browser-internal/src/ui/project/app_menu.tsx

@@ -37,7 +37,7 @@ const useAppMenuBarStyles = (euiTheme: UseEuiTheme['euiTheme']) =>
       justifyContent: 'end',
       alignItems: 'center',
       padding: `0 ${euiTheme.size.s}`,
-      background: euiTheme.colors.body,
+      background: euiTheme.colors.backgroundBasePlain,
       borderBottom: euiTheme.border.thin,
       marginBottom: `-${euiTheme.border.width.thin}`,
     };

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

@@ -52,18 +52,13 @@ const getHeaderCss = ({ size, colors }: EuiThemeComputed) => ({
       display: flex;
       align-items: center;
       justify-content: center;
-      min-width: 56px; /* 56 = 40 + 8 + 8 */
+      min-width: ${size.xxl};
       cursor: pointer;
     `,
     logo: css`
       min-width: 0; /* overrides min-width: 40px */
       padding: 0;
     `,
-    spinner: css`
-      position: relative;
-      left: 4px;
-      top: 2px;
-    `,
   },
   leftHeaderSection: css`
     // needed to enable breadcrumbs truncation
@@ -202,7 +197,7 @@ const Logo = ({
       {loadingCount === 0 ? (
         renderLogo()
       ) : (
-        <a onClick={navigateHome} href={fullHref} css={logoCss.spinner}>
+        <a onClick={navigateHome} href={fullHref}>
           <EuiLoadingSpinner
             size="l"
             aria-hidden={false}
@@ -231,8 +226,11 @@ export const ProjectHeader = ({
   const headerCss = getHeaderCss(euiTheme);
   const { logo: logoCss } = headerCss;
 
-  const topBarStyles = css`
+  const topBarStyles = () => css`
     box-shadow: none !important;
+    background-color: ${euiTheme.colors.backgroundTransparent};
+    border-bottom-color: ${euiTheme.colors.backgroundTransparent};
+    padding-inline: 4px 8px;
   `;
 
   return (

src/core/packages/chrome/browser-internal/src/ui/project/sidenav/fixed_layout_sidenav.tsx

@@ -15,31 +15,23 @@ import type { BehaviorSubject } from 'rxjs';
 import { css, Global } from '@emotion/react';
 
 import { Navigation } from './navigation';
-import { SideNavCollapseButton } from './collapse_button';
 import type { NavigationProps } from './types';
 
 interface CollapsibleNavigationProps {
-  toggle: (isVisible: boolean) => void;
   isCollapsed$: BehaviorSubject<boolean>;
   navProps: NavigationProps;
 }
 
 export const FixedLayoutProjectSideNav: FunctionComponent<CollapsibleNavigationProps> = ({
-  toggle,
   isCollapsed$,
   navProps,
 }) => {
   const isCollapsed = useObservable(isCollapsed$, isCollapsed$.getValue());
 
   return (
-    <>
-      <SideNavCollapseButton isCollapsed={isCollapsed} toggle={toggle} />
-      <CollapsibleNavigationFlyout>
-        {({ setWidth }) => (
-          <Navigation {...navProps} isCollapsed={isCollapsed} setWidth={setWidth} />
-        )}
-      </CollapsibleNavigationFlyout>
-    </>
+    <CollapsibleNavigationFlyout>
+      {({ setWidth }) => <Navigation {...navProps} isCollapsed={isCollapsed} setWidth={setWidth} />}
+    </CollapsibleNavigationFlyout>
   );
 };
 

src/core/packages/chrome/browser-internal/src/ui/project/sidenav/navigation/navigation.tsx

@@ -49,6 +49,9 @@ export interface ChromeNavigationProps {
   dataTestSubj$?: Observable<string | undefined>;
 
   feedbackUrlParams$: Observable<URLSearchParams | undefined>;
+
+  // collapse toggle callback
+  onToggleCollapsed: (isCollapsed: boolean) => void;
 }
 
 export const Navigation = (props: ChromeNavigationProps) => {
@@ -75,6 +78,7 @@ export const Navigation = (props: ChromeNavigationProps) => {
         }
         isCollapsed={props.isCollapsed}
         setWidth={props.setWidth}
+        onToggleCollapsed={props.onToggleCollapsed}
         activeItemId={activeItemId}
         data-test-subj={classnames(dataTestSubj, 'projectSideNav', 'projectSideNavV2')}
       />

src/core/packages/chrome/browser-internal/src/ui/project/sidenav/navigation/navigation_feedback_snippet.tsx

@@ -63,14 +63,17 @@ export const NavigationFeedbackSnippet = ({
   const { euiTheme } = useEuiTheme();
 
   return (
-    <FeedbackSnippet
+    <div
       css={css`
-        border-top: ${euiTheme.border.width.thin} ${euiTheme.colors.borderBaseSubdued} solid;
+        border-top: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBaseSubdued};
       `}
-      feedbackButtonMessage={feedbackButtonMessage}
-      feedbackSnippetId={feedbackSnippetId}
-      promptViewMessage={promptViewMessage}
-      surveyUrl={feedbackSurveyUrl}
-    />
+    >
+      <FeedbackSnippet
+        feedbackButtonMessage={feedbackButtonMessage}
+        feedbackSnippetId={feedbackSnippetId}
+        promptViewMessage={promptViewMessage}
+        surveyUrl={feedbackSurveyUrl}
+      />
+    </div>
   );
 };

src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts

@@ -9,21 +9,45 @@
 
 import { css } from '@emotion/react';
 import { layoutVar, layoutLevels } from '@kbn/core-chrome-layout-constants';
+import { euiOverflowScroll, euiShadow } from '@elastic/eui';
+import { getHighContrastBorder } from '@kbn/core-chrome-layout-utils';
 import type { EmotionFn } from '../types';
 
-const root: EmotionFn = ({ euiTheme }) =>
+const root: EmotionFn = (useEuiTheme) =>
   css`
     grid-area: application;
-    height: 100%;
-    position: relative;
-    width: 100%;
+
+    height: calc(100% - ${layoutVar('application.marginBottom')});
+    width: calc(100% - ${layoutVar('application.marginRight')});
+    margin-bottom: ${layoutVar('application.marginBottom')};
+    margin-right: ${layoutVar('application.marginRight')};
+
     z-index: ${layoutLevels.content};
 
+    position: relative;
     display: flex;
     flex-direction: column;
 
+    background-color: ${useEuiTheme.euiTheme.colors.backgroundBasePlain};
+    border-radius: ${useEuiTheme.euiTheme.border.radius.medium};
+    border: ${getHighContrastBorder(useEuiTheme)};
+    ${euiShadow(useEuiTheme, 'xs', { border: 'none' })};
+
     &:focus-visible {
-      border: 2px solid ${euiTheme.colors.textParagraph};
+      border: 2px solid ${useEuiTheme.euiTheme.colors.textParagraph};
+    }
+
+    // only restrict overflow scroll on screen (not print) to allow for full page printing
+    @media screen {
+      ${euiOverflowScroll(useEuiTheme, { direction: 'y' })};
+      // reset the height back to respect the margin bottom
+      height: calc(100% - ${layoutVar('application.marginBottom')});
+
+      // Hide scrollbar
+      scrollbar-width: none; /* Firefox */
+      &::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Edge */
+      }
     }
   `;
 

src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx

@@ -10,8 +10,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 
-import { css } from '@emotion/react';
-import { useEuiOverflowScroll } from '@elastic/eui';
 import { APP_MAIN_SCROLL_CONTAINER_ID } from '@kbn/core-chrome-layout-constants';
 
 import { styles } from './layout_application.styles';
@@ -31,16 +29,9 @@ export const LayoutApplication = ({
   topBar?: ReactNode;
   bottomBar?: ReactNode;
 }) => {
-  // only restrict overflow scroll on screen (not print) to allow for full page printing
-  const overflow = css`
-    @media screen {
-      ${useEuiOverflowScroll('y')};
-    }
-  `;
-
   return (
     <div
-      css={[styles.root, overflow]}
+      css={styles.root}
       id={APP_MAIN_SCROLL_CONTAINER_ID}
       className="kbnChromeLayoutApplication"
       data-test-subj="kbnChromeLayoutApplication"

src/core/packages/chrome/layout/core-chrome-layout-components/layout.types.ts

@@ -23,6 +23,8 @@ export interface LayoutDimensions {
   sidebarWidth: number;
   applicationTopBarHeight: number;
   applicationBottomBarHeight: number;
+  applicationMarginBottom: number;
+  applicationMarginRight: number;
 }
 
 /**

src/core/packages/chrome/layout/core-chrome-layout-components/layout_config_context.tsx

@@ -24,6 +24,8 @@ export type LayoutConfig = Pick<
   | 'sidebarWidth'
   | 'applicationTopBarHeight'
   | 'applicationBottomBarHeight'
+  | 'applicationMarginBottom'
+  | 'applicationMarginRight'
 >;
 
 /**

src/core/packages/chrome/layout/core-chrome-layout-components/layout_global_css.tsx

@@ -26,6 +26,8 @@ export const LayoutGlobalCSS = () => {
     sidebarWidth,
     applicationTopBarHeight,
     applicationBottomBarHeight,
+    applicationMarginBottom,
+    applicationMarginRight,
   } = useLayoutState();
 
   const banner = css`
@@ -80,10 +82,17 @@ export const LayoutGlobalCSS = () => {
   `;
 
   const application = css`
+    ${layoutVarName('application.marginBottom')}: ${applicationMarginBottom}px;
+    ${layoutVarName('application.marginRight')}: ${applicationMarginRight}px;
+
     ${layoutVarName('application.top')}: ${bannerHeight + headerHeight}px;
-    ${layoutVarName('application.bottom')}: ${layoutVar('footer.height')};
+    ${layoutVarName('application.bottom')}: calc(${layoutVar('footer.height')} + ${layoutVar(
+      'application.marginBottom'
+    )});
     ${layoutVarName('application.left')}: ${navigationWidth}px;
-    ${layoutVarName('application.right')}: ${sidebarWidth}px;
+    ${layoutVarName('application.right')}: calc(${layoutVar(
+      'application.marginRight'
+    )} + ${sidebarWidth}px);
     ${layoutVarName('application.height')}: calc(
       100vh - ${layoutVar('application.top')} - ${layoutVar('application.bottom')}
     );

src/core/packages/chrome/layout/core-chrome-layout-components/layout_state_context.tsx

@@ -63,6 +63,8 @@ export const LayoutStateProvider = ({ children, ...props }: LayoutStateProps) =>
     applicationBottomBarHeight: hasApplicationBottomBar
       ? layoutConfig.applicationBottomBarHeight ?? 0
       : 0,
+    applicationMarginRight: layoutConfig.applicationMarginRight ?? 0,
+    applicationMarginBottom: layoutConfig.applicationMarginBottom ?? 0,
   };
 
   return <LayoutStateContext.Provider value={layoutState}>{children}</LayoutStateContext.Provider>;

src/core/packages/chrome/layout/core-chrome-layout-components/moon.yml

@@ -19,6 +19,7 @@ project:
     sourceRoot: src/core/packages/chrome/layout/core-chrome-layout-components
 dependsOn:
   - '@kbn/core-chrome-layout-constants'
+  - '@kbn/core-chrome-layout-utils'
 tags:
   - shared-browser
   - package

src/core/packages/chrome/layout/core-chrome-layout-components/tsconfig.json

@@ -21,5 +21,6 @@
   ],
   "kbn_references": [
     "@kbn/core-chrome-layout-constants",
+    "@kbn/core-chrome-layout-utils",
   ]
 }

src/core/packages/chrome/layout/core-chrome-layout-components/types.ts

@@ -7,13 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { EuiThemeColorMode, EuiThemeComputed } from '@elastic/eui';
+import type { UseEuiTheme } from '@elastic/eui';
 import type { SerializedStyles } from '@emotion/serialize';
 
-export type EmotionFn = ({
-  euiTheme,
-  colorMode,
-}: {
-  euiTheme: EuiThemeComputed;
-  colorMode: EuiThemeColorMode;
-}) => SerializedStyles;
+export type EmotionFn = (useEuiTheme: UseEuiTheme) => SerializedStyles;

src/core/packages/chrome/layout/core-chrome-layout-constants/index.ts

@@ -41,6 +41,11 @@ export const MAIN_CONTENT_SELECTORS = [
   '.kbnAppWrapper', // Last-ditch fallback for all plugins regardless of page template
 ];
 
+/**
+ * The gap (in pixels) between the secondary side navigation panel and the main app content.
+ */
+export const SIDE_PANEL_CONTENT_GAP = 8;
+
 /**
  * The selector for elements that should be included in the focus trap of a flyout.
  * This will allow the flyout focus trap to include header and sidenav by default.

src/core/packages/chrome/layout/core-chrome-layout-constants/src/css_variables.ts

@@ -7,6 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type React from 'react';
+
 export type LayoutComponent =
   | 'banner'
   | 'header'
@@ -15,7 +17,10 @@ export type LayoutComponent =
   | 'sidebar'
   | 'application';
 export type ApplicationComponent = 'topBar' | 'bottomBar' | 'content';
-export type LayoutProperty = 'top' | 'bottom' | 'left' | 'right' | 'height' | 'width';
+export type LayoutProperty = keyof Pick<
+  React.CSSProperties,
+  'top' | 'bottom' | 'left' | 'right' | 'height' | 'width' | 'marginBottom' | 'marginRight'
+>;
 
 export type LayoutVarName = `${LayoutComponent}.${LayoutProperty}`;
 export type ApplicationVarName = `application.${ApplicationComponent}.${LayoutProperty}`;

src/core/packages/chrome/layout/core-chrome-layout-utils/index.ts

@@ -20,3 +20,9 @@ export {
   scrollBy,
   isAtBottomOfPage,
 } from './src/scroll';
+
+export {
+  type HighContrastSeparatorOptions,
+  getHighContrastBorder,
+  getHighContrastSeparator,
+} from './src/high_contrast';