Masonry: Flexible width items

[IsraLopez26]

Summary

This PR builds on Masonry's multi-column to add support for flexible width items.

This change introduces a new Masonry's experimental prop to support such feature: _getResponsiveModuleConfigForSecondItem

Current state

At a high level, the current multi-column items work using the _getColumnSpanConfig prop. This sets a static width column span, based on the grid size. For more details, please see #3636

Flexible Width Items

By introducing flexible width items, the idea is that the second item in the Masonry grid can span to fill empty columns in the first row of the grid, within the limits configured by using _getResponsiveModuleConfigForSecondItem.

_getResponsiveModuleConfigForSecondItem

getResponsiveModuleConfigForSecondItem<T>: (item: T) => number | { min: number, max: number } | undefined

_getResponsiveModuleConfigForSecondItem is a function which takes the item data (T) as an input and returns one of the following:

• number: Fixed column span (same behavior as today)
• { min: number, max: number }: An object which defines the minimum and maximum limits the flexible width item could span.
• undefined: This is an indicator to know that this prop hasn't been defined, and the functionality should fallback to current behavior.

We've identified the following edge cases and defined fallback logic:

• If the current item is not in the second position (items index 1), the _getResponsiveModuleConfigForSecondItem logic will be ignored, and fallback to the current logic.
• If the flexible width item doesn't fit the first row (min limit is larger than the first row empty columns), the item will be placed on the second column using minimum width.
• If _getResponsiveModuleConfigForSecondItem is undefined but _getColumnSpanConfig is defined for the second item, it should still behave as the existing multi-column items, whose width depends on the grid size.
• If by any chance both _getResponsiveModuleConfigForSecondItem and _getColumnSpanConfig are set for the second item, the flexible width _getResponsiveModuleConfigForSecondItem behavior will have preference.

Test

Added Unit Test for new functionality

Tested locally:

Using _getColumnSpanConfig for item1:

_getColumnSpanConfig={(item) => {
  return {
    sm: 2,
    md: 2,
    lg: 3,
    xl: 4,
  }
}

and using _getResponsiveModuleConfigForSecondItem for item2

_getResponsiveModuleConfigForSecondItem={(item) => {
  return {min: 2, max: 6};
}

5cols example: Multicol item (red) 3 cols. Flexible Width item (black) 2 cols.

6cols example: Multicol item (red) 3 cols. Flexible Width item (black) 3 cols.

Testing max limit: Multicol item (red) 4 cols. Flexible Width item (black) 6 cols.

Testing min limit: Flex width item (black) doesn't fit first row, so it gets pushed to second row using min limit width

[netlify]

✅ Deploy Preview for gestalt ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9c51e44
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/67bcb9ee2c4f750009292d20
😎 Deploy Preview	https://deploy-preview-3993--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[manvoid]

In the description it says "If the flexible width item doesn't fit the first row (min limit is larger than the first row empty columns), the item will be placed on the second column using minimum width." but that doesn't seem exact because we will teat the module as a "normal" module, hence it will have the 5 pin batch and could be placed on the second or third row (or more) depending on the pins arangement.

[liuyenwei]

suggestion: we can enforce that _getResponsiveModuleConfigForSecondItem can only be used if _getColumnSpanConfig is passed in. something like:

type MultiColumnProps = { _getColumnSpanConfig?: .... } | { _getColumnSpanConfig: ...., _getResponsiveModuleConfigForSecondItem: ...}