From aa75d10c7d1f2bdfad2587d3c54adc1712c547f8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 18 Jun 2020 16:10:41 -0400 Subject: [PATCH 01/20] [EuiOverlayMask] Added `headerAdjacent` prop for altering z-index based on EuiHeader --- .../src/views/overlay_mask/overlay_mask.js | 88 +++++++------------ .../overlay_mask/overlay_mask_example.js | 57 ++++++++++-- .../views/overlay_mask/overlay_mask_header.js | 42 +++++++++ .../overlay_mask/_overlay_mask.scss | 10 ++- src/components/overlay_mask/overlay_mask.tsx | 16 +++- 5 files changed, 147 insertions(+), 66 deletions(-) create mode 100644 src-docs/src/views/overlay_mask/overlay_mask_header.js diff --git a/src-docs/src/views/overlay_mask/overlay_mask.js b/src-docs/src/views/overlay_mask/overlay_mask.js index b8794454e25..c318adb60b4 100644 --- a/src-docs/src/views/overlay_mask/overlay_mask.js +++ b/src-docs/src/views/overlay_mask/overlay_mask.js @@ -4,73 +4,51 @@ import { EuiOverlayMask, EuiButton, EuiSpacer, - EuiFlyout, EuiTitle, - EuiFlyoutHeader, } from '../../../../src/components'; export default () => { - const [modalOpen, changeModal] = useState(false); - const [selectedModal, selectModal] = useState(1); - const [flyOut, changeFlyOut] = useState(false); + const [maskOpen, changeMask] = useState(false); + const [maskWithClickOpen, changeMaskWithClick] = useState(false); - const openModal = modal => { - selectModal(modal); - changeModal(!modalOpen); - }; - - const closeModal = () => { - changeModal(!modalOpen); - }; - - const toggleFlyOut = () => { - changeFlyOut(!flyOut); - }; - - if (modalOpen) { - if (selectedModal === 1) { - return ( - - - -

Click anywhere to close overlay.

- - - - ); - } - - return ( - - Click this button to close + const modal = ( + + { + changeMask(false); + }}> + +

Click anywhere to close overlay.

+ - ); - } + + ); - if (flyOut) { - return ( - - - - - -

Click outside this flyout to close overlay.

- - - - - ); - } + const maskWithClick = ( + + { + changeMaskWithClick(false); + }}> + Click this button to close + + + ); return ( - openModal(1)}>Overlay with onClick - - openModal(2)}>Overlay with button + { + changeMask(true); + }}> + Overlay with onClick + - toggleFlyOut()}> - Overlay as a sibling of a flyout + changeMaskWithClick(true)}> + Overlay with button + {maskOpen ? modal : undefined} + {maskWithClickOpen ? maskWithClick : undefined} ); }; diff --git a/src-docs/src/views/overlay_mask/overlay_mask_example.js b/src-docs/src/views/overlay_mask/overlay_mask_example.js index 4df9912a382..71a90205861 100644 --- a/src-docs/src/views/overlay_mask/overlay_mask_example.js +++ b/src-docs/src/views/overlay_mask/overlay_mask_example.js @@ -11,9 +11,9 @@ import OverlayMask from './overlay_mask'; const overlayMaskSource = require('!!raw-loader!./overlay_mask'); const overlayMaskHtml = renderToHtml(OverlayMask); -const overlayMaskSnippet = ` - -`; +import OverlayMaskHeader from './overlay_mask_header'; +const overlayMaskHeaderSource = require('!!raw-loader!./overlay_mask_header'); +const overlayMaskHeaderHtml = renderToHtml(OverlayMaskHeader); export const OverlayMaskExample = { title: 'Overlay mask', @@ -46,16 +46,57 @@ export const OverlayMaskExample = { to make before choosing to use an overlay. At the very least, you must provide a visible button to close the overlay. You can also pass an onClick handler to handle closing the - overlay. However, be wary of using onClick and{' '} - children, as clicking the{' '} - children will also trigger the{' '} - onClick. + overlay.

), props: { EuiOverlayMask }, - snippet: overlayMaskSnippet, + snippet: ` {}}> + +`, demo: , }, + { + title: 'Masks with header', + source: [ + { + type: GuideSectionTypes.JS, + code: overlayMaskHeaderSource, + }, + { + type: GuideSectionTypes.HTML, + code: overlayMaskHeaderHtml, + }, + ], + text: ( +
+

+ Managing z-index levels of multiple portalled content and their + different contexts is complicated from within the library.{' '} + EuiOverlayMask gives you control over whether it + should appear below or above an{' '} + + EuiHeader + {' '} + by providing the headerAdjacent prop. By default + this is set to {'"above"'} for common cases like + with{' '} + + EuiModal + {' '} + where the header should be obscured. However, a component like{' '} + + EuiFlyout + {' '} + which utilizes the overlay mask but should keep the header visible + needs to change this prop to {'"below"'}. +

+
+ ), + props: { EuiOverlayMask }, + snippet: ` +`, + demo: , + }, ], }; diff --git a/src-docs/src/views/overlay_mask/overlay_mask_header.js b/src-docs/src/views/overlay_mask/overlay_mask_header.js new file mode 100644 index 00000000000..9c7818fed65 --- /dev/null +++ b/src-docs/src/views/overlay_mask/overlay_mask_header.js @@ -0,0 +1,42 @@ +import React, { useState } from 'react'; + +import { + EuiOverlayMask, + EuiButton, + EuiFlyout, + EuiTitle, + EuiFlyoutHeader, +} from '../../../../src/components'; + +export default () => { + const [flyOut, changeFlyOut] = useState(false); + + const toggleFlyOut = () => { + changeFlyOut(!flyOut); + }; + + let flyout; + if (flyOut) { + flyout = ( + + + + + +

Click outside this flyout to close overlay.

+ + + + + ); + } + + return ( + + toggleFlyOut()}> + Overlay as a sibling of a flyout + + {flyout} + + ); +}; diff --git a/src/components/overlay_mask/_overlay_mask.scss b/src/components/overlay_mask/_overlay_mask.scss index d17517fc44b..4f2fddc112e 100644 --- a/src/components/overlay_mask/_overlay_mask.scss +++ b/src/components/overlay_mask/_overlay_mask.scss @@ -1,6 +1,5 @@ .euiOverlayMask { position: fixed; - z-index: $euiZMask; top: 0; left: 0; right: 0; @@ -23,3 +22,12 @@ .euiBody-hasOverlayMask { overflow: hidden; } + +// Handling the z-index based on whether it should be displayed above or below the header +.euiOverlayMask--aboveHeader { + z-index: $euiZMask; +} + +.euiOverlayMask--belowHeader { + z-index: $euiZHeader - 1; +} diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx index 57efb9f8307..dafd9022080 100644 --- a/src/components/overlay_mask/overlay_mask.tsx +++ b/src/components/overlay_mask/overlay_mask.tsx @@ -35,8 +35,15 @@ import classNames from 'classnames'; import { CommonProps, keysOf } from '../common'; export interface EuiOverlayMaskInterface { + /** + * Function that applies to clicking the mask itself and not the children + */ onClick?: () => void; children?: ReactNode; + /** + * Should the mask visually sit above or below the EuiHeader (controlled by z-index) + */ + headerAdjacent?: 'above' | 'below'; } export type EuiOverlayMaskProps = CommonProps & @@ -50,6 +57,7 @@ export const EuiOverlayMask: FunctionComponent = ({ className, children, onClick, + headerAdjacent = 'above', ...rest }) => { const overlayMaskNode = useRef(document.createElement('div')); @@ -89,8 +97,12 @@ export const EuiOverlayMask: FunctionComponent = ({ useEffect(() => { if (!overlayMaskNode.current) return; - overlayMaskNode.current.className = classNames('euiOverlayMask', className); - }, [className]); + overlayMaskNode.current.className = classNames( + 'euiOverlayMask', + `euiOverlayMask--${headerAdjacent}Header`, + className + ); + }, [className, headerAdjacent]); useEffect(() => { if (!overlayMaskNode.current || !onClick) return; From 86b8440ff8a8ae26226321790f5dfbc15d340eb6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 18 Jun 2020 16:57:36 -0400 Subject: [PATCH 02/20] [EuiFlyout] Adjusts mask for header and add `maskProps` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - By default EuiFlyout’s mask will always display below the header, but this can be adjusted by with `maskProps` --- .../flyout/__snapshots__/flyout.test.tsx.snap | 146 ++++++++++++++---- src/components/flyout/_mixins.scss | 2 +- src/components/flyout/flyout.test.tsx | 74 ++++++--- src/components/flyout/flyout.tsx | 15 +- src/global_styling/variables/_z_index.scss | 1 + 5 files changed, 182 insertions(+), 56 deletions(-) diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap index 1744e4a6802..f19ba8d840b 100644 --- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap +++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap @@ -44,7 +44,7 @@ exports[`EuiFlyout is rendered 1`] = ` `; -exports[`EuiFlyout max width can be set to a custom number 1`] = ` +exports[`EuiFlyout props accepts div props 1`] = `
+ />
`; -exports[`EuiFlyout max width can be set to a default 1`] = ` +exports[`EuiFlyout props max width can be set to a custom number 1`] = `
`; -exports[`EuiFlyout size l is rendered 1`] = ` +exports[`EuiFlyout props ownFocus can alter mask props with maskProps without throwing error 1`] = ` +Array [ +
, +
+
+
+
+ +
+
+
, +] +`; + +exports[`EuiFlyout props ownFocus is rendered 1`] = ` +Array [ +
, +
+
+
+
+ +
+
+
, +] +`; + +exports[`EuiFlyout props size l is rendered 1`] = `
`; -exports[`EuiFlyout size m is rendered 1`] = ` +exports[`EuiFlyout props size m is rendered 1`] = `
`; -exports[`EuiFlyout size s is rendered 1`] = ` +exports[`EuiFlyout props size s is rendered 1`] = `
({ + EuiOverlayMask: ({ headerAdjacent, ...props }: any) =>
, +})); + const SIZES: EuiFlyoutSize[] = ['s', 'm', 'l']; describe('EuiFlyout', () => { @@ -71,41 +75,63 @@ describe('EuiFlyout', () => { expect(component).toMatchSnapshot(); }); - }); - describe('size', () => { - SIZES.forEach(size => { - it(`${size} is rendered`, () => { - const component = render( {}} size={size} />); + describe('size', () => { + SIZES.forEach(size => { + it(`${size} is rendered`, () => { + const component = render( + {}} size={size} /> + ); - expect(component).toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); }); }); - }); - describe('max width', () => { - test('can be set to a default', () => { - const component = render( - {}} maxWidth={true} /> - ); + describe('max width', () => { + test('can be set to a default', () => { + const component = render( + {}} maxWidth={true} /> + ); - expect(component).toMatchSnapshot(); - }); + expect(component).toMatchSnapshot(); + }); - test('can be set to a custom number', () => { - const component = render( - {}} maxWidth={1024} /> - ); + test('can be set to a custom number', () => { + const component = render( + {}} maxWidth={1024} /> + ); - expect(component).toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); + + test('can be set to a custom value and measurement', () => { + const component = render( + {}} maxWidth="24rem" /> + ); + + expect(component).toMatchSnapshot(); + }); }); - test('can be set to a custom value and measurement', () => { - const component = render( - {}} maxWidth="24rem" /> - ); + describe('ownFocus', () => { + test('is rendered', () => { + const component = render( {}} ownFocus />); - expect(component).toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); + + test('can alter mask props with maskProps without throwing error', () => { + const component = render( + {}} + ownFocus + maskProps={{ headerAdjacent: 'above' }} + /> + ); + + expect(component).toMatchSnapshot(); + }); }); }); }); diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index 88918718b8d..a0eaf829d3d 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -30,7 +30,7 @@ import { keys, EuiWindowEvent } from '../../services'; import { CommonProps } from '../common'; import { EuiFocusTrap } from '../focus_trap'; -import { EuiOverlayMask } from '../overlay_mask'; +import { EuiOverlayMask, EuiOverlayMaskProps } from '../overlay_mask'; import { EuiButtonIcon } from '../button'; import { EuiI18n } from '../i18n'; @@ -55,7 +55,8 @@ export interface EuiFlyoutProps */ hideCloseButton?: boolean; /** - * Locks the mouse / keyboard focus to within the flyout + * Locks the mouse / keyboard focus to within the flyout, + * and shows an EuiOverlayMask */ ownFocus?: boolean; /** @@ -73,6 +74,11 @@ export interface EuiFlyoutProps maxWidth?: boolean | number | string; style?: CSSProperties; + + /** + * Adjustments to the EuiOverlayMask that is added when `ownFocus = true` + */ + maskProps?: EuiOverlayMaskProps; } export const EuiFlyout: FunctionComponent = ({ @@ -85,6 +91,7 @@ export const EuiFlyout: FunctionComponent = ({ closeButtonAriaLabel, maxWidth = false, style, + maskProps, ...rest }) => { const onKeyDown = (event: KeyboardEvent) => { @@ -152,7 +159,9 @@ export const EuiFlyout: FunctionComponent = ({ // to click it to close it. let optionalOverlay; if (ownFocus) { - optionalOverlay = ; + optionalOverlay = ( + + ); } return ( diff --git a/src/global_styling/variables/_z_index.scss b/src/global_styling/variables/_z_index.scss index a092f5bc1f0..2cf4bc9e27c 100644 --- a/src/global_styling/variables/_z_index.scss +++ b/src/global_styling/variables/_z_index.scss @@ -27,6 +27,7 @@ $euiZLevel9: 9000; $euiZContent: $euiZLevel0; $euiZHeader: $euiZLevel1; $euiZContentMenu: $euiZLevel2; +$euiZFlyout: $euiZLevel3; $euiZNavigation: $euiZLevel4; $euiZMask: $euiZLevel6; $euiZModal: $euiZLevel8; From 594fc7445bd459317f8c9d2f91f7d05a4909713f Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 18 Jun 2020 16:58:43 -0400 Subject: [PATCH 03/20] Fix demo page setup script with folder location --- .../documentation/templates/documentation_page_demo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/generator-eui/documentation/templates/documentation_page_demo.tsx b/generator-eui/documentation/templates/documentation_page_demo.tsx index 47f4baedc9d..0d28a268e73 100644 --- 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 %>> From 0cdbe16f8e48d76134b70d0d8acd675f913c5abe Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 18 Jun 2020 17:25:14 -0400 Subject: [PATCH 04/20] =?UTF-8?q?[EuiCollapsibleNav]=20Applying=20`headerA?= =?UTF-8?q?djacent=3D"below=E2=80=9D`=20to=20mask=20and=20adding=20`maskPr?= =?UTF-8?q?ops`=20to=20allow=20customization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collapsible_nav.test.tsx.snap | 51 +++++++++++++++++++ .../collapsible_nav/collapsible_nav.test.tsx | 13 ++++- .../collapsible_nav/collapsible_nav.tsx | 15 +++++- 3 files changed, 76 insertions(+), 3 deletions(-) diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap index db665c0f2d4..43fabc7dfea 100644 --- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap +++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap @@ -195,6 +195,57 @@ Array [ ] `; +exports[`EuiCollapsibleNav props can alter mask props with maskProps without throwing error 1`] = ` +Array [ +
, +
+
+
+
+ +
+
+
, +] +`; + exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = ` Array [
, diff --git a/src/components/collapsible_nav/collapsible_nav.test.tsx b/src/components/collapsible_nav/collapsible_nav.test.tsx index 92f7a8564e7..b4443455098 100644 --- a/src/components/collapsible_nav/collapsible_nav.test.tsx +++ b/src/components/collapsible_nav/collapsible_nav.test.tsx @@ -24,7 +24,7 @@ import { requiredProps } from '../../test/required_props'; import { EuiCollapsibleNav } from './collapsible_nav'; jest.mock('../overlay_mask', () => ({ - EuiOverlayMask: (props: any) =>
, + EuiOverlayMask: ({ headerAdjacent, ...props }: any) =>
, })); const propsNeededToRender = { id: 'id', isOpen: true }; @@ -83,6 +83,17 @@ describe('EuiCollapsibleNav', () => { expect(component).toMatchSnapshot(); }); + + test('can alter mask props with maskProps without throwing error', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); }); describe('close button', () => { diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx index 7b699db1cbf..4224a9702c3 100644 --- a/src/components/collapsible_nav/collapsible_nav.tsx +++ b/src/components/collapsible_nav/collapsible_nav.tsx @@ -30,7 +30,7 @@ import classNames from 'classnames'; import { throttle } from '../color_picker/utils'; import { EuiWindowEvent, keys, htmlIdGenerator } from '../../services'; import { EuiFocusTrap } from '../focus_trap'; -import { EuiOverlayMask } from '../overlay_mask'; +import { EuiOverlayMask, EuiOverlayMaskProps } from '../overlay_mask'; import { CommonProps } from '../common'; import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button'; import { EuiI18n } from '../i18n'; @@ -69,6 +69,10 @@ export type EuiCollapsibleNavProps = CommonProps & */ closeButtonProps?: EuiButtonEmptyProps; onClose?: () => void; + /** + * Adjustments to the EuiOverlayMask + */ + maskProps?: EuiOverlayMaskProps; }; export const EuiCollapsibleNav: FunctionComponent = ({ @@ -83,6 +87,7 @@ export const EuiCollapsibleNav: FunctionComponent = ({ closeButtonProps, onClose, id, + maskProps, ...rest }) => { const [flyoutID] = useState(id || htmlIdGenerator()('euiCollapsibleNav')); @@ -141,7 +146,13 @@ export const EuiCollapsibleNav: FunctionComponent = ({ let optionalOverlay; if (!navIsDocked) { - optionalOverlay = ; + optionalOverlay = ( + + ); } // Show a trigger button if one was passed but From bf49a59005742ed431e1cb6d5c90369e48662c9e Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 18 Jun 2020 18:11:12 -0400 Subject: [PATCH 05/20] [Docs] Fixing header examples (esp Alerts) --- src-docs/src/views/header/header_alert.js | 107 ++++++----------- src-docs/src/views/header/header_example.js | 45 ++++--- src-docs/src/views/header/header_stacked.tsx | 9 +- src-docs/src/views/header/header_updates.js | 119 ++++++++++++------- src/components/header/_header.scss | 7 -- 5 files changed, 148 insertions(+), 139 deletions(-) diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js index 3beaac75e6d..8a8473d4dfe 100644 --- a/src-docs/src/views/header/header_alert.js +++ b/src-docs/src/views/header/header_alert.js @@ -1,24 +1,14 @@ -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'; @@ -26,6 +16,8 @@ import HeaderSpacesMenu from './header_spaces_menu'; import HeaderUpdates from './header_updates'; export default () => { + const [position, setPosition] = useState('static'); + const renderLogo = () => { return ( { }; return ( - - {setIsFullScreen => ( -
- - - - {renderLogo()} - - - - - - Home - - - - - - - - - - - - + <> + setPosition(e.target.checked ? 'fixed' : 'static')} + /> + + + + + {renderLogo()} + + + + + + Home + + - - - - - -

Kibana news feed demo

- - - - - - -

- Click the button to see - ‘What’s new?’ -

- - - - setIsFullScreen(false)} - iconType="exit" - aria-label="Exit fullscreen demo"> - Exit fullscreen demo - - - - - -
- )} - + + + + + + + + + + ); }; diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js index fb97e465e4b..60df049514e 100644 --- a/src-docs/src/views/header/header_example.js +++ b/src-docs/src/views/header/header_example.js @@ -264,7 +264,7 @@ export const HeaderExample = { demo: , }, { - title: 'Alerts in the header', + title: 'Portal content in the header', source: [ { type: GuideSectionTypes.JS, @@ -276,20 +276,27 @@ export const HeaderExample = { }, ], text: ( -

- Use an EuiHeaderSectionItemButton to display - additional information in an{' '} - - EuiPopover - {' '} - or{' '} - - EuiFlyout - - , such as a user profile or news feed. In the latter example, this - additional content can be presented in a list style format using{' '} - EuiHeaderAlert components, as shown below. -

+ <> +

+ Use an EuiHeaderSectionItemButton to display + additional information in popovers{' '} + or flyouts, such as a user profile + or news feed. When using{' '} + + EuiFlyout + + , be sure to wrap it in a{' '} + + EuiPortal + + . +

+

+ The example below shows how to incorprate{' '} + EuiHeaderAlert components to show a list of + updates. +

+ ), props: { EuiHeaderAlert, @@ -311,12 +318,12 @@ export const HeaderExample = { ], text: (

- Stacking multiple headers provide a great way to separate global + Stacking multiple headers provides a great way to separate global navigation concerns. However, the{' '} {'position="fixed"'} 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. + be aware of the number of headers. If you do need fixed{' '} + and stacked headers, you will need to apply the SASS + helper mixin and pass in the correct height to afford for.

), snippet: [ diff --git a/src-docs/src/views/header/header_stacked.tsx b/src-docs/src/views/header/header_stacked.tsx index 6b5a5b96ff3..b79be7c93a3 100644 --- a/src-docs/src/views/header/header_stacked.tsx +++ b/src-docs/src/views/header/header_stacked.tsx @@ -49,6 +49,9 @@ export default () => { }, { items: [ + , , @@ -70,7 +73,11 @@ export default () => { borders: 'right', }, { - items: isFixed ? [] : undefined, + items: [ + , + ], borders: 'none', }, ]} diff --git a/src-docs/src/views/header/header_updates.js b/src-docs/src/views/header/header_updates.js index 474a1efa69d..fdc60f2ad6c 100644 --- a/src-docs/src/views/header/header_updates.js +++ b/src-docs/src/views/header/header_updates.js @@ -1,4 +1,4 @@ -import React, { useState, Fragment } from 'react'; +import React, { useState } from 'react'; import { EuiIcon, @@ -15,9 +15,14 @@ import { EuiButtonEmpty, EuiText, EuiBadge, + EuiPopover, + EuiPopoverTitle, + EuiPopoverFooter, + EuiSpacer, } from '../../../../src/components'; +import { EuiPortal } from '../../../../src/components/portal'; -export default () => { +export default ({ flyoutOrPopover = 'flyout' }) => { const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); const [showBadge, setShowBadge] = useState(true); @@ -120,20 +125,69 @@ export default () => { ); - let flyout; - if (isFlyoutVisible) { - flyout = ( - closeFlyout()} - size="s" - id="headerNewsFeed" - aria-labelledby="flyoutSmallTitle"> - - -

What's new

- - - + let content; + if (flyoutOrPopover === 'flyout') { + content = ( + <> + {button} + {isFlyoutVisible && ( + + closeFlyout()} + size="s" + id="headerNewsFeed" + aria-labelledby="flyoutSmallTitle"> + + +

What's new

+ + + + {alerts.map((alert, i) => ( + + ))} + + + + + closeFlyout()} + flush="left"> + Close + + + + +

Version 7.0

+ + + + + + + )} + + ); + } + + if (flyoutOrPopover === 'popover') { + content = ( + closeFlyout()} + panelPaddingSize="none"> + What's new +
+ {alerts.map((alert, i) => ( { badge={alert.badge} /> ))} - - - - - closeFlyout()} - flush="left"> - Close - - - - -

Version 7.0

- - - - - +
+ + +

Version 7.0

+ + + ); } - return ( - - {button} - {flyout} - - ); + return content; }; diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 948e76fe187..328d51f40c6 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -19,13 +19,6 @@ } } -.euiBody--collapsibleNavIsOpen, -.euiBody--hasFlyout { - .euiHeader--fixed { - z-index: $euiZModal + 1; - } -} - .euiHeader--fixed + .euiHeader--fixed { top: $euiHeaderHeightCompensation; } From 0e77bd91466d65cb6eee2a615ec62520e9010444 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 18 Jun 2020 18:27:29 -0400 Subject: [PATCH 06/20] Tweak to Amsterdam EuiHeaderBreadcrumb sizing --- src/themes/eui-amsterdam/overrides/_header.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss index f32c374f462..ff2eba6ac57 100644 --- a/src/themes/eui-amsterdam/overrides/_header.scss +++ b/src/themes/eui-amsterdam/overrides/_header.scss @@ -32,7 +32,8 @@ // Breadcrumbs .euiHeaderBreadcrumbs { - @include euiFontSizeXS; + font-size: $euiFontSizeXS; + line-height: $euiSize; font-weight: $euiFontWeightMedium; margin-left: $euiSizeS; margin-right: $euiSizeS; @@ -46,7 +47,7 @@ // still be default text only breadcrumbs for places like EuiControlBar .euiBreadcrumb { @include euiButtonDefaultStyle($euiTextColor); - padding: $euiSizeXS $euiSizeM $euiSizeXS $euiSize; + padding: $euiSizeXS $euiSize; clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%); // If it's a link the easiest way to detect is via our .euiLink class since it can accept either href or onClick @@ -75,13 +76,13 @@ &:first-child { padding-left: $euiSizeM; - border-radius: $euiSizeS 0 0 $euiSizeS; + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%); } } .euiBreadcrumb--last { - border-radius: 0 #{$euiSizeS} #{$euiSizeS} 0; + border-radius: 0 $euiBorderRadius $euiBorderRadius 0; padding-right: $euiSizeM; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%); } From 3eb4793d2da6af993bedcd8999acbcd3a97cb0dc Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 10:42:14 -0400 Subject: [PATCH 07/20] Fix demo page setup script with folder location (pt 2) --- generator-eui/documentation/index.js | 132 +++++++++++++++++---------- 1 file changed, 85 insertions(+), 47 deletions(-) diff --git a/generator-eui/documentation/index.js b/generator-eui/documentation/index.js index e812de48857..4d3046a23af 100644 --- 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,16 +31,20 @@ 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, @@ -29,7 +52,8 @@ module.exports = class extends Generator { }); 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( - `Description needed: how to use the ${componentExampleName} component.

\n` + - ` }\n` + - ` demo={\n` + - ` <${componentExampleName} />\n` + - ` }\n` + - `/>\n` + 'Description needed: how to use the ${componentExampleName} component.

\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('------------------------------------------------'); } -} +}; From 846a99b94f3418c0548e15523daf0f7daa77162a Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 12:26:27 -0400 Subject: [PATCH 08/20] [EuiBreadcrumbs] Fix for allowing `onClick` And font-weight fix for amsterdam header breadcrumbs --- src/components/breadcrumbs/breadcrumbs.tsx | 2 +- src/themes/eui-amsterdam/overrides/_header.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index dd22061a686..6da5869109c 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -223,7 +223,7 @@ export const EuiBreadcrumbs: FunctionComponent = ({ let link; - if (!href) { + if (!href && !onClick) { link = ( {(ref, innerText) => ( diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss index ff2eba6ac57..a7e4cb9b8fa 100644 --- a/src/themes/eui-amsterdam/overrides/_header.scss +++ b/src/themes/eui-amsterdam/overrides/_header.scss @@ -34,7 +34,6 @@ .euiHeaderBreadcrumbs { font-size: $euiFontSizeXS; line-height: $euiSize; - font-weight: $euiFontWeightMedium; margin-left: $euiSizeS; margin-right: $euiSizeS; @@ -47,6 +46,7 @@ // still be default text only breadcrumbs for places like EuiControlBar .euiBreadcrumb { @include euiButtonDefaultStyle($euiTextColor); + font-weight: $euiFontWeightMedium; padding: $euiSizeXS $euiSize; clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%); From 9371948be63182c7d0ba196e9046b00b2872f4c0 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 12:27:45 -0400 Subject: [PATCH 09/20] [SASS] Fix flyout vs collapsible nav clip-path --- src/components/collapsible_nav/_collapsible_nav.scss | 1 + src/components/flyout/_mixins.scss | 1 + src/themes/eui-amsterdam/overrides/_flyout.scss | 5 ----- src/themes/eui-amsterdam/overrides/_index.scss | 1 - 4 files changed, 2 insertions(+), 6 deletions(-) delete mode 100644 src/themes/eui-amsterdam/overrides/_flyout.scss diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss index 6ac09a8de6e..7d9f83798bc 100644 --- a/src/components/collapsible_nav/_collapsible_nav.scss +++ b/src/components/collapsible_nav/_collapsible_nav.scss @@ -10,6 +10,7 @@ width: $euiCollapsibleNavWidth; max-width: 80vw; animation: euiCollapsibleNavIn $euiAnimSpeedNormal $euiAnimSlightResistance; + clip-path: polygon(0 0, 110% 0, 110% 100%, 0 100%); } .euiCollapsibleNav__closeButton { diff --git a/src/components/flyout/_mixins.scss b/src/components/flyout/_mixins.scss index 2a3606ecdd4..6a6ea04d26d 100644 --- a/src/components/flyout/_mixins.scss +++ b/src/components/flyout/_mixins.scss @@ -14,4 +14,5 @@ display: flex; flex-direction: column; align-items: stretch; + clip-path: polygon(-10% 0, 100% 0, 100% 100%, -10% 100%); } diff --git a/src/themes/eui-amsterdam/overrides/_flyout.scss b/src/themes/eui-amsterdam/overrides/_flyout.scss deleted file mode 100644 index 6e78d2fe0ce..00000000000 --- a/src/themes/eui-amsterdam/overrides/_flyout.scss +++ /dev/null @@ -1,5 +0,0 @@ -// 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% 0, 100% 0, 100% 100%, -10% 100%); -} diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index a8fcf7a02d1..d02573172ba 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -4,7 +4,6 @@ @import 'call_out'; @import 'code'; @import 'filter_group'; -@import 'flyout'; @import 'header'; @import 'image'; @import 'modal'; From 3ac309c32e090d61294a911a89550f8bf3056286 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 12:29:16 -0400 Subject: [PATCH 10/20] [EuiBreadcrumbs] Fix for allowing `onClick` (SNAPS) --- .../__snapshots__/breadcrumbs.test.tsx.snap | 48 +++++++++---------- .../header_breadcrumbs.test.tsx.snap | 8 ++-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index 358d9be5b22..d4fa97dc334 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -48,12 +48,12 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
- Reptiles - +
@@ -128,12 +128,12 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b
- Reptiles - +
@@ -244,12 +244,12 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = `
- Reptiles - +
@@ -319,12 +319,12 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
- Reptiles - +
@@ -394,12 +394,12 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
- Reptiles - +
@@ -505,12 +505,12 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
- Reptiles - +
diff --git a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap index 80a9ffae819..e94cccfdafc 100644 --- a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap +++ b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.tsx.snap @@ -17,12 +17,12 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
- Reptiles - +
From bd9b1a3ef4a806c89b4842741f0cb3abeabebffb Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 13:47:31 -0400 Subject: [PATCH 11/20] [Docs] Elastic Header Pattern (as TSX) --- src-docs/src/components/guide_components.scss | 6 + .../views/header/header_elastic_pattern.tsx | 309 ++++++++++++++++++ src-docs/src/views/header/header_example.js | 39 +++ src-docs/src/views/header/header_stacked.tsx | 3 - 4 files changed, 354 insertions(+), 3 deletions(-) create mode 100644 src-docs/src/views/header/header_elastic_pattern.tsx diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index ddcd3add658..661a486db67 100644 --- 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_elastic_pattern.tsx b/src-docs/src/views/header/header_elastic_pattern.tsx new file mode 100644 index 00000000000..fa2dbf15ab7 --- /dev/null +++ b/src-docs/src/views/header/header_elastic_pattern.tsx @@ -0,0 +1,309 @@ +import React, { useState } from 'react'; +// @ts-ignore "TEMP" +import { Link } from 'react-router-dom'; + +import { + EuiCollapsibleNav, + EuiCollapsibleNavGroup, +} from '../../../../src/components/collapsible_nav'; +import { + EuiHeaderSectionItemButton, + EuiHeaderLogo, + EuiHeader, + EuiHeaderLinks, + EuiHeaderLink, +} from '../../../../src/components/header'; +import { EuiIcon } from '../../../../src/components/icon'; +import { EuiButton } from '../../../../src/components/button'; +import { EuiPage } from '../../../../src/components/page'; +import { EuiListGroupItem } from '../../../../src/components/list_group'; +import { EuiFlexItem } from '../../../../src/components/flex'; +import { GuideFullScreen } from '../../services/full_screen/full_screen'; + +import { EuiShowFor } from '../../../../src/components/responsive'; +import { EuiText } from '../../../../src/components/text'; +import { EuiAvatar } from '../../../../src/components/avatar'; +import { EuiBadge } from '../../../../src/components/badge'; +import { EuiPortal } from '../../../../src/components/portal'; +import { + EuiFlyout, + EuiFlyoutHeader, + EuiFlyoutBody, +} from '../../../../src/components/flyout'; +import { EuiTitle } from '../../../../src/components/title'; +import { EuiPopover } from '../../../../src/components/popover'; + +export default ({ theme }: { theme: any }) => { + /** Collapsible Nav */ + const [navIsOpen, setNavIsOpen] = useState( + JSON.parse(String(localStorage.getItem('navIsDocked'))) || false + ); + const [navIsDocked, setNavIsDocked] = useState( + JSON.parse(String(localStorage.getItem('navIsDocked'))) || false + ); + const collapsibleNav = ( + setNavIsOpen(!navIsOpen)}> + + ); + + /** + * Header Alerts + */ + const [isAlertFlyoutVisible, setIsAlertFlyoutVisible] = useState(false); + const headerAlerts = ( + + setIsAlertFlyoutVisible(false)} + size="s" + id="guideHeaderAlertExample" + aria-labelledby="guideHeaderAlertExampleTitle"> + + +

EuiHeaderAlert

+ + + + +

+ Please see the component page for{' '} + + EuiHeaderAlert + {' '} + on how to configure your alerts. +

+ + + + + ); + + /** + * User Menu + */ + const [isUserMenuVisible, setIsUserMenuVisible] = useState(false); + const userMenu = ( + setIsUserMenuVisible(!isUserMenuVisible)}> + + + } + isOpen={isUserMenuVisible} + anchorPosition="downRight" + closePopover={() => setIsUserMenuVisible(false)}> +
+ +

+ Please see the component page for{' '} + + EuiHeader + {' '} + on how to configure your user menu. +

+ +
+ + ); + + /** + * Spaces Menu + */ + const [isSpacesMenuVisible, setIsSpacesMenuVisible] = useState(false); + const spacesMenu = ( + setIsSpacesMenuVisible(!isSpacesMenuVisible)}> + + + } + isOpen={isSpacesMenuVisible} + anchorPosition="downRight" + closePopover={() => setIsSpacesMenuVisible(false)}> +
+ +

+ Please see the component page for{' '} + + EuiHeader + {' '} + on how to configure your spaces menu. +

+ +
+ + ); + + /** + * Deployment Menu + */ + const [isDeploymentMenuVisible, setIsDeploymentMenuVisible] = useState(false); + const deploymentMenu = ( + setIsDeploymentMenuVisible(!isDeploymentMenuVisible)}> + Production logs + + } + isOpen={isDeploymentMenuVisible} + anchorPosition="downRight" + closePopover={() => setIsDeploymentMenuVisible(false)}> + +

