From 209989934e94026eba393a10f3b169fc3119648c Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 31 Jul 2024 09:20:59 -0700
Subject: [PATCH 1/3] [REVERT ME] Bug repro

---
 .../src/components/empty_prompt/empty_prompt.stories.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx b/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx
index db5e316f1e5..30dfebbfd41 100644
--- a/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx
+++ b/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx
@@ -17,6 +17,7 @@ import { EuiImage } from '../image';
 import { EuiPageTemplate } from '../page_template';
 
 import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt';
+import { EuiThemeProvider } from '../../services';
 
 const meta: Meta<EuiEmptyPromptProps> = {
   title: 'Display/EuiEmptyPrompt',
@@ -61,9 +62,11 @@ export const Playground: Story = {
 
 export const PageTemplate: Story = {
   render: ({ ...args }) => (
-    <EuiPageTemplate minHeight="0">
-      <EuiPageTemplate.EmptyPrompt {...args} />
-    </EuiPageTemplate>
+    <EuiThemeProvider modify={{ breakpoint: { xxl: 2000 } }}>
+      <EuiPageTemplate minHeight="0">
+        <EuiPageTemplate.EmptyPrompt {...args} />
+      </EuiPageTemplate>
+    </EuiThemeProvider>
   ),
   args: {
     title: <h2>Create your first visualization</h2>,

From 35c8f84c89313d818a4fc49cfec0234f72242754 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 31 Jul 2024 08:41:38 -0700
Subject: [PATCH 2/3] Update EuiEmptyPrompt to work correctly with custom
 larger breakpoints

---
 .../components/empty_prompt/empty_prompt.styles.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts b/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts
index 81a18d02ef9..07da2e3dddd 100644
--- a/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts
+++ b/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import {
-  euiBreakpoint,
+  euiMinBreakpoint,
   euiPaddingSize,
   euiBorderColor,
   logicalCSS,
@@ -45,14 +45,14 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
       text-align: center;
       margin: auto;
 
-      ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'l')} {
         /* the width becomes as wide as necessary to contain all of its contents */
         ${logicalCSS('max-width', 'max-content')}
       }
     `,
     vertical: css``,
     horizontal: css`
-      ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'l')} {
         justify-content: flex-start;
         text-align: start;
       }
@@ -68,7 +68,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
       horizontal: css`
         align-items: center;
 
-        ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} {
+        ${euiMinBreakpoint(euiThemeContext, 'l')} {
           flex-direction: row-reverse;
         }
       `,
@@ -83,7 +83,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
         margin: auto;
       `,
       horizontal: css`
-        ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} {
+        ${euiMinBreakpoint(euiThemeContext, 'l')} {
           padding-block: ${euiTheme.size.l};
           padding-inline: 0;
         }
@@ -105,7 +105,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('margin-bottom', euiTheme.size.base)}
       `,
       horizontal: css`
-        ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} {
+        ${euiMinBreakpoint(euiThemeContext, 'l')} {
           ${logicalCSS('min-width', '40%')}
           ${logicalCSS('max-width', '50%')}
 
@@ -123,7 +123,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
       euiEmptyPrompt__actions: css``,
       vertical: css``,
       horizontal: css`
-        ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} {
+        ${euiMinBreakpoint(euiThemeContext, 'l')} {
           justify-content: flex-start;
         }
       `,

From 5e96fd4683998a89630132008c766d4258081480 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 31 Jul 2024 09:22:17 -0700
Subject: [PATCH 3/3] changelog

---
 packages/eui/changelogs/upcoming/7935.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/7935.md

diff --git a/packages/eui/changelogs/upcoming/7935.md b/packages/eui/changelogs/upcoming/7935.md
new file mode 100644
index 00000000000..b760e3d3d3e
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7935.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiEmptyPrompt` to correctly collapse and expand responsively when used with custom breakpoints larger than the default `xl` breakpoint