Layout::Flex - Component documentation

[didoo]

📌 Summary

This is the documentation counterpart of the Flex component implementation done in #2751

👉 👉 👉 Preview: https://hds-website-git-flex-component-documentation-hashicorp.vercel.app/layouts/flex

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-4646

---

👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

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

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Mar 19, 2025 10:53am
hds-website	✅ Ready (Inspect)	Visit Preview	Mar 19, 2025 10:53am

[KristinLBradley]

Made a few minor editing suggestions but otherwise looking good!

[dchyun]

@KristinLBradley should this be added to the grid docs as well?

[dchyun]

[Question] Is this something we want to document? Or do we want to be more strict and hide this information as not to encourage people to go away from the spacers? Whatever way we decide to go currently the Grid docs do not mention how to override the preset gap values. We would need to align the two docs @KristinLBradley.

[didoo]

In some cases this will be a necessity, expecially if they need to migrate some existing layouts, so we have to give them a (well documented) way to do it.

[dchyun]

[Suggestion] Personally, the concept of "recipes", and the difference between "recipes" and "patterns", was not clear to me initially. Looking at it more closely, my understanding is recipes are detailed examples showing common layouts that flex can accomplish, and patterns are small common "real world" examples.

A lot of the sections above this don't display any visual examples, and reference the recipes section to learn more about an argument. To me, this created a small disconnect as the examples in the recipes somewhat talk about specific arguments, but are more about the best applications of flex in general.

My preference would be for the argument sections to have "simple" examples, such as the ones from the showcase, that show isolated examples of how one argument works. This would also align with how the grid docs are currently structured. I think this would also help make the distinction between recipes and patterns more clear, as I would no longer be relying on the recipes section to see examples for an argument, and would only use it for common layout examples.

[didoo]

I hear your point. Let's see what others think and then we can make a decision.