[CSS-in-JS] Fix EUI media queries to more flexibly account for custom…

… breakpoints (#6431) * Create `euiMinBreakpoint` and `euiMaxBreakpoint` utilities - for better future-proofing for consumers who add custom (e.g.) `xxl`/`xxs` breakpoints * [Docs] Add docs example * Update simple components to use new min/max breakpoint util * [REVERT ME] Test observability app use case w/ flyouts - set screen size to 2400 px to see bug * [EuiFlyout] Fix responsive media queries to work with custom breakpoints + query organization - move smaller/mobile styles before larger desktop styles * changelog * wording is hard * Revert "[REVERT ME] Test observability app use case w/ flyouts" This reverts commit aff41f9. * Fix incorrect mobile margins on `responsiveColumn` `EuiDescriptionList`s * [EuiToastList] Clean up unnecessarily convoluted CSS - base padding is already set on the base CSS, so using min-width means we don't have 2 unnecessary overrides - use nesting instead of repeating :not:empty selectors - not even sure what is going on with that euiToastWidth math
elastic · Nov 23, 2022 · 4e77129 · 4e77129
1 parent bf20f2a
commit 4e77129
Show file tree

Hide file tree

Showing 18 changed files with 286 additions and 83 deletions.
diff --git a/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx b/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx
@@ -5,6 +5,8 @@ import {
   EuiCode,
   EuiText,
   useEuiBreakpoint,
+  useEuiMaxBreakpoint,
+  useEuiMinBreakpoint,
   useCurrentEuiBreakpoint,
   useIsWithinBreakpoints,
   useIsWithinMaxBreakpoint,
@@ -110,19 +112,10 @@ useIsWithinMinBreakpoint('s')`}
         title={<code>useEuiBreakpoint(sizes[])</code>}
         type="hook"
         description={
-          <>
-            <p>
-              Given an array of breakpoint keys, this hook generates a CSS media
-              query string based on the minimum width and maximum width
-              provided.
-            </p>
-            <p>
-              You can also create media queries with a{' '}
-              <EuiCode>(max-width)</EuiCode> only or{' '}
-              <EuiCode>(min-width)</EuiCode> only by utilizing the{' '}
-              <EuiCode>xs</EuiCode> and <EuiCode>xl</EuiCode> arguments.
-            </p>
-          </>
+          <p>
+            Given an array of screen sizes, this hook generates a CSS media
+            query string based on the minimum and maximum screen sizes provided.
+          </p>
         }
         example={
           <p
@@ -157,6 +150,46 @@ useIsWithinMinBreakpoint('s')`}
   }
   \${useEuiBreakpoint(['l', 'xl'])} {
     color: green;
+  }`}
+        snippetLanguage="emotion"
+      />
+
+      <ThemeExample
+        title={
+          <>
+            <code>useEuiMaxBreakpoint(size)</code>
+            <br />
+            <code>useEuiMinBreakpoint(size)</code>
+          </>
+        }
+        type="hook"
+        description={
+          <p>
+            Given a single breakpoint key, these hooks generate a min or max CSS
+            media query string based on the single breakpoint dimension
+            returned.
+          </p>
+        }
+        example={
+          <p
+            css={css`
+              ${useEuiMaxBreakpoint('m')} {
+                color: ${euiTheme.colors.dangerText};
+              }
+              ${useEuiMinBreakpoint('m')} {
+                color: ${euiTheme.colors.successText};
+              }
+            `}
+          >
+            This text is red on screens below the medium breakpoint, and green
+            on screens above.
+          </p>
+        }
+        snippet={`\${useEuiMaxBreakpoint('m')} {
+    color: red;
+  }
+  \${useEuiMinBreakpoint('m')} {
+    color: green;
   }`}
         snippetLanguage="emotion"
       />

diff --git a/src/components/description_list/description_list.styles.ts b/src/components/description_list/description_list.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalTextAlignCSS, euiBreakpoint } from '../../global_styling';
+import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => {
@@ -29,7 +29,7 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Responsive columns behave as a row on breakpoints xs-s
     responsiveColumn: css`
-      ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'm')} {
         ${columnDisplay}
       }
     `,

diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts
@@ -9,7 +9,8 @@
 import { css } from '@emotion/react';
 import {
   euiFontSize,
-  euiBreakpoint,
+  euiMaxBreakpoint,
+  euiMinBreakpoint,
   logicalTextAlignCSS,
   logicalCSS,
 } from '../../global_styling';
@@ -35,11 +36,11 @@ export const euiDescriptionListDescriptionStyles = (
       ${columnDisplay}
     `,
     responsiveColumn: css`
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         ${logicalCSS('width', '100%')}
         padding: 0;
       }
-      ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'm')} {
         ${columnDisplay}
       }
     `,

