Skip to content

[Draft] Stack component - #4423

Merged
langermank merged 22 commits into
mainfrom
feat/add-stack-component
Apr 18, 2024
Merged

[Draft] Stack component#4423
langermank merged 22 commits into
mainfrom
feat/add-stack-component

Conversation

@langermank

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

Copy link
Copy Markdown
Contributor

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

changeset-botBot commented Mar 21, 2024•
edited
Loading

Copy link
Copy Markdown

🦋 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
NameType
@primer/reactMinor

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

github-actionsBot commented Mar 21, 2024•
edited
Loading

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
packages/react/dist/browser.esm.js88 KB (0%)
packages/react/dist/browser.umd.js88.25 KB (0%)

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

@siddharthkpsiddharthkp left a comment •
edited
Loading

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 excited about this! Left a few api comments

Comment threadpackages/react/src/Stack/Stack.tsx Outdated
Comment threadpackages/react/src/Stack/Stack.tsx Outdated
Comment threadpackages/react/src/Stack/Stack.tsx
* Sets the padding of the stack container
* @default none
*/
padding?: Padding

@siddharthkpsiddharthkpMar 22, 2024

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.

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

Comment threadpackages/react/src/experimental/index.ts Outdated
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4423 March 28, 2024 16:59 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4423 April 4, 2024 21:11 Inactive
@langermank

langermank commented Apr 4, 2024

Copy link
Copy Markdown
ContributorAuthor

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

@langermank

langermank commented Apr 4, 2024

Copy link
Copy Markdown
ContributorAuthor

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

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4423 April 4, 2024 21:17 Inactive
@joshblack

joshblack commented Apr 10, 2024

Copy link
Copy Markdown
Member

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

joshblack commented Apr 11, 2024•
edited
Loading

Copy link
Copy Markdown
Member

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

@joshblackjoshblack added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 11, 2024
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4423 April 11, 2024 18:22 Inactive
@github-actionsgithub-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 11, 2024
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4423 April 11, 2024 18:28 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4423 April 18, 2024 21:21 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4423 April 18, 2024 21:27 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 ownersApril 18, 2024 21:29
joshblack
joshblack approved these changes Apr 18, 2024
View reviewed changes

@joshblackjoshblack 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.

🚀

ericwbailey
ericwbailey approved these changes Apr 18, 2024
View reviewed changes

@ericwbaileyericwbailey 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.

🚢

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

Reviewers

@siddharthkpsiddharthkpsiddharthkp left review comments
@joshblackjoshblackjoshblack approved these changes
@maximedegrevemaximedegreveAwaiting requested review from maximedegrevemaximedegreve was automatically assigned from primer/design-reviewers
@camertroncamertronAwaiting requested review from camertroncamertron is a code owner automatically assigned from primer/engineer-reviewers
+1 more reviewer
@ericwbaileyericwbaileyericwbailey approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

UI mob pair

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@langermank@joshblack@ericwbailey@siddharthkp