Skip to content

Dialog: Add sx styles back to the footer styled-component & add visual regression tests for both Dialogs - #3935

Merged
broccolinisoup merged 4 commits into
mainfrom
bs/add-sx-back-to-dialog-footer
Nov 13, 2023
Merged

Dialog: Add sx styles back to the footer styled-component & add visual regression tests for both Dialogs#3935
broccolinisoup merged 4 commits into
mainfrom
bs/add-sx-back-to-dialog-footer

Conversation

@broccolinisoup

@broccolinisoupbroccolinisoup commented Nov 13, 2023

Copy link
Copy Markdown
Member

Caught an issue on the dotcom integration tests where our dialog was showing the footer when it is not supposed to. (file reference). It turns out the sx prop wasn't applied in the below code. I think #3918 introduced a regression. I believeremoving the sx styles from the footer styled-component wasn't intentional.

<Dialog.Footer sx={{display: displayMode === DisplayMode.IssueCreation ? 'flex' : 'none'}}>
<CreateIssueFooter onClose={() => onSafeClose()} />
</Dialog.Footer>
BeforeAfter
prc story that shows the dialog button has a white background, because sx styles are not appliedprc story that shows the dialog button has a yellow background, because sx styles are applied

Changelog

New

Added visual regression tests for Dialog and Dialog1. (We should be able to catch these issues on our end before merged now 🤗)

Changed

Added the sx styles back to the styled footer.

Removed

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan

Testing & Reviewing

Can be looked into the custom rendering story and make sure the sx styles are applied.

Merge checklist

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-botBot commented Nov 13, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f2375ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
@primer/reactPatch

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

github-actionsBot commented Nov 13, 2023

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js104.21 KB (+0.01% 🔺)
dist/browser.umd.js104.75 KB (+0.01% 🔺)

@github-actions
github-actionsBottemporarily deployed to storybook-preview-3935 November 13, 2023 03:10 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-3935 November 13, 2023 03:12 Inactive
@broccolinisoupbroccolinisoup changed the title yDialog: Add sx styles back to the footer styled-component & add visual regression tests for both DialogsNov 13, 2023
@broccolinisoupbroccolinisoup added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 13, 2023
@broccolinisoup
broccolinisoup marked this pull request as ready for review November 13, 2023 03:35
@broccolinisoup
broccolinisoup requested review from a team and pksjceNovember 13, 2023 03:35
@broccolinisoupbroccolinisoup added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Nov 13, 2023
@broccolinisoupbroccolinisoup added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Nov 13, 2023

@dylanatsmithdylanatsmith left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Oof, sorry about this! Good catch.

@joshblackjoshblack left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

These should help with the timeouts 🤞

Comment threade2e/components/Dialog.test.ts Outdated
Comment threade2e/components/Dialog.test.ts Outdated
Comment threadscript/generate-e2e-tests.js Outdated
Co-authored-by: Josh Black <joshblack@github.com>
@github-actions
github-actionsBottemporarily deployed to storybook-preview-3935 November 13, 2023 21:50 Inactive
@broccolinisoupbroccolinisoup added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Nov 13, 2023
@github-actionsgithub-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 13, 2023
@github-actions
github-actionsBottemporarily deployed to storybook-preview-3935 November 13, 2023 22:11 Inactive

@pksjcepksjce left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Love the tests! 🥳

@broccolinisoup
broccolinisoup added this pull request to the merge queueNov 13, 2023
Merged via the queue into main with commit 8970272Nov 13, 2023
@broccolinisoup
broccolinisoup deleted the bs/add-sx-back-to-dialog-footer branch November 13, 2023 23:07
@primerprimerBot mentioned this pull request Nov 13, 2023
@broccolinisoupbroccolinisoup mentioned this pull request Nov 13, 2023
4 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@broccolinisoup@pksjce@joshblack@dylanatsmith