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{' '}
- EuiHeader s 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)