Skip to content

Add className, width and height props to ConfirmationDialog #6107

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

Merged
merged 7 commits into from
May 22, 2025

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented May 21, 2025

Summary

This PR adds support for className, width, and height props to the ConfirmationDialog component, allowing users to customize the component's styling and dimensions.

Changes

  • Added className, width, and height props to the ConfirmationDialogProps interface
  • Updated the ConfirmationDialog component to pass these props to the underlying Dialog component
  • Added tests to verify the new props work correctly
  • Set width="medium" as default to maintain backward compatibility

Example

<ConfirmationDialog
  title="Confirm Action"
  onClose={handleClose}
  className="custom-dialog-class"
  width="large"
  height="small"
>
  Are you sure you want to continue with this action?
</ConfirmationDialog>

Fixes #6106.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copy link

changeset-bot bot commented May 21, 2025

🦋 Changeset detected

Latest commit: a60db38

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

@Copilot Copilot AI changed the title [WIP] ConfirmationDialog improvements Add className, width and height props to ConfirmationDialog May 21, 2025
@Copilot Copilot AI requested a review from francinelucca May 21, 2025 18:43
Copilot finished work on behalf of francinelucca May 21, 2025 18:43
@francinelucca francinelucca marked this pull request as ready for review May 21, 2025 18:44
@Copilot Copilot AI review requested due to automatic review settings May 21, 2025 18:44
@francinelucca francinelucca requested a review from a team as a code owner May 21, 2025 18:44
@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 May 21, 2025
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!

@francinelucca francinelucca requested a review from TylerJDev May 21, 2025 18:44
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR enhances the ConfirmationDialog component by allowing users to pass custom CSS classes and control its dimensions. Key updates include:

  • Introducing className, width, and height props (with width defaulting to "medium") in both the interface and component implementation
  • Forwarding these props to the underlying <Dialog>
  • Adding tests to confirm the new props function as expected

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx Added className, width, and height to props interface; forwarded them to <Dialog> with width="medium" as default
packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx Introduced tests for className, width, and height props
Comments suppressed due to low confidence (1)

packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx:113

  • Add a test to verify that ConfirmationDialog defaults its width to "medium" when no width prop is provided, ensuring backward compatibility is maintained.
width = 'medium',

Copy link
Contributor

github-actions bot commented May 21, 2025

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 94.34 KB (-0.09% 🔽)
packages/react/dist/browser.umd.js 94.5 KB (+0.03% 🔺)

@github-actions github-actions bot requested a deployment to storybook-preview-6107 May 21, 2025 18:51 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6107 May 21, 2025 19:05 Inactive
@github-actions github-actions bot requested a deployment to storybook-preview-6107 May 22, 2025 02:48 Abandoned
@github-actions github-actions bot requested a deployment to storybook-preview-6107 May 22, 2025 03:01 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6107 May 22, 2025 03:15 Inactive
Copy link
Member

@francinelucca francinelucca left a comment

Choose a reason for hiding this comment

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

👏

@github-actions github-actions bot added integration-tests: failing Changes in this PR 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 May 22, 2025
@primer-integration
Copy link

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

@primer-integration
Copy link

🟢 golden-jobs completed with status success.

@github-actions github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels May 22, 2025
@francinelucca francinelucca added this pull request to the merge queue May 22, 2025
Merged via the queue into main with commit 694dd95 May 22, 2025
35 checks passed
@francinelucca francinelucca deleted the copilot/fix-6106 branch May 22, 2025 18:36
@primer primer bot mentioned this pull request May 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ConfirmationDialog improvements
3 participants