diff --git a/src/components/description_list/description_list_description.tsx b/src/components/description_list/description_list_description.tsx
@@ -9,7 +9,7 @@
 import React, { HTMLAttributes, FunctionComponent, useContext } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, useIsWithinMinBreakpoint } from '../../services';
 import { euiDescriptionListDescriptionStyles } from './description_list_description.styles';
 import { EuiDescriptionListContext } from './description_list_context';
 
@@ -26,6 +26,7 @@ export const EuiDescriptionListDescription: FunctionComponent<EuiDescriptionList
   const { type, textStyle, compressed, align, gutterSize } = useContext(
     EuiDescriptionListContext
   );
+  const showResponsiveColumns = useIsWithinMinBreakpoint('m');
 
   const theme = useEuiTheme();
   const styles = euiDescriptionListDescriptionStyles(theme);
@@ -47,7 +48,9 @@ export const EuiDescriptionListDescription: FunctionComponent<EuiDescriptionList
       if (align === 'center') {
         conditionalStyles.push(styles.left);
       }
-      conditionalStyles.push(styles[gutterSize]);
+      if (type === 'column' || showResponsiveColumns) {
+        conditionalStyles.push(styles[gutterSize]);
+      }
       break;
   }
 

diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts
@@ -11,7 +11,8 @@ import {
   euiFontSize,
   euiTextBreakWord,
   logicalTextAlignCSS,
-  euiBreakpoint,
+  euiMaxBreakpoint,
+  euiMinBreakpoint,
   logicalCSS,
 } from '../../global_styling';
 import { tint, UseEuiTheme } from '../../services';
@@ -35,11 +36,11 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => {
       ${columnDisplay}
     `,
     responsiveColumn: css`
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         ${logicalCSS('width', '100%')}
         padding: 0;
       }
-      ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'm')} {
         ${columnDisplay}
       }
     `,

diff --git a/src/components/flex/flex_grid.styles.ts b/src/components/flex/flex_grid.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiBreakpoint } from '../../global_styling';
+import { euiMaxBreakpoint } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 // Note: the only way to get column direction working with `display: grid`
@@ -23,7 +23,7 @@ export const euiFlexGridStyles = (
       display: grid;
     `,
     responsive: css`
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         grid-template-columns: repeat(1, 1fr);
         grid-auto-flow: row;
       }

diff --git a/src/components/flex/flex_group.styles.ts b/src/components/flex/flex_group.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiBreakpoint, logicalCSS } from '../../global_styling';
+import { euiMaxBreakpoint, logicalCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 export const euiFlexGroupStyles = (euiThemeContext: UseEuiTheme) => {
@@ -19,7 +19,7 @@ export const euiFlexGroupStyles = (euiThemeContext: UseEuiTheme) => {
       flex-grow: 1; // Grow nested flex-groups by default
     `,
     responsive: css`
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         flex-wrap: wrap;
 
         & > .euiFlexItem {

diff --git a/src/components/flyout/flyout.styles.ts b/src/components/flyout/flyout.styles.ts
@@ -10,7 +10,8 @@ import { css, keyframes } from '@emotion/react';
 import { _EuiFlyoutPaddingSize, EuiFlyoutSize } from './flyout';
 import {
   euiCanAnimate,
-  euiBreakpoint,
+  euiMaxBreakpoint,
+  euiMinBreakpoint,
   logicalCSS,
   mathWithUnits,
 } from '../../global_styling';
@@ -66,22 +67,22 @@ export const euiFlyoutCloseButtonStyles = (euiThemeContext: UseEuiTheme) => {
       right: css`
         ${logicalCSS('left', 0)}
 
-        ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
-          transform: translateX(calc(-100% - ${euiTheme.size.l})) !important;
-        }
-        ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        ${euiMaxBreakpoint(euiThemeContext, 'm')} {
           transform: translateX(calc(-100% - ${euiTheme.size.xs})) !important;
         }
+        ${euiMinBreakpoint(euiThemeContext, 'm')} {
+          transform: translateX(calc(-100% - ${euiTheme.size.l})) !important;
+        }
       `,
       left: css`
         ${logicalCSS('right', 0)}
 
-        ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
-          transform: translateX(calc(100% + ${euiTheme.size.l})) !important;
-        }
-        ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        ${euiMaxBreakpoint(euiThemeContext, 'm')} {
           transform: translateX(calc(100% + ${euiTheme.size.xs})) !important;
         }
