[EuiFlyout] Add paddingSize prop

src-docs/src/views/flyout/flyout_example.js

@@ -29,6 +29,10 @@ import FlyoutLarge from './flyout_large';
 const flyoutLargeSource = require('!!raw-loader!./flyout_large');
 const flyoutLargeHtml = renderToHtml(FlyoutLarge);
 
+import FlyoutPaddingMedium from './flyout_padding_medium';
+const FlyoutPaddingMediumSource = require('!!raw-loader!./flyout_padding_medium');
+const FlyoutPaddingMediumHtml = renderToHtml(FlyoutPaddingMedium);
+
 import FlyoutMaxWidth from './flyout_max_width';
 const flyoutMaxWidthSource = require('!!raw-loader!./flyout_max_width');
 const flyoutMaxWidthHtml = renderToHtml(FlyoutMaxWidth);
@@ -79,6 +83,20 @@ const flyoutSmallSnippet = `<EuiFlyout size="s" onClose={closeFlyout}>
 </EuiFlyout>
 `;
 
+const flyoutMediumPaddingSnippet = `<EuiFlyout paddingSize="m" onClose={closeFlyout}>
+  <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
+    <EuiTitle>
+      <h2 id={flyoutHeadingId}>
+        <!-- Defaults to medium size. Change the heading level based on your context. -->
+      </h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <!-- Flyout body content -->
+  </EuiFlyoutBody>
+</EuiFlyout>
+`;
+
 const flyoutMaxWidthSnippet = `<EuiFlyout ownFocus maxWidth={448} onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
@@ -245,6 +263,32 @@ export const FlyoutExample = {
       snippet: flyoutLargeSnippet,
       demo: <FlyoutLarge />,
     },
+    {
+      title: 'Flyout padding',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: FlyoutPaddingMediumSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: FlyoutPaddingMediumHtml,
+        },
+      ],
+      text: (
+        <p>
+          All the inner flyout components inherit their{' '}
+          <EuiCode>padding</EuiCode> from the wrapping{' '}
+          <strong>EuiFlyout</strong> component. This ensures that all the
+          horizontal edges line up no matter the <EuiCode>paddingSize</EuiCode>.
+          When using the <EuiCode>{'"none"'}</EuiCode> size, you will need to
+          accomodate your content with some other way of creating distance to
+          the edges of the flyout.
+        </p>
+      ),
+      snippet: flyoutMediumPaddingSnippet,
+      demo: <FlyoutPaddingMedium />,
+    },
     {
       title: 'Max width',
       source: [

src-docs/src/views/flyout/flyout_padding_medium.js

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+
+import {
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiButtonGroup,
+  EuiButton,
+  EuiFormRow,
+  EuiTitle,
+} from '../../../../src/components';
+
+export default () => {
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const [paddingSize, setPaddingSize] = useState('l');
+  const [paddingSizeName, setPaddingSizeName] = useState('large');
+
+  const sizes = [
+    {
+      id: 'none',
+      label: 'None',
+    },
+    {
+      id: 's',
+      label: 'Small',
+    },
+    {
+      id: 'm',
+      label: 'Medium',
+    },
+    {
+      id: 'l',
+      label: 'Large',
+    },
+  ];
+
+  const closeFlyout = () => setIsFlyoutVisible(false);
+
+  const showFlyout = () => setIsFlyoutVisible(true);
+
+  const callOut = (
+    <EuiCallOut
+      title={`The banner left and right padding is ${paddingSizeName} to match that of flyout`}
+    />
+  );
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout
+        ownFocus
+        onClose={closeFlyout}
+        paddingSize={paddingSize}
+        id="flyoutMediumPadding"
+        aria-labelledby="flyoutMediumPaddingTitle">
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id="flyoutMediumPaddingTitle">
+              A flyout with a {paddingSizeName} padding
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody banner={callOut}>
+          <EuiFormRow label="Change the paddingSize">
+            <EuiButtonGroup
+              legend="Flyout panel size"
+              color="primary"
+              size="s"
+              options={sizes}
+              idSelected={paddingSize}
+              onChange={(id) => {
+                const newName = sizes
+                  .find((size) => size.id === id)
+                  .label.toLowerCase();
+                setPaddingSize(id);
+                setPaddingSizeName(newName);
+              }}
+            />
+          </EuiFormRow>
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                iconType="cross"
+                onClick={closeFlyout}
+                flush="left">
+                Close
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton onClick={closeFlyout} fill>
+                Save
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+  return (
+    <>
+      <EuiButton
+        onClick={showFlyout}
+        aria-controls="flyoutMediumPadding"
+        aria-expanded={isFlyoutVisible}
+        aria-haspopup="true"
+        aria-label="Show padding size flyout">
+        Show flyout to test padding sizes
+      </EuiButton>
+      {flyout}
+    </>
+  );
+};