Skip to content

[Visual Refresh] Design changes #8111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mgadewoll merged 10 commits into from
Nov 5, 2024
Merged

[Visual Refresh] Design changes #8111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9c794c2
fix: rebase fix
mgadewoll Nov 1, 2024
1e95ec0
feat: add flags theme key for global settings
mgadewoll Oct 30, 2024
015d364
refactor: update token mappings
mgadewoll Oct 30, 2024
510082c
refactor: add floating border to panel components
mgadewoll Oct 30, 2024
5df53a4
refactor: update popover arrow styles to ensure parity with previous …
mgadewoll Nov 4, 2024
66ba87a
test(VRT): update reference images
mgadewoll Nov 4, 2024
313e280
refactor: adjust card image positioning to floating boarder
mgadewoll Oct 30, 2024
b4fd0b9
refactor: update lightestShade token values in light mode
mgadewoll Nov 4, 2024
e8172fd
feat: add floating border to modals
mgadewoll Nov 4, 2024
c77d36d
feat: add floating border on flyouts
mgadewoll Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/eui-theme-borealis/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ export const euiThemeBorealis: EuiThemeShape = {
levels,
focus,
components,
flags: {
hasGlobalFocusColor: true,
},
};

export const EuiThemeBorealis = buildTheme(
Expand Down
4 changes: 2 additions & 2 deletions packages/eui-theme-borealis/src/variables/_borders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import {

export const border: _EuiThemeBorder = {
color: computed(
([borderBasePlain]) => borderBasePlain,
['colors.borderBasePlain']
([borderBaseSubdued]) => borderBaseSubdued,
['colors.borderBaseSubdued']
),
width: {
thin: '1px',
Expand Down
18 changes: 11 additions & 7 deletions packages/eui-theme-borealis/src/variables/_components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { SEMANTIC_COLORS } from './colors/_semantic_colors';
import {
dark_background_colors,
dark_border_colors,
dark_brand_text_colors,
dark_text_colors,
} from './colors/_colors_dark';

Expand All @@ -23,13 +24,11 @@ import { forms } from './_forms';
import {
background_colors,
border_colors,
brand_text_colors,
text_colors,
} from './colors/_colors_light';

const component_colors: _EuiThemeComponentColors = {
buttonGroupBorderColor: border_colors.borderBasePlain,
buttonGroupBorderColorSelected: border_colors.borderBasePlain,

badgeBackgroundSubdued: background_colors.backgroundBaseSubdued,
badgeBorderColorHollow: border_colors.borderBasePlain,
badgeIconButtonBackgroundHover:
Expand All @@ -40,6 +39,10 @@ const component_colors: _EuiThemeComponentColors = {

bottomBarBackground: SEMANTIC_COLORS.plainDark,

buttonGroupBorderColor: border_colors.borderBasePlain,
buttonGroupBorderColorSelected: border_colors.borderBasePlain,
buttonGroupFocusColor: brand_text_colors.textPrimary,

collapsibleNavGroupBackground: background_colors.backgroundBaseSubdued,
collapsibleNavGroupBackgroundDark:
dark_background_colors.backgroundBaseSubdued,
Expand All @@ -58,7 +61,7 @@ const component_colors: _EuiThemeComponentColors = {

headerBackground: background_colors.backgroundBasePlain,
headerDarkBackground: dark_background_colors.backgroundBasePlain,
headerDarkSearchBorderColor: dark_border_colors.borderBaseFormsControl,
headerDarkSearchBorderColor: dark_border_colors.borderBasePlain,
headerDarkSectionItemBackgroundFocus:
dark_background_colors.backgroundBasePrimary,

Expand Down Expand Up @@ -129,9 +132,6 @@ export const components: _EuiThemeComponents = {
DARK: {
...component_colors,

buttonGroupBorderColor: dark_border_colors.borderBasePlain,
buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain,

badgeBackgroundSubdued: dark_background_colors.backgroundBaseSubdued,
badgeBorderColorHollow: dark_border_colors.borderBasePlain,
badgeIconButtonBackgroundHover:
Expand All @@ -141,6 +141,10 @@ export const components: _EuiThemeComponents = {
dark_background_colors.backgroundLightText,
breadcrumbsApplicationColor: dark_text_colors.textSubdued,

buttonGroupBorderColor: dark_border_colors.borderBasePlain,
buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain,
buttonGroupFocusColor: dark_brand_text_colors.textPrimary,

collapsibleNavGroupBackground: dark_background_colors.backgroundBaseSubdued,
collapsibleNavGroupBackgroundDark:
dark_background_colors.backgroundBaseSubdued,
Expand Down
2 changes: 2 additions & 0 deletions packages/eui-theme-borealis/src/variables/_forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const _forms = {
backgroundAutofilled: background_colors.backgroundBasePrimary,
prependBackground: background_colors.backgroundBaseFormsPrepend,
border: border_colors.borderBasePlain,
borderDisabled: border_colors.borderBaseDisabled,
borderAutofilled: border_colors.borderBasePrimary,
controlBorder: border_colors.borderBaseFormsControl,
controlBorderSelected: border_colors.borderStrongPrimary,
Expand All @@ -45,6 +46,7 @@ const _dark_forms = {
backgroundAutofilled: dark_background_colors.backgroundBasePrimary,
prependBackground: dark_background_colors.backgroundBaseFormsPrepend,
border: dark_border_colors.borderBasePlain,
borderDisabled: dark_border_colors.borderBaseDisabled,
borderAutofilled: dark_border_colors.borderBasePrimary,
controlBorder: dark_border_colors.borderBaseFormsControl,
controlBorderSelected: dark_border_colors.borderStrongPrimary,
Expand Down
2 changes: 1 addition & 1 deletion packages/eui-theme-borealis/src/variables/_states.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {

export const focus: _EuiThemeFocus = {
// Focus ring
color: 'currentColor',
color: computed(([textPrimary]) => textPrimary, ['colors.textPrimary']),
width: computed(sizeToPixel(0.125)),
// Focus background
transparency: { LIGHT: 0.1, DARK: 0.2 },
Expand Down
14 changes: 7 additions & 7 deletions packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default;
$euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default;

$euiColorBackgroundBaseInteractiveHover: $euiColorTransparentWhite10 !default;
$euiColorBackgroundBaseInteractiveSelect: $euiColorShade130 !default;
$euiColorBackgroundBaseInteractiveSelect: $euiColorShade125 !default;
$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default;
$euiColorBackgroundBaseSkeletonEdge: $euiColorTransparentWhite10 !default;
$euiColorBackgroundBaseSkeletonMiddle: $euiColorTransparentWhite30 !default;
Expand All @@ -67,16 +67,16 @@ $euiColorBackgroundFilledText: $euiColorShade60 !default;
// Texts (legacy)
$euiTextColor: $euiColorShade20 !default;
$euiTitleColor: $euiColorShade15 !default;
$euiTextSubduedColor: $euiColorShade40 !default;
$euiTextSubduedColor: $euiColorShade60 !default;
$euiColorDisabled: $euiColorBackgroundBaseDisabled !default;
$euiColorDisabledText: $euiColorShade60 !default;
$euiColorDisabledText: $euiColorShade80 !default;
$euiLinkColor: $euiColorPrimary60 !default;

// Texts
$euiColorTextParagraph: $euiColorShade20 !default;
$euiColorTextHeading: $euiColorShade15 !default;
$euiColorTextSubdued: $euiColorShade40 !default;
$euiColorTextDisabled: $euiColorShade60 !default;
$euiColorTextSubdued: $euiColorShade60 !default;
$euiColorTextDisabled: $euiColorShade80 !default;
$euiColorTextInverse: $euiColorPlainDark !default;

// Brand texts (legacy)
Expand All @@ -102,9 +102,9 @@ $euiColorBorderBaseSuccess: $euiColorSuccess120;
$euiColorBorderBaseWarning: $euiColorWarning120;
$euiColorBorderBaseDanger: $euiColorDanger120;

$euiColorBorderBasePlain: $euiColorShade110;
$euiColorBorderBasePlain: $euiColorShade100;
$euiColorBorderBaseSubdued: $euiColorShade120;
$euiColorBorderBaseDisabled: $euiColorShade120;
$euiColorBorderBaseDisabled: $euiColorShade100;
$euiColorBorderBaseFloating: $euiColorShade120;
$euiColorBorderBaseFormsColorSwatch: $euiColorTransparentWhite30;
$euiColorBorderBaseFormsControl: $euiColorShade80;
Expand Down
16 changes: 8 additions & 8 deletions packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,14 @@ export const dark_text_colors: _EuiThemeTextColors = {
/* Legacy colors */
text: SEMANTIC_COLORS.shade20,
title: SEMANTIC_COLORS.shade15,
subduedText: SEMANTIC_COLORS.shade40,
subduedText: SEMANTIC_COLORS.shade60,
link: SEMANTIC_COLORS.primary60,

/* New colors */
textParagraph: SEMANTIC_COLORS.shade20,
textHeading: SEMANTIC_COLORS.shade15,
textSubdued: SEMANTIC_COLORS.shade40,
textDisabled: SEMANTIC_COLORS.shade60,
textSubdued: SEMANTIC_COLORS.shade60,
textDisabled: SEMANTIC_COLORS.shade80,
textInverse: SEMANTIC_COLORS.plainDark,
};

Expand Down Expand Up @@ -91,7 +91,7 @@ export const dark_background_colors: _EuiThemeBackgroundColors = {
backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120,

backgroundBaseInteractiveHover: PRIMITIVE_COLORS.transparent.white10,
backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade130,
backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade125,
backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shadeTransparent80,

backgroundBaseSkeletonEdge: PRIMITIVE_COLORS.transparent.white10,
Expand Down Expand Up @@ -141,9 +141,9 @@ export const dark_border_colors: _EuiThemeBorderColors = {
borderBaseWarning: SEMANTIC_COLORS.warning120,
borderBaseDanger: SEMANTIC_COLORS.danger120,

borderBasePlain: SEMANTIC_COLORS.shade110,
borderBasePlain: SEMANTIC_COLORS.shade100,
borderBaseSubdued: SEMANTIC_COLORS.shade120,
borderBaseDisabled: SEMANTIC_COLORS.shade120,
borderBaseDisabled: SEMANTIC_COLORS.shade100,
borderBaseFloating: SEMANTIC_COLORS.shade120,

borderBaseFormsColorSwatch: PRIMITIVE_COLORS.transparent.white30,
Expand All @@ -160,8 +160,8 @@ export const dark_border_colors: _EuiThemeBorderColors = {
export const dark_special_colors: _EuiThemeSpecialColors = {
body: SEMANTIC_COLORS.plainDark,
highlight: SEMANTIC_COLORS.primary100,
disabled: SEMANTIC_COLORS.shade70,
disabledText: SEMANTIC_COLORS.shade120,
disabled: SEMANTIC_COLORS.shade130,
disabledText: SEMANTIC_COLORS.shade80,
shadow: PRIMITIVE_COLORS.black,
};

Expand Down
2 changes: 1 addition & 1 deletion packages/eui-theme-borealis/src/variables/colors/_colors_light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ $euiColorDanger: $euiColorDanger90 !default;

// Shades
$euiColorEmptyShade: $euiColorPlainLight !default;
$euiColorLightestShade: $euiColorShade20 !default;
$euiColorLightestShade: $euiColorShade15 !default;
$euiColorLightShade: $euiColorShade30 !default;
$euiColorMediumShade: $euiColorShade60 !default;
$euiColorDarkShade: $euiColorShade90 !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/eui-theme-borealis/src/variables/colors/_colors_light.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const text_colors: _EuiThemeTextColors = {

export const shade_colors: _EuiThemeShadeColors = {
emptyShade: SEMANTIC_COLORS.plainLight,
lightestShade: SEMANTIC_COLORS.shade20,
lightestShade: SEMANTIC_COLORS.shade15,
lightShade: SEMANTIC_COLORS.shade30,
mediumShade: SEMANTIC_COLORS.shade60,
darkShade: SEMANTIC_COLORS.shade90,
Expand Down
3 changes: 2 additions & 1 deletion packages/eui-theme-common/src/global_styling/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { _EuiThemeFont } from './variables/typography';
import { _EuiThemeFocus } from './variables/states';
import { _EuiThemeLevels } from './variables/levels';
import { _EuiThemeComponents } from './variables/components';
import { _EuiThemeFlags } from './variables';

export const COLOR_MODES_STANDARD = {
light: 'LIGHT',
Expand Down Expand Up @@ -59,8 +60,8 @@ export type EuiThemeShape = {
animation: _EuiThemeAnimation;
breakpoint: _EuiThemeBreakpoints;
levels: _EuiThemeLevels;
// bevel: _EuiThemeBevel;
components: _EuiThemeComponents;
flags: _EuiThemeFlags;
};

export type EuiThemeSystem<T = {}> = {
Expand Down
1 change: 1 addition & 0 deletions packages/eui-theme-common/src/global_styling/variables/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { _EuiThemeFormColors } from './forms';
export type _EuiThemeComponentColors = {
buttonGroupBorderColor: ColorModeSwitch;
buttonGroupBorderColorSelected: ColorModeSwitch;
buttonGroupFocusColor: ColorModeSwitch;

badgeBackgroundSubdued: ColorModeSwitch;
badgeBorderColorHollow: ColorModeSwitch;
Expand Down
14 changes: 14 additions & 0 deletions packages/eui-theme-common/src/global_styling/variables/flags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

/**
* Theme specific setting flags
*/
export type _EuiThemeFlags = {
hasGlobalFocusColor: boolean;
};
1 change: 1 addition & 0 deletions packages/eui-theme-common/src/global_styling/variables/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ export * from './typography';
export * from './buttons';
export * from './forms';
export * from './components';
export * from './flags';
Binary file modified ...loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...oki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion packages/eui/src/components/button/button_group/button_group_button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ export const euiButtonGroupButtonStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('min-width', 0)}
flex-shrink: 1;
flex-grow: 0;
z-index: 0;

&:focus-visible {
z-index: 1;
}

${euiCanAnimate} {
transition: background-color ${euiTheme.animation.normal} ease-in-out,
Expand All @@ -74,7 +79,11 @@ export const euiButtonGroupButtonStyles = (euiThemeContext: UseEuiTheme) => {
}

&:focus-visible {
${euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade)}
${euiOutline(
euiThemeContext,
'inset',
euiTheme.components.buttonGroupFocusColor
)}
}
`,
get borders() {
Expand Down
13 changes: 10 additions & 3 deletions packages/eui/src/components/card/card.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
logicalCSS,
logicals,
logicalTextAlignCSS,
mathWithUnits,
} from '../../global_styling';
import { UseEuiTheme } from '../../services';
import { euiButtonColor } from '../../global_styling/mixins';
Expand All @@ -34,6 +35,12 @@ export const euiCardStyles = (
) => {
const { euiTheme } = euiThemeContext;
const paddingAmount = euiPaddingSize(euiThemeContext, paddingSize!);
const cardPaddingAmount = paddingAmount
? mathWithUnits(
[paddingAmount, euiTheme.border.width.thin],
(x, y) => x + y
)
: '0';
const spacing = euiPaddingSize(euiThemeContext, paddingKey);
const halfSpacing = euiPaddingSize(euiThemeContext, halfPaddingKey);

Expand Down Expand Up @@ -151,9 +158,9 @@ export const euiCardStyles = (
overflow: hidden;

/* Padding based sizing & negative margins */
${logicalCSS('width', `calc(100% + (${paddingAmount} * 2))`)}
${logicalCSS('left', `-${paddingAmount}`)}
${logicalCSS('top', `-${paddingAmount}`)}
${logicalCSS('width', `calc(100% + (${cardPaddingAmount} * 2))`)}
${logicalCSS('left', `-${cardPaddingAmount}`)}
${logicalCSS('top', `-${cardPaddingAmount}`)}
/* Ensure the parent is only as tall as the image */
${logicalCSS('margin-bottom', `-${paddingAmount}`)}

Expand Down
14 changes: 7 additions & 7 deletions packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports[`EuiCollapsibleNav close button can be hidden 1`] = `
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
data-autofocus="true"
id="id"
role="dialog"
Expand Down Expand Up @@ -67,7 +67,7 @@ exports[`EuiCollapsibleNav is rendered 1`] = `
<nav
aria-describedby="generated-id"
aria-label="aria-label"
class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay-euiTestCss"
class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay-euiTestCss"
data-autofocus="true"
data-test-subj="test subject string"
id="id"
Expand Down Expand Up @@ -118,7 +118,7 @@ exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
data-autofocus="true"
id="id"
role="dialog"
Expand Down Expand Up @@ -173,7 +173,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
data-autofocus="true"
id="id"
role="dialog"
Expand Down Expand Up @@ -224,7 +224,7 @@ exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
data-autofocus="true"
id="id"
role="dialog"
Expand Down Expand Up @@ -299,7 +299,7 @@ exports[`EuiCollapsibleNav props onClose 1`] = `
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
data-autofocus="true"
id="id"
role="dialog"
Expand Down Expand Up @@ -379,7 +379,7 @@ exports[`EuiCollapsibleNav props size 1`] = `
>
<nav
aria-describedby="generated-id"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-left-euiCollapsibleNav-overlay"
data-autofocus="true"
id="id"
role="dialog"
Expand Down
Loading
Loading