feat(datepicker): exposing footer prop (#2927)

* feat(datepicker): exposing footer slot prop

* Create cuddly-pigs-explode.md

* chore: updated storybook example

* fix: lint error

* chore: resolved commets

* chore: fix maxwidth value

* Update cuddly-pigs-explode.md

Author: swapnil-kr1

.changeset/cuddly-pigs-explode.md

@@ -0,0 +1,6 @@
+---
+"@razorpay/blade": patch
+"@razorpay/blade-mcp": patch
+---
+
+feat(datepicker): exposing footer prop

packages/blade-mcp/knowledgebase/components/DatePicker.md

@@ -119,6 +119,12 @@ type DatePickerCommonProps<T extends DatePickerSelectionType> = {
    */
   showFooterActions?: boolean;
 
+  /**
+   * Custom React element to render in the footer above/side of action buttons
+   * Can be used to add custom content like informational text, links, or other components
+   */
+  footer?: React.ReactElement;
+
   /**
    * Sets the date format to be displayed in the input field
    * @default 'DD/MM/YYYY'
@@ -414,6 +420,12 @@ const SizeVariantsExample = () => {
           isOpen={isSingleOpen}
           onOpenChange={({ isOpen }) => setIsSingleOpen(isOpen)}
           showFooterActions={false}
+          footer={
+            <Text size="small" color="surface.text.gray.muted">
+              This section only displays records from the last 45 days. For earlier data, please
+              download a report from the Reports section.
+            </Text>
+          }
         />
 
         <DatePicker

packages/blade/src/components/DatePicker/BaseDatePicker.web.tsx

@@ -46,7 +46,8 @@ import { useFilterChipGroupContext } from '~components/Dropdown/FilterChipGroupC
 // Calendar dimensions for consistent layout
 const CALENDAR_HEIGHTS = {
   // Height includes: Calendar grid (6 weeks * ~44px) + header (~48px) + footer actions (~64px) + padding
-  DAY_PICKER_WITH_FOOTER: '447px',
+  // moved to auto since we are exposing footer slot
+  DAY_PICKER_WITH_FOOTER: 'auto',
 } as const;
 
 const BaseDatePicker = <Type extends DateSelectionType = 'single'>({
@@ -84,6 +85,7 @@ const BaseDatePicker = <Type extends DateSelectionType = 'single'>({
   labelSuffix,
   labelTrailing,
   showFooterActions = true,
+  footer,
   ...props
 }: DatePickerProps<Type> &
   StyledPropsBlade &
@@ -383,6 +385,8 @@ const BaseDatePicker = <Type extends DateSelectionType = 'single'>({
               isButtonDisabled={applyButtonDisabled}
               onApply={handleApply}
               onCancel={handleCancel}
+              footer={footer}
+              selectionType={_selectionType}
             />
           ))}
       </BaseBox>
@@ -516,7 +520,12 @@ const BaseDatePicker = <Type extends DateSelectionType = 'single'>({
                 </BottomSheetBody>
                 {showFooterActions && (
                   <BottomSheetFooter>
-                    <CalendarFooter onCancel={handleCancel} onApply={handleApply} />
+                    <CalendarFooter
+                      onCancel={handleCancel}
+                      onApply={handleApply}
+                      footer={footer}
+                      selectionType={_selectionType}
+                    />
                   </BottomSheetFooter>
                 )}
               </BottomSheet>

packages/blade/src/components/DatePicker/CalendarFooter.web.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DateSelectionType } from './types';
 import BaseBox from '~components/Box/BaseBox';
 import { Button } from '~components/Button';
 import { Divider } from '~components/Divider';
@@ -9,43 +10,58 @@ type CalendarFooterProps = {
   onApply: () => void;
   onCancel: () => void;
   isButtonDisabled?: boolean;
+  footer?: React.ReactElement;
+  selectionType?: DateSelectionType;
 };
 const CalendarFooter = ({
   onApply,
   onCancel,
   isButtonDisabled,
+  footer,
+  selectionType,
 }: CalendarFooterProps): React.ReactElement => {
   const isMobile = useIsMobile();
 
+  const isSingleSelectionOrMobile = isMobile || selectionType === 'single';
+  const footerMaxWidth = React.useMemo(() => {
+    if (isMobile) return '100%';
+    return selectionType === 'single' ? '280px' : '390px';
+  }, [isMobile, selectionType]);
+
   return (
     <BaseBox display="flex" flexDirection="column" gap="spacing.5">
       {isMobile ? null : <Divider />}
+
       <BaseBox
-        width={{ base: '100%', m: 'auto' }}
-        marginLeft="auto"
         display="flex"
-        flexDirection="row"
-        gap={isMobile ? 'spacing.5' : 'spacing.3'}
+        flexDirection={isSingleSelectionOrMobile ? 'column' : 'row'}
+        gap={isSingleSelectionOrMobile ? 'spacing.5' : 'spacing.6'}
+        justifyContent="space-between"
       >
-        <Button
-          isFullWidth={isMobile}
-          variant="tertiary"
-          size="medium"
-          onClick={onCancel}
-          data-analytics-name={MAKE_ANALYTICS_CONSTANTS.DATE_PICKER.CANCEL_BUTTON}
-        >
-          Cancel
-        </Button>
-        <Button
-          isDisabled={isButtonDisabled}
-          isFullWidth={isMobile}
-          variant="primary"
-          size="medium"
-          onClick={onApply}
-          data-analytics-name={MAKE_ANALYTICS_CONSTANTS.DATE_PICKER.APPLY_BUTTON}
-        >
-          Apply
-        </Button>
+        {footer ? <BaseBox maxWidth={footerMaxWidth}>{footer}</BaseBox> : null}
+        <BaseBox width={{ base: '100%', m: 'auto' }} marginLeft="auto">
+          <BaseBox display="flex" flexDirection="row" gap={isMobile ? 'spacing.5' : 'spacing.3'}>
+            <Button
+              isFullWidth={isMobile}
+              variant="tertiary"
+              size="medium"
+              onClick={onCancel}
+              data-analytics-name={MAKE_ANALYTICS_CONSTANTS.DATE_PICKER.CANCEL_BUTTON}
+            >
+              Cancel
+            </Button>
+            <Button
+              isDisabled={isButtonDisabled}
+              isFullWidth={isMobile}
+              variant="primary"
+              size="medium"
+              onClick={onApply}
+              data-analytics-name={MAKE_ANALYTICS_CONSTANTS.DATE_PICKER.APPLY_BUTTON}
+            >
+              Apply
+            </Button>
+          </BaseBox>
+        </BaseBox>
       </BaseBox>
     </BaseBox>
   );

packages/blade/src/components/DatePicker/DatePicker.stories.tsx

@@ -63,6 +63,7 @@ export default {
     onPreviousMonth: baseProp,
     onPreviousYear: baseProp,
     locale: baseProp,
+    footer: baseProp,
     accessibilityLabel: inputProp,
     errorText: inputProp,
     helpText: inputProp,
@@ -632,6 +633,24 @@ export const DatePickerWithLabelSuffixTrailing: StoryFn<typeof DatePickerCompone
   );
 };
 
+export const DatePickerWithFooter = DatePickerTemplate.bind({});
+DatePickerWithFooter.storyName = 'DatePicker with Footer';
+DatePickerWithFooter.args = {
+  label: 'Select a date',
+  selectionType: 'range',
+  footer: (
+    <Box display="flex" flexDirection="column" gap="spacing.2">
+      <Text size="small" color="surface.text.gray.normal">
+        This section only displays records from the last 45 days. This section only displays records
+        from the last 45 days.
+      </Text>
+      <Link size="small" href="#">
+        Link to report tab
+      </Link>
+    </Box>
+  ),
+};
+
 export const WithoutActionButtons = DatePickerTemplate.bind({});
 WithoutActionButtons.storyName = 'Without Action Buttons';
 WithoutActionButtons.args = {

packages/blade/src/components/DatePicker/_decisions/decisions.md

@@ -72,6 +72,11 @@ type DatePickerProps = InputProps &
      * @default true
      */
     showFooterActions?: boolean;
+    /**
+     * Custom React element to render in the footer above/side of action buttons
+     * Can be used to add custom content like informational text, links, or other components
+     */
+    footer?: React.ReactElement;
   };
 ```
 

packages/blade/src/components/DatePicker/types.ts

@@ -132,6 +132,11 @@ type CalendarProps<SelectionType extends DateSelectionType> = Pick<
    * @default true
    */
   showFooterActions?: boolean;
+  /**
+   * Custom React element to render in the footer above/side of action buttons
+   * Can be used to add custom content like informational text, links, or other components
+   */
+  footer?: React.ReactElement;
 };
 
 type DatePickerProps<Type extends DateSelectionType> = Omit<