Change Fixed Header example and fixed separation of flyout and header

cchaos · cchaos · commit ecac9d3bf23d · 2020-06-03T16:46:59.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `24.1.0`.
+**Theme: Amsterdam**
+
+- Updated `EuiHeader` and components ([#3524](https://github.com/elastic/eui/pull/3524))
+
+**Breaking changes**
+
+- A fixed `EuiHeader` no longer automatically padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))
 
 ## [`24.1.0`](https://github.com/elastic/eui/tree/v24.1.0)
 
@@ -43,11 +49,6 @@ No public interface changes since `24.1.0`.
 - Improve `EuiOverlayMask` colors ([#3515](https://github.com/elastic/eui/pull/3515))
 - Updated shadow styles to improve smoothness, use black as the base color, and deprecated `opacity` value of shadow mixins ([#3428](https://github.com/elastic/eui/pull/3428))
 - Removed borders from `EuiFlyout` and `EuiPopover` ([#3477](https://github.com/elastic/eui/pull/3477))
-- Updated `EuiHeader` and components ([#3524](https://github.com/elastic/eui/pull/3524))
-
-**Breaking changes**
-
-- A fixed `EuiHeader` no longer automatically padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))
 
 ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0)
 
diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js
@@ -189,14 +189,14 @@ export const HeaderExample = {
         <>
           <p>
             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.
+            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
+            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>{' '}
diff --git a/src-docs/src/views/header/header_position.js b/src-docs/src/views/header/header_position.js
@@ -4,35 +4,27 @@ 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>],
     },
   ];
 
-  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/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;
diff --git a/src/components/header/_mixins.scss b/src/components/header/_mixins.scss
@@ -1,6 +1,6 @@
 @mixin euiHeaderDarkTheme($backgroundColor) {
   background-color: $backgroundColor;
-  border-bottom-color: lightOrDarkTheme($backgroundColor, $euiBorderColor);
+  border-bottom-color: lightOrDarkTheme($backgroundColor, $euiHeaderBorderColor);
 
   .euiHeaderLogo__text,
   .euiHeaderLink,
diff --git a/src/components/header/_variables.scss b/src/components/header/_variables.scss
@@ -1,6 +1,7 @@
 // Note - these are also used by the EuiNavDrawer (/nav_drawer) component
 // Themable colors
 $euiHeaderBackgroundColor: $euiColorEmptyShade !default;
+$euiHeaderBorderColor: $euiBorderColor !default;
 $euiHeaderBreadcrumbColor: $euiColorDarkestShade !default;
 
 // Layout vars
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_header.scss b/src/themes/eui-amsterdam/global_styling/variables/_header.scss
@@ -1,3 +1,4 @@
+$euiHeaderBorderColor: shade($euiBorderColor, 3%);
 $euiHeaderHeight: $euiSizeXXL + $euiSizeS;
 
 $euiHeaderChildSize: $euiSizeXXL;
diff --git a/src/themes/eui-amsterdam/overrides/_flyout.scss b/src/themes/eui-amsterdam/overrides/_flyout.scss
@@ -1,3 +1,5 @@
+// Amsterdam shadows extend upwards as well, but this means flyouts shadows can overlap fixed headers.
+// The clip path ensures only the left side of the shadow is exposed.
 .euiFlyout {
-  clip-path: polygon(-10% 1px, 100% 1px, 100% 100%, -10% 100%);
+  clip-path: polygon(-10% 0, 100% 0, 100% 100%, -10% 100%);
 }
diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss
@@ -1,6 +1,5 @@
 .euiHeader {
   height: $euiHeaderHeight;
-  border-bottom: none;
   padding-left: $euiSizeS;
   padding-right: $euiSizeS;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+$euiHeaderBorderColor: shade($euiBorderColor, 3%);`
`1`	`2`	`$euiHeaderHeight: $euiSizeXXL + $euiSizeS;`
`2`	`3`
`3`	`4`	`$euiHeaderChildSize: $euiSizeXXL;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+// Amsterdam shadows extend upwards as well, but this means flyouts shadows can overlap fixed headers.`
	`2`	`+// The clip path ensures only the left side of the shadow is exposed.`
`1`	`3`	`.euiFlyout {`
`2`		`- clip-path: polygon(-10% 1px, 100% 1px, 100% 100%, -10% 100%);`
	`4`	`+ clip-path: polygon(-10% 0, 100% 0, 100% 100%, -10% 100%);`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`.euiHeader {`
`2`	`2`	`height: $euiHeaderHeight;`
`3`		`- border-bottom: none;`
`4`	`3`	`padding-left: $euiSizeS;`
`5`	`4`	`padding-right: $euiSizeS;`
`6`	`5`	`}`