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;