[EuiCallout] Set grow={false} (#5963)

* set grow=false on euicallout euipanel * update snapshots * CL * Update upcoming_changelogs/5963.md Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Caroline Horn <[email protected]>
elastic · Jun 13, 2022 · 8642c8a · 8642c8a
1 parent 07128dc
commit 8642c8a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/src/components/call_out/__snapshots__/call_out.test.tsx.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiCallOut is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary testClass1 testClass2 css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary testClass1 testClass2 css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
   data-test-subj="test subject string"
 >
   <div
@@ -16,79 +16,79 @@ exports[`EuiCallOut is rendered 1`] = `
 
 exports[`EuiCallOut props color danger is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger css-1u13ow-euiPanel-grow-none-m-danger-euiCallOut"
+  class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger css-j9niqn-euiPanel-none-m-danger-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color primary is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color success is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--success euiPanel--paddingMedium euiCallOut euiCallOut--success css-1ga2k31-euiPanel-grow-none-m-success-euiCallOut"
+  class="euiPanel euiPanel--success euiPanel--paddingMedium euiCallOut euiCallOut--success css-1kpm4pz-euiPanel-none-m-success-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color warning is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCallOut euiCallOut--warning css-1fure2l-euiPanel-grow-none-m-warning-euiCallOut"
+  class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCallOut euiCallOut--warning css-1yqbqzs-euiPanel-none-m-warning-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h1 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h2 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h3 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h4 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h5 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h6 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading p is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props iconType is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props title is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary css-1lbbq49-euiPanel-none-m-primary-euiCallOut"
 >
   <p
     class="euiTitle euiCallOutHeader__title css-1ps1ss5-euiTitle-xs-euiCallOutHeader-primary"

diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
@@ -119,6 +119,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
         paddingSize={size === 's' ? 's' : 'm'}
         className={classes}
         panelRef={ref}
+        grow={false}
         {...rest}
       >
         {header}

diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`EuiForm renders with error callout when isInvalid is "true" 1`] = `
 >
   <div
     aria-live="assertive"
-    class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger euiForm__errors css-1u13ow-euiPanel-grow-none-m-danger-euiCallOut"
+    class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger euiForm__errors css-j9niqn-euiPanel-none-m-danger-euiCallOut"
     role="alert"
     tabindex="-1"
   >
@@ -45,7 +45,7 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has mul
 >
   <div
     aria-live="assertive"
-    class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger euiForm__errors css-1u13ow-euiPanel-grow-none-m-danger-euiCallOut"
+    class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger euiForm__errors css-j9niqn-euiPanel-none-m-danger-euiCallOut"
     role="alert"
     tabindex="-1"
   >
@@ -86,7 +86,7 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has one
 >
   <div
     aria-live="assertive"
-    class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger euiForm__errors css-1u13ow-euiPanel-grow-none-m-danger-euiCallOut"
+    class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger euiForm__errors css-j9niqn-euiPanel-none-m-danger-euiCallOut"
     role="alert"
     tabindex="-1"
   >

diff --git a/upcoming_changelogs/5963.md b/upcoming_changelogs/5963.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiCallOut` from consuming all available vertical height with `flex-grow`
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		Bug fixes

		- Fixed `EuiCallOut` from consuming all available vertical height with `flex-grow`