fix(SideNav): empty padding in banner (#2463)

* fix(SideNav): empty padding in banner * fix: remove comment * Create hot-snails-dress.md * fix: add makeSpace and makeBorderSize
razorpay · Jan 9, 2025 · c676f3e · c676f3e
1 parent 1fc3dcb
commit c676f3e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/.changeset/hot-snails-dress.md b/.changeset/hot-snails-dress.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(SideNav): empty padding in banner when banner component returns null
diff --git a/packages/blade/src/components/SideNav/SideNav.web.tsx b/packages/blade/src/components/SideNav/SideNav.web.tsx
@@ -13,14 +13,15 @@ import {
   SIDE_NAV_EXPANDED_L1_WIDTH_XL,
 } from './tokens';
 import BaseBox from '~components/Box/BaseBox';
-import { makeMotionTime, makeSize, makeSpace } from '~utils';
+import { makeBorderSize, makeMotionTime, makeSize, makeSpace } from '~utils';
 import { Drawer, DrawerBody, DrawerHeader } from '~components/Drawer';
 import { SkipNavContent, SkipNavLink } from '~components/SkipNav/SkipNav';
 import { useIsMobile } from '~utils/useIsMobile';
 import { getStyledProps } from '~components/Box/styledProps';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import type { BladeElementRef } from '~utils/types';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
+import { size as sizeTokens } from '~tokens/global';
 
 const {
   COLLAPSED,
@@ -93,6 +94,22 @@ const getL1MenuClassName = ({
   return '';
 };
 
+const BannerContainer = styled(BaseBox)((props) => {
+  return {
+    '&:not(:empty)': {
+      borderBottom: makeBorderSize(props.theme.border.width.thin),
+      borderBottomStyle: 'solid',
+      borderBottomColor: props.theme.colors.surface.border.gray.muted,
+      borderRight: makeBorderSize(props.theme.border.width.thin),
+      borderRightStyle: 'solid',
+      borderRightColor: props.theme.colors.surface.border.gray.muted,
+      padding: makeSpace(props.theme.spacing[3]),
+      maxHeight: makeSize(sizeTokens['100']),
+      width: '100%',
+    },
+  };
+});
+
 /**
  * ### SideNav component
  *
@@ -253,19 +270,7 @@ const _SideNav = (
           {...getStyledProps(rest)}
           {...makeAnalyticsAttribute(rest)}
         >
-          {banner ? (
-            <BaseBox
-              borderBottom="thin"
-              borderBottomColor="surface.border.gray.muted"
-              borderRight="thin"
-              borderRightColor="surface.border.gray.muted"
-              padding="spacing.3"
-              maxHeight="100px"
-              width="100%"
-            >
-              {banner}
-            </BaseBox>
-          ) : null}
+          {banner ? <BannerContainer>{banner}</BannerContainer> : null}
           <BaseBox position="relative" display="block" flex="1" width="100%">
             <BaseBox
               position="absolute"