From 8642c8a31a9e4a7f9646dda43dedc008e3ca4f39 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 13 Jun 2022 11:23:44 -0500
Subject: [PATCH] [EuiCallout] Set `grow={false}` (#5963)

* set grow=false on euicallout euipanel

* update snapshots

* CL

* Update upcoming_changelogs/5963.md

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../__snapshots__/call_out.test.tsx.snap      | 28 +++++++++----------
 src/components/call_out/call_out.tsx          |  1 +
 .../form/__snapshots__/form.test.tsx.snap     |  6 ++--
 upcoming_changelogs/5963.md                   |  4 +++
 4 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 upcoming_changelogs/5963.md

diff --git a/src/components/call_out/__snapshots__/call_out.test.tsx.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap
index 29fe0926977..e2c77a11df4 100644
--- 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
index e62c69524d4..0e6c09613db 100644
--- 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
index cc709ad9840..6abb8afb3a3 100644
--- 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
new file mode 100644
index 00000000000..5280ae218b6
--- /dev/null
+++ b/upcoming_changelogs/5963.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiCallOut` from consuming all available vertical height with `flex-grow`
+