+        ${euiMinBreakpoint(euiThemeContext, 'm')} {
+          transform: translateX(calc(100% + ${euiTheme.size.l})) !important;
+        }
       `,
     },
   };
@@ -107,7 +108,7 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
         outline: none;
       }
 
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         // 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page
         // 2. If a custom maxWidth is set, we need to override it.
         ${logicalCSS('max-width', '90vw !important')}
@@ -219,14 +220,14 @@ const composeFlyoutSizing = (
   return `
     ${logicalCSS('max-width', flyoutSizes[size].max)}
 
-    ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
-      ${logicalCSS('min-width', flyoutSizes[size].min)}
-      ${logicalCSS('width', flyoutSizes[size].width)}
-    }
-    ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+    ${euiMaxBreakpoint(euiThemeContext, 'm')} {
       ${logicalCSS('min-width', 0)}
       ${logicalCSS('width', flyoutSizes[size].min)}
     }
+    ${euiMinBreakpoint(euiThemeContext, 'm')} {
+      ${logicalCSS('min-width', flyoutSizes[size].min)}
+      ${logicalCSS('width', flyoutSizes[size].width)}
+    }
   `;
 };
 

diff --git a/src/components/image/image_wrapper.styles.ts b/src/components/image/image_wrapper.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import {
-  euiBreakpoint,
+  euiMinBreakpoint,
   logicalCSS,
   logicalTextAlignCSS,
   logicalSide,
@@ -49,15 +49,15 @@ export const euiImageWrapperStyles = (euiThemeContext: UseEuiTheme) => {
     // 1: Logical properties/values in `float` is currently not yet supported by all browsers w/o flags
     // @see https://caniuse.com/mdn-css_properties_float_flow_relative_values for when we can remove left/right fallbacks
     left: css`
-      ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'm')} {
         float: left; /* 1 */
         float: ${logicalSide.left};
         ${logicalCSS('margin-left', '0')};
         ${logicalCSS('margin-top', '0')};
       }
     `,
     right: css`
-      ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'm')} {
         float: right; /* 1 */
         float: ${logicalSide.right};
         ${logicalCSS('margin-right', '0')};

diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
@@ -10,7 +10,7 @@ import { css } from '@emotion/react';
 import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import {
   euiCanAnimate,
-  euiBreakpoint,
+  euiMaxBreakpoint,
   euiAnimSlideInUp,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
@@ -39,7 +39,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
           ${euiTheme.animation.slow} ${euiTheme.animation.bounce};
       }
 
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         position: fixed;
         inset: 0;
         border-radius: 0;
@@ -66,7 +66,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
     confirmation: css`
       min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
 
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         ${euiShadowXLarge(euiThemeContext, { reverse: true })}
         inset-block-start: auto;
       }

diff --git a/src/components/modal/modal_body.styles.ts b/src/components/modal/modal_body.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiYScrollWithShadows, euiBreakpoint } from '../../global_styling';
+import { euiYScrollWithShadows, euiMaxBreakpoint } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 export const euiModalBodyStyles = (euiThemeContext: UseEuiTheme) => {
@@ -31,7 +31,7 @@ export const euiModalBodyStyles = (euiThemeContext: UseEuiTheme) => {
       padding-inline: ${euiTheme.size.l};
       padding-block: ${euiTheme.size.s};
 
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         padding-block-end: ${euiTheme.size.l};
       }
     `,

diff --git a/src/components/modal/modal_footer.styles.ts b/src/components/modal/modal_footer.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiBreakpoint } from '../../global_styling';
+import { euiMaxBreakpoint } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 export const euiModalFooterStyles = (euiThemeContext: UseEuiTheme) => {
@@ -23,7 +23,7 @@ export const euiModalFooterStyles = (euiThemeContext: UseEuiTheme) => {
       flex-shrink: 0; // ensure the height of the footer is based off its contents and doesn't squish
       gap: ${euiTheme.size.base};
 
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
         background: ${euiTheme.colors.lightestShade};
         padding-block: ${euiTheme.size.m};
         padding-inline: ${euiTheme.size.l};

diff --git a/src/components/page/page.styles.ts b/src/components/page/page.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiBreakpoint, logicalCSS } from '../../global_styling';
+import { euiMinBreakpoint, logicalCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 export const euiPageStyles = (euiThemeContext: UseEuiTheme) => {
@@ -36,7 +36,7 @@ export const euiPageStyles = (euiThemeContext: UseEuiTheme) => {
     row: css`
       flex-direction: column;
 
-      ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+      ${euiMinBreakpoint(euiThemeContext, 'm')} {
         flex-direction: row;
       }
     `,