Fix misc issues with Dialog v2

[mperrotti]

Closes # https://github.com/github/primer/issues/2372

Specifically, this PR addresses the following issues mentioned in the related issue:

• The declarative buttons inside the dialog are 34 pixels in height. This doesn’t match any of our variants for buttons.
• The description in the dialog is bold and should be regular to match our Figma component.
• The rounded corners of the close buttons doesn’t fit the rounded corners of it’s container well. This is because we don’t use our IconButton.
• The props table in the documentation for v2 is unreadable due to the type column content not breaking over multiple lines.

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

• Added/updated tests
• Added/updated documentation
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1c21854

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	Major

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

[mperrotti]

I think something is broken in the next-major. All of my PRs to that branch are getting this CI error:

Error: src/drafts/MarkdownEditor/Footer.tsx(60,12): error TS2322: Type '{ icon?: ComponentType<{}> | null | undefined; leadingIcon?: ComponentType<{}> | null | undefined; trailingIcon?: ComponentType<{}> | null | undefined; ... 274 more ...; fileDraggedOver: boolean; }' is not assignable to type 'Partial<ButtonProps>'.
  Types of property 'variant' are incompatible.
    Type 'import("/home/runner/work/react/react/src/drafts/Button2/types").VariantType | undefined' is not assignable to type 'import("/home/runner/work/react/react/src/Button/types").VariantType | undefined'.
      Type '"outline"' is not assignable to type 'VariantType | undefined'.
Error: Process completed with exit code 2.

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	98.14 KB (-0.76% 🔽)
dist/browser.umd.js	98.7 KB (-0.77% 🔽)

[broccolinisoup]

@broccolinisoup - I'm going to ask the group what to do about the buttons in today's Primer Eng sync. I think we should fix the type errors in dotcom and move forward with the new buttons.

@mperrotti That sounds good! The issue is assigned to me now #3062 so I'll look into what those type errors are etc but assuming that we are going to handle it separately, your PR looks great to me!

[mperrotti]

Sounds good @broccolinisoup! I think the only thing blocking this is the flakey Canary Release check 🙁

[broccolinisoup]

@mperrotti the canary job is interesting. It usually passes in the next run if it failed in the first one. I re-ran it here and seems to be green now. CI test job is failing though and seems like the snapshots are not up-to-date?

[mperrotti]

@broccolinisoup - those snapshot failures are mysterious. I ran test:update locally, and nothing updated.

I'm going to try re-running the test on CI.

[broccolinisoup]

@mperrotti I can see the snapshots are failing on my local and I pushed a commit (I hope that is okay!) but still failing :/ I think the snapshots changes are expected right? Because we updated the deprecated buttons to the current Button component and they have different attributes and html structure. Let me know if I am missing anything.

[mperrotti]

@broccolinisoup - yup, the snapshot updates are expected. I think I know what we have to update to get the other tests passing. Thanks for pushing that commit!

[broccolinisoup]

@mperrotti All green!! Amazing 🎉 Let's merge it 🚀