[EuiHeader] Fix SASS globals & docs (#3592)

CHANGELOG.md

@@ -5,13 +5,15 @@
 - Changed `responsive` and `max` behavior of `EuiBreadcrumbs` to always display collapsed items in popover [#3578](https://github.com/elastic/eui/pull/3578))
 - Added `BREAKPOINTS` and `getBreakpoint` utilities [#3578](https://github.com/elastic/eui/pull/3578))
 - Added `'any'` option to the `step` prop of the `EuiFieldNumber` ([#3562](https://github.com/elastic/eui/pull/3562))
+- Moved all `EuiHeader` SASS variables to `global_styles` ([#3592](https://github.com/elastic/eui/pull/3592))
 
 **Bug fixes**
 
 - Added `display` prop to `EuiDataGridColumnSortingDraggable` to pass` displayAsText` prop correctly to the column sorting popover.([#3574](https://github.com/elastic/eui/pull/3574))
 - Fixed `EuiCodeBlockImpl` testenv mock pass-through of `data-test-subj` attribute ([#3560](https://github.com/elastic/eui/pull/3560))
 - Fixed DOM element creation issues in `EuiOverlayMask` by using lifecycle methods ([#3555](https://github.com/elastic/eui/pull/3555))
 - Fixed `EuiComboBox`'s options list `zIndex` positioning when nested in other `zIndex` contexts ([#3551](https://github.com/elastic/eui/pull/3551))
+- Fixed `euiHeaderAffordForFixed` mixin's use of header SASS variable ([#3592](https://github.com/elastic/eui/pull/3592))
 
 **Breaking changes**
 

src-docs/src/views/header/header_example.js

@@ -199,14 +199,14 @@ export const HeaderExample = {
             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>{' '}
+            <EuiCode language="scss">@include euiHeaderAffordForFixed;</EuiCode>{' '}
             anywhere in your SASS.
           </p>
         </>
       ),
       snippet: [
         '<EuiHeader position="fixed" />',
-        '@mixin euiHeaderAffordForFixed;',
+        '@include euiHeaderAffordForFixed;',
       ],
       demo: <HeaderPosition />,
     },
@@ -320,8 +320,8 @@ export const HeaderExample = {
         </p>
       ),
       snippet: [
-        `<EuiHeader theme="dark" />
-<EuiHeader />`,
+        `<EuiHeader theme="dark" position="fixed" />
+<EuiHeader position="fixed" />`,
         '@include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);',
       ],
       demo: <HeaderStacked />,

src/components/control_bar/_index.scss

@@ -1,4 +1,3 @@
-@import '../header/variables';
 @import '../nav_drawer/variables';
 @import 'variables';
 @import 'control_bar';

src/components/flyout/_mixins.scss

@@ -1,4 +1,3 @@
-@import '../header/variables';
 
 @mixin euiFlyout {
   border-left: $euiFlyoutBorder;

src/components/header/_index.scss

@@ -1,5 +1,4 @@
 // Components
-@import 'variables';
 @import 'mixins';
 
 @import 'header';

src/components/nav_drawer/_index.scss

@@ -1,4 +1,3 @@
-@import '../header/variables';
 @import 'variables';
 
 // Components

src/global_styling/mixins/_header.scss

@@ -1,3 +1,5 @@
+@import '../variables/header';
+
 @mixin euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {
   // The `&` allows for grouping inside another specific body class.
   // When not applied inside of another selector, it simply renders with the single class

src/components/header/_variables.scss → src/global_styling/variables/_header.scss

@@ -1,4 +1,3 @@
-// Note - these are also used by the EuiNavDrawer (/nav_drawer) component
 // Themable colors
 $euiHeaderBackgroundColor: $euiColorEmptyShade !default;
 $euiHeaderBorderColor: $euiBorderColor !default;

src/global_styling/variables/_index.scss

@@ -18,5 +18,6 @@
 
 @import 'buttons';
 @import 'form';
+@import 'header';
 @import 'panel';
 @import 'tool_tip';