feat(Details): Add summary subcomponent #5015

francinelucca · 2024-09-24T15:36:45Z

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

Adds Details.Summary subcomponent that can be used within Details for the summary and adds summary prop to Details component which will render the supplied node within the new Details.Summary subcomponent. Also adds a default "See Details" summary value to be rendered to improve accessibility in case authors fail to supply one.

Changelog

New

Adds Details.Summary subcomponent
Adds tests for new Details.Summary subcomponent

Changed

Updates Details.docs.json to include data for new Details.Summary subcomponent and its props
Use new Details.Summary subcomponent in Details story
Refactor Details component to render a default Details.Summary if one hasn't been supplied by author
Rewrite Details component export to include new Details.Summary subcomponent
Update Details tests to use new Details.Summary subcomponent

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

Verify no visual/behavioral regressions in deploy preview Details story
All tests should pass sniff test and CI

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-09-24T15:36:50Z

🦋 Changeset detected

Latest commit: e6ce3b3

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-09-24T15:39:52Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.94 KB (+0.19% 🔺)
packages/react/dist/browser.umd.js	98.25 KB (+0.21% 🔺)

siddharthkp

This is really good and thorough work!

Mostly clarifying questions, 1 suggestion

siddharthkp · 2024-10-02T13:05:46Z

packages/react/src/Details/__tests__/Details.test.tsx

+      <Details summary="test summary" data-testid="details">
+        <Details.Summary>custom summary</Details.Summary>
+        content
+      </Details>,


(non blocker) Should this also be a dev warning? example of warning

superseeded by bac525a

siddharthkp · 2024-10-02T13:08:10Z

packages/react/src/Details/__tests__/Details.test.tsx

+    )
+
+    expect(queryByText('See Details')).toBeNull()
+    expect(getByTestId('summary')).toBeInTheDocument()


(just a note) TIL you can't getByRole('summary'), it's inferred as a button instead!

siddharthkp · 2024-10-02T13:12:49Z

packages/react/src/Details/Details.docs.json

+        }
+      ]
+    }
+  ]


(blocking) summary prop is missing from docs.

Curious, should we prefer adding just 1 approach instead of both <Details summary> and <Details.Summary>? To me, <Details.Summary> feels like the closest replacement for <summary>, which feels complete.

Would like to hear your thoughts on the 2 approaches though!

Thought about this and I agree with you. I think originally I was going for the "maximize ease-of-use" approach but in hindsight this might be confusing and adds extra complexity with having to support the intersection of both strategies (Re: your comment here).

Going to refactor to just introduce Details.Summary and render a default one if one isn't present, that feels right-er to me as well.
Wondering, do you think that would warrant a warning as well? (The use case where a Details component is used but neither Details.Summary nor a native summary is present within the children).

siddharthkp · 2024-10-02T13:14:32Z

packages/react/src/Details/Details.stories.tsx

