fix(DatePicker): correct input alignment without label (#2243)

razorpay · Jun 19, 2024 · 25fe56d · 25fe56d
1 parent f8b3dc3
commit 25fe56d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/slimy-taxis-retire.md b/.changeset/slimy-taxis-retire.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(DatePicker): correct input alignment without label
diff --git a/packages/blade/src/components/DatePicker/DateInput.web.tsx b/packages/blade/src/components/DatePicker/DateInput.web.tsx
@@ -77,10 +77,11 @@ const _DatePickerInput = (
   const isMobile = useIsMobile();
   const format = 'DD/MM/YYYY';
   const isLarge = size === 'large';
+  const hasLabel = typeof label === 'string' ? Boolean(label) : Boolean(label?.start || label?.end);
   const isLabelPositionLeft = labelPosition === 'left';
   const isLabelPositionTop = labelPosition === 'top';
-  const isLabelPositionVisuallyTop = isLabelPositionTop || isMobile;
-  const hasLabel = Boolean(label);
+  const isLabelPositionVisuallyTop = hasLabel && (isLabelPositionTop || isMobile);
+
   const { locale } = useDatesContext();
 
   if (selectionType == 'single') {
@@ -183,7 +184,7 @@ const _DatePickerInput = (
             size="medium"
             marginTop={
               // Hacky layouting because the we cannot put this inside the internal layout of BaseInput.
-              (hasLabel && !isLabelPositionLeft) || isMobile
+              hasLabel && (!isLabelPositionLeft || isMobile)
                 ? `calc(${makeSize(iconVerticalMargin[size])} + ${makeSize(
                     isLarge ? sizeTokens[20] : sizeTokens[15],
                   )})`