[UI Refresh] Reduce default spacing values across UI components

packages/eui/changelogs/upcoming/9132.md

@@ -0,0 +1,6 @@
+- Updated EuiFlexGroup's `gutterSize` from `l` to `m`
+- Updated EuiSpacer's `size` from `l` to `m`
+- Updated EuiHorizontalRule's `margin` from `l` to `m`
+- Updated EuiPageHeader's tab `size` from `l` to `m`
+- Updated EuiEmptyPrompt's spacer `size` between title and text from `m` to `s`
+- Updated EuiSearchBar's `gutterSize` from `m` to `s`

packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap

@@ -427,7 +427,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
                     class="euiColorPalettePicker__item"
                   >
                     <div
-                      class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
+                      class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
                     >
                       <div
                         class="euiFlexItem emotion-euiFlexItem-grow-1"
@@ -495,7 +495,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
                     class="euiColorPalettePicker__item"
                   >
                     <div
-                      class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
+                      class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
                     >
                       <div
                         class="euiFlexItem emotion-euiFlexItem-grow-1"
@@ -543,7 +543,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
                     class="euiColorPalettePicker__item"
                   >
                     <div
-                      class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
+                      class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
                     >
                       <div
                         class="euiFlexItem emotion-euiFlexItem-grow-1"

packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
         Title
       </h2>
       <div
-        class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
       />
       <div
         class="euiText emotion-euiText-m-euiTextColor-subdued"

packages/eui/src/components/empty_prompt/empty_prompt.tsx

@@ -186,7 +186,7 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
         {iconNode}
         <div className="euiEmptyPrompt__content" css={contentStyles}>
           {title && <EuiTitle size={titleSize}>{title}</EuiTitle>}
-          {title && body && <EuiSpacer size="m" />}
+          {title && body && <EuiSpacer size="s" />}
           {body && <EuiText color="subdued">{body}</EuiText>}
           {actionsNode && (body || title) && <EuiSpacer size="l" />}
           {actionsNode}

packages/eui/src/components/flex/__snapshots__/flex_group.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiFlexGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlexGroup testClass1 testClass2 emotion-euiFlexGroup-responsive-l-flexStart-stretch-row-euiTestCss"
+  class="euiFlexGroup testClass1 testClass2 emotion-euiFlexGroup-responsive-m-flexStart-stretch-row-euiTestCss"
   data-test-subj="test subject string"
 >
   <h2>
@@ -14,55 +14,55 @@ exports[`EuiFlexGroup is rendered 1`] = `
 
 exports[`EuiFlexGroup props alignItems baseline is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-baseline-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-baseline-row"
 />
 `;
 
 exports[`EuiFlexGroup props alignItems center is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-center-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-center-row"
 />
 `;
 
 exports[`EuiFlexGroup props alignItems flexEnd is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-flexEnd-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-flexEnd-row"
 />
 `;
 
 exports[`EuiFlexGroup props alignItems flexStart is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-flexStart-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-flexStart-row"
 />
 `;
 
 exports[`EuiFlexGroup props alignItems stretch is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props direction column is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-column"
+  class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-column"
 />
 `;
 
 exports[`EuiFlexGroup props direction columnReverse is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-columnReverse"
+  class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-columnReverse"
 />
 `;
 
 exports[`EuiFlexGroup props direction row is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props direction rowReverse is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-rowReverse"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-rowReverse"
 />
 `;
 
@@ -104,60 +104,60 @@ exports[`EuiFlexGroup props gutterSize xs is rendered 1`] = `
 
 exports[`EuiFlexGroup props justifyContent center is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-center-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-center-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props justifyContent flexEnd is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexEnd-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexEnd-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props justifyContent flexStart is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props justifyContent spaceAround is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceAround-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceAround-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props justifyContent spaceBetween is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props justifyContent spaceEvenly is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceEvenly-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceEvenly-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props responsive false is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props responsive true is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props wrap false is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
 />
 `;
 
 exports[`EuiFlexGroup props wrap true is rendered 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-row"
+  class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-m-flexStart-stretch-row"
 />
 `;

packages/eui/src/components/flex/flex_group.tsx

@@ -81,7 +81,7 @@ const EuiFlexGroupInternal = <TComponent extends ElementType>(
   {
     className,
     component = 'div' as TComponent,
-    gutterSize = 'l',
+    gutterSize = 'm',
     alignItems = 'stretch',
     responsive = true,
     justifyContent = 'flexStart',

packages/eui/src/components/flyout/flyout_menu.stories.tsx

@@ -10,6 +10,7 @@ import React, { useState } from 'react';
 
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
 import { EuiButton } from '../button';
 import { EuiSpacer } from '../spacer';
 import { EuiText } from '../text';
@@ -133,5 +134,10 @@ const MenuBarFlyout = (args: Args) => {
 
 export const MenuBarExample: StoryObj<Args> = {
   name: 'Playground',
+  parameters: {
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
   render: (args) => <MenuBarFlyout {...args} />,
 };

packages/eui/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`EuiHeaderAlert renders action 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
   >
     <div
       class="euiFlexItem emotion-euiFlexItem-grow-1"
@@ -47,7 +47,7 @@ exports[`EuiHeaderAlert renders badge 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
   >
     <div
       class="euiFlexItem emotion-euiFlexItem-grow-1"
@@ -97,7 +97,7 @@ exports[`EuiHeaderAlert renders text 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
   >
     <div
       class="euiFlexItem emotion-euiFlexItem-grow-1"
@@ -133,7 +133,7 @@ exports[`EuiHeaderAlert renders title and date 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
   >
     <div
       class="euiFlexItem emotion-euiFlexItem-grow-1"

packages/eui/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiHorizontalRule is rendered 1`] = `
 <hr
   aria-label="aria-label"
-  class="euiHorizontalRule testClass1 testClass2 emotion-euiHorizontalRule-full-l-euiTestCss"
+  class="euiHorizontalRule testClass1 testClass2 emotion-euiHorizontalRule-full-m-euiTestCss"
   data-test-subj="test subject string"
 />
 `;

packages/eui/src/components/horizontal_rule/horizontal_rule.tsx

@@ -32,7 +32,7 @@ export interface EuiHorizontalRuleProps
 export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
   className,
   size = 'full',
-  margin = 'l',
+  margin = 'm',
   ...rest
 }) => {
   const classes = classNames('euiHorizontalRule', className);

packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap

@@ -289,7 +289,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           Page title
         </h1>
         <div
-          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
         />
         <div
           class="euiText emotion-euiText-constrainedWidth-m"
@@ -299,7 +299,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           </p>
         </div>
         <div
-          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
         />
         <p>
           Anything
@@ -330,11 +330,11 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
       class="euiPageHeaderContent__bottom"
     >
       <div
-        class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
       />
       <div
         aria-label="aria-label"
-        class="euiTabs testClass1 testClass2 emotion-euiTabs-l-euiTestCss"
+        class="euiTabs testClass1 testClass2 emotion-euiTabs-m-euiTestCss"
         data-test-subj="test subject string"
         role="tablist"
       >
@@ -346,7 +346,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 1
           </span>
@@ -359,7 +359,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 2
           </span>