[CSS-in-JS] Convert EuiBreakpoint Mixin to Emotion

src/global_styling/mixins/__snapshots__/_responsive.test.ts.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useEuiBreakpoint 0 as a first argument should not render a min-width query (0 and l) 1`] = `"@media only screen and (max-width: 991px)"`;
+
+exports[`useEuiBreakpoint 0 as a first argument should not render a min-width query (0 and m) 1`] = `"@media only screen and (max-width: 767px)"`;
+
+exports[`useEuiBreakpoint 0 as a first argument should not render a min-width query (0 and s) 1`] = `"@media only screen and (max-width: 574px)"`;
+
+exports[`useEuiBreakpoint 0 as a first argument should not render a min-width query (0 and xl) 1`] = `"@media only screen and (max-width: 1199px)"`;
+
+exports[`useEuiBreakpoint 0 as a first argument should not render a min-width query (0 and xs) 1`] = `"@media only screen"`;
+
+exports[`useEuiBreakpoint Infinity as a last argument should not render a max-width query (l and Infinity) 1`] = `"@media only screen and (min-width: 992px)"`;
+
+exports[`useEuiBreakpoint Infinity as a last argument should not render a max-width query (m and Infinity) 1`] = `"@media only screen and (min-width: 768px)"`;
+
+exports[`useEuiBreakpoint Infinity as a last argument should not render a max-width query (s and Infinity) 1`] = `"@media only screen and (min-width: 575px)"`;
+
+exports[`useEuiBreakpoint Infinity as a last argument should not render a max-width query (xl and Infinity) 1`] = `"@media only screen and (min-width: 1200px)"`;
+
+exports[`useEuiBreakpoint Infinity as a last argument should not render a max-width query (xs and Infinity) 1`] = `"@media only screen"`;
+
+exports[`useEuiBreakpoint breakpoint size arrays with more than 2 sizes should use the first and last items in the array 1`] = `"@media only screen and (min-width: 575px) and (max-width: 991px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (l and xl) 1`] = `"@media only screen and (min-width: 992px) and (max-width: 1199px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (m and l) 1`] = `"@media only screen and (min-width: 768px) and (max-width: 991px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (m and xl) 1`] = `"@media only screen and (min-width: 768px) and (max-width: 1199px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (s and l) 1`] = `"@media only screen and (min-width: 575px) and (max-width: 991px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (s and m) 1`] = `"@media only screen and (min-width: 575px) and (max-width: 767px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (s and xl) 1`] = `"@media only screen and (min-width: 575px) and (max-width: 1199px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (xs and l) 1`] = `"@media only screen and (max-width: 991px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (xs and m) 1`] = `"@media only screen and (max-width: 767px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (xs and s) 1`] = `"@media only screen and (max-width: 574px)"`;
+
+exports[`useEuiBreakpoint common breakpoint size arrays useEuiBreakpoint returns a media query for two element breakpoint combinations (xs and xl) 1`] = `"@media only screen and (max-width: 1199px)"`;
+
+exports[`useEuiBreakpoint single breakpoint sizes should infer the next breakpoint size as max-width l 1`] = `"@media only screen and (min-width: 992px) and (max-width: 1199px)"`;
+
+exports[`useEuiBreakpoint single breakpoint sizes should infer the next breakpoint size as max-width m 1`] = `"@media only screen and (min-width: 768px) and (max-width: 991px)"`;
+
+exports[`useEuiBreakpoint single breakpoint sizes should infer the next breakpoint size as max-width s 1`] = `"@media only screen and (min-width: 575px) and (max-width: 767px)"`;
+
+exports[`useEuiBreakpoint single breakpoint sizes should infer the next breakpoint size as max-width xl 1`] = `"@media only screen and (min-width: 1200px)"`;
+
+exports[`useEuiBreakpoint single breakpoint sizes should infer the next breakpoint size as max-width xs 1`] = `"@media only screen and (max-width: 574px)"`;

src/global_styling/mixins/_responsive.test.ts

@@ -0,0 +1,192 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { testCustomHook } from '../../test/internal';
+import { EuiThemeBreakpoints, _EuiThemeBreakpoint } from '../variables';
+import { useEuiBreakpoint } from './_responsive';
+
+describe('useEuiBreakpoint', () => {
+  describe('common breakpoint size arrays', () => {
+    const possibleTwoElementBreakpointCombinations = [];
+    for (let i = 0; i < EuiThemeBreakpoints.length; i++) {
+      for (let j = 1; j < EuiThemeBreakpoints.length; j++) {
+        if (j > i) {
+          possibleTwoElementBreakpointCombinations.push([
+            `${EuiThemeBreakpoints[i]}`,
+            `${EuiThemeBreakpoints[j]}`,
+          ]);
+        }
+      }
+    }
+
+    test.each(possibleTwoElementBreakpointCombinations)(
+      'useEuiBreakpoint returns a media query for two element breakpoint combinations (%s and %s)',
+      (minSize, maxSize) => {
+        expect(
+          testCustomHook(() =>
+            useEuiBreakpoint([
+              minSize as _EuiThemeBreakpoint,
+              maxSize as _EuiThemeBreakpoint,
+            ])
+          ).return
+        ).toMatchSnapshot();
+      }
+    );
+  });
+
+  describe('0 as a first argument should not render a min-width query', () => {
+    EuiThemeBreakpoints.forEach((size) => {
+      test(`(0 and ${size})`, () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint([0, size])).return
+        ).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('Infinity as a last argument should not render a max-width query', () => {
+    EuiThemeBreakpoints.forEach((size) => {
+      test(`(${size} and Infinity)`, () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint([size, Infinity])).return
+        ).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('breakpoint size arrays with more than 2 sizes', () => {
+    it('should use the first and last items in the array', () => {
+      expect(
+        testCustomHook(() => useEuiBreakpoint(['s', 'm', 'l'])).return
+      ).toMatchSnapshot();
+    });
+  });
+
+  describe('single breakpoint sizes should infer the next breakpoint size as max-width', () => {
+    EuiThemeBreakpoints.forEach((size) => {
+      test(`${size}`, () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint([size])).return
+        ).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('invalid arguments', () => {
+    const fallbackOutput = '@media only screen';
+
+    const oldConsoleError = console.warn;
+    let consoleStub: jest.Mock;
+    beforeEach(() => {
+      console.warn = consoleStub = jest.fn();
+    });
+    afterEach(() => {
+      console.warn = oldConsoleError;
+    });
+
+    describe('invalid array sizes', () => {
+      afterEach(() => {
+        // expect(consoleStub).toHaveBeenCalledTimes(1);
+        expect(consoleStub).toHaveBeenLastCalledWith(
+          'Pass more than one breakpoint size'
+        );
+      });
+
+      it('empty array', () => {
+        expect(testCustomHook(() => useEuiBreakpoint([])).return).toEqual(
+          fallbackOutput
+        );
+      });
+
+      it('invalid single non-breakpoint size', () => {
+        expect(testCustomHook(() => useEuiBreakpoint([0])).return).toEqual(
+          fallbackOutput
+        );
+      });
+
+      it('invalid single non-breakpoint size', () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint([Infinity])).return
+        ).toEqual(fallbackOutput);
+      });
+    });
+
+    describe('invalid breakpoint keys', () => {
+      afterEach(() => {
+        expect(consoleStub).toHaveBeenCalledTimes(2);
+        expect(consoleStub).toHaveBeenCalledWith(
+          'Invalid min-width breakpoint size passed'
+        );
+        expect(consoleStub).toHaveBeenCalledWith(
+          'Invalid max-width breakpoint size passed'
+        );
+      });
+
+      it('warns when invalid size key strings are passed', () => {
+        expect(
+          // @ts-expect-error deliberate incorrect type
+          testCustomHook(() => useEuiBreakpoint(['teeny-tiny', 'SUPERMASSIVE']))
+            .return
+        ).toEqual(fallbackOutput);
+      });
+
+      it('warns when invalid size numbers are passed', () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint([100, 400])).return // we might support this someday, but today is not that day
+        ).toEqual(fallbackOutput);
+      });
+
+      it('warns when 0 and Infinity are used in the wrong position', () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint([Infinity, 0])).return
+        ).toEqual(fallbackOutput);
+      });
+    });
+
+    describe('invalid breakpoint size order', () => {
+      afterEach(() => {
+        expect(consoleStub).toHaveBeenCalledTimes(1);
+        expect(consoleStub).toHaveBeenLastCalledWith(
+          'Invalid breakpoint sizes passed. The first size should be smaller than the last size'
+        );
+      });
+
+      it('warns if min breakpoint is not smaller than the max breakpoint', () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint(['xl', 'xs'])).return
+        ).toEqual(fallbackOutput);
+      });
+
+      it('warns if the min/max breakpoints are equal', () => {
+        expect(
+          testCustomHook(() => useEuiBreakpoint(['s', 's'])).return
+        ).toEqual(fallbackOutput);
+      });
+    });
+
+    describe('valid but funky breakpoint combos', () => {
+      afterEach(() => {
+        expect(consoleStub).not.toHaveBeenCalled();
+      });
+
+      test('0 and xs', () => {
+        // Since xs is (currently) already 0, this should output nothing
+        expect(
+          testCustomHook(() => useEuiBreakpoint([0, 'xs'])).return
+        ).toEqual(fallbackOutput);
+      });
+
+      test('xs and infinity', () => {
+        // Since xs is (currently) 0, there should be no min or max width
+        expect(
+          testCustomHook(() => useEuiBreakpoint(['xs', Infinity])).return
+        ).toEqual(fallbackOutput);
+      });
+    });
+  });
+});

src/global_styling/mixins/_responsive.ts

@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEuiTheme, UseEuiTheme } from '../../services/theme/hooks';
+import { EuiThemeBreakpoints, _EuiThemeBreakpoint } from '../variables';
+
+export const BREAKPOINT_SIZES = [...EuiThemeBreakpoints, 0, Infinity] as const;
+export type EuiBreakpointSizes = typeof BREAKPOINT_SIZES[number];
+
+const mediaQuery = '@media only screen';
+const getMinWidthQuery = (breakpoint: number) => `(min-width: ${breakpoint}px)`;
+const getMaxWidthQuery = (breakpoint: number) =>
+  `(max-width: ${breakpoint - 1}px)`;
+
+/**
+ * Generates a CSS media query rule string based on the input sizes.
+ * Example: euiBreakpoint(['s, 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 991px)`
+ *
+ * Note: Unlike the Sass mixin, the JS mixin allows creating media queries
+ * with just (min-width) and (max-width) via the 0 and Infinity args.
+ * Example: euiBreakpoint(['m', Infinity]) becomes `@media only screen and (min-width: 768px)`
+ * Example: euiBreakpoint([0, 'm']) becomes `@media only screen and (max-width: 767px)`
+ */
+export const euiBreakpoint = (
+  sizes: EuiBreakpointSizes[],
+  { euiTheme }: UseEuiTheme
+) => {
+  let firstBreakpoint: EuiBreakpointSizes | undefined = sizes[0];
+  let lastBreakpoint: EuiBreakpointSizes | undefined = sizes[sizes.length - 1];
+  let minBreakpoint: number | undefined;
+  let maxBreakpoint: number | undefined;
+
+  if (sizes.length <= 1) {
+    if (typeof firstBreakpoint === 'string') {
+      const minIndex = EuiThemeBreakpoints.indexOf(firstBreakpoint);
+      const maxIndex = minIndex + 1;
+      if (firstBreakpoint !== 'xl') {
+        lastBreakpoint = EuiThemeBreakpoints[maxIndex] as _EuiThemeBreakpoint;
+      } else {
+        lastBreakpoint = undefined;
+      }
+    } else {
+      console.warn('Pass more than one breakpoint size');
+      firstBreakpoint = lastBreakpoint = undefined;
+    }
+  }
+
+  if (
+    firstBreakpoint != null &&
+    (BREAKPOINT_SIZES.includes(firstBreakpoint) === false ||
+      firstBreakpoint === Infinity)
+  ) {
+    console.warn('Invalid min-width breakpoint size passed');
+  } else if (typeof firstBreakpoint === 'string') {
+    minBreakpoint = euiTheme.breakpoint[firstBreakpoint as _EuiThemeBreakpoint];
+  }
+
+  if (
+    lastBreakpoint != null &&
+    (BREAKPOINT_SIZES.includes(lastBreakpoint) === false ||
+      lastBreakpoint === 0)
+  ) {
+    console.warn('Invalid max-width breakpoint size passed');
+  } else if (typeof lastBreakpoint === 'string') {
+    maxBreakpoint = euiTheme.breakpoint[lastBreakpoint as _EuiThemeBreakpoint];
+  }
+
+  if (
+    minBreakpoint != null &&
+    maxBreakpoint != null &&
+    (minBreakpoint > maxBreakpoint || minBreakpoint === maxBreakpoint)
+  ) {
+    console.warn(
+      'Invalid breakpoint sizes passed. The first size should be smaller than the last size'
+    );
+    // We can't accurately guess what they wanted, so unset the breakpoints
+    minBreakpoint = maxBreakpoint = undefined;
+  }
+
+  return [
+    mediaQuery,
+    minBreakpoint ? getMinWidthQuery(minBreakpoint) : false,
+    maxBreakpoint ? getMaxWidthQuery(maxBreakpoint) : false,
+  ]
+    .filter(Boolean)
+    .join(' and ');
+};
+
+export const useEuiBreakpoint = (sizes: EuiBreakpointSizes[]) => {
+  const euiTheme = useEuiTheme();
+  return euiBreakpoint(sizes, euiTheme);
+};

src/global_styling/mixins/index.ts

@@ -11,3 +11,4 @@ export * from './_helpers';
 export * from './_padding';
 export * from './_states';
 export * from './_typography';
+export * from './_responsive';

upcoming_changelogs/6057.md

@@ -0,0 +1,9 @@
+- Enhanced `euiBreakpoint` mixin by creating the option to generate `min-width` only and `max-width` only media queries ([#6057](https://github.com/elastic/eui/pull/6057))
+
+**Breaking changes**
+
+- When `euiBreakpoint` is passed a single element array and the element is not `xs` or `xl`, a media query will not be generated ([#6057](https://github.com/elastic/eui/pull/6057))
+
+**CSS-in-JS conversions**
+
+- Converted `euiBreakpoint` mixin to Emotion ([#6057](https://github.com/elastic/eui/pull/6057))