feat(LabelGroup): render as list by default #5156

francinelucca · 2024-10-18T20:10:01Z

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

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-10-18T20:10:04Z

🦋 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

github-actions · 2024-10-18T20:10:33Z

👋 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 · 2024-10-18T20:13:10Z

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

…acks-semantic-structure

primer-integration · 2024-10-21T19:39:37Z

🟢 golden-jobs completed with status success.

…acks-semantic-structure

primer-integration · 2024-10-23T21:59:20Z

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

camertron

🎉

camertron · 2024-10-30T21:59:24Z

packages/react/src/LabelGroup/LabelGroup.tsx

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


Do these need a key prop?

Yes! done , Thanks!!

…5-prclabelgroup-component-lacks-semantic-structure

feat(LabelGroup): render as list by default

02f8be2

francinelucca added staff Author is a staff member component: LabelGroup labels Oct 18, 2024

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

francinelucca temporarily deployed to github-pages October 18, 2024 20:11 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 18, 2024 20:12 Inactive

docs(LabelGroup): add as props to docs.json

ccb002f

francinelucca temporarily deployed to github-pages October 18, 2024 20:17 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 18, 2024 20:17 Inactive

fix(LabelGroup): lint

029b1f3

francinelucca temporarily deployed to github-pages October 18, 2024 20:48 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 18, 2024 20:48 Inactive

fix(LabelGroup): action button inside li

a992224

francinelucca temporarily deployed to github-pages October 18, 2024 21:18 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 18, 2024 21:18 Inactive

Merge branch 'main' of github.com:primer/react into francinelucca/342…

f5a8b2a

…5-prclabelgroup-component-lacks-semantic-structure

francinelucca temporarily deployed to github-pages October 21, 2024 15:30 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 21, 2024 15:30 Inactive

francinelucca and others added 2 commits October 21, 2024 14:58

fix(LabelGroup): fix broken tests, small refactor

0ffce7f

Create blue-eggs-suffer.md

9de1584

francinelucca temporarily deployed to github-pages October 21, 2024 19:01 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 21, 2024 19:02 Inactive

Merge branch 'main' into francinelucca/3425-prclabelgroup-component-l…

fdc28b5

…acks-semantic-structure

francinelucca temporarily deployed to github-pages October 21, 2024 19:07 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 21, 2024 19:07 Inactive

Merge branch 'main' into francinelucca/3425-prclabelgroup-component-l…

57d87b1

…acks-semantic-structure

francinelucca temporarily deployed to github-pages October 22, 2024 21:36 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 22, 2024 21:36 Inactive

fix(LabelGroup): wrap children in li instead of using context

34bc967

francinelucca had a problem deploying to github-pages October 23, 2024 21:40 — with GitHub Actions Error

fix(Label): revert changes

4d74146

francinelucca temporarily deployed to github-pages October 23, 2024 21:42 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 23, 2024 21:43 Inactive

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 marked this pull request as ready for review October 24, 2024 20:10

francinelucca requested a review from a team as a code owner October 24, 2024 20:10

francinelucca requested a review from langermank October 24, 2024 20:10

francinelucca added the status: review needed label Oct 24, 2024

camertron approved these changes Oct 30, 2024

View reviewed changes

Merge branch 'main' of github.com:primer/react into francinelucca/342…

760dc8e

…5-prclabelgroup-component-lacks-semantic-structure

francinelucca temporarily deployed to github-pages October 31, 2024 02:35 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5156 October 31, 2024 02:35 Inactive

fix(LabelGroup): use add key to children map

c9675ef

francinelucca deployed to github-pages October 31, 2024 02:45 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5156 October 31, 2024 02:45 View deployment

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 deleted the francinelucca/3425-prclabelgroup-component-lacks-semantic-structure branch October 31, 2024 21:33

primer bot mentioned this pull request Oct 31, 2024

Release tracking (37.1.0) #5166

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(LabelGroup): render as list by default #5156

feat(LabelGroup): render as list by default #5156

Uh oh!

francinelucca commented Oct 18, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Oct 18, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Oct 18, 2024

Uh oh!

github-actions bot commented Oct 18, 2024 •

edited

Loading

Uh oh!

primer-integration bot commented Oct 21, 2024 •

edited

Loading

Uh oh!

primer-integration bot commented Oct 23, 2024

Uh oh!

camertron left a comment

Uh oh!

camertron Oct 30, 2024

Uh oh!

francinelucca Oct 31, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(LabelGroup): render as list by default #5156

feat(LabelGroup): render as list by default #5156

Uh oh!

Conversation

francinelucca commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Oct 18, 2024

Uh oh!

github-actions bot commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

primer-integration bot commented Oct 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

primer-integration bot commented Oct 23, 2024

Uh oh!

camertron left a comment

Choose a reason for hiding this comment

Uh oh!

camertron Oct 30, 2024

Choose a reason for hiding this comment

Uh oh!

francinelucca Oct 31, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

francinelucca commented Oct 18, 2024 •

edited

Loading

changeset-bot bot commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024 •

edited

Loading

primer-integration bot commented Oct 21, 2024 •

edited

Loading