[EuiHeader] Stacked example (#3538)

* Added stacked header example **Break**: EuiHeader now requires consumer to use mixin to apply padding to account for fixed position * Adding header updates to test flyouts * Fix styles for dark theme - Darker in actual dark theme * Fix addition/removal of body classes when there are mulitple fixed headers * Fixing shadows on flyouts. * Change Fixed Header example and fixed separation of flyout and header
elastic · Jun 4, 2020 · c134b58 · c134b58
1 parent a6e49f0
commit c134b58
Show file tree

Hide file tree

Showing 20 changed files with 262 additions and 85 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,14 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+**Bug fixes**
+
+- Fixed `EuiKeyPadMenu` and `EuiKeyPadMenuItem` aria roles ([#3502](https://github.com/elastic/eui/pull/3502))
+
 **Breaking changes**
+
+- A fixed `EuiHeader` no longer automatically padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))
 - Improved `EuiPagination`, `EuiDataGrid`, `EuiBasicTable` and `EuiInMemoryTable` accessibility, causing `EuiPaginationButton` to require a new prop `pageIndex` ([#3294](https://github.com/elastic/eui/pull/3294))
 
-**Bug fixes**
-- Fixed `EuiKeyPadMenu` and `EuiKeyPadMenuItem` aria roles ([#3502](https://github.com/elastic/eui/pull/3502))
 
 ## [`24.1.0`](https://github.com/elastic/eui/tree/v24.1.0)
 

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -11,6 +11,22 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
+@include euiHeaderAffordForFixed;
+
+.euiBody--headerIsFixed {
+  .guideSideNav {
+    top: $euiHeaderHeightCompensation;
+  }
+}
+
+.euiBody--headerIsFixed--double {
+  @include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);
+
+  .guideSideNav {
+    top: $euiHeaderHeightCompensation * 2;
+  }
+}
+
 .guidePage {
   padding: 0;
 }
@@ -215,6 +231,19 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   top: 0;
 }
 
+.euiDataGridRowCell--favoriteFranchise {
+  background: transparentize($color: #800080, $amount: .95) !important;
+}
+
+.euiDataGridHeaderCell--favoriteFranchise {
+  background: transparentize($color: #800080, $amount: .9) !important;
+}
+
+.euiTreeView__nodeInnerExample {
+  color: $euiColorDanger;
+  font-weight: $euiFontWeightBold;
+}
+
 @import '../views/guidelines/index';
 @import 'guide_section/index';
 @import 'guide_rule/index';
@@ -229,7 +258,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 
   .guideSideNav {
-    position: relative;
+    position: static;
     width: auto;
 
     // This is a temporary hack till we fix how classes pass into form controls
@@ -263,16 +292,3 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     width: 100%;
   }
 }
-
-.euiDataGridRowCell--favoriteFranchise {
-  background: transparentize($color: #800080, $amount: .95) !important;
-}
-
-.euiDataGridHeaderCell--favoriteFranchise {
-  background: transparentize($color: #800080, $amount: .9) !important;
-}
-
-.euiTreeView__nodeInnerExample {
-  color: $euiColorDanger;
-  font-weight: $euiFontWeightBold;
-}
diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js
@@ -45,6 +45,10 @@ import HeaderDark from './header_dark';
 const headerDarkSource = require('!!raw-loader!./header_dark');
 const headerDarkHtml = renderToHtml(HeaderDark);
 
+import HeaderStacked from './header_stacked';
+const headerStackedSource = require('!!raw-loader!./header_stacked');
+const headerStackedHtml = renderToHtml(HeaderStacked);
+
 const headerSnippet = `<EuiHeader>
   <EuiHeaderSection grow={false}>
     <EuiHeaderSectionItem border="right">
@@ -184,15 +188,26 @@ export const HeaderExample = {
       text: (
         <>
           <p>
-            Most consumer need a header that does not scroll way with the page
-            contents. You can apply this display by changing{' '}
-            <EuiCode>position</EuiCode> to <EuiCode>fixed</EuiCode>. It will
-            also add the appropriate padding to the window body by applying a
-            class.
+            Most consumers need a header that does not scroll away with the page
+            contents. You can apply this display by applying the property{' '}
+            <EuiCode language="ts">{'position="fixed"'}</EuiCode>. This will
+            also add a class of <EuiCode>.euiBody--headerIsFixed</EuiCode> to
+            the window body.
+          </p>
+          <p>
+            You will then need to apply your own padding to this body class to
+            afford for the header height. EUI supplies a helper mixin that also
+            accounts for this height in flyouts and the collapsible nav. Simply
+            add{' '}
+            <EuiCode language="sass">@mixin euiHeaderAffordForFixed;</EuiCode>{' '}
+            anywhere in your SASS.
           </p>
         </>
       ),
-      snippet: '<EuiHeader position="fixed" />',
+      snippet: [
+        '<EuiHeader position="fixed" />',
+        '@mixin euiHeaderAffordForFixed;',
+      ],
       demo: <HeaderPosition />,
     },
     {
@@ -282,5 +297,34 @@ export const HeaderExample = {
       snippet: headerLinksSnippet,
       demo: <HeaderAlert />,
     },
+    {
+      title: 'Stacked headers',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: headerStackedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: headerStackedHtml,
+        },
+      ],
+      text: (
+        <p>
+          Stacking multiple headers provide a great way to separate global
+          navigation concerns. However, the{' '}
+          <EuiCode language="ts">{'position="fixed"'}</EuiCode> option will not
+          be aware of the number of headers. Therefore, if you do need fixed and
+          stacked headers, you will need to apply the helper mixin and pass in
+          the correct height to afford for.
+        </p>
+      ),
+      snippet: [
+        `<EuiHeader theme="dark" />
+<EuiHeader />`,
+        '@include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);',
+      ],
+      demo: <HeaderStacked />,
+    },
   ],
 };
diff --git a/src-docs/src/views/header/header_position.js b/src-docs/src/views/header/header_position.js
@@ -4,35 +4,28 @@ import {
   EuiHeader,
   EuiHeaderLogo,
   EuiSwitch,
+  EuiSpacer,
 } from '../../../../src/components';
 
 export default () => {
   const [position, setPosition] = useState('static');
 
   const sections = [
     {
-      items: [
-        <EuiHeaderLogo
-          iconType="logoKibana"
-          href="#"
-          aria-label="Go to home page"
-        />,
-      ],
-      borders: 'none',
-    },
-    {
-      items: [
-        <div style={{ padding: 12 }}>
-          <EuiSwitch
-            label={`position: ${position}`}
-            checked={position === 'fixed'}
-            onChange={e => setPosition(e.target.checked ? 'fixed' : 'static')}
-          />
-        </div>,
-      ],
-      borders: 'none',
+      items: [<EuiHeaderLogo iconType="logoKibana">Kibana</EuiHeaderLogo>],
+      borders: 'right',
     },
   ];
 
-  return <EuiHeader position={position} sections={sections} />;
+  return (
+    <>
+      <EuiSwitch
+        label={'Make header fixed position'}
+        checked={position === 'fixed'}
+        onChange={e => setPosition(e.target.checked ? 'fixed' : 'static')}
+      />
+      <EuiSpacer />
+      <EuiHeader position={position} sections={sections} />
+    </>
+  );
 };
diff --git a/src-docs/src/views/header/header_sections.js b/src-docs/src/views/header/header_sections.js
@@ -72,6 +72,9 @@ export default () => {
       items: [renderLogo, <HeaderSpacesMenu />],
       borders: 'right',
       breadcrumbs: breadcrumbs,
+      breadcrumbProps: {
+        'aria-label': 'Header sections breadcrumbs',
+      },
     },
     {
       items: [renderSearch, <div style={{ width: 8 }} />],

diff --git a/src-docs/src/views/header/header_stacked.tsx b/src-docs/src/views/header/header_stacked.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+
+import {
+  EuiHeader,
+  EuiHeaderLogo,
+  EuiHeaderSectionItemButton,
+} from '../../../../src/components/header';
+import { EuiSwitch } from '../../../../src/components/form';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiAvatar } from '../../../../src/components/avatar';
+// @ts-ignore
+import HeaderUpdates from './header_updates';
+
+export default () => {
+  const [isFixed, setIsFixed] = useState(false);
+
+  const breadcrumbs = [
+    {
+      text: 'Management',
+      href: '#',
+    },
+    {
+      text: 'Users',
+    },
+  ];
+
+  /**
+   * Docs Note: This additional class is needed only for docs to override the usually single header
+   */
+  useEffect(() => {
+    if (isFixed) document.body.classList.add('euiBody--headerIsFixed--double');
+
+    return () => {
+      document.body.classList.remove('euiBody--headerIsFixed--double');
+    };
+  }, [isFixed]);
+
+  const headers = (
+    <>
+      <EuiHeader
+        theme="dark"
+        position={isFixed ? 'fixed' : 'static'}
+        sections={[
+          {
+            items: [
+              <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
+            ],
+            borders: 'right',
+          },
+          {
+            items: [
+              <EuiHeaderSectionItemButton aria-label="Account menu">
+                <EuiAvatar name="John Username" size="s" />
+              </EuiHeaderSectionItemButton>,
+            ],
+          },
+        ]}
+      />
+      <EuiHeader
+        position={isFixed ? 'fixed' : 'static'}
+        sections={[
+          {
+            items: [
+              <EuiHeaderSectionItemButton aria-label="Account menu">
+                <EuiAvatar type="space" name="Default Space" size="s" />
+              </EuiHeaderSectionItemButton>,
+            ],
+            breadcrumbs: breadcrumbs,
+            borders: 'none',
+          },
+          {
+            items: isFixed ? [<HeaderUpdates />] : undefined,
+          },
+        ]}
+      />
+    </>
+  );
+
+  return (
+    <>
+      <EuiSwitch
+        label={'Make header fixed position'}
+        checked={isFixed}
+        onChange={e => setIsFixed(e.target.checked)}
+      />
+      <EuiSpacer />
+      {headers}
+    </>
+  );
+};
diff --git a/src-docs/src/views/header/header_updates.js b/src-docs/src/views/header/header_updates.js
@@ -121,18 +121,13 @@ export default () => {
   );
 
   let flyout;
-  const flyoutStyle = {
-    top: '49px',
-    height: 'calc(100vh - 49px)',
-  };
   if (isFlyoutVisible) {
     flyout = (
       <EuiFlyout
         onClose={() => closeFlyout()}
         size="s"
         id="headerNewsFeed"
-        aria-labelledby="flyoutSmallTitle"
-        style={flyoutStyle}>
+        aria-labelledby="flyoutSmallTitle">
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
             <h2 id="flyoutSmallTitle">What&apos;s new</h2>

diff --git a/src/components/flyout/_mixins.scss b/src/components/flyout/_mixins.scss
@@ -15,10 +15,4 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-
-  // When the EuiHeader is fixed, we need to account for it in the position of the flyout
-  .euiBody--headerIsFixed & {
-    top: $euiHeaderHeightCompensation;
-    height: calc(100% - #{$euiHeaderHeightCompensation});
-  }
 }
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -9,7 +9,7 @@
   display: flex;
   justify-content: space-between;
   background: $euiHeaderBackgroundColor;
-  border-bottom: $euiBorderThin;
+  border-bottom: 1px solid $euiHeaderBorderColor;
 
   &--fixed {
     position: fixed;
@@ -19,20 +19,22 @@
   }
 }
 
-.euiBody--headerIsFixed {
-  padding-top: $euiHeaderHeightCompensation;
-}
-
 .euiBody--collapsibleNavIsOpen,
 .euiBody--hasFlyout {
   .euiHeader--fixed {
     z-index: $euiZModal + 1;
   }
 }
 
+.euiHeader--fixed + .euiHeader--fixed {
+  top: $euiHeaderHeightCompensation;
+}
+
 .euiHeader--dark {
-  // Only force reverse theme if the theme is light
   @if (lightness($euiTextColor) < 50) {
-    @include euiHeaderDarkTheme;
+    @include euiHeaderDarkTheme($backgroundColor: shade($euiColorDarkestShade, 28%));
+  } @else {
+    // Makes forced "dark" theme darker than the typical dark them to separate them visually
+    @include euiHeaderDarkTheme($backgroundColor: shade($euiColorLightestShade, 50%));
   }
 }