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;