New layout utilities

[Jeremy-Walton]

Why?

Add some new flex utilities for more declarative layouts without going the full stretch to make components.

What Changed

• Add cluster
• Add split
• Add stack
• Add layout example

Quality Assurance

• Have you tagged the PR with the correct labels?
• Have you validated the changes?
  • Have you run linters? (yarn sanity-check)
  • Have you run prettier?
  • Have you tried building the css?
  • Have you tried building storybook?
• [ ] Have you updated any usage of changed tokens?
• [ ] Did you add a component?
  • [ ] Have you added it to the dependency graph?
  • [ ] Have you added it to the docs?
• [ ] Did you update a component?
  • [ ] Have you updated the dependency graph?
  • [ ] Have you updated the docs?
• [ ] Do you need to update the package version?
  Planning on one more addition before release v2.3.0

Screenshots

Cluster

Split

Stack

Utility Layout

[theoluciano]

Do you want to repeat the description for each of the blocks when you're just changing one keyword (stack, split, cluster) at the end? Seems like
While flex utilities are great for moving quickly or for simple layouts, they can easily become cumbersome to manage and tend to turn into "Flex Spaghetti". In some of these cases, reaching for named components may make sense. However, there are times when a full component is more restrictive than you need and hurts productivity. Sometimes you need just a bit more structure to your layout, but not a component. could just be more of a top level thing and not need to be repeated. Just a thought.

Looks good otherwise; sheep it!

[Jeremy-Walton]

@theoluciano It could be a top level thing, I'm just not sure where it would belong.

[Jeremy-Walton]

@theoluciano I moved that code block to a full page for utilities and pulled in the writing Scott and I did a while back but never added to Optics.

[dallasbpeters]

LGTM

[scriswell]

@Jeremy-Walton With these new layout utilities, can we start prefixing the classes with op- to future-proof these a bit? I’m thinking that since these are new to the system, we can remove some breakage in the future as we introduce class prefixing more broadly into the design system.

[Jeremy-Walton]

1. Will use the prefix op-stack etc.
2. Can switch to :where since it has 0 specificity to provide the default gaps rather than the not selector.

:where(.stack) {
  gap: var(...);
}