Skip to content

🧪 [Spike] Viewport breakpoints (re-using IBM Carbon values/mixins) #2844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

didoo
Copy link
Contributor

@didoo didoo commented Apr 29, 2025

🚨 DO NOT MERGE 🚨

📌 Summary

This PR is an exploration of how we could potentially use the IBM Carbon breakpoints values and mixins within HDS (eg. for our components) and expose them to our consumers.

👉 👉 👉 Preview: https://hds-showcase-git-spike-viewport-breakpoints-hashicorp.vercel.app/foundations/breakpoints

🚧 TODOs

  • move the "source" Sass files for the Sass variables and mixins (showcase/app/styles/_temp-hds-breakpoints.scss) under the packages/components folder.
  • see if there are other ways we can expose these values/mixins to the consumers
    • breakpoint values as JavaScript object (see showcase/app/components/mock/demo/hds-breakpoints.ts)
    • consume these JS breakpoints in the showcase (add a demo, in which I render a string with the current breakpoint)

🔗 External links

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

Copy link

vercel bot commented Apr 29, 2025

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

Name Status Preview Updated (UTC)
hds-showcase ✅ Ready (Inspect) Visit Preview Apr 29, 2025 9:12am
hds-website ✅ Ready (Inspect) Visit Preview Apr 29, 2025 9:12am

@hashibot-hds hashibot-hds added packages/components docs-website Content updates to the documentation website showcase labels Apr 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants