@@ -430,7 +598,7 @@ Array [
data-focus-lock-disabled="false"
>
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
index ff962f918f8..ce499601d5f 100644
--- a/src/components/flyout/_flyout.scss
+++ b/src/components/flyout/_flyout.scss
@@ -3,16 +3,18 @@
animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
}
-// The actual size of the X button in pixels is a bit fuzzy because of all the
-// button padding so there is some pixel pushing here.
.euiFlyout__closeButton {
background-color: transparentize($euiColorEmptyShade, .1);
position: absolute;
- right: $euiSizeL - 7px;
- top: $euiSizeL - 7px;
+ right: $euiSizeS;
+ top: $euiSizeS;
z-index: 3;
}
+.euiFlyoutBody__banner {
+ overflow-x: hidden;
+}
+
/**
* 1. Calculating the minimum width based on the screen takeover breakpoint
*/
@@ -46,6 +48,38 @@ $flyoutSizes: (
}
}
+@each $modifier, $paddingAmount in $euiFlyoutPaddingModifiers {
+ .euiFlyout--#{$modifier} {
+
+ .euiFlyoutHeader {
+ padding: $paddingAmount $paddingAmount 0;
+ }
+
+ .euiFlyoutHeader--hasBorder {
+ padding-bottom: $paddingAmount;
+ }
+
+ .euiFlyoutBody__overflowContent {
+ padding: $paddingAmount;
+ }
+
+ .euiFlyoutBody__banner .euiCallOut {
+ padding-left: $paddingAmount;
+ padding-right: $paddingAmount;
+ }
+
+ .euiFlyoutFooter {
+ @if $paddingAmount == $euiSizeL {
+ padding: ($paddingAmount / 1.5) $paddingAmount;
+ } @else if $paddingAmount == $euiSize {
+ padding: ($paddingAmount * .75) $paddingAmount;
+ } @else {
+ padding: $paddingAmount;
+ }
+ }
+ }
+}
+
@keyframes euiFlyout {
0% {
opacity: 0;
diff --git a/src/components/flyout/_flyout_body.scss b/src/components/flyout/_flyout_body.scss
index 4dfe1d3bf62..2bb36e64bd7 100644
--- a/src/components/flyout/_flyout_body.scss
+++ b/src/components/flyout/_flyout_body.scss
@@ -15,12 +15,5 @@
.euiFlyoutBody__banner .euiCallOut {
border: none; // Remove border from callout when it is a flyout banner
border-radius: 0; // Ensures no border-radius in all themes
- padding-left: $euiSizeL; // Align callout's content with flyout's title
- padding-right: $euiSizeL; // Align callout's content with flyout's title
}
-
- .euiFlyoutBody__overflowContent {
- padding: $euiSizeL;
- }
-
}
diff --git a/src/components/flyout/_flyout_footer.scss b/src/components/flyout/_flyout_footer.scss
index 1578b1f4a40..ea6a0cdbe96 100644
--- a/src/components/flyout/_flyout_footer.scss
+++ b/src/components/flyout/_flyout_footer.scss
@@ -1,5 +1,4 @@
.euiFlyoutFooter {
background: $euiColorLightestShade;
flex-grow: 0;
- padding: $euiSize $euiSizeL;
}
diff --git a/src/components/flyout/_flyout_header.scss b/src/components/flyout/_flyout_header.scss
index 823190405da..e0ab922f5e3 100644
--- a/src/components/flyout/_flyout_header.scss
+++ b/src/components/flyout/_flyout_header.scss
@@ -1,9 +1,7 @@
.euiFlyoutHeader {
flex-grow: 0;
- padding: $euiSizeL $euiSizeXXL 0 $euiSizeL;
}
.euiFlyoutHeader--hasBorder {
- padding-bottom: $euiSizeL;
border-bottom: $euiBorderThin;
}
diff --git a/src/components/flyout/_variables.scss b/src/components/flyout/_variables.scss
index 0bbf385cb3d..cbfe07c7e3b 100644
--- a/src/components/flyout/_variables.scss
+++ b/src/components/flyout/_variables.scss
@@ -1 +1,8 @@
$euiFlyoutBorder: $euiBorderThin !default;
+
+$euiFlyoutPaddingModifiers: (
+ 'paddingNone': 0,
+ 'paddingSmall': $euiSizeS,
+ 'paddingMedium': $euiSize,
+ 'paddingLarge': $euiSizeL
+) !default;
\ No newline at end of file
diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
index 60351d44566..340c3cf96ec 100644
--- a/src/components/flyout/flyout.test.tsx
+++ b/src/components/flyout/flyout.test.tsx
@@ -21,7 +21,7 @@ import React from 'react';
import { render, mount } from 'enzyme';
import { requiredProps, takeMountedSnapshot } from '../../test';
-import { EuiFlyout, EuiFlyoutSize } from './flyout';
+import { EuiFlyout, EuiFlyoutSize, PADDING_SIZES } from './flyout';
jest.mock('../overlay_mask', () => ({
EuiOverlayMask: ({ headerZindexLocation, ...props }: any) => (
@@ -94,6 +94,20 @@ describe('EuiFlyout', () => {
});
});
+ describe('paddingSize', () => {
+ PADDING_SIZES.forEach((paddingSize) => {
+ it(`${paddingSize} is rendered`, () => {
+ const component = mount(
+ {}} paddingSize={paddingSize} />
+ );
+
+ expect(
+ takeMountedSnapshot(component, { hasArrayOutput: true })
+ ).toMatchSnapshot();
+ });
+ });
+ });
+
describe('max width', () => {
test('can be set to a default', () => {
const component = mount(
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index af48f2a10e6..f27da3d368f 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -28,7 +28,7 @@ import classnames from 'classnames';
import { keys, EuiWindowEvent } from '../../services';
-import { CommonProps } from '../common';
+import { CommonProps, keysOf } from '../common';
import { EuiFocusTrap } from '../focus_trap';
import { EuiOverlayMask, EuiOverlayMaskProps } from '../overlay_mask';
import { EuiButtonIcon } from '../button';
@@ -42,6 +42,17 @@ const sizeToClassNameMap: { [size in EuiFlyoutSize]: string } = {
l: 'euiFlyout--large',
};
+const paddingSizeToClassNameMap = {
+ none: 'euiFlyout--paddingNone',
+ s: 'euiFlyout--paddingSmall',
+ m: 'euiFlyout--paddingMedium',
+ l: 'euiFlyout--paddingLarge',
+};
+
+export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
+
+export type EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
+
export interface EuiFlyoutProps
extends CommonProps,
HTMLAttributes {
@@ -50,6 +61,10 @@ export interface EuiFlyoutProps
* Defines the width of the panel
*/
size?: EuiFlyoutSize;
+ /**
+ * Customize the padding around the content of the flyout header, body and footer
+ */
+ paddingSize?: EuiFlyoutPaddingSize;
/**
* Hides the default close button. You must provide another close button somewhere within the flyout.
*/
@@ -87,6 +102,7 @@ export const EuiFlyout: FunctionComponent = ({
onClose,
ownFocus = false,
size = 'm',
+ paddingSize = 'l',
closeButtonAriaLabel,
maxWidth = false,
style,
@@ -120,6 +136,7 @@ export const EuiFlyout: FunctionComponent = ({
const classes = classnames(
'euiFlyout',
sizeToClassNameMap[size!],
+ paddingSizeToClassNameMap[paddingSize],
widthClassName,
className
);