Skip to content
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

[CalloutCard] Fix dismiss button UI inconsistencies #12967

Merged
merged 1 commit into from
Dec 16, 2024

Conversation

moraleslevi
Copy link
Contributor

@moraleslevi moraleslevi commented Dec 4, 2024

WHY are these changes introduced?

Fixes #12968

The dismiss button on the CalloutCard does not match the UI of the dismiss button on the Banner, which is very apparent when the components are rendered near each other.

WHAT is this pull request doing?

This makes four changes to the CalloutCard dismiss button:

  • Use tertiary button variant
  • Use regular sized X icon
  • Adjust position to match Banner
  • Add translated label
Before 04-30-17lmm-1zbu4
After 04-31-awl5i-59kp8

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

@moraleslevi
Copy link
Contributor Author

/snapit

Copy link
Contributor

github-actions bot commented Dec 4, 2024

🫰✨ Thanks @moraleslevi! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20241204173342"

@moraleslevi moraleslevi force-pushed the moraleslevi/banner-icon branch from 48a678e to b80a0a8 Compare December 4, 2024 20:23
@moraleslevi moraleslevi changed the title Use XSMallIcon for Banner dismiss button Fix CalloutCard UI consistency Dec 4, 2024
@moraleslevi moraleslevi changed the title Fix CalloutCard UI consistency Fix CalloutCard UI inconsistency Dec 4, 2024
@moraleslevi moraleslevi changed the title Fix CalloutCard UI inconsistency Fix CalloutCard dismiss button inconsistencies Dec 4, 2024
@moraleslevi moraleslevi force-pushed the moraleslevi/banner-icon branch from b80a0a8 to f8ee15b Compare December 4, 2024 20:24
@moraleslevi
Copy link
Contributor Author

/snapit

Copy link
Contributor

github-actions bot commented Dec 4, 2024

🫰✨ Thanks @moraleslevi! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20241204202554"

@moraleslevi moraleslevi changed the title Fix CalloutCard dismiss button inconsistencies [CalloutCard] Fix dismiss button UI inconsistencies Dec 4, 2024
@moraleslevi moraleslevi marked this pull request as ready for review December 4, 2024 20:56
@moraleslevi moraleslevi requested a review from a team December 4, 2024 21:02
@moraleslevi moraleslevi merged commit 50246bb into main Dec 16, 2024
13 of 14 checks passed
@moraleslevi moraleslevi deleted the moraleslevi/banner-icon branch December 16, 2024 19:14
moraleslevi pushed a commit that referenced this pull request Dec 18, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/[email protected]

### Patch Changes

- [#12967](#12967)
[`50246bbbd0455c30c6950b08c93ac7f7d1811fc0`](50246bb)
Thanks [@moraleslevi](https://github.com/moraleslevi)! - CalloutCard
dismiss button improvements:

    -   Use tertiary button variant
    -   Use regular sized X icon
    -   Adjust position to match Banner
    -   Add translated label

## [email protected]

### Patch Changes

- Updated dependencies
\[[`50246bbbd0455c30c6950b08c93ac7f7d1811fc0`](50246bb)]:
    -   @shopify/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to 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.

[CalloutCard] Inconsistent UI for dismiss button
2 participants