(Trying to) Fix z-indexes with header and flyouts & adding more EuiHe…

…ader docs (#3655) * [EuiOverlayMask] Added `headerAdjacent` prop for altering z-index based on EuiHeader * [EuiFlyout] Adjusts mask for header and add `maskProps` - By default EuiFlyout’s mask will always display below the header, but this can be adjusted by with `maskProps` * Fix demo page setup script with folder location * [EuiCollapsibleNav] Applying `headerAdjacent="below”` to mask and adding `maskProps` to allow customization * [Docs] Fixing header examples (esp Alerts) * Tweak to Amsterdam EuiHeaderBreadcrumb sizing * Fix demo page setup script with folder location (pt 2) * [EuiBreadcrumbs] Fix for allowing `onClick` And font-weight fix for amsterdam header breadcrumbs * [SASS] Fix flyout vs collapsible nav clip-path * [EuiBreadcrumbs] Fix for allowing `onClick` (SNAPS) * [Docs] Elastic Header Pattern (as TSX) * Convert example to JS and optimize for codesandbox * [EuiBadge] Allow any valid chroma.js color string * [EuiHeaderLinks] Fix margins for any children * Cleanup * Update src-docs/src/views/header/header_example.js Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Update src-docs/src/views/overlay_mask/overlay_mask_example.js Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Change `headerAdjacent` to `headerZindexLocation` * cl * cl Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Jul 1, 2020 · c19ca9f · c19ca9f
1 parent 9f81f7f
commit c19ca9f
Show file tree

Hide file tree

Showing 35 changed files with 1,136 additions and 369 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,11 +5,19 @@
 - Updated props of `EuiCode` and `EuiCodeBlock` to reflect only functional props ([#3647](https://github.com/elastic/eui/pull/3647))
 - Updated `EuiResizableContainer` `onPanelWidthChange` callback method to include all panel widths ([#3630](https://github.com/elastic/eui/pull/3630))
 - Extended `Query` / `EuiSearchBar` to allow any character inside double-quoted phrases ([#3432](https://github.com/elastic/eui/pull/3432))
+- Added `headerZindexLocation` prop to `EuiOverlayMask` ([#3655](https://github.com/elastic/eui/pull/3655))
+- Added `maskProps` prop to `EuiFlyout` and `EuiCollapsibleNav` ([#3655](https://github.com/elastic/eui/pull/3655))
 
 **Bug fixes**
 
 - Fixed `EuiContextMenu` panel `onAnimationEnd` transition bug in Chrome ([#3656](https://github.com/elastic/eui/pull/3656))
 - Fixed `EuiSkipLink` interactive props and Safari click issue ([#3665](https://github.com/elastic/eui/pull/3665))
+- Fixed `z-index` issues with `EuiHeader`, `EuiFlyout`, and other portal content ([#3655](https://github.com/elastic/eui/pull/3655))
+- Fixed `color` prop error in `EuiBadge` to be more flexible with what format it accepts ([#3655](https://github.com/elastic/eui/pull/3655))
+
+**Theme: Amsterdam**
+
+- Fixed `EuiHeaderBreadcrumb` height, `onClick`, border-radius, and single item display ([#3655](https://github.com/elastic/eui/pull/3655))
 
 ## [`26.1.0`](https://github.com/elastic/eui/tree/v26.1.0)
 

diff --git a/generator-eui/documentation/index.js b/generator-eui/documentation/index.js
@@ -1,3 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 const chalk = require('chalk');
 const Generator = require('yeoman-generator');
 const utils = require('../utils');
@@ -12,24 +31,29 @@ module.exports = class extends Generator {
   }
 
   prompting() {
-    let prompts = [{
-      message: 'What\'s the name of the component you\'re documenting? Use snake_case, please.',
-      name: 'name',
-      type: 'input',
-      store: true,
-    }];
+    const prompts = [
+      {
+        message:
+          "What's the name of the component you're documenting? Use snake_case, please.",
+        name: 'name',
+        type: 'input',
+        store: true,
+      },
+    ];
 
     if (this.fileType === 'demo') {
       prompts.push({
-        message: `What's the name of the directory this demo should go in? (Within src-docs/src/views). Use snake_case, please.`,
+        message:
+          "What's the name of the directory this demo should go in? (Within src-docs/src/views). Use snake_case, please.",
         name: 'folderName',
         type: 'input',
         store: true,
         default: answers => answers.name,
       });
 
       prompts.push({
-        message: 'What would you like to name this demo? Use snake_case, please.',
+        message:
+          'What would you like to name this demo? Use snake_case, please.',
         name: 'demoName',
         type: 'input',
         store: true,
@@ -46,22 +70,24 @@ module.exports = class extends Generator {
 
     const writeDocumentationPage = () => {
       const componentExampleName = utils.makeComponentName(config.name, false);
-      const componentExamplePrefix = utils.lowerCaseFirstLetter(componentExampleName);
+      const componentExamplePrefix = utils.lowerCaseFirstLetter(
+        componentExampleName
+      );
       const componentName = utils.makeComponentName(config.name);
       const fileName = config.name;
 
       const path = DOCUMENTATION_PAGE_PATH;
 
-      const vars = config.documentationVars = {
+      const vars = (config.documentationVars = {
         componentExampleName,
         componentExamplePrefix,
         componentName,
         fileName,
-      };
+      });
 
-      const documentationPagePath
-        = config.documentationPagePath
-        = `${path}/${config.name}/${config.name}_example.js`;
+      const documentationPagePath = (config.documentationPagePath = `${path}/${
+        config.name
+      }/${config.name}_example.js`);
 
       this.fs.copyTpl(
         this.templatePath('documentation_page.js'),
@@ -72,21 +98,22 @@ module.exports = class extends Generator {
 
     const writeDocumentationPageDemo = (fileName, folderName) => {
       const componentExampleName = utils.makeComponentName(fileName, false);
-      const componentExamplePrefix = utils.lowerCaseFirstLetter(componentExampleName);
+      const componentExamplePrefix = utils.lowerCaseFirstLetter(
+        componentExampleName
+      );
       const componentName = utils.makeComponentName(config.name);
 
       const path = DOCUMENTATION_PAGE_PATH;
 
-      const vars = config.documentationVars = {
+      const vars = (config.documentationVars = {
         componentExampleName,
         componentExamplePrefix,
         componentName,
         fileName,
-      };
+        folderName,
+      });
 
-      const documentationPageDemoPath
-        = config.documentationPageDemoPath
-        = `${path}/${folderName}/${fileName}.tsx`;
+      const documentationPageDemoPath = (config.documentationPageDemoPath = `${path}/${folderName}/${fileName}.tsx`);
 
       this.fs.copyTpl(
         this.templatePath('documentation_page_demo.tsx'),
@@ -117,44 +144,55 @@ module.exports = class extends Generator {
 
       this.log(chalk.white('\n// Import demo into example.'));
       this.log(
-        `${chalk.magenta('import')} ${componentExampleName} from ${chalk.cyan(`'./${fileName}'`)};\n` +
-        `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw-loader!./${fileName}'`)});\n` +
-        `${chalk.magenta('const')} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});`
+        `${chalk.magenta('import')} ${componentExampleName} from ${chalk.cyan(
+          `'./${fileName}'`
+        )};\n` +
+          `${chalk.magenta(
+            'const'
+          )} ${componentExamplePrefix}Source = require(${chalk.cyan(
+            `'!!raw-loader!./${fileName}'`
+          )});\n` +
+          `${chalk.magenta(
+            'const'
+          )} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});`
       );
 
       this.log(chalk.white('\n// Render demo.'));
       this.log(
-        `<GuideSection\n` +
-        `  title="${componentExampleName}"\n` +
-        `  source={[{\n` +
-        `    type: GuideSectionTypes.JS,\n` +
-        `    code: ${componentExamplePrefix}Source,\n` +
-        `  }, {\n` +
-        `    type: GuideSectionTypes.HTML,\n` +
-        `    code: ${componentExamplePrefix}Html,\n` +
-        `  }]}\n` +
-        `  text={\n` +
-        `    <p>Description needed: how to use the ${componentExampleName} component.</p>\n` +
-        ` }\n` +
-        `  demo={\n` +
-        `    <${componentExampleName} />\n` +
-        ` }\n` +
-        `/>\n`
+        '<GuideSection\n' +
+          `  title="${componentExampleName}"\n` +
+          '  source={[{\n' +
+          '    type: GuideSectionTypes.JS,\n' +
+          `    code: ${componentExamplePrefix}Source,\n` +
+          '  }, {\n' +
+          '    type: GuideSectionTypes.HTML,\n' +
+          `    code: ${componentExamplePrefix}Html,\n` +
+          '  }]}\n' +
+          '  text={\n' +
+          `    <p>Description needed: how to use the ${componentExampleName} component.</p>\n` +
+          ' }\n' +
+          '  demo={\n' +
+          `    <${componentExampleName} />\n` +
+          ' }\n' +
+          '/>\n'
       );
     };
 
     const showImportRouteSnippet = (suffix, appendToRoute) => {
-      const {
-        componentExampleName,
-        fileName,
-      } = this.config.documentationVars;
+      const { componentExampleName, fileName } = this.config.documentationVars;
 
-      this.log(chalk.white('\n// Import example into routes.js and then add it to the "components" array.'));
+      this.log(
+        chalk.white(
+          '\n// Import example into routes.js and then add it to the "components" array.'
+        )
+      );
       this.log(
         `${chalk.magenta('import')} { ${componentExampleName}${suffix} }\n` +
-        `  ${chalk.magenta('from')} ${chalk.cyan(`'./views/${fileName}/${fileName}_${suffix.toLowerCase()}'`)};`
+          `  ${chalk.magenta('from')} ${chalk.cyan(
+            `'./views/${fileName}/${fileName}_${suffix.toLowerCase()}'`
+          )};`
       );
-    }
+    };
 
     this.log('------------------------------------------------');
     this.log(chalk.bold('Import snippets:'));
@@ -170,4 +208,4 @@ module.exports = class extends Generator {
     }
     this.log('------------------------------------------------');
   }
-}
+};
diff --git a/generator-eui/documentation/templates/documentation_page_demo.tsx b/generator-eui/documentation/templates/documentation_page_demo.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   <%= componentName %>,
-} from '../../../../src/components/<%= fileName %>';
+} from '../../../../src/components/<%= folderName %>';
 
 export default () => (
   <<%= componentName %>>

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -25,6 +25,12 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   .guideSideNav {
     top: $euiHeaderHeightCompensation * 2;
   }
+
+  .euiHeader:not(.euiHeader--fixed) {
+    // Force headers below the full screen.
+    // This shouldn't be necessary in consuming applications because headers should always be at the top of the page
+    z-index: 0;
+  }
 }
 
 .guidePage {

diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
@@ -1,31 +1,23 @@
-import React from 'react';
-import { GuideFullScreen } from '../../services/full_screen/full_screen';
+import React, { useState } from 'react';
 
 import {
-  EuiButton,
   EuiHeader,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderLogo,
   EuiHeaderLink,
   EuiHeaderLinks,
-  EuiIcon,
-  EuiPage,
-  EuiPageBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiPageContent,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiPageContentBody,
-  EuiTitle,
+  EuiSpacer,
+  EuiSwitch,
 } from '../../../../src/components';
 
 import HeaderUserMenu from './header_user_menu';
 import HeaderSpacesMenu from './header_spaces_menu';
 import HeaderUpdates from './header_updates';
 
 export default () => {
+  const [position, setPosition] = useState('static');
+
   const renderLogo = () => {
     return (
       <EuiHeaderLogo
@@ -37,64 +29,37 @@ export default () => {
   };
 
   return (
-    <GuideFullScreen>
-      {setIsFullScreen => (
-        <div className="guideFullScreenOverlay" style={{ zIndex: 9000 }}>
-          <EuiHeader>
-            <EuiHeaderSection grow={false}>
-              <EuiHeaderSectionItem border="right">
-                {renderLogo()}
-              </EuiHeaderSectionItem>
-              <EuiHeaderSectionItem border="right">
-                <HeaderSpacesMenu />
-              </EuiHeaderSectionItem>
-              <EuiHeaderLinks>
-                <EuiHeaderLink href="#">Home</EuiHeaderLink>
-              </EuiHeaderLinks>
-            </EuiHeaderSection>
-
-            <EuiHeaderSection side="right">
-              <EuiHeaderSectionItem>
-                <HeaderUpdates />
-              </EuiHeaderSectionItem>
-              <EuiHeaderSectionItem>
-                <HeaderUserMenu />
-              </EuiHeaderSectionItem>
-            </EuiHeaderSection>
-          </EuiHeader>
+    <>
+      <EuiSwitch
+        label={'Make header fixed position and put alerts in flyout'}
+        checked={position === 'fixed'}
+        onChange={e => setPosition(e.target.checked ? 'fixed' : 'static')}
+      />
+      <EuiSpacer />
+      <EuiHeader position={position}>
+        <EuiHeaderSection grow={false}>
+          <EuiHeaderSectionItem border="right">
+            {renderLogo()}
+          </EuiHeaderSectionItem>
+          <EuiHeaderSectionItem border="right">
+            <HeaderSpacesMenu />
+          </EuiHeaderSectionItem>
+          <EuiHeaderLinks>
+            <EuiHeaderLink href="#">Home</EuiHeaderLink>
+          </EuiHeaderLinks>
+        </EuiHeaderSection>
 
-          <EuiPage style={{ height: '100%' }}>
-            <EuiPageBody>
-              <EuiPageHeader>
-                <EuiPageHeaderSection>
-                  <EuiTitle size="m">
-                    <h2>Kibana news feed demo</h2>
-                  </EuiTitle>
-                </EuiPageHeaderSection>
-              </EuiPageHeader>
-              <EuiPageContent>
-                <EuiPageContentHeader>
-                  <EuiPageContentHeaderSection>
-                    <p>
-                      Click the <EuiIcon type="cheer" size="m" /> button to see
-                      ‘What’s new?’
-                    </p>
-                  </EuiPageContentHeaderSection>
-                </EuiPageContentHeader>
-                <EuiPageContentBody>
-                  <EuiButton
-                    fill
-                    onClick={() => setIsFullScreen(false)}
-                    iconType="exit"
-                    aria-label="Exit fullscreen demo">
-                    Exit fullscreen demo
-                  </EuiButton>
-                </EuiPageContentBody>
-              </EuiPageContent>
-            </EuiPageBody>
-          </EuiPage>
-        </div>
-      )}
-    </GuideFullScreen>
+        <EuiHeaderSection side="right">
+          <EuiHeaderSectionItem>
+            <HeaderUpdates
+              flyoutOrPopover={position === 'fixed' ? 'flyout' : 'popover'}
+            />
+          </EuiHeaderSectionItem>
+          <EuiHeaderSectionItem>
+            <HeaderUserMenu />
+          </EuiHeaderSectionItem>
+        </EuiHeaderSection>
+      </EuiHeader>
+    </>
   );
 };