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

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

Hide file tree

Showing 2 changed files with 25 additions and 28 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"