From f8ee15b1fb8f2001f289853dc827c813e4dcbae4 Mon Sep 17 00:00:00 2001
From: Levi Morales <levi.morales@shopify.com>
Date: Wed, 4 Dec 2024 14:24:35 -0600
Subject: [PATCH] CalloutCard dismiss button improvements

---
 .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;