From d11ca453fd1cd3c1784ba4685badd4b2cdf79b8f Mon Sep 17 00:00:00 2001
From: Alberto Carreras <10593890+AlbertCarreras@users.noreply.github.com>
Date: Wed, 6 Nov 2024 19:57:03 +0100
Subject: [PATCH] BannerUpsell: removed max witdh for message (#3860)

---
 packages/gestalt/src/BannerUpsell.tsx         |  26 ++-
 .../__snapshots__/BannerUpsell.test.tsx.snap  | 188 ++++++------------
 2 files changed, 70 insertions(+), 144 deletions(-)

diff --git a/packages/gestalt/src/BannerUpsell.tsx b/packages/gestalt/src/BannerUpsell.tsx
index f27cdb690d..cdfee6ab32 100644
--- a/packages/gestalt/src/BannerUpsell.tsx
+++ b/packages/gestalt/src/BannerUpsell.tsx
@@ -229,20 +229,18 @@ export default function BannerUpsell({
             smMarginEnd={6}
             smMarginStart={imageData ? 6 : 0}
           >
-            <Box maxWidth={648}>
-              {title && (
-                <Box marginBottom={2}>
-                  <Text
-                    align={responsiveMinWidth === 'xs' ? 'center' : 'start'}
-                    size="400"
-                    weight="bold"
-                  >
-                    {title}
-                  </Text>
-                </Box>
-              )}
-              {messageElement}
-            </Box>
+            {title && (
+              <Box marginBottom={2}>
+                <Text
+                  align={responsiveMinWidth === 'xs' ? 'center' : 'start'}
+                  size="400"
+                  weight="bold"
+                >
+                  {title}
+                </Text>
+              </Box>
+            )}
+            {messageElement}
             {children && (
               <Box
                 flex="grow"
diff --git a/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
index 6bf795bcec..b83a1e8484 100644
--- a/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
@@ -19,18 +19,9 @@ exports[`<BannerUpsell /> Basic BannerUpsell 1`] = `
         className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
         >
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
-          >
-            Insert a clever upsell message here
-          </div>
+          Insert a clever upsell message here
         </div>
       </div>
     </div>
@@ -89,28 +80,19 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
         className="box flexGrow marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart600 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="box marginBottom200"
         >
           <div
-            className="box marginBottom200"
+            className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
           >
-            <div
-              className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
-            >
-              A Title
-            </div>
-          </div>
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
-          >
-            Insert a clever upsell message here
+            A Title
           </div>
         </div>
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        >
+          Insert a clever upsell message here
+        </div>
         <div
           className="box flexGrow justifyEnd smDisplayFlex smMarginEnd400 smPaddingY300"
           style={
@@ -300,28 +282,19 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
         className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart600 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="box marginBottom200"
         >
           <div
-            className="box marginBottom200"
+            className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
           >
-            <div
-              className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
-            >
-              A Title
-            </div>
-          </div>
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
-          >
-            Insert a clever upsell message here
+            A Title
           </div>
         </div>
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        >
+          Insert a clever upsell message here
+        </div>
       </div>
     </div>
     <div
@@ -438,28 +411,19 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
         className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="box marginBottom200"
         >
           <div
-            className="box marginBottom200"
+            className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
           >
-            <div
-              className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
-            >
-              A Title
-            </div>
-          </div>
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
-          >
-            Insert a clever upsell message here
+            A Title
           </div>
         </div>
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        >
+          Insert a clever upsell message here
+        </div>
       </div>
     </div>
     <div
@@ -576,28 +540,19 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
         className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="box marginBottom200"
         >
           <div
-            className="box marginBottom200"
-          >
-            <div
-              className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
-            >
-              A Title
-            </div>
-          </div>
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+            className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
           >
-            Insert a clever upsell message here
+            A Title
           </div>
         </div>
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        >
+          Insert a clever upsell message here
+        </div>
       </div>
     </div>
     <div
@@ -703,28 +658,19 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
         className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="box marginBottom200"
         >
           <div
-            className="box marginBottom200"
-          >
-            <div
-              className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
-            >
-              A Title
-            </div>
-          </div>
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+            className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
           >
-            Insert a clever upsell message here
+            A Title
           </div>
         </div>
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        >
+          Insert a clever upsell message here
+        </div>
       </div>
     </div>
     <div
@@ -792,28 +738,19 @@ exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
         className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="box marginBottom200"
         >
           <div
-            className="box marginBottom200"
-          >
-            <div
-              className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
-            >
-              A Title
-            </div>
-          </div>
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+            className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
           >
-            Insert a clever upsell message here
+            A Title
           </div>
         </div>
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        >
+          Insert a clever upsell message here
+        </div>
       </div>
     </div>
     <div
@@ -872,28 +809,19 @@ exports[`<BannerUpsell /> message + title 1`] = `
         className="box marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd600 smMarginStart0 xsDirectionColumn xsDisplayFlex xsItemsCenter"
       >
         <div
-          className="box"
-          style={
-            Object {
-              "maxWidth": 648,
-            }
-          }
+          className="box marginBottom200"
         >
           <div
-            className="box marginBottom200"
-          >
-            <div
-              className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
-            >
-              A Title
-            </div>
-          </div>
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+            className="default alignStart breakWord Text fontSize400 fontWeightSemiBold"
           >
-            Insert a clever upsell message here
+            A Title
           </div>
         </div>
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightNormal"
+        >
+          Insert a clever upsell message here
+        </div>
       </div>
     </div>
   </div>