v30.1.0

Minor Changes

• Add wide breakpoint of 1200px (#960)

  This adds support for wide to the following touchpoints:

  • Responsive values, e.g.

    { mobile: 'small', wide: 'large' }

  • Responsive range props, e.g.

    <Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>

  • The responsiveStyle function, e.g.

    export const className = style(responsiveStyle({ wide: '...' }));

  • The breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.

    {
      mobile: 0,
      tablet: 740,
      desktop: 940,
      wide: 1200
    }

• Add useResponsiveValue Hook (#960)

  This Hook will return the resolved value based on the breakpoint the browser viewport currently falls within (mobile, tablet, desktop or wide). As this can only be calculated in the browser, the value will also be null when rendering server-side or statically rendering.

  Note that this Hook returns a function so that it can be called anywhere within your component.

  EXAMPLE USAGE

  const responsiveValue = useResponsiveValue();
  
  const screenSize = responsiveValue({
    mobile: 'Small',
    desktop: 'Large',
  });

  You can also resolve to boolean values for breakpoint detection.

  const responsiveValue = useResponsiveValue();
  
  const isMobile = responsiveValue({
    mobile: true,
    tablet: false,
  });
  
  const isDesktopOrAbove = responsiveValue({
    mobile: false,
    desktop: true,
  });

• Dialog, Drawer: Support nested Dialogs & Drawers (#959)

  Remove restriction preventing the nesting of modal components, e.g. Dialog and Drawer. While it is still discouraged to keep experiences simple, there is no longer a technical guard against it.

Patch Changes

• Deprecate useBreakpoint (#960)

  This Hook has been deprecated in favour of the new useResponsiveValue Hook.

  This is because useBreakpoint leads consumers to inadvertently couple themselves to the current set of breakpoints, making it risky for us to introduce new breakpoints.

  For example, you may have chosen to detect large screens by checking that the user is on the (current) largest breakpoint (e.g. const isDesktop = useBreakpoint() === "desktop"), but this logic would break if we introduced an even larger breakpoint and the Hook started returning other values.

  To maintain backwards compatibility, useBreakpoint will continue to return "desktop" when the user is technically on larger breakpoints.

  MIGRATION GUIDE

  Note that the useResponsiveValue Hook returns a responsiveValue function, so in these cases we're double-calling the function.

  -const isMobile = useBreakpoint() === 'mobile';
  +const isMobile = useResponsiveValue()({
  +  mobile: true,
  +  tablet: false
  +});

  -const isTablet = useBreakpoint() === 'tablet';
  +const isTablet = useResponsiveValue()({
  +  mobile: false,
  +  tablet: true,
  +  desktop: false,
  +});

  -const isDesktop = useBreakpoint() === 'desktop';
  +const isDesktop = useResponsiveValue()({
  +  mobile: false,
  +  desktop: true
  +});