@@ -12,7 +12,7 @@ export const Default: StoryFn<typeof Details> = () => {
  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
  return (
    <Details {...getDetailsProps()}>
-      <Button as="summary">See Details</Button>
+      <Details.Summary as={Button}>See Details</Details.Summary>


Couple noob questions here:

Assuming this renders a <button>, is that still accessible with <details>?

Just checking, does this also support ButtonProps like size=small and variant=primary`?

Note sure what accessible with details means 😅, here's how/what it renders:

is there some specific behavior you want me to test for here?

Had to fiddle with the types a little but yeah those work:

…/3518-prcdetails-component-does-not-provide-appropriate-structure-by-default

jonrohan

Great!

…does-not-provide-appropriate-structure-by-default

primer-integration · 2024-10-31T20:22:34Z

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

Changes addressed

fix(Details): Add summary prop and subcomponent

f334af7

francinelucca added the staff Author is a staff member label Sep 24, 2024

francinelucca temporarily deployed to github-pages September 24, 2024 15:38 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5015 September 24, 2024 15:38 Inactive

Create old-boxes-clap.md

cbae243

francinelucca changed the title ~~fix(Details): Add summary prop and subcomponent~~ feat(Details): Add summary prop and subcomponent Sep 24, 2024

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

github-actions bot temporarily deployed to storybook-preview-5015 September 24, 2024 18:48 Inactive

fix: lint

c223dbb

francinelucca temporarily deployed to github-pages September 24, 2024 18:52 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5015 September 24, 2024 18:52 Inactive

fix(Docs): details story use default export

df23a60

francinelucca temporarily deployed to github-pages September 24, 2024 19:00 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5015 September 24, 2024 19:01 Inactive

francinelucca marked this pull request as ready for review September 24, 2024 21:01

francinelucca requested a review from a team as a code owner September 24, 2024 21:01

francinelucca requested a review from siddharthkp September 24, 2024 21:01

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

siddharthkp previously requested changes Oct 2, 2024

View reviewed changes

siddharthkp assigned francinelucca Oct 3, 2024

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

3f449b5

…/3518-prcdetails-component-does-not-provide-appropriate-structure-by-default

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

github-actions bot temporarily deployed to storybook-preview-5015 October 4, 2024 21:34 Inactive

francinelucca added 2 commits October 4, 2024 17:37

fix(Details): remove summary prop in favor of Details.Summary

bac525a

test(Details): fix breaking tests

1eac3fb

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

github-actions bot temporarily deployed to storybook-preview-5015 October 4, 2024 21:40 Inactive

update changeset

3421e39

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 23, 2024

francinelucca requested a review from joshblack October 23, 2024 21:36

joshblack approved these changes Oct 24, 2024

View reviewed changes

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

1f33300

…/3518-prcdetails-component-does-not-provide-appropriate-structure-by-default

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

github-actions bot temporarily deployed to storybook-preview-5015 October 24, 2024 16:16 Inactive

fix(Summary): do not forward a ref

a86ae4d

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

github-actions bot temporarily deployed to storybook-preview-5015 October 24, 2024 16:21 Inactive

fix(Summary): do not use sx prop

5c99c45

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

github-actions bot temporarily deployed to storybook-preview-5015 October 24, 2024 17:04 Inactive

fix(Summary): fix types

88c284e

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

github-actions bot temporarily deployed to storybook-preview-5015 October 24, 2024 21:38 Inactive

jonrohan approved these changes Oct 25, 2024

View reviewed changes

Merge branch 'main' into francinelucca/fix/3518-prcdetails-component-…

e6ce3b3

…does-not-provide-appropriate-structure-by-default

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

github-actions bot deployed to storybook-preview-5015 October 31, 2024 20:08 View deployment

francinelucca enabled auto-merge October 31, 2024 21:25

jonrohan requested a review from siddharthkp October 31, 2024 21:44

francinelucca removed the request for review from siddharthkp October 31, 2024 21:47

francinelucca added this pull request to the merge queue Oct 31, 2024

Merged via the queue into main with commit 1473c26 Oct 31, 2024
43 checks passed

francinelucca deleted the francinelucca/fix/3518-prcdetails-component-does-not-provide-appropriate-structure-by-default branch October 31, 2024 21:54

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

feat(Details): Add summary subcomponent #5015

feat(Details): Add summary subcomponent #5015

francinelucca commented Sep 24, 2024 •

edited

Loading

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

siddharthkp left a comment •

edited

Loading

siddharthkp Oct 2, 2024

francinelucca Oct 4, 2024

siddharthkp Oct 2, 2024

siddharthkp Oct 2, 2024 •

edited

Loading

francinelucca Oct 4, 2024

siddharthkp Oct 2, 2024

francinelucca Oct 8, 2024

jonrohan left a comment

primer-integration bot commented Oct 31, 2024

feat(Details): Add summary subcomponent #5015

feat(Details): Add summary subcomponent #5015

Conversation

francinelucca commented Sep 24, 2024 • edited Loading

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

changeset-bot bot commented Sep 24, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 24, 2024 • edited Loading

size-limit report 📦

siddharthkp left a comment • edited Loading

Choose a reason for hiding this comment

siddharthkp Oct 2, 2024

Choose a reason for hiding this comment

francinelucca Oct 4, 2024

Choose a reason for hiding this comment

siddharthkp Oct 2, 2024

Choose a reason for hiding this comment

siddharthkp Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

francinelucca Oct 4, 2024

Choose a reason for hiding this comment

siddharthkp Oct 2, 2024

Choose a reason for hiding this comment

francinelucca Oct 8, 2024

Choose a reason for hiding this comment

jonrohan left a comment

Choose a reason for hiding this comment

primer-integration bot commented Oct 31, 2024

francinelucca commented Sep 24, 2024 •

edited

Loading

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading

siddharthkp left a comment •

edited

Loading

siddharthkp Oct 2, 2024 •

edited

Loading