Skip to content

[Draft] Stack component #4423

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.

Sign up for GitHub

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

Jump to bottom
Merged
langermank merged 22 commits into from
Apr 18, 2024
Merged

[Draft] Stack component #4423

langermank merged 22 commits into from
Apr 18, 2024

Conversation

@langermank
Copy link
Contributor

@langermank langermank commented Mar 21, 2024 •
edited by joshblack
Loading

Add support for the experimental Stack component to Primer React.

Changelog

New

  • Add support for the experimental Stack component to the drafts and experimental entrypoint
  • Add a new test helper, matrix, to help with generating combinations of controls for e2e tests
  • Add a new utility, getResponsiveAttributes, that helps with generating the correct data attributes for props that support values and responsive values

Changed

Removed

Rollout strategy

  • Minor release

Testing & Reviewing

  • Go through the storybook stories, verify that
    • A default story exists
    • A playground story exists
    • Relevant feature stories exist
    • Controls correctly update the playgrounds tory
  • Look at the API of Stack, does it make sense to you? Anything that you would edit or change before we release it?
  • What do you think of our CSS strategy here? Specifically around our use of data attributes and our responsive styling strategy
  • What do you think of our matrix testing style in Playwright? Is it over the top? Are there better ways to do VRT for these scenarios?
  • Verify the docs.json file for this component is valid

@changeset-bot
Copy link

changeset-bot bot commented Mar 21, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: f3ef9e1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Mar 21, 2024 •
edited
Loading

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 88 KB (0%)
packages/react/dist/browser.umd.js 88.25 KB (0%)

@github-actions github-actions bot temporarily deployed to storybook-preview-4423 March 21, 2024 23:59 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4423 March 22, 2024 00:19 Inactive
siddharthkp
siddharthkp reviewed Mar 22, 2024
View reviewed changes
Copy link
Member

@siddharthkp siddharthkp left a comment •
edited
Loading

Choose a reason for hiding this comment

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

I'm excited about this! Left a few api comments

packages/react/src/Stack/Stack.tsx
* Sets the padding of the stack container
* @default none
*/
padding?: Padding
Copy link
Member

@siddharthkp siddharthkp Mar 22, 2024

Choose a reason for hiding this comment

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

Reminder to update the eslint rule as well: https://github.com/primer/eslint-plugin-primer-react/blob/main/src/rules/no-system-props.js#L16

@github-actions github-actions bot temporarily deployed to storybook-preview-4423 March 28, 2024 16:59 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4423 April 4, 2024 21:11 Inactive
@langermank
Copy link
Contributor Author

langermank commented Apr 4, 2024

The PR was updated with Copilot Workspace (v0.17). For more details, open the Copilot Workspace session.

@langermank
Copy link
Contributor Author

langermank commented Apr 4, 2024

The PR was updated with Copilot Workspace (v0.17). For more details, open the Copilot Workspace session.

@github-actions github-actions bot temporarily deployed to storybook-preview-4423 April 4, 2024 21:17 Inactive
@joshblack
Copy link
Member

joshblack commented Apr 10, 2024

One thing I wanted to confirm, if we switch over to the CSS name for things do we also want the types to be updated? For example:

  • For orientation to direction, would we also want 'horizontal' | 'vertical' to go to 'column' | 'row'
  • For spread to justify (or maybe justifyContent?), would we also want to update these values to match the values for the corresponding CSS property?

@joshblack
Copy link
Member

joshblack commented Apr 11, 2024 •
edited
Loading

Checklist from mob programming

  • Default story
  • Playground story
  • Component.docs.json
  • Lives in drafts entrypoint
  • Stack has tests
  • Stack.Item has tests
  • e2e tests
    • VRT
    • AAT

@joshblack joshblack added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 11, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-4423 April 11, 2024 18:22 Inactive
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 11, 2024
@primer primer bot temporarily deployed to github-pages April 11, 2024 18:28 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4423 April 11, 2024 18:28 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4423 April 18, 2024 21:21 Inactive
@joshblack joshblack marked this pull request as ready for review April 18, 2024 21:29
@joshblack joshblack requested review from a team as code owners April 18, 2024 21:29
joshblack
joshblack approved these changes Apr 18, 2024
View reviewed changes
Copy link
Member

@joshblack joshblack left a comment

Choose a reason for hiding this comment

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

🚀

ericwbailey
ericwbailey approved these changes Apr 18, 2024
View reviewed changes
Copy link
Contributor

@ericwbailey ericwbailey left a comment

Choose a reason for hiding this comment

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

🚢

@langermank langermank added this pull request to the merge queue Apr 18, 2024
Merged via the queue into main with commit ee46088 Apr 18, 2024
@langermank langermank deleted the feat/add-stack-component branch April 18, 2024 21:45
@primer primer bot mentioned this pull request Apr 18, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@siddharthkp siddharthkp siddharthkp left review comments

@ericwbailey ericwbailey ericwbailey approved these changes

@joshblack joshblack joshblack approved these changes

@maximedegreve maximedegreve Awaiting requested review from maximedegreve maximedegreve is a code owner automatically assigned from primer/design-reviewers

@camertron camertron Awaiting requested review from camertron camertron is a code owner automatically assigned from primer/engineer-reviewers

Assignees

No one assigned

Labels

UI mob pair

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@langermank @joshblack @ericwbailey @siddharthkp