Flex Component: Add gap prop

[MattieBelt]

Add gap prop to Flex Component

Description

Use theme spaces to set the flex property gap on your Flex component.

Demo

Example on : https://design-system-7r256h8ex-strapijs.vercel.app/?path=/story/design-system-technical-components-flex--base

API

<Flex gap={2}>
  <IconButton label="Edit" icon={<Pencil />} />
  <IconButton label="Create" icon={<Plus />} />
  <IconButton label="Delete" icon={<Trash />} />
  <IconButton label="Publish" icon={<Play />} />
</Flex>

Discussion

• Should gap also allow responsive properties just like the padding props in the Box component?

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

design-system-website – ./website

🔍 Inspect: https://vercel.com/strapijs/design-system-website/ELwBsBxztFYGvPeAYEw8zH7zcw6N
✅ Preview: https://design-system-website-git-fork-mattiebelt-featu-3c107c-strapijs.vercel.app

design-system – ./

🔍 Inspect: https://vercel.com/strapijs/design-system/2jTBqUrSFeWS4mRWpynEZjtEe9u9
✅ Preview: https://design-system-git-fork-mattiebelt-feature-flex-gap-strapijs.vercel.app

[gu-stav]

Thanks also for this PR. I really like it, but need to confirm gap is within our browser support matrix (not sure about IE11): https://caniuse.com/flexbox-gap

[ronronscelestes]

Thank you, flex gap would be great!
I wonder though if we couldn't use strapi-design-system/src/helpers/handleResponsiveValues.js helper to allow responsive values + possibility to custom column / row gap?

Our Grid component already does this, it allows:

gap={4}
gap={{ desktop: 5, tablet: 2, mobile: 1 }}
gap="10px 20px"

WDYT?

[MattieBelt]

Thank you, flex gap would be great! I wonder though if we couldn't use strapi-design-system/src/helpers/handleResponsiveValues.js helper to allow responsive values + possibility to custom column / row gap?

Our Grid component already does this, it allows:

gap={4}
gap={{ desktop: 5, tablet: 2, mobile: 1 }}
gap="10px 20px"

WDYT?

I was thinking the same 😉☝🏼

Discussion
Should gap also allow responsive properties just like the padding props in the Box component?

[HichamELBSI]

Hi @MattieBelt, thanks for the contribution 😄

[ronronscelestes]

Not sure why but I had to "Approve and run" for the tests to run.
Should be good now - just need to wait for the tests to pass!

[HichamELBSI]

@MattieBelt You'll need to update the storyshots.

cd packages/strapi-design-system
yarn test -u

[HichamELBSI]

LGTM