Skip to content

feat(react): add unstable_Stack component#9876

Merged
kodiakhq[bot] merged 9 commits into
carbon-design-system:mainfrom
joshblack:9831-add-stack-component
Oct 25, 2021
Merged

feat(react): add unstable_Stack component#9876
kodiakhq[bot] merged 9 commits into
carbon-design-system:mainfrom
joshblack:9831-add-stack-component

Conversation

@joshblack

@joshblack joshblack commented Oct 15, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

netlify Bot commented Oct 15, 2021 •
edited
Loading

Copy link
Copy Markdown

✔️ 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 joshblack mentioned this pull request Oct 15, 2021
Closed
@joshblack

joshblack commented Oct 15, 2021

Copy link
Copy Markdown
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

netlify Bot commented Oct 15, 2021 •
edited
Loading

Copy link
Copy Markdown

✔️ 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

netlify Bot commented Oct 15, 2021 •
edited
Loading

Copy link
Copy Markdown

✔️ 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

tay1orjones
tay1orjones reviewed Oct 18, 2021
View reviewed changes

@tay1orjones tay1orjones left a comment

Copy link
Copy Markdown
Member

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

Comment thread packages/react/src/components/Stack/index.js Outdated
Comment thread packages/react/src/components/Stack/Stack.js Outdated
@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
tay1orjones
tay1orjones approved these changes Oct 22, 2021
View reviewed changes

@tay1orjones tay1orjones left a comment

Copy link
Copy Markdown
Member

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

joshblack
joshblack commented Oct 22, 2021
View reviewed changes
Comment thread packages/react/src/components/Stack/index.js Outdated
dakahn
dakahn approved these changes Oct 25, 2021
View reviewed changes

@dakahn dakahn left a comment

Copy link
Copy Markdown
Contributor

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
@tay1orjones tay1orjones mentioned this pull request Oct 26, 2021
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tay1orjones tay1orjones tay1orjones approved these changes

+1 more reviewer

@dakahn dakahn dakahn approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

status: ready to merge 🎉

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@joshblack @tay1orjones @dakahn