feat(DensityContainer): add package

[cf-remylenoir]

Purpose of PR

Introduces the DensityContainer component to empower our consumers to control the density of their UI/UX.

Collaboration with Product Design is achieved to define the tokens/values of the components in high-density.

These components have been updated in #2620 for high-density support:

• Button
• IconButton
• More components will add support shortly.

Usage

• A low density results in the default experience.
• A high density results in a denser UI, allowing more content and actions to fit on a single screen.

Support

The density support to the components is possible via the useDensity hook.

PR Checklist

• I have read the relevant readme.md file(s)
• All commits follow our Git commit message convention
• Tests are added/updated/not required
• Tests are passing
• Storybook stories are added/updated/not required
• Usage notes are added/updated/not required
• Has been tested based on Contentful's browser support
• Doesn't contain any sensitive information
• Publish the package to make it available in the SandpackRendered
• Resolve undefined export in SandpackRenderer

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0a91bfd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel]

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

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	Dec 6, 2023 3:59pm

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	129.74 KB (0%)	2.6 s (0%)	80 ms (+48.65% 🔺)	2.7 s
Module	126.23 KB (0%)	2.6 s (0%)	57 ms (+8.62% 🔺)	2.6 s

[Lelith]

Looks good to me!

[cf-remylenoir]

@damann happy to get your eyes on this when time allows it 👍

[DanweDE]

One thought, LTM otherwise.

[DanweDE]

Wondering if it'd already make sense to let components declare what densities they support.

E.g.

Suggested change

	const density = useDensity();
	const density = useDensity(['high', 'low']);

so if we introduce a new density 'higher' at some point, the hook would fall back to the next best supported density 'high', instead of rendering low density below.

Depends a bit on the future outlook and how much we anticipate components outside of F36 to rely on the hook.

[cf-remylenoir]

It is good to think of this upfront, thank you for bringing it up.

In the immediate future, only high density is to be offered, this won't change unless we decide to change our scaling system and maybe adopt the concept of view preferences for our UI (default, comfortable, compact).

To be discussed further with @damann.