Deployment menu pattern TBD

+ + + ); + + return ( + { + document.body.classList.add('euiBody--headerIsFixed--double'); + }}> + {setIsFullScreen => ( + + + Elastic + , + ], + borders: 'none', + }, + { + items: [ + deploymentMenu, + + setIsAlertFlyoutVisible(!isAlertFlyoutVisible) + }> + + , + userMenu, + ], + borders: 'none', + }, + ]} + /> + {}, + }, + { + text: 'Users', + }, + ], + borders: 'right', + }, + { + items: [ + + Share + Clone + { + setIsFullScreen(false); + document.body.classList.remove( + 'euiBody--headerIsFixed--double' + ); + }}> + Exit full screen + + , + ], + }, + ]} + /> + + {isAlertFlyoutVisible ? headerAlerts : null} + + + + )} + + ); +}; diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js index 60df049514e..c5a22567ef0 100644 --- a/src-docs/src/views/header/header_example.js +++ b/src-docs/src/views/header/header_example.js @@ -49,6 +49,10 @@ import HeaderStacked from './header_stacked'; const headerStackedSource = require('!!raw-loader!./header_stacked'); const headerStackedHtml = renderToHtml(HeaderStacked); +import HeaderElasticPattern from './header_elastic_pattern'; +const headerElasticPatternSource = require('!!raw-loader!./header_elastic_pattern'); +const headerElasticPatternHtml = renderToHtml(HeaderElasticPattern); + const headerSnippet = ` @@ -333,5 +337,40 @@ export const HeaderExample = { ], demo: , }, + { + title: 'The Elastic navigation pattern', + source: [ + { + type: GuideSectionTypes.JS, + code: headerElasticPatternSource, + }, + { + type: GuideSectionTypes.HTML, + code: headerElasticPatternHtml, + }, + ], + text: ( + <> +

Putting it all together

+

+ The button below will launch a full screen example that includes two{' '} + EuiHeaders with all the appropriate navigation + pieces including{' '} + + EuiCollapsibleNav, + {' '} + EuiHeaderAlerts, user menu, deployment switcher, + space selector, EuiHeaderBreadcrumbs and{' '} + EuiHeaderLinks for app menu items. +

+

+ This is just a pattern and should be treated as such. Consuming + applications will need to recreate the pattern according to their + context and save the states as is appropriate to their data store. +

+ + ), + demo: , + }, ], }; diff --git a/src-docs/src/views/header/header_stacked.tsx b/src-docs/src/views/header/header_stacked.tsx index b79be7c93a3..996701b9c2b 100644 --- a/src-docs/src/views/header/header_stacked.tsx +++ b/src-docs/src/views/header/header_stacked.tsx @@ -49,9 +49,6 @@ export default () => { }, { items: [ - , , From 199a701dac60492caef9948139f94ecb98f7729c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 14:41:23 -0400 Subject: [PATCH 12/20] Convert example to JS and optimize for codesandbox --- ..._pattern.tsx => header_elastic_pattern.js} | 88 +++++++++++-------- 1 file changed, 51 insertions(+), 37 deletions(-) rename src-docs/src/views/header/{header_elastic_pattern.tsx => header_elastic_pattern.js} (86%) diff --git a/src-docs/src/views/header/header_elastic_pattern.tsx b/src-docs/src/views/header/header_elastic_pattern.js similarity index 86% rename from src-docs/src/views/header/header_elastic_pattern.tsx rename to src-docs/src/views/header/header_elastic_pattern.js index fa2dbf15ab7..4a0cd2831fa 100644 --- a/src-docs/src/views/header/header_elastic_pattern.tsx +++ b/src-docs/src/views/header/header_elastic_pattern.js @@ -1,40 +1,53 @@ -import React, { useState } from 'react'; -// @ts-ignore "TEMP" +import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; +// Uncomment to use in consuming apps or CodeSandbox +// import theme from '@elastic/eui/dist/eui_theme_light.json'; import { + EuiAvatar, + EuiBadge, + EuiButton, EuiCollapsibleNav, EuiCollapsibleNavGroup, -} from '../../../../src/components/collapsible_nav'; -import { - EuiHeaderSectionItemButton, - EuiHeaderLogo, + EuiFlexItem, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiFocusTrap, EuiHeader, - EuiHeaderLinks, EuiHeaderLink, -} from '../../../../src/components/header'; -import { EuiIcon } from '../../../../src/components/icon'; -import { EuiButton } from '../../../../src/components/button'; -import { EuiPage } from '../../../../src/components/page'; -import { EuiListGroupItem } from '../../../../src/components/list_group'; -import { EuiFlexItem } from '../../../../src/components/flex'; -import { GuideFullScreen } from '../../services/full_screen/full_screen'; + EuiHeaderLinks, + EuiHeaderLogo, + EuiHeaderSectionItemButton, + EuiIcon, + EuiListGroupItem, + EuiPage, + EuiPopover, + EuiPortal, + EuiShowFor, + EuiText, + EuiTitle, +} from '../../../../src/components'; -import { EuiShowFor } from '../../../../src/components/responsive'; -import { EuiText } from '../../../../src/components/text'; -import { EuiAvatar } from '../../../../src/components/avatar'; -import { EuiBadge } from '../../../../src/components/badge'; -import { EuiPortal } from '../../../../src/components/portal'; -import { - EuiFlyout, - EuiFlyoutHeader, - EuiFlyoutBody, -} from '../../../../src/components/flyout'; -import { EuiTitle } from '../../../../src/components/title'; -import { EuiPopover } from '../../../../src/components/popover'; +export default ({ theme }) => { + /** + * FullScreen for docs only + */ + const [fullScreen, setFullScreen] = useState(false); + useEffect(() => { + if (fullScreen) { + document.body.classList.add('guideBody--overflowHidden'); + document.body.classList.add('euiBody--headerIsFixed--double'); + } + return () => { + document.body.classList.remove('guideBody--overflowHidden'); + document.body.classList.remove('euiBody--headerIsFixed--double'); + }; + }, [fullScreen]); -export default ({ theme }: { theme: any }) => { - /** Collapsible Nav */ + /** + * Collapsible Nav + */ const [navIsOpen, setNavIsOpen] = useState( JSON.parse(String(localStorage.getItem('navIsDocked'))) || false ); @@ -224,12 +237,13 @@ export default ({ theme }: { theme: any }) => { ); return ( - { - document.body.classList.add('euiBody--headerIsFixed--double'); - }}> - {setIsFullScreen => ( - + <> + setFullScreen(true)} iconType="fullScreen"> + Show fullscreen demo + + {/* FocusTrap for Docs only */} + {fullScreen && ( + { size="s" color="secondary" onClick={() => { - setIsFullScreen(false); + setFullScreen(false); document.body.classList.remove( 'euiBody--headerIsFixed--double' ); @@ -302,8 +316,8 @@ export default ({ theme }: { theme: any }) => { {isAlertFlyoutVisible ? headerAlerts : null} - + )} - + ); }; From 9baca91ba2d7c23ceed7d4018c05613bc3201590 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 14:42:26 -0400 Subject: [PATCH 13/20] [EuiBadge] Allow any valid chroma.js color string --- .../badge/__snapshots__/badge.test.tsx.snap | 34 +++++++++++++++++++ src/components/badge/badge.test.tsx | 14 ++++++++ src/components/badge/badge.tsx | 26 +++++++------- 3 files changed, 61 insertions(+), 13 deletions(-) diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap index 3bf52801022..4c326db3643 100644 --- a/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -175,6 +175,40 @@ exports[`EuiBadge props color accent is rendered 1`] = ` `; +exports[`EuiBadge props color accepts hex 1`] = ` + + + + Content + + + +`; + +exports[`EuiBadge props color accepts rgba 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props color danger is rendered 1`] = ` { expect(component).toMatchSnapshot(); }); }); + + it('accepts rgba', () => { + const component = render( + Content + ); + + expect(component).toMatchSnapshot(); + }); + + it('accepts hex', () => { + const component = render(Content); + + expect(component).toMatchSnapshot(); + }); }); describe('iconSide', () => { diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index 6a6efa87e98..0bbc160d9db 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -26,15 +26,16 @@ import React, { Ref, } from 'react'; import classNames from 'classnames'; -import { CommonProps, ExclusiveUnion, keysOf, PropsOf } from '../common'; import chroma from 'chroma-js'; +import { CommonProps, ExclusiveUnion, keysOf, PropsOf } from '../common'; import { euiPaletteColorBlindBehindText, - isValidHex, getSecureRelForTarget, + isColorDark, } from '../../services'; import { EuiInnerText } from '../inner_text'; import { EuiIcon, IconColor, IconType } from '../icon'; +import { chromaValid, parseColor } from '../color_picker/utils'; type IconSide = 'left' | 'right'; @@ -354,24 +355,23 @@ function getColorContrast(textColor: string, color: string) { } function setTextColor(bgColor: string) { - const textColor = - getColorContrast(colorInk, bgColor) > getColorContrast(colorGhost, bgColor) - ? colorInk - : colorGhost; + const textColor = isColorDark(...chroma(bgColor).rgb()) + ? colorGhost + : colorInk; return textColor; } function checkValidColor(color: null | IconColor | string) { - if ( - color != null && - !isValidHex(color) && - !COLORS.includes(color) && - color !== 'hollow' - ) { + const colorExists = !!color; + const isNamedColor = (color && COLORS.includes(color)) || color === 'hollow'; + const isValidColorString = color && chromaValid(parseColor(color) || ''); + + if (!colorExists && !isNamedColor && !isValidColorString) { console.warn( 'EuiBadge expects a valid color. This can either be a three or six ' + - `character hex value, hollow, or one of the following: ${COLORS}` + `character hex value, rgb(a) value, hsv value, hollow, or one of the following: ${COLORS}. ` + + `Instead got ${color}.` ); } } From fbe7d8473a88aff7a5a371c6b6352a301700efb6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 14:47:41 -0400 Subject: [PATCH 14/20] [EuiHeaderLinks] Fix margins for any children --- src/components/header/header_links/_header_link.scss | 5 +++-- src/components/header/header_links/_header_links.scss | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/header/header_links/_header_link.scss b/src/components/header/header_links/_header_link.scss index 42f656488ef..de088d4c576 100644 --- a/src/components/header/header_links/_header_link.scss +++ b/src/components/header/header_links/_header_link.scss @@ -1,13 +1,14 @@ +@import '../../link/mixins'; + .euiHeaderLink { @include euiLink; - margin: 0 $euiSizeS; } .euiHeaderLinks__mobileList { .euiHeaderLink { display: block; + width: 100%; padding: $euiSizeS; - margin: 0; // EuiButtons normally center, which makes sense. In mobile though we want // them to align left. This is a safe hack given the specificity. diff --git a/src/components/header/header_links/_header_links.scss b/src/components/header/header_links/_header_links.scss index f77ac959eba..862350756ea 100644 --- a/src/components/header/header_links/_header_links.scss +++ b/src/components/header/header_links/_header_links.scss @@ -1,5 +1,3 @@ -@import '../../link/mixins'; - .euiHeaderLinks { display: flex; justify-content: space-between; @@ -11,6 +9,11 @@ overflow: hidden; display: flex; align-items: center; + + > * { + // Apply margins to any children + margin: 0 $euiSizeS; + } } .euiHeaderLinks__mobile { From 90e173b8a3c3f6359d44c09d73abd40f952bf032 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 24 Jun 2020 16:28:23 -0400 Subject: [PATCH 15/20] Cleanup --- src-docs/src/views/header/header_elastic_pattern.js | 2 +- src-docs/src/views/header/header_example.js | 2 +- src/components/collapsible_nav/_collapsible_nav.scss | 3 ++- src/components/flyout/_mixins.scss | 2 +- src/themes/eui-amsterdam/overrides/_header.scss | 1 + 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/header/header_elastic_pattern.js b/src-docs/src/views/header/header_elastic_pattern.js index 4a0cd2831fa..74353d46981 100644 --- a/src-docs/src/views/header/header_elastic_pattern.js +++ b/src-docs/src/views/header/header_elastic_pattern.js @@ -125,7 +125,7 @@ export default ({ theme }) => {

Please see the component page for{' '} - + EuiHeaderAlert {' '} on how to configure your alerts. diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js index c5a22567ef0..da375b6b1d0 100644 --- a/src-docs/src/views/header/header_example.js +++ b/src-docs/src/views/header/header_example.js @@ -354,7 +354,7 @@ export const HeaderExample = {

Putting it all together

The button below will launch a full screen example that includes two{' '} - EuiHeaders with all the appropriate navigation + EuiHeaders with all the appropriate navigation pieces including{' '} EuiCollapsibleNav, diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss index 7d9f83798bc..e2d36a5d8ee 100644 --- a/src/components/collapsible_nav/_collapsible_nav.scss +++ b/src/components/collapsible_nav/_collapsible_nav.scss @@ -10,7 +10,7 @@ width: $euiCollapsibleNavWidth; max-width: 80vw; animation: euiCollapsibleNavIn $euiAnimSpeedNormal $euiAnimSlightResistance; - clip-path: polygon(0 0, 110% 0, 110% 100%, 0 100%); + clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); // Must include the width of the close button too } .euiCollapsibleNav__closeButton { @@ -38,6 +38,7 @@ .euiCollapsibleNav.euiCollapsibleNav--isDocked { @include euiBottomShadowMedium; z-index: $euiZHeader; // When docked, make it the same level as the header + clip-path: none; .euiCollapsibleNav__closeButton { display: none; diff --git a/src/components/flyout/_mixins.scss b/src/components/flyout/_mixins.scss index 6a6ea04d26d..dc8edc52da6 100644 --- a/src/components/flyout/_mixins.scss +++ b/src/components/flyout/_mixins.scss @@ -14,5 +14,5 @@ display: flex; flex-direction: column; align-items: stretch; - clip-path: polygon(-10% 0, 100% 0, 100% 100%, -10% 100%); + clip-path: polygon(-20% 0, 100% 0, 100% 100%, -20% 100%); } diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss index a7e4cb9b8fa..44baf168763 100644 --- a/src/themes/eui-amsterdam/overrides/_header.scss +++ b/src/themes/eui-amsterdam/overrides/_header.scss @@ -46,6 +46,7 @@ // still be default text only breadcrumbs for places like EuiControlBar .euiBreadcrumb { @include euiButtonDefaultStyle($euiTextColor); + line-height: $euiSize; font-weight: $euiFontWeightMedium; padding: $euiSizeXS $euiSize; clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%); From 3744e44378f2aca541c467e43ad3fc0729089b96 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 30 Jun 2020 18:51:57 -0400 Subject: [PATCH 16/20] Update src-docs/src/views/header/header_example.js Co-authored-by: Greg Thompson --- src-docs/src/views/header/header_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js index da375b6b1d0..c78bb0b32ab 100644 --- a/src-docs/src/views/header/header_example.js +++ b/src-docs/src/views/header/header_example.js @@ -296,7 +296,7 @@ export const HeaderExample = { .

- The example below shows how to incorprate{' '} + The example below shows how to incorporate{' '} EuiHeaderAlert components to show a list of updates.

From c61245d387a50189b4dfb0bb79b7d8bf90417b92 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 30 Jun 2020 18:52:10 -0400 Subject: [PATCH 17/20] Update src-docs/src/views/overlay_mask/overlay_mask_example.js Co-authored-by: Greg Thompson --- src-docs/src/views/overlay_mask/overlay_mask_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/overlay_mask/overlay_mask_example.js b/src-docs/src/views/overlay_mask/overlay_mask_example.js index 71a90205861..cce31cc6a4f 100644 --- a/src-docs/src/views/overlay_mask/overlay_mask_example.js +++ b/src-docs/src/views/overlay_mask/overlay_mask_example.js @@ -71,7 +71,7 @@ export const OverlayMaskExample = { text: (

- Managing z-index levels of multiple portalled content and their + Managing z-index levels of multiple portal-positioned components and their different contexts is complicated from within the library.{' '} EuiOverlayMask gives you control over whether it should appear below or above an{' '} From ba35c78155ba9f4261afe81b53d0a6a56e69e3f4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 1 Jul 2020 09:30:56 -0400 Subject: [PATCH 18/20] Change `headerAdjacent` to `headerZindexLocation` --- src-docs/src/views/overlay_mask/overlay_mask_example.js | 8 ++++---- src-docs/src/views/overlay_mask/overlay_mask_header.js | 2 +- src/components/collapsible_nav/collapsible_nav.test.tsx | 6 ++++-- src/components/collapsible_nav/collapsible_nav.tsx | 2 +- src/components/flyout/flyout.test.tsx | 6 ++++-- src/components/flyout/flyout.tsx | 6 +++++- src/components/overlay_mask/overlay_mask.tsx | 8 ++++---- 7 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/overlay_mask/overlay_mask_example.js b/src-docs/src/views/overlay_mask/overlay_mask_example.js index 71a90205861..246a8908aae 100644 --- a/src-docs/src/views/overlay_mask/overlay_mask_example.js +++ b/src-docs/src/views/overlay_mask/overlay_mask_example.js @@ -78,9 +78,9 @@ export const OverlayMaskExample = { EuiHeader {' '} - by providing the headerAdjacent prop. By default - this is set to {'"above"'} for common cases like - with{' '} + by providing the headerZindexLocation prop. By + default this is set to {'"above"'} for common + cases like with{' '} EuiModal {' '} @@ -94,7 +94,7 @@ export const OverlayMaskExample = {

), props: { EuiOverlayMask }, - snippet: ` + snippet: ` `, demo: , }, diff --git a/src-docs/src/views/overlay_mask/overlay_mask_header.js b/src-docs/src/views/overlay_mask/overlay_mask_header.js index 9c7818fed65..8cc6053ef44 100644 --- a/src-docs/src/views/overlay_mask/overlay_mask_header.js +++ b/src-docs/src/views/overlay_mask/overlay_mask_header.js @@ -19,7 +19,7 @@ export default () => { if (flyOut) { flyout = ( - + diff --git a/src/components/collapsible_nav/collapsible_nav.test.tsx b/src/components/collapsible_nav/collapsible_nav.test.tsx index b4443455098..32f0c401bfa 100644 --- a/src/components/collapsible_nav/collapsible_nav.test.tsx +++ b/src/components/collapsible_nav/collapsible_nav.test.tsx @@ -24,7 +24,9 @@ import { requiredProps } from '../../test/required_props'; import { EuiCollapsibleNav } from './collapsible_nav'; jest.mock('../overlay_mask', () => ({ - EuiOverlayMask: ({ headerAdjacent, ...props }: any) =>
, + EuiOverlayMask: ({ headerZindexLocation, ...props }: any) => ( +
+ ), })); const propsNeededToRender = { id: 'id', isOpen: true }; @@ -88,7 +90,7 @@ describe('EuiCollapsibleNav', () => { const component = render( ); diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx index 4224a9702c3..c9b5f745d0e 100644 --- a/src/components/collapsible_nav/collapsible_nav.tsx +++ b/src/components/collapsible_nav/collapsible_nav.tsx @@ -149,7 +149,7 @@ export const EuiCollapsibleNav: FunctionComponent = ({ optionalOverlay = ( ); diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx index 79915f11439..67fab8103a5 100644 --- a/src/components/flyout/flyout.test.tsx +++ b/src/components/flyout/flyout.test.tsx @@ -24,7 +24,9 @@ import { requiredProps } from '../../test'; import { EuiFlyout, EuiFlyoutSize } from './flyout'; jest.mock('../overlay_mask', () => ({ - EuiOverlayMask: ({ headerAdjacent, ...props }: any) =>
, + EuiOverlayMask: ({ headerZindexLocation, ...props }: any) => ( +
+ ), })); const SIZES: EuiFlyoutSize[] = ['s', 'm', 'l']; @@ -126,7 +128,7 @@ describe('EuiFlyout', () => { {}} ownFocus - maskProps={{ headerAdjacent: 'above' }} + maskProps={{ headerZindexLocation: 'above' }} /> ); diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index a0eaf829d3d..1077bd16a17 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -160,7 +160,11 @@ export const EuiFlyout: FunctionComponent = ({ let optionalOverlay; if (ownFocus) { optionalOverlay = ( - + ); } diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx index dafd9022080..981221cc719 100644 --- a/src/components/overlay_mask/overlay_mask.tsx +++ b/src/components/overlay_mask/overlay_mask.tsx @@ -43,7 +43,7 @@ export interface EuiOverlayMaskInterface { /** * Should the mask visually sit above or below the EuiHeader (controlled by z-index) */ - headerAdjacent?: 'above' | 'below'; + headerZindexLocation?: 'above' | 'below'; } export type EuiOverlayMaskProps = CommonProps & @@ -57,7 +57,7 @@ export const EuiOverlayMask: FunctionComponent = ({ className, children, onClick, - headerAdjacent = 'above', + headerZindexLocation = 'above', ...rest }) => { const overlayMaskNode = useRef(document.createElement('div')); @@ -99,10 +99,10 @@ export const EuiOverlayMask: FunctionComponent = ({ if (!overlayMaskNode.current) return; overlayMaskNode.current.className = classNames( 'euiOverlayMask', - `euiOverlayMask--${headerAdjacent}Header`, + `euiOverlayMask--${headerZindexLocation}Header`, className ); - }, [className, headerAdjacent]); + }, [className, headerZindexLocation]); useEffect(() => { if (!overlayMaskNode.current || !onClick) return; From 8e78c12c89e2d24a20d5d9b5337fef5c756faa29 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 1 Jul 2020 10:24:23 -0400 Subject: [PATCH 19/20] cl --- src-docs/src/views/overlay_mask/overlay_mask_example.js | 4 ++-- src/themes/eui-amsterdam/overrides/_header.scss | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/overlay_mask/overlay_mask_example.js b/src-docs/src/views/overlay_mask/overlay_mask_example.js index 6ec788a67f6..a5116302f76 100644 --- a/src-docs/src/views/overlay_mask/overlay_mask_example.js +++ b/src-docs/src/views/overlay_mask/overlay_mask_example.js @@ -71,8 +71,8 @@ export const OverlayMaskExample = { text: (

- Managing z-index levels of multiple portal-positioned components and their - different contexts is complicated from within the library.{' '} + Managing z-index levels of multiple portal-positioned components and + their different contexts is complicated from within the library.{' '} EuiOverlayMask gives you control over whether it should appear below or above an{' '} diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss index 44baf168763..1f9a52cbb36 100644 --- a/src/themes/eui-amsterdam/overrides/_header.scss +++ b/src/themes/eui-amsterdam/overrides/_header.scss @@ -87,5 +87,13 @@ padding-right: $euiSizeM; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%); } + + // In case the item is first AND last, aka only, just make it a fully rounded item + .euiBreadcrumb:only-child { + clip-path: none; + padding-left: $euiSizeM; + padding-right: $euiSizeM; + border-radius: $euiBorderRadius; + } } From 75e63ca22986bdae2491c2b37d8fc607682f843e Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 1 Jul 2020 10:24:30 -0400 Subject: [PATCH 20/20] cl --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f5f8a8da58..f26a0add631 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,17 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `gutterSize` prop to `EuiFacetGroup` ([#3639](https://github.com/elastic/eui/pull/3639)) +- 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 `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)