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(LabelGroup): render as list by default #5156

Conversation

francinelucca
Copy link
Member

@francinelucca francinelucca commented Oct 18, 2024

Closes https://github.com/github/primer/issues/3425

Renders the LabelGroup as a ul with lis by default, with the option to use as prop to customize the element type of the rendered container. In the case other than ul or ol, the children will be rendered as span.

Changelog

New

  • as prop in LabelGroup to customize container element (provides backwards compatibility)
  • Styles for ul in LabelGroup
  • data-list attribute in StyledLabelGroupContainer (used to apply styles conditionally)
  • LabelGroup children now wrapped by <li></li> component when rendered as list
  • LabelGroup tests to account for new functionality and use cases

Changed

  • LabelGroup renders as a ul by default, with option to override default implementation via as prop.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Check DOM in deployed story
, verify it renders as a ul with lis. No visual regressions should be present.

Merge checklist

Copy link

changeset-bot bot commented Oct 18, 2024

🦋 Changeset detected

Latest commit: c9675ef

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

@francinelucca francinelucca added staff Author is a staff member component: LabelGroup labels Oct 18, 2024
Copy link
Contributor

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 18, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-5156 October 18, 2024 20:12 Inactive
Copy link
Contributor

github-actions bot commented Oct 18, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 97.49 KB (-0.03% 🔽)
packages/react/dist/browser.umd.js 97.77 KB (+0.15% 🔺)

…5-prclabelgroup-component-lacks-semantic-structure
@primer-integration
Copy link

primer-integration bot commented Oct 21, 2024

🟢 golden-jobs completed with status success.

@primer-integration
Copy link

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/348056

@francinelucca francinelucca added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 24, 2024
@francinelucca francinelucca marked this pull request as ready for review October 24, 2024 20:10
@francinelucca francinelucca requested a review from a team as a code owner October 24, 2024 20:10
Copy link
Collaborator

@camertron camertron left a comment

Choose a reason for hiding this comment

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

🎉

<StyledLabelGroupContainer data-overflow="inline" data-list={isList || undefined} sx={sxProp} as={as}>
{isList
? React.Children.map(children, child => {
return <li>{child}</li>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do these need a key prop?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes! done , Thanks!!

…5-prclabelgroup-component-lacks-semantic-structure
@francinelucca francinelucca added this pull request to the merge queue Oct 31, 2024
Merged via the queue into main with commit 8e58e4d Oct 31, 2024
43 checks passed
@francinelucca francinelucca deleted the francinelucca/3425-prclabelgroup-component-lacks-semantic-structure branch October 31, 2024 21:33
@primer primer bot mentioned this pull request Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: LabelGroup integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh staff Author is a staff member status: review needed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants