@@ -223,7 +223,7 @@ exports[`EuiPageTemplate template centeredBody is rendered with pageHeader 1`] =
class="euiPageBody euiPageBody--borderRadiusNone"
>
@@ -480,11 +480,11 @@ exports[`EuiPageTemplate template centeredContent is rendered with pageHeader 1`
title="Page title"
/>
@@ -724,7 +724,7 @@ exports[`EuiPageTemplate template default is rendered with pageHeader 1`] = `
title="Page title"
/>
@@ -956,7 +956,7 @@ exports[`EuiPageTemplate template empty is rendered with pageHeader 1`] = `
title="Page title"
/>
`;
exports[`EuiPageBody panelled can be set to true 1`] = `
`;
diff --git a/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap b/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap
index f5c6e8c7862..6fee6d88fc4 100644
--- a/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap
+++ b/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap
@@ -2,14 +2,14 @@
exports[`EuiPageContent accepts panel props 1`] = `
`;
exports[`EuiPageContent horizontalPosition is rendered 1`] = `
`;
@@ -17,7 +17,7 @@ exports[`EuiPageContent horizontalPosition is rendered 1`] = `
exports[`EuiPageContent is rendered 1`] = `
@@ -25,13 +25,13 @@ exports[`EuiPageContent is rendered 1`] = `
exports[`EuiPageContent role can be removed 1`] = `
`;
exports[`EuiPageContent verticalPosition is rendered 1`] = `
`;
diff --git a/src/components/panel/__snapshots__/panel.test.tsx.snap b/src/components/panel/__snapshots__/panel.test.tsx.snap
index c844e666a98..67beb7d11f0 100644
--- a/src/components/panel/__snapshots__/panel.test.tsx.snap
+++ b/src/components/panel/__snapshots__/panel.test.tsx.snap
@@ -3,115 +3,127 @@
exports[`EuiPanel is rendered 1`] = `
`;
exports[`EuiPanel props borderRadius m is rendered 1`] = `
`;
exports[`EuiPanel props borderRadius none is rendered 1`] = `
`;
exports[`EuiPanel props color accent is rendered 1`] = `
`;
exports[`EuiPanel props color danger is rendered 1`] = `
`;
exports[`EuiPanel props color plain is rendered 1`] = `
`;
exports[`EuiPanel props color primary is rendered 1`] = `
`;
exports[`EuiPanel props color subdued is rendered 1`] = `
`;
exports[`EuiPanel props color success is rendered 1`] = `
`;
exports[`EuiPanel props color transparent is rendered 1`] = `
`;
exports[`EuiPanel props color warning is rendered 1`] = `
`;
exports[`EuiPanel props grow can be false 1`] = `
`;
exports[`EuiPanel props hasBorder can be false 1`] = `
`;
exports[`EuiPanel props hasBorder can be true 1`] = `
`;
exports[`EuiPanel props hasShadow can be false 1`] = `
`;
exports[`EuiPanel props paddingSize l is rendered 1`] = `
`;
exports[`EuiPanel props paddingSize m is rendered 1`] = `
`;
exports[`EuiPanel props paddingSize none is rendered 1`] = `
`;
exports[`EuiPanel props paddingSize s is rendered 1`] = `
+`;
+
+exports[`EuiPanel props paddingSize xl is rendered 1`] = `
+
+`;
+
+exports[`EuiPanel props paddingSize xs is rendered 1`] = `
+
`;
diff --git a/src/components/panel/_index.scss b/src/components/panel/_index.scss
index 46b6312cabb..b57dcdfe254 100644
--- a/src/components/panel/_index.scss
+++ b/src/components/panel/_index.scss
@@ -1,2 +1 @@
-@import 'panel';
@import './split_panel/index'
diff --git a/src/components/panel/index.ts b/src/components/panel/index.ts
index 129d37c2064..17bd971cbc5 100644
--- a/src/components/panel/index.ts
+++ b/src/components/panel/index.ts
@@ -6,6 +6,6 @@
* Side Public License, v 1.
*/
-export type { EuiPanelProps, PanelPaddingSize } from './panel';
-export { EuiPanel, SIZES } from './panel';
+export type { EuiPanelProps } from './panel';
+export { EuiPanel } from './panel';
export { EuiSplitPanel } from './split_panel';
diff --git a/src/components/panel/panel.style.ts b/src/components/panel/panel.style.ts
new file mode 100644
index 00000000000..b28769926f4
--- /dev/null
+++ b/src/components/panel/panel.style.ts
@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
+import { UseEuiTheme } from '../../services';
+import { euiCanAnimate, logicalTextAlignCSS } from '../../global_styling';
+
+export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
+ const { euiTheme } = euiThemeContext;
+
+ return {
+ // Base
+ euiPanel: css`
+ flex-grow: 0;
+ `,
+
+ grow: css`
+ flex-grow: 1;
+ `,
+
+ hasShadow: css`
+ ${euiShadow(euiThemeContext, 'm')};
+ `,
+
+ hasBorder: css`
+ border: ${euiTheme.border.thin};
+ `,
+
+ radius: {
+ none: css``,
+ m: css`
+ border-radius: ${euiTheme.border.radius.medium};
+ `,
+ },
+
+ // Setup interactive behavior
+ isClickable: css`
+ ${euiCanAnimate} {
+ transition: box-shadow ${euiTheme.animation.fast}
+ ${euiTheme.animation.resistance},
+ transform ${euiTheme.animation.fast} ${euiTheme.animation.resistance};
+ }
+
+ &:enabled {
+ // This is a good selector for buttons since it doesn't exist on divs
+ // in case of button wrapper which inherently is inline-block and no width
+ display: block;
+ width: 100%;
+ ${logicalTextAlignCSS('left')}
+ }
+
+ &:hover,
+ &:focus {
+ ${euiShadow(euiThemeContext, 'l')};
+ transform: translateY(-${euiTheme.size.xxs});
+ cursor: pointer;
+ }
+ `,
+ };
+};
diff --git a/src/components/panel/panel.test.tsx b/src/components/panel/panel.test.tsx
index e92bb8620bc..2454bc3b0ca 100644
--- a/src/components/panel/panel.test.tsx
+++ b/src/components/panel/panel.test.tsx
@@ -9,10 +9,13 @@
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
-import { EuiPanel, SIZES, COLORS, BORDER_RADII } from './panel';
+import { EuiPanel, PANEL_SIZES, COLORS, BORDER_RADII } from './panel';
describe('EuiPanel', () => {
+ shouldRenderCustomStyles( = ({
borderRadius = 'm',
color = 'plain',
hasShadow = true,
- hasBorder,
+ hasBorder = false,
grow = true,
panelRef,
element,
...rest
}) => {
+ const euiTheme = useEuiTheme();
// Shadows are only allowed when there's a white background (plain)
- const canHaveShadow = color === 'plain';
+ const canHaveShadow = !hasBorder && color === 'plain';
const canHaveBorder = color === 'plain' || color === 'transparent';
- const classes = classNames(
- 'euiPanel',
- paddingSizeToClassNameMap[paddingSize],
- borderRadiusToClassNameMap[borderRadius],
- `euiPanel--${color}`,
- {
- // The `no` classes turn off the option for default theme
- // While the `has` classes turn it on for Amsterdam
- 'euiPanel--hasShadow': canHaveShadow && hasShadow === true,
- 'euiPanel--noShadow': !canHaveShadow || hasShadow === false,
- 'euiPanel--hasBorder': canHaveBorder && hasBorder === true,
- 'euiPanel--noBorder': !canHaveBorder || hasBorder === false,
- 'euiPanel--flexGrowZero': !grow,
- 'euiPanel--isClickable': rest.onClick,
- },
- className
- );
+ const styles = euiPanelStyles(euiTheme);
+ const cssStyles = [
+ styles.euiPanel,
+ grow && styles.grow,
+ styles.radius[borderRadius],
+ useEuiPaddingCSS()[paddingSize],
+ useEuiBackgroundColorCSS()[color],
+ canHaveShadow && hasShadow === true && styles.hasShadow,
+ canHaveBorder && hasBorder === true && styles.hasBorder,
+ rest.onClick && styles.isClickable,
+ ];
+
+ const classes = classNames('euiPanel', `euiPanel--${color}`, className);
if (rest.onClick && element !== 'div') {
return (
@@ -153,6 +137,7 @@ export const EuiPanel: FunctionComponent = ({
}
className={classes}
+ css={cssStyles}
{...(rest as HTMLAttributes)}
>
{children}
diff --git a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
index 8caa443e064..8b36f453ee5 100644
--- a/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
+++ b/src/components/panel/split_panel/__snapshots__/split_panel.test.tsx.snap
@@ -2,11 +2,11 @@
exports[`EuiSplitPanel accepts panel props 1`] = `
@@ -14,10 +14,10 @@ exports[`EuiSplitPanel accepts panel props 1`] = `
exports[`EuiSplitPanel inner children are rendered 1`] = `
`;
@@ -25,31 +25,31 @@ exports[`EuiSplitPanel inner children are rendered 1`] = `
exports[`EuiSplitPanel is rendered 1`] = `
`;
exports[`EuiSplitPanel renders as row 1`] = `
`;
exports[`EuiSplitPanel responsive can be changed to different breakpoints 1`] = `
`;
exports[`EuiSplitPanel responsive can be false 1`] = `
`;
exports[`EuiSplitPanel responsive is rendered at small screens 1`] = `
`;
diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss
index 88d84f1ee82..84a8e94e4f8 100644
--- a/src/components/panel/split_panel/_split_panel.scss
+++ b/src/components/panel/split_panel/_split_panel.scss
@@ -2,6 +2,7 @@
display: flex;
flex-direction: column;
min-width: 0;
+ overflow: hidden;
.euiSplitPanel__inner {
flex-basis: 0%; // Make sure they're evenly split
@@ -9,19 +10,6 @@
transform: none !important; // sass-lint:disable-line no-important
box-shadow: none !important; // sass-lint:disable-line no-important
}
-
- @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
- &.euiSplitPanel-isResponsive.euiPanel--#{$modifier} > .euiSplitPanel__inner,
- &.euiPanel--#{$modifier} > .euiSplitPanel__inner {
- &:first-child {
- border-radius: ($amount - 1) ($amount - 1) 0 0;
- }
-
- &:last-child {
- border-radius: 0 0 ($amount - 1) ($amount - 1);
- }
- }
- }
}
.euiSplitPanel--row {
@@ -30,16 +18,4 @@
&.euiSplitPanel-isResponsive {
flex-direction: column;
}
-
- @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
- &.euiPanel--#{$modifier} > .euiSplitPanel__inner {
- &:first-child {
- border-radius: ($amount - 1) 0 0 ($amount - 1);
- }
-
- &:last-child {
- border-radius: 0 ($amount - 1) ($amount - 1) 0;
- }
- }
- }
}
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index 2561fc0df45..4d0ffa6efbe 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -107,7 +107,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -166,7 +166,7 @@ exports[`EuiPopover props buffer 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -223,7 +223,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -293,7 +293,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -363,7 +363,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -421,7 +421,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -479,7 +479,7 @@ exports[`EuiPopover props offset without arrow 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -535,7 +535,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
aria-describedby="generated-id"
aria-live="off"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen css-1l4493j-euiPanel-grow-m-m-plain"
data-autofocus="true"
data-popover-panel="true"
role="dialog"
@@ -591,7 +591,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
{
diff --git a/src/components/popover/popover_footer.tsx b/src/components/popover/popover_footer.tsx
index 2066aa7f601..f26fb16a102 100644
--- a/src/components/popover/popover_footer.tsx
+++ b/src/components/popover/popover_footer.tsx
@@ -9,7 +9,7 @@
import React, { HTMLAttributes, FunctionComponent } from 'react';
import classNames from 'classnames';
import { CommonProps, keysOf } from '../common';
-import { PanelPaddingSize } from '../panel';
+import { PanelPaddingSize_Deprecated } from '../panel/panel';
export type EuiPopoverFooterProps = FunctionComponent<
HTMLAttributes &
@@ -18,7 +18,7 @@ export type EuiPopoverFooterProps = FunctionComponent<
* Customize the all around padding of the popover footer.
* Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover
*/
- paddingSize?: PanelPaddingSize;
+ paddingSize?: PanelPaddingSize_Deprecated;
}
>;
diff --git a/src/components/popover/popover_title.tsx b/src/components/popover/popover_title.tsx
index 4c274a6d0fa..c49505a1140 100644
--- a/src/components/popover/popover_title.tsx
+++ b/src/components/popover/popover_title.tsx
@@ -9,7 +9,7 @@
import React, { HTMLAttributes, FunctionComponent } from 'react';
import classNames from 'classnames';
import { CommonProps, keysOf } from '../common';
-import { PanelPaddingSize } from '../panel';
+import { PanelPaddingSize_Deprecated } from '../panel/panel';
export type EuiPopoverTitleProps = FunctionComponent<
HTMLAttributes &
@@ -18,7 +18,7 @@ export type EuiPopoverTitleProps = FunctionComponent<
* Customize the all around padding of the popover title.
* Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover
*/
- paddingSize?: PanelPaddingSize;
+ paddingSize?: PanelPaddingSize_Deprecated;
}
>;
diff --git a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
index e480930fd88..450f3705b2e 100644
--- a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiResizableContainer can adjust panel props 1`] = `
style="width:50%;height:auto"
>
Testing
@@ -30,7 +30,7 @@ exports[`EuiResizableContainer can adjust panel props 1`] = `
style="width:50%;height:auto"
>
123
@@ -50,7 +50,7 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
style="width:50%;height:auto"
>
Testing
@@ -68,7 +68,7 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
style="width:50%;height:auto"
>
123
@@ -88,7 +88,7 @@ exports[`EuiResizableContainer can be vertical 1`] = `
style="width:100%;height:50%"
>
Testing
@@ -106,7 +106,7 @@ exports[`EuiResizableContainer can be vertical 1`] = `
style="width:100%;height:50%"
>
123
@@ -126,7 +126,7 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
style="width:33%;height:auto"
>
Testing
@@ -144,7 +144,7 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
style="width:33%;height:auto"
>
123
@@ -162,7 +162,7 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
style="width:33%;height:auto"
>
And again
@@ -182,7 +182,7 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
style="width:50%;height:auto"
>
Testing
@@ -200,7 +200,7 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
style="width:50%;height:auto"
>
123
@@ -220,7 +220,7 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
style="width:20%;height:auto"
>
Sidebar
@@ -238,7 +238,7 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
style="width:80%;height:auto"
>
Sidebar content
@@ -258,7 +258,7 @@ exports[`EuiResizableContainer is rendered 1`] = `
style="width:50%;height:auto"
>
Testing
@@ -276,7 +276,7 @@ exports[`EuiResizableContainer is rendered 1`] = `
style="width:50%;height:auto"
>
123
@@ -296,7 +296,7 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
style="width:20%;height:auto"
>
Sidebar
@@ -314,7 +314,7 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
style="width:80%;height:auto"
>
Sidebar content
diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx
index 0c134816f4b..77f5fdabaf0 100644
--- a/src/components/resizable_container/resizable_panel.tsx
+++ b/src/components/resizable_container/resizable_panel.tsx
@@ -21,11 +21,7 @@ import { CommonProps } from '../common';
import { useEuiResizableContainerContext } from './context';
import { useGeneratedHtmlId } from '../../services';
import { EuiPanel } from '../panel';
-import {
- PanelPaddingSize,
- panelPaddingValues,
- _EuiPanelProps,
-} from '../panel/panel';
+import { PanelPaddingSize_Deprecated, _EuiPanelProps } from '../panel/panel';
import { useEuiI18n } from '../i18n';
import {
EuiResizablePanelController,
@@ -35,6 +31,15 @@ import {
} from './types';
import { EuiResizableCollapseButton } from './resizable_collapse_button';
+const panelPaddingValues = {
+ none: 0,
+ xs: 4,
+ s: 8,
+ m: 16,
+ l: 24,
+ xl: 32,
+};
+
export interface ToggleOptions {
'data-test-subj'?: string;
className?: string;
@@ -140,7 +145,7 @@ export interface EuiResizablePanelProps
* Padding to add directly to the wrapping `.euiResizablePanel` div
* Gives space around the actual panel.
*/
- wrapperPadding?: PanelPaddingSize;
+ wrapperPadding?: PanelPaddingSize_Deprecated;
}
const getPosition = (ref: HTMLDivElement) => {
diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index 65613f5edbd..d6cc5492ca0 100644
--- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
aria-labelledby="generated-id"
aria-live="assertive"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2 css-1l4493j-euiPanel-grow-m-m-plain"
data-popover-panel="true"
role="dialog"
style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
@@ -149,7 +149,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
aria-labelledby="generated-id"
aria-live="assertive"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2 css-1l4493j-euiPanel-grow-m-m-plain"
data-popover-panel="true"
role="dialog"
style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
@@ -256,7 +256,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
aria-labelledby="generated-id"
aria-live="assertive"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2 css-1l4493j-euiPanel-grow-m-m-plain"
data-popover-panel="true"
role="dialog"
style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
@@ -347,7 +347,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
aria-labelledby="generated-id"
aria-live="assertive"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2 css-1l4493j-euiPanel-grow-m-m-plain"
data-popover-panel="true"
role="dialog"
style="top: -22px; left: -16px; will-change: transform, opacity; z-index: 2000;"
@@ -444,7 +444,7 @@ exports[`EuiTourStep is rendered 1`] = `
aria-labelledby="generated-id"
aria-live="assertive"
aria-modal="true"
- class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2"
+ class="euiPanel euiPanel--plain euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2 css-1l4493j-euiPanel-grow-m-m-plain"
data-popover-panel="true"
role="dialog"
style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
diff --git a/src/global_styling/mixins/__snapshots__/_color.test.ts.snap b/src/global_styling/mixins/__snapshots__/_color.test.ts.snap
index bfc9f0d8047..9cc1b48cbc6 100644
--- a/src/global_styling/mixins/__snapshots__/_color.test.ts.snap
+++ b/src/global_styling/mixins/__snapshots__/_color.test.ts.snap
@@ -16,31 +16,18 @@ exports[`useEuiBackgroundColor mixin returns a calculated background version for
exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: warning 1`] = `"#fff9e8"`;
-exports[`useEuiBackgroundColorCSS hook returns the object of static background-color properties for each color 1`] = `
-Object {
- "accent": "
- background-color: #feedf5;
- ",
- "danger": "
- background-color: #f8e9e9;
- ",
- "plain": "
- background-color: #FFF;
- ",
- "primary": "
- background-color: #e6f1fa;
- ",
- "subdued": "
- background-color: #f8fafd;
- ",
- "success": "
- background-color: #e6f9f7;
- ",
- "transparent": "
- background-color: transparent;
- ",
- "warning": "
- background-color: #fff9e8;
- ",
-}
-`;
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: accent 1`] = `"background-color:#feedf5;;label:accent;"`;
+
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: danger 1`] = `"background-color:#f8e9e9;;label:danger;"`;
+
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: plain 1`] = `"background-color:#FFF;;label:plain;"`;
+
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: primary 1`] = `"background-color:#e6f1fa;;label:primary;"`;
+
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: subdued 1`] = `"background-color:#f8fafd;;label:subdued;"`;
+
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: success 1`] = `"background-color:#e6f9f7;;label:success;"`;
+
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: transparent 1`] = `"background-color:transparent;;label:transparent;"`;
+
+exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: warning 1`] = `"background-color:#fff9e8;;label:warning;"`;
diff --git a/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap b/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap
index bbc2635e8e7..c40faeb1fca 100644
--- a/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap
+++ b/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap
@@ -1,130 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side bottom 1`] = `
-Object {
- "l": "
- padding-block-end: 24px;
- ",
- "m": "
- padding-block-end: 16px;
- ",
- "none": null,
- "s": "
- padding-block-end: 8px;
- ",
- "xl": "
- padding-block-end: 32px;
- ",
- "xs": "
- padding-block-end: 4px;
- ",
-}
-`;
-
-exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side horizontal 1`] = `
-Object {
- "l": "
- padding-inline: 24px;
- ",
- "m": "
- padding-inline: 16px;
- ",
- "none": null,
- "s": "
- padding-inline: 8px;
- ",
- "xl": "
- padding-inline: 32px;
- ",
- "xs": "
- padding-inline: 4px;
- ",
-}
-`;
-
-exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side left 1`] = `
-Object {
- "l": "
- padding-inline-start: 24px;
- ",
- "m": "
- padding-inline-start: 16px;
- ",
- "none": null,
- "s": "
- padding-inline-start: 8px;
- ",
- "xl": "
- padding-inline-start: 32px;
- ",
- "xs": "
- padding-inline-start: 4px;
- ",
-}
-`;
-
-exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side right 1`] = `
-Object {
- "l": "
- padding-inline-end: 24px;
- ",
- "m": "
- padding-inline-end: 16px;
- ",
- "none": null,
- "s": "
- padding-inline-end: 8px;
- ",
- "xl": "
- padding-inline-end: 32px;
- ",
- "xs": "
- padding-inline-end: 4px;
- ",
-}
-`;
-
-exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side top 1`] = `
-Object {
- "l": "
- padding-block-start: 24px;
- ",
- "m": "
- padding-block-start: 16px;
- ",
- "none": null,
- "s": "
- padding-block-start: 8px;
- ",
- "xl": "
- padding-block-start: 32px;
- ",
- "xs": "
- padding-block-start: 4px;
- ",
-}
-`;
-
-exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side vertical 1`] = `
-Object {
- "l": "
- padding-block: 24px;
- ",
- "m": "
- padding-block: 16px;
- ",
- "none": null,
- "s": "
- padding-block: 8px;
- ",
- "xl": "
- padding-block: 32px;
- ",
- "xs": "
- padding-block: 4px;
- ",
-}
-`;
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: bottom, for each size: l 1`] = `"padding-block-end:24px;;label:l;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: bottom, for each size: m 1`] = `"padding-block-end:16px;;label:m;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: bottom, for each size: none 1`] = `null`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: bottom, for each size: s 1`] = `"padding-block-end:8px;;label:s;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: bottom, for each size: xl 1`] = `"padding-block-end:32px;;label:xl;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: bottom, for each size: xs 1`] = `"padding-block-end:4px;;label:xs;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: horizontal, for each size: l 1`] = `"padding-inline:24px;;label:l;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: horizontal, for each size: m 1`] = `"padding-inline:16px;;label:m;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: horizontal, for each size: none 1`] = `null`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: horizontal, for each size: s 1`] = `"padding-inline:8px;;label:s;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: horizontal, for each size: xl 1`] = `"padding-inline:32px;;label:xl;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: horizontal, for each size: xs 1`] = `"padding-inline:4px;;label:xs;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: left, for each size: l 1`] = `"padding-inline-start:24px;;label:l;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: left, for each size: m 1`] = `"padding-inline-start:16px;;label:m;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: left, for each size: none 1`] = `null`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: left, for each size: s 1`] = `"padding-inline-start:8px;;label:s;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: left, for each size: xl 1`] = `"padding-inline-start:32px;;label:xl;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: left, for each size: xs 1`] = `"padding-inline-start:4px;;label:xs;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: right, for each size: l 1`] = `"padding-inline-end:24px;;label:l;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: right, for each size: m 1`] = `"padding-inline-end:16px;;label:m;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: right, for each size: none 1`] = `null`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: right, for each size: s 1`] = `"padding-inline-end:8px;;label:s;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: right, for each size: xl 1`] = `"padding-inline-end:32px;;label:xl;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: right, for each size: xs 1`] = `"padding-inline-end:4px;;label:xs;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: top, for each size: l 1`] = `"padding-block-start:24px;;label:l;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: top, for each size: m 1`] = `"padding-block-start:16px;;label:m;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: top, for each size: none 1`] = `null`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: top, for each size: s 1`] = `"padding-block-start:8px;;label:s;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: top, for each size: xl 1`] = `"padding-block-start:32px;;label:xl;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: top, for each size: xs 1`] = `"padding-block-start:4px;;label:xs;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: vertical, for each size: l 1`] = `"padding-block:24px;;label:l;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: vertical, for each size: m 1`] = `"padding-block:16px;;label:m;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: vertical, for each size: none 1`] = `null`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: vertical, for each size: s 1`] = `"padding-block:8px;;label:s;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: vertical, for each size: xl 1`] = `"padding-block:32px;;label:xl;"`;
+
+exports[`useEuiPaddingCSS hook returns an object of Emotion padding properties for side: vertical, for each size: xs 1`] = `"padding-block:4px;;label:xs;"`;
exports[`useEuiPaddingSize returns a static padding value for each size l 1`] = `"24px"`;
diff --git a/src/global_styling/mixins/_color.test.ts b/src/global_styling/mixins/_color.test.ts
index b611d9e0d87..7aada60e9cf 100644
--- a/src/global_styling/mixins/_color.test.ts
+++ b/src/global_styling/mixins/_color.test.ts
@@ -25,10 +25,14 @@ describe('useEuiBackgroundColor mixin returns a calculated background version',
});
});
-describe('useEuiBackgroundColorCSS hook returns the object of static background-color properties', () => {
- it('for each color', () => {
- expect(
- testCustomHook(() => useEuiBackgroundColorCSS()).return
- ).toMatchSnapshot();
+describe('useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties', () => {
+ const colors = testCustomHook(useEuiBackgroundColorCSS).return as any;
+
+ describe('for each color:', () => {
+ Object.entries(colors).map(([color, cssObj]) => {
+ it(color, () => {
+ expect((cssObj as any).styles).toMatchSnapshot();
+ });
+ });
});
});
diff --git a/src/global_styling/mixins/_color.ts b/src/global_styling/mixins/_color.ts
index 48757ca9da3..5fd12430614 100644
--- a/src/global_styling/mixins/_color.ts
+++ b/src/global_styling/mixins/_color.ts
@@ -6,6 +6,7 @@
* Side Public License, v 1.
*/
+import { css } from '@emotion/react';
import { shade, tint, useEuiTheme, UseEuiTheme } from '../../services';
export const BACKGROUND_COLORS = [
@@ -48,28 +49,28 @@ export const useEuiBackgroundColor = (color: EuiBackgroundColor) => {
export const useEuiBackgroundColorCSS = () => {
return {
- transparent: `
+ transparent: css`
background-color: ${useEuiBackgroundColor('transparent')};
`,
- plain: `
+ plain: css`
background-color: ${useEuiBackgroundColor('plain')};
`,
- subdued: `
+ subdued: css`
background-color: ${useEuiBackgroundColor('subdued')};
`,
- accent: `
+ accent: css`
background-color: ${useEuiBackgroundColor('accent')};
`,
- primary: `
+ primary: css`
background-color: ${useEuiBackgroundColor('primary')};
`,
- success: `
+ success: css`
background-color: ${useEuiBackgroundColor('success')};
`,
- warning: `
+ warning: css`
background-color: ${useEuiBackgroundColor('warning')};
`,
- danger: `
+ danger: css`
background-color: ${useEuiBackgroundColor('danger')};
`,
};
diff --git a/src/global_styling/mixins/_padding.test.ts b/src/global_styling/mixins/_padding.test.ts
index cdeb11b529f..92b388c33f7 100644
--- a/src/global_styling/mixins/_padding.test.ts
+++ b/src/global_styling/mixins/_padding.test.ts
@@ -22,13 +22,18 @@ describe('useEuiPaddingSize returns a static padding value', () => {
});
});
-describe('useEuiPaddingCSS hook returns the object of static background-color properties', () => {
- describe('and each logical side', () => {
- LOGICAL_SIDES.forEach((side) => {
- it(side, () => {
- expect(
- testCustomHook(() => useEuiPaddingCSS(side)).return
- ).toMatchSnapshot();
+describe('useEuiPaddingCSS hook returns an object of Emotion padding properties', () => {
+ LOGICAL_SIDES.forEach((side) => {
+ describe(`for side: ${side},`, () => {
+ const sizes = testCustomHook(() => useEuiPaddingCSS(side)).return as any;
+
+ describe('for each size:', () => {
+ Object.entries(sizes).map(([size, cssObj]) => {
+ it(size, () => {
+ const output = cssObj ? (cssObj as any).styles : cssObj;
+ expect(output).toMatchSnapshot();
+ });
+ });
});
});
});
diff --git a/src/global_styling/mixins/_padding.ts b/src/global_styling/mixins/_padding.ts
index 2ec4199c9b8..48128668e68 100644
--- a/src/global_styling/mixins/_padding.ts
+++ b/src/global_styling/mixins/_padding.ts
@@ -6,6 +6,7 @@
* Side Public License, v 1.
*/
+import { css } from '@emotion/react';
import { useEuiTheme, UseEuiTheme } from '../../services/theme';
import { logicalSide, LogicalSides } from '../functions';
@@ -36,19 +37,19 @@ export const useEuiPaddingCSS = (side?: LogicalSides) => {
return {
none: null,
- xs: `
+ xs: css`
${property}: ${useEuiPaddingSize('xs')};
`,
- s: `
+ s: css`
${property}: ${useEuiPaddingSize('s')};
`,
- m: `
+ m: css`
${property}: ${useEuiPaddingSize('m')};
`,
- l: `
+ l: css`
${property}: ${useEuiPaddingSize('l')};
`,
- xl: `
+ xl: css`
${property}: ${useEuiPaddingSize('xl')};
`,
};
diff --git a/src/global_styling/mixins/_panel.scss b/src/global_styling/mixins/_panel.scss
index 64b071d1ad0..4eb0a5fb55a 100644
--- a/src/global_styling/mixins/_panel.scss
+++ b/src/global_styling/mixins/_panel.scss
@@ -3,22 +3,19 @@
@error 'A $selector must be provided to @mixin euiPanel().';
} @else {
#{$selector} {
- background-color: $euiColorEmptyShade;
- border: $euiBorderThin;
- border-radius: $euiBorderRadius;
flex-grow: 1;
&#{$selector}--flexGrowZero {
flex-grow: 0;
}
- &#{$selector}--noBorder {
- border: none;
+ &#{$selector}--hasShadow {
+ @include euiBottomShadowMedium;
}
- &#{$selector}--hasShadow {
- @include euiBottomShadowSmall;
+ &#{$selector}--hasBorder {
border: $euiBorderThin;
+ box-shadow: none;
}
&#{$selector}--isClickable {
@@ -34,13 +31,13 @@
&:hover,
&:focus {
- @include euiSlightShadowHover;
+ @include euiBottomShadow;
transform: translateY(-2px);
cursor: pointer;
}
}
- // Border Radius
+ // Border Radii
@each $modifier, $amount in $euiPanelBorderRadiusModifiers {
&#{$selector}--#{$modifier} {
border-radius: $amount;
@@ -48,9 +45,9 @@
}
// Background colors
- @each $modifier, $color in $euiPanelBackgroundColorModifiers {
+ @each $modifier, $amount in $euiPanelBackgroundColorModifiers {
&#{$selector}--#{$modifier} {
- background-color: $color;
+ background-color: $amount;
}
}
}
diff --git a/src/themes/amsterdam/global_styling/mixins/_index.scss b/src/themes/amsterdam/global_styling/mixins/_index.scss
index 65013f86744..6bbdb70d032 100644
--- a/src/themes/amsterdam/global_styling/mixins/_index.scss
+++ b/src/themes/amsterdam/global_styling/mixins/_index.scss
@@ -17,7 +17,6 @@
@import '../../../../global_styling/mixins/loading';
@import 'link';
@import '../../../../global_styling/mixins/panel';
-@import 'panel';
@import '../../../../global_styling/mixins/popover';
@import 'popover';
@import 'range';
diff --git a/src/themes/amsterdam/global_styling/mixins/_panel.scss b/src/themes/amsterdam/global_styling/mixins/_panel.scss
deleted file mode 100644
index 818b81f5582..00000000000
--- a/src/themes/amsterdam/global_styling/mixins/_panel.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-// Forcing Amsterdam to get the theme-appropriate value for $euiBorderRadius.
-$euiPanelBorderRadiusModifiers: (
- 'borderRadiusNone': 0,
- 'borderRadiusMedium': $euiBorderRadius,
-);
-
-@mixin euiPanel($selector) {
- @if variable-exists(selector) == false {
- @error 'A $selector must be provided to @mixin euiPanel().';
- } @else {
- #{$selector} {
- flex-grow: 1;
-
- &#{$selector}--flexGrowZero {
- flex-grow: 0;
- }
-
- &#{$selector}--hasShadow {
- @include euiBottomShadowMedium;
- }
-
- &#{$selector}--hasBorder {
- border: $euiBorderThin;
- box-shadow: none;
- }
-
- &#{$selector}--isClickable {
- // transition the shadow
- transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
- &:enabled { // This is a good selector for buttons since it doesn't exist on divs
- // in case of button wrapper which inherently is inline-block and no width
- display: block;
- width: 100%;
- text-align: left;
- }
-
- &:hover,
- &:focus {
- @include euiBottomShadow;
- transform: translateY(-2px);
- cursor: pointer;
- }
- }
-
- // Border Radii
- @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
- &#{$selector}--#{$modifier} {
- border-radius: $amount;
- }
- }
-
- // Background colors
- @each $modifier, $amount in $euiPanelBackgroundColorModifiers {
- &#{$selector}--#{$modifier} {
- background-color: $amount;
- }
- }
- }
- }
-}
diff --git a/upcoming_changelogs/5891.md b/upcoming_changelogs/5891.md
new file mode 100644
index 00000000000..33ac662cce6
--- /dev/null
+++ b/upcoming_changelogs/5891.md
@@ -0,0 +1,11 @@
+- Updated `useEuiPaddingCSS()` and `useEuiBackgroundColorCSS()` to render `css` blocks so consuming components render the key name in the class
+- Added padding sizes `xs` and `xl` to `EuiPanel`
+
+**Bug fixes**
+
+- Fixed `EuiSplitPanel` contained border radius by setting `overflow: hidden`
+- Fixed `EuiCallOut` description top margin when only child
+
+**CSS-in-JS conversions**
+
+- Converted `EuiPanel` to Emotion