fix: datepicker label alignment (#2207)

* chore: fix label alignment * chore: move i18nify react to peer dep * chore: fix type * Create hungry-toes-cheat.md
razorpay · May 29, 2024 · 04c84eb · 04c84eb
1 parent 70f8d54
commit 04c84eb
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 8 deletions.
diff --git a/.changeset/hungry-toes-cheat.md b/.changeset/hungry-toes-cheat.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: datepicker label alignment
diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -300,7 +300,8 @@
     "react-hot-toast": "2.4.1",
     "@gorhom/bottom-sheet": "^4.4.6",
     "@gorhom/portal": "^1.0.14",
-    "@razorpay/i18nify-js": "^1.9.3"
+    "@razorpay/i18nify-js": "^1.9.3",
+    "@razorpay/i18nify-react": "^4.0.8"
   },
   "peerDependenciesMeta": {
     "react-native": {

diff --git a/packages/blade/src/components/DatePicker/DateInput.web.tsx b/packages/blade/src/components/DatePicker/DateInput.web.tsx
@@ -66,6 +66,9 @@ const _DatePickerInput = (
     name,
     size = 'medium',
     necessityIndicator,
+    successText,
+    errorText,
+    helpText,
     ...props
   }: DatePickerInputProps,
   ref: React.ForwardedRef<any>,
@@ -74,6 +77,8 @@ const _DatePickerInput = (
   const format = 'DD/MM/YYYY';
   const isLarge = size === 'large';
   const isLabelPositionLeft = labelPosition === 'left';
+  const isLabelPositionTop = labelPosition === 'top';
+  const isLabelPositionVisuallyTop = isLabelPositionTop || isMobile;
   const hasLabel = Boolean(label);
   const { locale } = useDatesContext();
 
@@ -100,6 +105,9 @@ const _DatePickerInput = (
           autoFocus={autoFocus}
           value={dateValue}
           componentName="DatePickerInput"
+          successText={successText}
+          errorText={errorText}
+          helpText={helpText}
           {...props}
           {...referenceProps}
         />
@@ -108,6 +116,21 @@ const _DatePickerInput = (
   }
 
   if (selectionType == 'range') {
+    const shouldRenderEndLabel = (): string | undefined => {
+      let finalLabel: string | undefined = '';
+
+      const labelEnd = isLabelPositionLeft ? undefined : label?.end;
+      if (isLabelPositionVisuallyTop && labelEnd === undefined) {
+        // Empty space, nbsp;
+        finalLabel = '\u00A0';
+      } else if (isLabelPositionLeft) {
+        finalLabel = undefined;
+      } else {
+        finalLabel = label?.end;
+      }
+      return finalLabel;
+    };
+
     const startValue = getFormattedDate({
       type: 'default',
       date: date[0],
@@ -128,7 +151,7 @@ const _DatePickerInput = (
         display="flex"
         flexDirection="row"
         gap="spacing.4"
-        alignItems="flex-end"
+        alignItems="flex-start"
         ref={ref as never}
       >
         <BaseBox flex={1}>
@@ -147,6 +170,9 @@ const _DatePickerInput = (
             value={startValue}
             componentName="DatePickerInputStart"
             necessityIndicator={necessityIndicator}
+            successText={successText?.start}
+            errorText={errorText?.start}
+            helpText={helpText?.start}
             {...props}
             {...referenceProps}
           />
@@ -170,13 +196,16 @@ const _DatePickerInput = (
             id="end-date"
             placeholder={format}
             leadingIcon={CalendarIcon}
-            label={isLabelPositionLeft ? undefined : label?.end}
+            label={shouldRenderEndLabel()}
             labelPosition={isLabelPositionLeft ? undefined : labelPosition}
             popupId={referenceProps['aria-controls']}
             isPopupExpanded={referenceProps['aria-expanded']}
             size={size}
             value={endValue}
             componentName="DatePickerInputEnd"
+            successText={successText?.end}
+            errorText={errorText?.end}
+            helpText={helpText?.end}
             {...props}
             {...referenceProps}
           />

diff --git a/packages/blade/src/components/DatePicker/DatePicker.web.tsx b/packages/blade/src/components/DatePicker/DatePicker.web.tsx
@@ -263,11 +263,11 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
             labelPosition={labelPosition}
             accessibilityLabel={accessibilityLabel}
             size={size}
-            errorText={errorText}
-            helpText={helpText}
+            errorText={errorText as never}
+            helpText={helpText as never}
+            successText={successText as never}
             isDisabled={isDisabled}
             isRequired={isRequired}
-            successText={successText}
             validationState={validationState}
             autoFocus={autoFocus}
             necessityIndicator={necessityIndicator}

diff --git a/packages/blade/src/components/DatePicker/types.ts b/packages/blade/src/components/DatePicker/types.ts
@@ -133,7 +133,16 @@ type DatePickerProps<Type extends DateSelectionType> = Omit<
   CalendarProps<Type>,
   MantineInternalProps
 > &
-  Omit<DatePickerCommonInputProps, 'inputRef' | 'referenceProps' | 'labelPosition' | 'name'> & {
+  Omit<
+    DatePickerCommonInputProps,
+    | 'inputRef'
+    | 'referenceProps'
+    | 'labelPosition'
+    | 'name'
+    | 'successText'
+    | 'errorText'
+    | 'helpText'
+  > & {
     /**
      * Sets the label for the input element.
      */
@@ -145,20 +154,29 @@ type DatePickerProps<Type extends DateSelectionType> = Omit<
      * @example 'date' | { start: 'start-date', end: 'end-date' }
      */
     name?: Type extends 'single' ? string : { start: string; end?: string };
+    helpText?: Type extends 'single' ? string : { start: string; end?: string };
+    errorText?: Type extends 'single' ? string : { start: string; end?: string };
+    successText?: Type extends 'single' ? string : { start: string; end?: string };
     labelPosition?: BaseInputProps['labelPosition'];
   };
 
 type DatePickerRangeInputProps = {
   selectionType: 'range';
   label?: { start: string; end?: string };
   name?: { start: string; end: string };
+  successText?: { start: string; end?: string };
+  errorText?: { start: string; end?: string };
+  helpText?: { start: string; end?: string };
   date: [Date, Date];
 };
 
 type DatePickerSingleInputProps = {
   selectionType: 'single';
   label?: string;
   name?: string;
+  successText?: string;
+  errorText?: string;
+  helpText?: string;
   date: Date;
 };
 

diff --git a/packages/blade/src/components/Input/BaseInput/BaseInput.tsx b/packages/blade/src/components/Input/BaseInput/BaseInput.tsx
@@ -906,7 +906,7 @@ const _BaseInput: React.ForwardRefRenderFunction<BladeElementRef, BaseInputProps
         position="relative"
         width="100%"
       >
-        {!hideLabelText && !isLabelInsideInput && (
+        {!hideLabelText && !isLabelInsideInput && label && (
           <BaseBox
             display="flex"
             flexDirection={isLabelLeftPositioned ? 'column' : 'row'}

diff --git a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts
@@ -58,6 +58,7 @@ export const getReactScriptsJSDependencies = (): Dependencies => {
       '@razorpay/blade': getBladeVersion(),
       'styled-components': packageJson.peerDependencies['styled-components'],
       '@razorpay/i18nify-js': packageJson.peerDependencies['@razorpay/i18nify-js'],
+      '@razorpay/i18nify-react': packageJson.peerDependencies['@razorpay/i18nify-react'],
     },
   };
 };
@@ -73,6 +74,7 @@ const getViteReactTSDependencies = (): Dependencies => {
       '@razorpay/blade': getBladeVersion(),
       'styled-components': packageJson.peerDependencies['styled-components'],
       '@razorpay/i18nify-js': packageJson.peerDependencies['@razorpay/i18nify-js'],
+      '@razorpay/i18nify-react': packageJson.peerDependencies['@razorpay/i18nify-react'],
     },
     devDependencies: {
       vite: '4.5.0',