[EuiFlexGrid] Allow number of columns based on viewport size

[flaviolivolsi]

Is there any easy way I can set a certain value for the number of columns of a grid for the desktop viewport size and another one, for example, for tablets viewport size? If not, would a pull request be welcome to implement such a feature? I find it something very important for certain layouts.

A practical example of what I mean (just to give the idea):

<EuiFlexGrid columns={{
  tablet: 3,
  desktop: 4
}}>
   ...
</EuiFlexGrid>

An idea could even be to have a helper to facilitate these operations, hence a function that extracts the values from $euiBreakpoints from SASS and compares the current viewport size against the breakpoints, returning the current one. This way the code would look something like this:

<EuiFlexGrid
  columns={
    getBreakpoint() === "m" ? 3 : getBreakpoint() === "l" ? 4 : 3
  }
>
  ...
</EuiFlexGrid>

[snide]

It sounds useful. Give us a day to discuss at one of our internal meetings and we'll provide some guidance on how we think it would work from a props perspective. Likely it's something we'd want generic that could be reusable in other parts of EUI. I'll follow up tomorrow.

[flaviolivolsi]

@snide spot on, I mentioned FlexGrid because it's the first example I came across but I agree that the feature could have a wider use, that's also why I suggested something like the second solution. I'll wait for you then :) thanks!

[chandlerprall]

@flaviolivolsi

We've discussed your proposal and think the second example is the better way to get this started,

<EuiFlexGrid
  columns={
    getBreakpoint() === "m" ? 3 : getBreakpoint() === "l" ? 4 : 3
  }
>
  ...
</EuiFlexGrid>

Thinking through some of the implementation, and that this needs to dynamically trigger a callback to handle window resize, we'd like to expose the functionality primarily through a React hook:

const breakpoint = useEuiWindowBreakpoint();
return <EuiFlexGrid
  columns={
    breakpoint === "m" ? 3 : breakpoint === "l" ? 4 : 3
  }
>
  ...
</EuiFlexGrid>

Remaining aware that not all users could use this hook (e.g. wanting to use this breakpoint in a class component), we'll also want to expose the same functionality through a vanilla JavaScript callback/listener function (which the hook itself should use). The window onResize listener should only be attached when the functionality is asked for (i.e. not executed in a Server Side Rendering environment).

Lastly, as our SCSS variables are not [currently] accessible from our JavaScript code, please duplicate the breakpoint values into the JS side, we'll address this separately in the future.

Feel free to ask for clarification, more feedback, anything! Wanted to give a decent acceptance criteria without prescribing every detail, so if any of this feels too open-ended I'm happy to go into more detail!

[flaviolivolsi]

Great! This is more than enough for now to get started. I'll get to work on it ASAP and in case I need any clarification I'll ping you :) thank you!

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

Now that we have the hook useIsWithinBreakpoints this is easy enough to configure by the consumer by doing:

const isMobile = useIsWithinBreakpoints(['xs', 's']);

return (
  <EuiFlexGrid columns={isMobile ? 2 : 3} />
)