Merge branch 'main' into emotion/react-date-picker

elastic · Aug 1, 2024 · 8ec68e3 · 8ec68e3
2 parents e5d56b2 + 4eaf404
commit 8ec68e3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/packages/eui/changelogs/upcoming/7935.md 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
diff --git 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;
         }
       `,

diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
@@ -50,9 +50,9 @@ const config: Config = {
           showReadingTime: true,
           editUrl: 'https://github.com/elastic/eui/tree/main/website/',
         },
-        googleTagManager: {
+        googleTagManager: googleTagManagerId && {
           containerId: googleTagManagerId,
-        }
+        },
       } satisfies Preset.Options,
     ],
   ],
@@ -104,6 +104,12 @@ const config: Config = {
           position: 'right',
           component: 'github',
         },
+        {
+          href: 'https://www.figma.com/community/file/964536385682658129',
+          label: 'Figma',
+          position: 'right',
+          component: 'figma',
+        },
       ],
     },
     footer: {