BannerSlim: fix <sm breakpoint paddingY (#3943)

pinterest · Jan 16, 2025 · 1ed8b86 · 1ed8b86
1 parent dab963a
commit 1ed8b86
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/docs/pages/web/bannerslim.tsx b/docs/pages/web/bannerslim.tsx
@@ -441,7 +441,7 @@ BannerSlim doesn't depend on DeviceTypeProvider to display a mobile view; instea
 **[BannerUpsell](/web/bannerupsell)**
 An BannerUpsell is used to market new features or to encourage a user to try recommendations.
 
-**[BannerCallout](/web/bannercallout)**
+**[BannerCallout](/web/bannercallout)** 
 BannerCallouts are used at the top-most level of a page to communicate highest-priority information that applies to the entire page or surface. BannerCallouts can be dismissed and are also actionable.
 
 **[Toast](/web/toast)**

diff --git a/packages/gestalt/src/BannerSlim.tsx b/packages/gestalt/src/BannerSlim.tsx
@@ -221,6 +221,7 @@ export default function BannerSlim({
       display="flex"
       mdDirection="row"
       paddingX={isBare ? 0 : 4}
+      paddingY={isBare ? 0 : 4}
       rounding={4}
       smPaddingY={isBare ? 1 : 4}
       width="100%"

diff --git a/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`BannerSlim renders an icon with accessibility label 1`] = `
 <div
-  className="box errorWeak mdDirectionRow paddingX400 rounding4 smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box errorWeak mdDirectionRow paddingX400 paddingY400 rounding4 smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -64,7 +64,7 @@ exports[`BannerSlim renders an icon with accessibility label 1`] = `
 
 exports[`BannerSlim renders complex message 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -130,7 +130,7 @@ exports[`BannerSlim renders complex message 1`] = `
 
 exports[`BannerSlim renders neutral type with message 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -170,7 +170,7 @@ exports[`BannerSlim renders neutral type with message 1`] = `
 
 exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 <div
-  className="box mdDirectionRow paddingX0 rounding4 smPaddingY100 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX0 paddingY0 rounding4 smPaddingY100 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -232,7 +232,7 @@ exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 
 exports[`BannerSlim renders primary action and dismiss button 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -391,7 +391,7 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
 
 exports[`BannerSlim renders simple message with helper link 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY400 rounding4 secondary smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",

diff --git a/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
@@ -177,7 +177,7 @@ exports[`renders correctly with drawer 1`] = `
             className="box paddingX200 paddingY200"
           >
             <div
-              className="box mdDirectionRow paddingX400 recommendationWeak rounding4 smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+              className="box mdDirectionRow paddingX400 paddingY400 recommendationWeak rounding4 smPaddingY400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
               style={
                 Object {
                   "width": "100%",