From 3efa3ee616f3913b7d50197287d09ebb5c71e1a2 Mon Sep 17 00:00:00 2001 From: Constance Date: Wed, 10 Aug 2022 16:08:19 -0700 Subject: [PATCH] Deprecate static breakpoint services (#6119) * Deprecate BREAKPOINTS and BREAKPOINT_KEYS * Remove non-public EuiBreakpoints type - in favor of _EuiThemeBreakpoints type from global_styling * Move EuiBreakpointSize type export - Preserve the type export, since the global_styling one has a _ prefix, but move the export out to the main index.ts * Deprecate `isWithinBreakpoints` in favor of hook version + rename hook file to more generic name in prepration for max/min width hooks + use snake_case to match rest of repo * Deprecate `isWithinMaxBreakpoint`, create `useIsWithinMaxBreakpoint` * Deprecate `isWithinMinBreakpoint`, create `useIsWithinMinBreakpoint` + add tests that previously did not exist * Add documentation examples for new `useIsWithinMin/MaxBreakpoints` hooks * Update components using `isWithinMinBreakpoint` to use new hook + per new hook typing, only accept a named size instead of a number * Deprecate `getBreakpoint` - in favor of memoizing its behavior in `CurrentEuiBreakpoint` logic + update testenv mock slightly - it's not super DRY, but it's fine --- .../theme/breakpoints/_breakpoints_js.tsx | 52 ++++-- .../breakpoints/breakpoint_utilities.tsx | 25 +-- .../collapsible_nav.test.tsx.snap | 92 ++++++---- .../collapsible_nav/collapsible_nav.test.tsx | 2 +- .../collapsible_nav/collapsible_nav.tsx | 45 +---- .../flyout/__snapshots__/flyout.test.tsx.snap | 68 +++---- src/components/flyout/flyout.tsx | 40 +--- src/services/breakpoint/breakpoint.test.ts | 161 ---------------- src/services/breakpoint/breakpoint.ts | 113 ------------ .../breakpoint/current_breakpoint.tsx | 35 +++- .../current_breakpoint_hook.testenv.tsx | 12 +- src/services/breakpoint/index.ts | 4 +- .../breakpoint/is_within_hooks.spec.tsx | 173 ++++++++++++++++++ src/services/breakpoint/is_within_hooks.ts | 74 ++++++++ .../breakpoint/useIsWithinBreakpoints.ts | 31 ---- src/services/index.ts | 8 +- upcoming_changelogs/6119.md | 11 ++ 17 files changed, 457 insertions(+), 489 deletions(-) delete mode 100644 src/services/breakpoint/breakpoint.test.ts delete mode 100644 src/services/breakpoint/breakpoint.ts create mode 100644 src/services/breakpoint/is_within_hooks.spec.tsx create mode 100644 src/services/breakpoint/is_within_hooks.ts delete mode 100644 src/services/breakpoint/useIsWithinBreakpoints.ts create mode 100644 upcoming_changelogs/6119.md diff --git a/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx b/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx index beb3e48df33..0cbede119e7 100644 --- a/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx +++ b/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx @@ -3,9 +3,12 @@ import { css } from '@emotion/react'; import { EuiIcon, EuiCode, + EuiText, useEuiBreakpoint, useCurrentEuiBreakpoint, useIsWithinBreakpoints, + useIsWithinMaxBreakpoint, + useIsWithinMinBreakpoint, useEuiTheme, } from '../../../../../src'; import { sortMapBySmallToLargeValues } from '../../../../../src/services/breakpoint/_sorting'; @@ -57,22 +60,49 @@ export default () => { be turned on/off from within your component.

- The hook automatically inherits breakpoint sizes from the current - EUI theme and any theme overrides. + You can also use useIsWithinMaxBreakpoint(size){' '} + and useIsWithinMinBreakpoint(size). The min/max + hooks return true or false if the current browser window width is + above or below the passed breakpoint size{' '} + respectively. +

+

+ These hooks automatically inherits breakpoint sizes from the + current EUI theme and any theme overrides.

} example={ -

- Targeting large devices only:{' '} - {useIsWithinBreakpoints(['l', 'xl']) ? ( - - ) : ( - - )} -

+ +

+ Targeting large devices only:{' '} + {useIsWithinBreakpoints(['l', 'xl']) ? ( + + ) : ( + + )} +

+

+ Targeting medium devices and below:{' '} + {useIsWithinMaxBreakpoint('m') ? ( + + ) : ( + + )} +

+

+ Targeting small devices and above:{' '} + {useIsWithinMinBreakpoint('s') ? ( + + ) : ( + + )} +

+ } - snippet="useIsWithinBreakpoints(['l', 'xl'])" + snippet={`useIsWithinBreakpoints(['l', 'xl']) +useIsWithinMaxBreakpoint('m') +useIsWithinMinBreakpoint('s')`} snippetLanguage="js" /> diff --git a/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx b/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx index cd2e6bc5344..041610b9c9c 100644 --- a/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx +++ b/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx @@ -1,7 +1,5 @@ import React, { useContext } from 'react'; import { - BREAKPOINT_KEYS, - BREAKPOINTS, EuiBreakpointSize, EuiCode, EuiCodeBlock, @@ -9,8 +7,12 @@ import { EuiShowFor, EuiSpacer, EuiText, + keysOf, } from '../../../../../src'; +import { breakpoint as breakpoints } from '../../../../../src/themes/amsterdam/global_styling/variables/_breakpoint'; +const breakpointKeys = keysOf(breakpoints); + import { GuideSection } from '../../../components/guide_section/guide_section'; import { ThemeContext } from '../../../components/with_theme'; @@ -29,10 +31,10 @@ const hideForSource = require('!!raw-loader!./hide_for'); import UtilityClassesResponsive from './utility_classes_responsive'; function renderJsSizes(size: EuiBreakpointSize, index: number) { - let code = `'${size}': ${BREAKPOINTS[size]}`; + let code = `'${size}': ${breakpoints[size]}`; if (size !== 'xl') { - code += `, // to ${BREAKPOINTS[BREAKPOINT_KEYS[index - 1]] - 1}`; + code += `, // to ${breakpoints[breakpointKeys[index - 1]] - 1}`; } else { code += ', // and up'; } @@ -77,8 +79,8 @@ export default () => {

Screen sizes

- The sizing options correlate with the keys in the{' '} - EuiBreakpoints type. The named + The sizing options correlate with the keys in{' '} + euiTheme.breakpoint. The named breakpoint starts at the pixel value provided and ends before the next one.

@@ -97,12 +99,11 @@ export default () => { return renderSassSizes(size, index); }) .join('\n') - : BREAKPOINT_KEYS.map(function ( - size: EuiBreakpointSize, - index: number - ) { - return renderJsSizes(size, index); - }).join('\n')} + : breakpointKeys + .map(function (size: EuiBreakpointSize, index: number) { + return renderJsSizes(size, index); + }) + .join('\n')} diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap index 6b8a3a1bfd9..a00c648044d 100644 --- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap +++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap @@ -238,33 +238,47 @@ Array [ `; exports[`EuiCollapsibleNav props isDocked 1`] = ` -Array [ +
, + />
, + />
, + > + + +
, -] + /> +
`; exports[`EuiCollapsibleNav props onClose 1`] = ` @@ -320,31 +334,47 @@ Array [ aria-expanded="true" aria-pressed="true" />, -
, -
, -
-