Revisit updated header spacing (#7741)

Also: * Bump OUI to 1.10.0 Signed-off-by: Miki <miki@amazon.com>
opensearch-project · Aug 19, 2024 · 0a3bcd8 · 0a3bcd8
1 parent 389ad1b
commit 0a3bcd8
Show file tree

Hide file tree

Showing 18 changed files with 306 additions and 263 deletions.
diff --git a/package.json b/package.json
@@ -144,7 +144,7 @@
   "dependencies": {
     "@aws-crypto/client-node": "^3.1.1",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@elastic/request-crypto": "2.0.0",

diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json
@@ -23,7 +23,7 @@
     "enzyme-adapter-react-16": "^1.9.1"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
     "comment-stripper": "^0.0.4",

diff --git a/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.0",

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
@@ -5,24 +5,70 @@
 
 .newTopNavHeader {
   z-index: 1000;
-  padding-left: $euiSizeXS;
+  padding: 0 $euiSizeL $euiSizeS;
   box-shadow: none;
   border-bottom: none;
   background: none;
+  height: auto;
+  gap: $euiSizeS;
 
   &.primaryHeader {
-    height: auto;
-    padding-top: $euiSizeM;
+    margin-top: $euiSizeM;
   }
 
   &.primaryApplicationHeader {
-    height: auto;
     padding-top: $euiSizeM - $euiSizeXS;
+    border-bottom: 1px solid $euiColorLightShade;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .headerAppActionMenu {
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    & > .euiFlexGroup {
+      gap: $euiSizeS;
+    }
+
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    & > .euiHeaderLinks > .euiHeaderLinks__list {
+      gap: $euiSizeS;
+
+      & > * {
+        margin: 0;
+      }
+    }
   }
 
   &:has(.headerDescriptionControl, .headerBottomControl) {
     height: auto;
   }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  & > .euiHeaderSection {
+    gap: $euiSizeS;
+
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    & > .euiHeaderSectionItem:empty {
+      display: none;
+    }
+  }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  &:not(:has(>:not(:empty))),
+  .euiHeaderSectionItem:not(:has(>:not(:empty))) {
+    display: none;
+  }
+}
+
+.headerGlobalNav:has(.newTopNavHeader:not(.primaryApplicationHeader)) {
+  margin-bottom: -1 * $euiSizeS;
+}
+
+.newTopNavHeaderTitle {
+  line-height: 1;
+  font-size: 2rem;
 }
 
 .primaryApplicationHeader {
@@ -40,10 +86,6 @@
   }
 }
 
-.newTopNavApplicationTitle {
-  padding: 0 $euiSizeM;
-}
-
 .newAppTopNavExpander {
   position: fixed;
   left: 0;

diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -36,7 +36,7 @@ import {
   EuiHideFor,
   EuiIcon,
   EuiShowFor,
-  EuiText,
+  EuiTitle,
   htmlIdGenerator,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
@@ -412,12 +412,10 @@ export function Header({
       {/* Secondary header */}
       <EuiHeader className="newTopNavHeader">
         <EuiHeaderSection side="left">
-          <EuiHeaderSectionItem
-            border="none"
-            className="newTopNavApplicationTitle"
-            data-test-subj="headerApplicationTitle"
-          >
-            <EuiText>{breadcrumbs && <h2>{breadcrumbs[breadcrumbs.length - 1]?.text}</h2>}</EuiText>
+          <EuiHeaderSectionItem border="none" data-test-subj="headerApplicationTitle">
+            <EuiTitle size="l" className="newTopNavHeaderTitle">
+              {breadcrumbs && <h1>{breadcrumbs[breadcrumbs.length - 1]?.text}</h1>}
+            </EuiTitle>
           </EuiHeaderSectionItem>
 
           {renderBadge()}

diff --git a/src/core/public/chrome/ui/header/header_controls_container.scss b/src/core/public/chrome/ui/header/header_controls_container.scss
@@ -4,19 +4,21 @@
 */
 
 .headerControl {
-  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  & > .euiHeaderSectionItem {
-    margin: 0 $euiSizeXS;
-  }
+  gap: $euiSizeS;
 
   &.headerDescriptionControl {
-    padding: 0 $euiSizeM;
-    color: $euiTextSubduedColor;
-  }
+    .descriptionHeaderControl {
+      max-width: $euiLegibilityMaxWidth;
+      line-height: 1.5;
+      color: $euiTextSubduedColor;
 
-  &.headerBottomControl {
-    padding: $euiSizeM;
-    max-width: 725px;
+      // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+      .euiHeaderLink {
+        vertical-align: unset;
+        border: 0;
+        height: auto;
+      }
+    }
   }
 
   &:empty {

diff --git a/src/core/public/chrome/ui/header/recent_items.scss b/src/core/public/chrome/ui/header/recent_items.scss
@@ -4,19 +4,7 @@
  */
 
 .headerRecentItemsButton {
-  margin-left: $euiSizeM;
-  margin-right: $euiSizeS;
-  min-width: $euiSizeL;
-  font-size: 0 !important;
-
-  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  .euiHeaderSectionItemButton__content,
-  .euiButtonEmpty__text {
-    line-height: 1;
-  }
-
-  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  .euiButtonEmpty__content {
-    padding: 0;
+  .primaryApplicationHeader & {
+    margin-top: $euiSizeXS;
   }
 }
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
@@ -6,16 +6,17 @@ import React, { useMemo, useState } from 'react';
 import * as Rx from 'rxjs';
 import {
   EuiPopover,
-  EuiHeaderSectionItemButton,
   EuiTextColor,
   EuiListGroup,
   EuiListGroupItem,
   EuiTitle,
-  EuiIcon,
   EuiText,
   EuiSpacer,
   EuiHeaderSectionItemButtonProps,
+  EuiButtonIcon,
+  EuiToolTip,
 } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import useObservable from 'react-use/lib/useObservable';
 import { ChromeRecentlyAccessedHistoryItem } from '../..';
 import { WorkspaceObject } from '../../../workspace';
@@ -67,21 +68,35 @@ export const RecentItems = ({
     setIsPopoverOpen(false);
   };
 
+  const button = (
+    <EuiToolTip
+      content={i18n.translate('core.ui.chrome.headerGlobalNav.viewRecentItemsTooltip', {
+        defaultMessage: 'Recents',
+      })}
+      delay="long"
+      position="bottom"
+    >
+      <EuiButtonIcon
+        iconType="recent"
+        color="text"
+        size="xs"
+        aria-expanded={isPopoverOpen}
+        aria-haspopup="true"
+        aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.viewRecentItemsAriaLabel', {
+          defaultMessage: 'View recents',
+        })}
+        onClick={() => {
+          setIsPopoverOpen((prev) => !prev);
+        }}
+        data-test-subj="recentItemsSectionButton"
+        className="headerRecentItemsButton"
+      />
+    </EuiToolTip>
+  );
+
   return (
     <EuiPopover
-      button={
-        <EuiHeaderSectionItemButton
-          onClick={() => {
-            setIsPopoverOpen((prev) => !prev);
-          }}
-          data-test-subj="recentItemsSectionButton"
-          size={buttonSize}
-          className="headerRecentItemsButton"
-        >
-          {/* TODO: replace this icon once there is a new icon added to OUI https://github.com/opensearch-project/OpenSearch-Dashboards/issues/7354 */}
-          <EuiIcon type="recentlyViewedApp" size="m" />
-        </EuiHeaderSectionItemButton>
-      }
+      button={button}
       isOpen={isPopoverOpen}
       closePopover={() => {
         setIsPopoverOpen(false);

diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -18,7 +18,8 @@
 
 .headerAppActionMenu .globalQueryBar,
 .headerAppActionMenu .globalDatePicker {
-  padding-top: 0;
+  // The left-padding is a magic number just to add some space to the left that reduces with screen width
+  padding: 0 0 0 calc(100vw - 1600px);
 }
 
 .globalFilterGroup__filterBar {

diff --git a/src/plugins/navigation/public/top_nav_menu/_index.scss b/src/plugins/navigation/public/top_nav_menu/_index.scss
@@ -2,11 +2,19 @@
 
 .osdTopNavMenu {
   margin-right: $euiSizeXS;
+
+  .newTopNavHeader & {
+    margin-right: 0;
+  }
 }
 
 .osdTopNavMenuGroupedActions {
   background-color: $euiColorEmptyShade;
 
+  .newTopNavHeader & {
+    margin: 0;
+  }
+
   // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
   & > .euiSwitch,
   & > .euiButton,

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx
@@ -52,7 +52,10 @@ export function TopNavControlItem(props: TopNavControlData) {
       <EuiText className="descriptionHeaderControl" size="s">
         {props.description}
         {links?.map((linkProps) => (
-          <TopNavControlItem {...linkProps} />
+          <>
+            {/* @ts-ignore using an undefined property to prevent abuse */}
+            <TopNavControlItem {...linkProps} sizeOverride="xs" />
+          </>
         ))}
       </EuiText>
     );
@@ -102,7 +105,8 @@ export function TopNavControlItem(props: TopNavControlData) {
     case 'link':
       component = (
         <EuiHeaderLink
-          size="s"
+          // @ts-ignore using an undefined property to prevent abuse
+          size={props.sizeOverride || 's'}
           iconType={props.iconType}
           iconSide={props.iconSide}
           iconSize={props.iconSize}

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -172,7 +172,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
             return (
               <>
                 <MountPointPortal setMountPoint={setMenuMountPoint}>
-                  <EuiFlexGroup alignItems="stretch" gutterSize="s">
+                  <EuiFlexGroup alignItems="stretch" gutterSize="none">
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                       <EuiText size="s">{screenTitle}</EuiText>
                     </EuiFlexItem>
@@ -187,7 +187,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
           case TopNavMenuItemRenderType.OMITTED:
             return screenTitle ? (
               <MountPointPortal setMountPoint={setMenuMountPoint}>
-                <EuiFlexGroup alignItems="stretch" gutterSize="s">
+                <EuiFlexGroup alignItems="stretch" gutterSize="none">
                   <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                     <EuiText size="s">{screenTitle}</EuiText>
                   </EuiFlexItem>
@@ -206,7 +206,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
               return (
                 <>
                   <MountPointPortal setMountPoint={setMenuMountPoint}>
-                    <EuiFlexGroup alignItems="stretch" gutterSize="s">
+                    <EuiFlexGroup alignItems="stretch" gutterSize="none">
                       <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                         <EuiText size="s">{screenTitle}</EuiText>
                       </EuiFlexItem>

diff --git a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.9.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.10.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.12.0",