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 ? (