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

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

Hide file tree

Showing 4 changed files with 29 additions and 32 deletions.
diff --git a/polaris-react/src/components/Banner/Banner.module.css b/polaris-react/src/components/Banner/Banner.module.css
@@ -12,6 +12,14 @@
   }
 }
 
+.BannerContainer {
+  margin-inline: var(--p-space-300);
+
+  @media (--p-breakpoints-sm-up) {
+    margin-inline: var(--p-space-0);
+  }
+}
+
 .withinContentContainer {
   border-radius: var(--p-border-radius-200);
 
@@ -21,11 +29,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';
@@ -71,18 +70,21 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
 
   return (
     <BannerContext.Provider value>
-      <div
-        className={className}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-        ref={wrapperRef}
-        role={tone === 'warning' || tone === 'critical' ? 'alert' : 'status'}
-        aria-live={stopAnnouncements ? 'off' : 'polite'}
-        onMouseUp={handleMouseUp}
-        onKeyUp={handleKeyUp}
-        onBlur={handleBlur}
-      >
-        <BannerLayout {...props} />
+      <div className={styles.BannerContainer}>
+        <div
+          className={className}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={0}
+          ref={wrapperRef}
+          role={tone === 'warning' || tone === 'critical' ? 'alert' : 'status'}
+          aria-live={stopAnnouncements ? 'off' : 'polite'}
+          onMouseUp={handleMouseUp}
+          onKeyUp={handleKeyUp}
+          onBlur={handleBlur}
+          style={{overflow: 'hidden'}}
+        >
+          <BannerLayout {...props} />
+        </div>
       </div>
     </BannerContext.Provider>
   );
@@ -198,21 +200,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: {