feat(LabelGroup): render as list by default

[francinelucca]

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

• LabelGroupContext helps keep track of whether a Label's parent is a list or not (used to determine whether item should render as a li or span)
• 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 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.
• Label renders as li when parent (accessed through LabelGroupContext) is a list, otherwise renders as `span.

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

• [x] Added/updated tests
• [ ] Added/updated documentation
• [ ] Added/updated previews (Storybook)
• [ ] Changes are SSR compatible
• [x] 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[bot]]

🦋 Changeset detected

Latest commit: c9675efcbeb0189df5f7518d9383c5726f6f88f6

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[bot]]

:wave: 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[bot]]

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% 🔺)

[primer-integration[bot]]

🟢 golden-jobs completed with status success.

[primer-integration[bot]]

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