Skip to content
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

feat(react): add unstable_Stack component #9876

Merged

Conversation

joshblack
Copy link
Contributor

@joshblack joshblack commented Oct 15, 2021

Closes #9821

This PR adds in a Stack component to be used for vertical spacing along with other components in the design system. This is a useful utility in a component-based model when margin is no longer used by components.

By default, the Stack uses a gap prop where you can provide a number or a string. If it's a number, it will map to our spacing scale. If it's a string, it will be a custom value and requires a unit.

Changelog

New

  • Add Stack component, related stories, and tests

Changed

  • Update storybook to include Stack in carbon-react

Removed

Testing / Reviewing

  • Verify tests pass as expected
  • Verify CSS is included as expected
  • Verify story renders as expected
  • Look over the API and make sure it meets our API requirements / is understandable

@netlify
Copy link

netlify bot commented Oct 15, 2021

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 9af6c40

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/617730e5c117980007cdfb79

😎 Browse the preview: https://deploy-preview-9876--carbon-react-next.netlify.app

@joshblack
Copy link
Contributor Author

Question for you @tay1orjones, my code had step as the prop but could easily switch to spacing if people like that better

@netlify
Copy link

netlify bot commented Oct 15, 2021

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 9af6c40

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/617730e64159820008260c29

😎 Browse the preview: https://deploy-preview-9876--carbon-components-react.netlify.app/

@netlify
Copy link

netlify bot commented Oct 15, 2021

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 9af6c40

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/617730e5b6b7ea000760f4b0

😎 Browse the preview: https://deploy-preview-9876--carbon-elements.netlify.app

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm super into this implementation! I think the usage of grid gap is a fantastic idea.

I'm happy to knock out some tests for it once any other feedback is incorporated

packages/react/src/components/Stack/index.js Outdated Show resolved Hide resolved
packages/react/src/components/Stack/Stack.js Outdated Show resolved Hide resolved
@joshblack joshblack marked this pull request as ready for review October 22, 2021 19:14
@joshblack joshblack requested review from a team as code owners October 22, 2021 19:14
Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Newest changes feel great! 🔥 Consolidating down to just gap and also very much in support of the VStack and HStack exports

Copy link
Contributor

@dakahn dakahn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work!

@kodiakhq kodiakhq bot merged commit 18ce43c into carbon-design-system:main Oct 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants