From 50246bbbd0455c30c6950b08c93ac7f7d1811fc0 Mon Sep 17 00:00:00 2001
From: Levi Morales <levi.morales@shopify.com>
Date: Mon, 16 Dec 2024 13:14:33 -0600
Subject: [PATCH] [CalloutCard] Fix dismiss button UI inconsistencies (#12967)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/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

<details>
<summary>Before</summary>

<img width="983" alt="04-30-17lmm-1zbu4"
src="https://github.com/user-attachments/assets/9aee2357-c91b-4dee-90bc-a998eff97c3f">

</details>

<details>
<summary>After</summary>

<img width="1004" alt="04-31-awl5i-59kp8"
src="https://github.com/user-attachments/assets/24cb1c09-6bce-471a-9730-9da8f2cef564">

</details>

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/real-laws-draw.md                           | 10 ++++++++++
 .../src/components/CalloutCard/CalloutCard.module.css  |  4 ++--
 .../src/components/CalloutCard/CalloutCard.tsx         | 10 ++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/real-laws-draw.md

diff --git a/.changeset/real-laws-draw.md b/.changeset/real-laws-draw.md
new file mode 100644
index 00000000000..5f554f987d3
--- /dev/null
+++ b/.changeset/real-laws-draw.md
@@ -0,0 +1,10 @@
+---
+'@shopify/polaris': patch
+---
+
+CalloutCard dismiss button improvements:
+
+- Use tertiary button variant
+- Use regular sized X icon
+- Adjust position to match Banner
+- Add translated label
diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.module.css b/polaris-react/src/components/CalloutCard/CalloutCard.module.css
index 2c2f278184f..e96109b3702 100644
--- a/polaris-react/src/components/CalloutCard/CalloutCard.module.css
+++ b/polaris-react/src/components/CalloutCard/CalloutCard.module.css
@@ -35,7 +35,7 @@
 }
 
 .Dismiss {
-  right: var(--p-space-400);
+  right: var(--p-space-300);
   top: var(--p-space-400);
   position: absolute;
 
@@ -45,5 +45,5 @@
 }
 
 .hasDismiss {
-  padding-right: calc(var(--p-space-800) + var(--p-space-200));
+  padding-right: calc(var(--p-space-800) + var(--p-space-300));
 }
diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.tsx b/polaris-react/src/components/CalloutCard/CalloutCard.tsx
index ccac74b6f20..b7907c77e6b 100644
--- a/polaris-react/src/components/CalloutCard/CalloutCard.tsx
+++ b/polaris-react/src/components/CalloutCard/CalloutCard.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import {XSmallIcon} from '@shopify/polaris-icons';
+import {XIcon} from '@shopify/polaris-icons';
 
 import {classNames} from '../../utilities/css';
+import {useI18n} from '../../utilities/i18n';
 import type {IconableAction} from '../../types';
 // eslint-disable-next-line import/no-deprecated
 import {LegacyCard} from '../LegacyCard';
@@ -37,6 +38,7 @@ export function CalloutCard({
   secondaryAction,
   onDismiss,
 }: CalloutCardProps) {
+  const i18n = useI18n();
   const primaryActionMarkup = buttonFrom(primaryAction);
   const secondaryActionMarkup = secondaryAction
     ? buttonFrom(secondaryAction, {
@@ -56,10 +58,10 @@ export function CalloutCard({
   const dismissButton = onDismiss ? (
     <div className={styles.Dismiss}>
       <Button
-        variant="plain"
-        icon={XSmallIcon}
+        variant="tertiary"
+        icon={XIcon}
         onClick={onDismiss}
-        accessibilityLabel="Dismiss card"
+        accessibilityLabel={i18n.translate('Polaris.Banner.dismissButton')}
       />
     </div>
   ) : null;