HDS Docs - Breakpoints

[majedelass]

📌 Summary

If merged, this PR will add a new section within the Foundations section for Breakpoints.

Preview: https://hds-website-git-breakpoints-hashicorp.vercel.app/foundations/breakpoints

🛠️ Detailed description

Following the work done for the memo describing what path we are taking and what comes next, this PR is to create the new section describing the different breakpoints, their application and how to design uses these standards.

🔗 External links

Memo: Standardizing Breakpoints
Jira ticket: HDS-4831
Figma file: Breakpoints project

---

💬 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	May 14, 2025 6:41am
hds-website	✅ Ready (Inspect)	Visit Preview	May 14, 2025 6:41am

[jorytindall]

Nice first pass! There is some inconsistent language usage that I tried to catch, and I added some suggestions for expressing some of that content in more plain language. Whether these accurately express what you're trying to say, TBD! But take what you feel is relevant from them.

[didoo]

@jorytindall @shleewhite @KristinLBradley @dchyun I had to push a couple of extra commit, any of you can re-approve? thanks

[MelSumner]

(Question, non-blocker) How often do we expect this to happen? Should the language reflect whether or not this is a good idea? In other places we've said things like, "should you need to" which is more of an indicator that it's there but use with caution.

[didoo]

There's nothing "dangerous" in them using the breakpoints in JS, it depends on the context where they need it (meet them where they are). There are use cases where controlling responsive behaviour in JS is inevitable (and in fact, that's what we do ourselves in the AppHeader and AppSideNav/SideNav components).

[MelSumner]

Left a suggestion to make something less wordy but no blockers.

[dchyun]

@didoo please update the base of this to the new release/website-4-20 branch. We will be merging all docs updates into this branch, and then merging it into main post-release.

The base branch was changed.

[didoo]

@dchyun done. I need re-approval now.