Change Banner border radius on xs to be 300 instead of 0

Shopify · Apr 12, 2024 · c6ff816 · c6ff816
1 parent eb15674
commit c6ff816
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 20 deletions.
diff --git a/.changeset/neat-bobcats-clean.md b/.changeset/neat-bobcats-clean.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add border to Banner on breakpoint-xs and change success icon to CheckCircleIcon
diff --git a/polaris-react/src/components/Banner/Banner.module.css b/polaris-react/src/components/Banner/Banner.module.css
@@ -3,6 +3,12 @@
   position: relative;
   display: flex;
 
+  margin-inline: var(--p-space-300);
+
+  @media (--p-breakpoints-sm-up) {
+    margin-inline: var(--p-space-0);
+  }
+
   &:focus {
     outline: none;
   }
@@ -21,11 +27,7 @@
 }
 
 .withinPage {
-  @mixin shadow-bevel var(--p-shadow-200), var(--p-border-radius-0);
-
-  @media (--p-breakpoints-sm-up) {
-    @mixin shadow-bevel var(--p-shadow-200), var(--p-border-radius-300);
-  }
+  @mixin shadow-bevel var(--p-shadow-200), var(--p-border-radius-300);
 
   + .Banner {
     margin-top: var(--p-space-400);

diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
@@ -23,7 +23,6 @@ import type {IconProps} from '../Icon';
 import {BannerContext} from '../../utilities/banner-context';
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {classNames} from '../../utilities/css';
-import {useBreakpoints} from '../../utilities/breakpoints';
 import {useI18n} from '../../utilities/i18n';
 import {useEventListener} from '../../utilities/use-event-listener';
 import {BlockStack} from '../BlockStack';
@@ -81,6 +80,7 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
         onMouseUp={handleMouseUp}
         onKeyUp={handleKeyUp}
         onBlur={handleBlur}
+        style={{overflow: 'hidden'}}
       >
         <BannerLayout {...props} />
       </div>
@@ -198,21 +198,12 @@ export function DefaultBanner({
   dismissButton,
   children,
 }: PropsWithChildren<BannerLayoutProps>) {
-  const {smUp} = useBreakpoints();
   const hasContent = children || actionButtons;
 
   return (
     <Box width="100%">
       <BlockStack align="space-between">
-        <Box
-          background={backgroundColor}
-          color={textColor}
-          borderStartStartRadius={smUp ? '300' : undefined}
-          borderStartEndRadius={smUp ? '300' : undefined}
-          borderEndStartRadius={!hasContent && smUp ? '300' : undefined}
-          borderEndEndRadius={!hasContent && smUp ? '300' : undefined}
-          padding="300"
-        >
+        <Box background={backgroundColor} color={textColor} padding="300">
           <InlineStack
             align="space-between"
             blockAlign="center"

diff --git a/polaris-react/src/components/Banner/tests/Banner.test.tsx b/polaris-react/src/components/Banner/tests/Banner.test.tsx
@@ -1,10 +1,10 @@
 import React, {useEffect, useRef} from 'react';
 import {
   PlusCircleIcon,
-  CheckIcon,
   AlertTriangleIcon,
   InfoIcon,
   AlertDiamondIcon,
+  CheckCircleIcon,
 } from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
 
@@ -356,7 +356,7 @@ describe('<Banner />', () => {
 
   describe('icon', () => {
     it.each([
-      ['success', CheckIcon],
+      ['success', CheckCircleIcon],
       ['info', InfoIcon],
       ['warning', AlertTriangleIcon],
       ['critical', AlertDiamondIcon],

diff --git a/polaris-react/src/components/Banner/utilities.ts b/polaris-react/src/components/Banner/utilities.ts
@@ -7,7 +7,7 @@ import {
   AlertDiamondIcon,
   InfoIcon,
   AlertTriangleIcon,
-  CheckIcon,
+  CheckCircleIcon,
 } from '@shopify/polaris-icons';
 import {useImperativeHandle, useRef, useState} from 'react';
 
@@ -39,7 +39,7 @@ export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
       text: 'text-success',
       icon: 'text-success',
     },
-    icon: CheckIcon,
+    icon: CheckCircleIcon,
   },
   warning: {
     withinPage: {