From 92eb8c240ae9df50232bb63ab2a3a5eff7d127ae Mon Sep 17 00:00:00 2001
From: arkmadj <ahmadjinadu@gmail.com>
Date: Mon, 22 Apr 2024 08:19:26 +0100
Subject: [PATCH] added left element prop to date input 3

---
 .../src/components/date-input/dateInput.tsx   |  5 +++++
 .../src/components/date-input3/dateInput3.tsx |  3 +++
 .../datetime2-examples/dateInput3Example.tsx  | 22 ++++++++++++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/datetime/src/components/date-input/dateInput.tsx b/packages/datetime/src/components/date-input/dateInput.tsx
index aa5ffe84b8..db9be68593 100644
--- a/packages/datetime/src/components/date-input/dateInput.tsx
+++ b/packages/datetime/src/components/date-input/dateInput.tsx
@@ -155,6 +155,11 @@ export interface DateInputProps extends DatePickerBaseProps, DateFormatProps, Da
      */
     rightElement?: React.JSX.Element;
 
+    /**
+     * Element to render on left side of input.
+     */
+    leftElement?: React.JSX.Element;
+
     /**
      * Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
      *
diff --git a/packages/datetime2/src/components/date-input3/dateInput3.tsx b/packages/datetime2/src/components/date-input3/dateInput3.tsx
index 5afbc3bf52..5675ee0a01 100644
--- a/packages/datetime2/src/components/date-input3/dateInput3.tsx
+++ b/packages/datetime2/src/components/date-input3/dateInput3.tsx
@@ -94,6 +94,7 @@ export const DateInput3: React.FC<DateInput3Props> = React.memo(function _DateIn
         popoverProps = {},
         popoverRef,
         rightElement,
+        leftElement,
         showTimezoneSelect,
         timePrecision,
         timezone: controlledTimezone,
@@ -502,6 +503,7 @@ export const DateInput3: React.FC<DateInput3Props> = React.memo(function _DateIn
                     className={classNames(targetProps.className, inputProps.className)}
                     intent={shouldShowErrorStyling && isErrorState ? "danger" : "none"}
                     placeholder={placeholder}
+                    leftElement={leftElement}
                     rightElement={
                         <>
                             {rightElement}
@@ -545,6 +547,7 @@ export const DateInput3: React.FC<DateInput3Props> = React.memo(function _DateIn
             popoverId,
             popoverProps.targetTagName,
             rightElement,
+            leftElement,
             shouldShowErrorStyling,
         ],
     );
diff --git a/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx
index 868fd28455..ad6f8fe57b 100644
--- a/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx
+++ b/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx
@@ -39,6 +39,7 @@ interface DateInput3ExampleState {
     reverseMonthAndYearMenus: boolean;
     shortcuts: boolean;
     showActionsBar: boolean;
+    showLeftElement: boolean;
     showRightElement: boolean;
     showTimePickerArrows: boolean;
     showTimezoneSelect: boolean;
@@ -58,6 +59,7 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
         reverseMonthAndYearMenus: false,
         shortcuts: false,
         showActionsBar: false,
+        showLeftElement: false,
         showRightElement: false,
         showTimePickerArrows: false,
         showTimezoneSelect: true,
@@ -83,6 +85,8 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
 
     private toggleReverseMenus = handleBooleanChange(reverse => this.setState({ reverseMonthAndYearMenus: reverse }));
 
+    private toggleLeftElement = handleBooleanChange(showLeftElement => this.setState({ showLeftElement }));
+
     private toggleRightElement = handleBooleanChange(showRightElement => this.setState({ showRightElement }));
 
     private toggleTimePickerArrows = handleBooleanChange(showTimePickerArrows =>
@@ -102,7 +106,8 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
     );
 
     public render() {
-        const { date, localeCode, showRightElement, showTimePickerArrows, useAmPm, ...spreadProps } = this.state;
+        const { date, localeCode, showRightElement, showLeftElement, showTimePickerArrows, useAmPm, ...spreadProps } =
+            this.state;
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
@@ -114,6 +119,11 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
                     rightElement={
                         showRightElement && <Icon icon="globe" intent="primary" style={{ padding: "7px 5px" }} />
                     }
+                    leftElement={
+                        showLeftElement ? (
+                            <Icon icon="calendar" intent="primary" style={{ padding: "0px 2px" }} />
+                        ) : undefined
+                    }
                     timePickerProps={
                         this.state.timePrecision === undefined
                             ? undefined
@@ -136,6 +146,7 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
             reverseMonthAndYearMenus: reverse,
             shortcuts,
             showActionsBar,
+            showLeftElement,
             showRightElement,
             showTimePickerArrows,
             showTimezoneSelect,
@@ -187,6 +198,15 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
                 <PropCodeTooltip snippet={`fill={${fill.toString()}}`}>
                     <Switch label="Fill container width" checked={fill} onChange={this.toggleFill} />
                 </PropCodeTooltip>
+                <PropCodeTooltip
+                    content={
+                        <>
+                            <Code>leftElement</Code> is {showLeftElement ? "defined" : "undefined"}
+                        </>
+                    }
+                >
+                    <Switch label="Show left element" checked={showLeftElement} onChange={this.toggleLeftElement} />
+                </PropCodeTooltip>
                 <PropCodeTooltip
                     content={
                         <>