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

src-docs/src/views/app_context.js

@@ -51,6 +51,12 @@ export const AppContext = ({ children }) => {
       }}
       theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
       colorMode={theme.includes('light') ? 'light' : 'dark'}
+      modify={{
+        breakpoint: {
+          xxl: 1600,
+          xxxl: 2000,
+        },
+      }}
     >
       <Helmet>
         <link

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 hook generates a single 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"
       />

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}
       }
     `,

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}
       }
     `,

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}
       }
     `,

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;
       }

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 {

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)}
+    }
   `;
 };
 

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')};

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;
       }

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};
       }
     `,

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};

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;
       }
     `,