Feat: responsive styles

[madhurisandbhor]

What does it do?

This PR introduces responsive props to components like Box, Flex to start with. To pass responsive props on components, user has to use object notation as below,

<Component padding={{initial: 2, small: 4, medium: 6, large: 8}} />

User can also pass arrays to shorthand properties like padding/margin.

<Component padding={{initial: [2, 4], small: 4, medium: [2, 4, 4], large: "24px" }} />

Why is it needed?

To ensure design system is responsive, read more.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design_system_v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 0:42am
design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 0:42am
design-system-website	🛑 Canceled (Inspect)			Jul 2, 2024 0:42am

[changeset-bot]

🦋 Changeset detected

Latest commit: 7982153

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@strapi/design-system	Major
@strapi/icons	Major
@strapi/ui-primitives	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Size Change: +736 B (+0.25%)

Total Size: 290 kB

Filename	Size	Change
packages/design-system/dist/index.js	95.4 kB	+337 B (+0.35%)
packages/design-system/dist/index.mjs	94.3 kB	+399 B (+0.43%)

ℹ️ View Unchanged

Filename	Size
packages/icons/dist/index.js	21.9 kB
packages/icons/dist/index.mjs	21.6 kB
packages/icons/dist/symbols-index.js	11.8 kB
packages/icons/dist/symbols-index.mjs	11.6 kB
packages/primitives/dist/index.js	16.8 kB
packages/primitives/dist/index.mjs	16.3 kB

_{compressed-size-action}

[joshuaellis]

Looking good so far. This only works with spaces, how do you plan to extend it to work with other props?

[jhoward1994]

Should we remove this?

design-system/docs/stories/Flex.mdx

Lines 22 to 23 in c7ebedd

	A Flex Flex

changes are updated