CalloutCard dismiss button improvements

Shopify · Dec 4, 2024 · b80a0a8 · b80a0a8
1 parent 70bfcbe
commit b80a0a8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/.changeset/real-laws-draw.md 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/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
@@ -1,13 +1,43 @@
 import React from 'react';
 
-import {Page} from '../src';
+import {Banner, CalloutCard, Layout, Page, Text} from '../src';
 
 export const Playground = {
   tags: ['skip-tests'],
   render() {
     return (
       <Page title="Playground">
-        {/* Add the code you want to test in here */}
+        <Layout>
+          <Layout.Section>
+            <Banner tone="info" onDismiss={() => {}}>
+              <Text as="p">
+                Enabling certain features in your store may prevent you from
+                selling bundles. Learn more about Shopify Bundles compatibility
+              </Text>
+            </Banner>
+          </Layout.Section>
+
+          <Layout.Section>
+            <CalloutCard
+              illustration="https://burst.shopifycdn.com/photos/hands-hold-a-cellphone-with-a-graph-on-screen.jpg?width=373"
+              title="Product bundles reports are now available"
+              primaryAction={{
+                content: 'View bundle reports',
+                onAction: () => {},
+              }}
+              secondaryAction={{
+                content: 'Learn more',
+                onAction: () => {},
+              }}
+              onDismiss={() => {}}
+            >
+              <Text as="p" variant="bodyMd" breakWord>
+                Get real-time metrics on how your bundles are performing with
+                the new Analytics.
+              </Text>
+            </CalloutCard>
+          </Layout.Section>
+        </Layout>
       </Page>
     );
   },

diff --git 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
@@ -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;