[Feature]: built-in responsive mode support

[AkiraVoid]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

In v8 we have useResponsiveMode to make building responsible page easier, but in v9 I didn't find something like this.

Have you discussed this feature with our team

No. I opened a discussion on GitHub but no one answered me.

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[layershifter]

@AkiraVoid usually such solutions have problems or consequences with SSR.

• They either don't support SSR properly as they really on a browser (docs(Responsive): deprecate component Semantic-Org/Semantic-UI-React#4008, [SSR] Rehydrating app contains the wrong classnames. yocontra/react-responsive#162) ➡️ DOM between client and server does not match ➡️ hydration fails 🔴
• They do double rendering like useResponsiveMode() in @fluentui/react with the same value on a client/server (https://codesandbox.io/s/nice-galileo-e6c87y):
  
  And IMO it's hard to recommend such solution for everyone as a big chunk of UI can be simply rendered again after a page load 🟡

There is a good explainer (https://github.com/artsy/fresnel#why-not-conditionally-render) on why conditional rendering is not so great. The fair note is that with "double rendering" we don't have such issue.

The simplest way to keep DOM same is to use @media queries as they don't change DOM ¯_(ツ)_/¯ But it might be not suitable in some scenarios. Especially when in your app you don't care about SSR 🐱 So there is no an easy answer...

[AkiraVoid]

@layershifter Could Fluent UI teams publish a spec of what responsible UI solutions you are currently using, and the breakpoints you defined?

Although there may not be a standard method to achieve this feature, but at least we users of this design system, as products developers, want to make everywhere of our own UI consistent.

[AkiraVoid]

You probably can also make them be design tokens in tokens object. Treat every breakpoint as a media query, store them in tokens as strings, give them semantic names so that we only need to use them, I think.

[layershifter]

@layershifter Could Fluent UI teams publish a spec of what responsible UI solutions you are currently using, and the breakpoints you defined?

AFAIK currently we have breakpoints for Toolbar and Dialog in v9. @bsunderhus do you know if these breakpoints will be added to tokens?

You probably can also make them be design tokens in tokens object. Treat every breakpoint as a media query, store them in tokens as strings, give them semantic names so that we only need to use them, I think.

This makes sense. But probably it will be a separate object (may be breakpoints):

• tokens object contains only CSS variables ⬇️
• you can't use CSS variables in media queries

[bsunderhus]

AFAIK currently we have breakpoints for Toolbar and Dialog in v9. @bsunderhus do you know if these breakpoints will be added to tokens?

I've contacted designers regarding the possibility of adding breakpoints to tokens or at least having them somewhere globally at design specs, @paulgildea, do we have a follow up on that?

[JustSlone]

As we look at adding more tokens we should consider how these tokens can be opt-in for products so we don't keep increasing the total number of required tokens.
CC: @miroslavstastny and @khmakoto

[AkiraVoid]

import { GriffelStyle } from '@fluentui/react-components';

type BreakpointFunction = (
  styles: GriffelStyle
) => Record<string, GriffelStyle>;

interface IBreakpoints {
  /**
   * X-Small devices (portrait phones, less than 576px).
   *
   * @type {BreakpointFunction}
   * @memberof IBreakpoints
   */
  xs: BreakpointFunction;
  /**
   * Small devices (landscape phones, less than 768px).
   *
   * @type {BreakpointFunction}
   * @memberof IBreakpoints
   */
  s: BreakpointFunction;
  /**
   * Medium devices (tablets, less than 992px).
   *
   * @type {BreakpointFunction}
   * @memberof IBreakpoints
   */
  m: BreakpointFunction;
  /**
   * Large devices (desktops, less than 1200px).
   *
   * @type {BreakpointFunction}
   * @memberof IBreakpoints
   */
  l: BreakpointFunction;
  /**
   * X-Large devices (large desktops, less than 1400px).
   *
   * @type {BreakpointFunction}
   * @memberof IBreakpoints
   */
  xl: BreakpointFunction;
}

const breakpoints: IBreakpoints = {
  xs: style => {
    return { '@media (max-width: 575.98px)': style };
  },
  s: style => {
    return { '@media (max-width: 767.98px)': style };
  },
  m: style => {
    return { '@media (max-width: 991.98px)': style };
  },
  l: style => {
    return { '@media (max-width: 1199.98px)': style };
  },
  xl: style => {
    return { '@media (max-width: 1399.98px)': style };
  },
};

export default breakpoints;

Above is the approach I'm using, it performs well, may be helpful. It is capable with other Griffel features like shorthands. But as we are using react, we may need to use breakpoints in components to render some children components conditionally, perhaps you need to enhance this approach.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.