fix(DateInput, DateInput3): use flex layout for rightElement (#6372)

palantir · Sep 7, 2023 · 43fbb54 · 43fbb54 · adidahiya · Sep 7, 2023
1 parent 5f40f68
commit 43fbb54
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 10 deletions.
diff --git a/packages/datetime/src/components/date-input/_dateinput.scss b/packages/datetime/src/components/date-input/_dateinput.scss
@@ -3,6 +3,9 @@
 
 @import "../../common";
 
-.#{$ns}-dateinput-popover {
-  padding: 0;
+.#{$ns}-date-input {
+  .#{$ns}-input-action {
+    display: flex;
+    flex-direction: row;
+  }
 }
diff --git a/packages/datetime/src/components/date-input/dateInput.tsx b/packages/datetime/src/components/date-input/dateInput.tsx
@@ -583,8 +583,8 @@ export const DateInput: React.FC<DateInputProps> = React.memo(function _DateInpu
                     placeholder={placeholder}
                     rightElement={
                         <>
-                            {maybeTimezonePicker}
                             {props.rightElement}
+                            {maybeTimezonePicker}
                         </>
                     }
                     tagName={popoverProps.targetTagName}

diff --git a/packages/datetime2/src/components/date-input3/dateInput3.tsx b/packages/datetime2/src/components/date-input3/dateInput3.tsx
@@ -467,8 +467,8 @@ export const DateInput3: React.FC<DateInput3Props> = React.memo(function _DateIn
                     placeholder={placeholder}
                     rightElement={
                         <>
-                            {maybeTimezonePicker}
                             {props.rightElement}
+                            {maybeTimezonePicker}
                         </>
                     }
                     tagName={popoverProps.targetTagName}

diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
@@ -101,9 +101,7 @@ export class DateInputExample extends React.PureComponent<ExampleProps, DateInpu
                     onChange={this.handleDateChange}
                     popoverProps={{ placement: "bottom" }}
                     rightElement={
-                        showRightElement && (
-                            <Icon icon="globe" intent="primary" style={{ padding: 7, marginLeft: -5 }} />
-                        )
+                        showRightElement && <Icon icon="globe" intent="primary" style={{ padding: "7px 5px" }} />
                     }
                     timePickerProps={
                         this.state.timePrecision === undefined

diff --git a/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx
@@ -101,9 +101,7 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
                     onChange={this.handleDateChange}
                     popoverProps={{ placement: "bottom" }}
                     rightElement={
-                        showRightElement && (
-                            <Icon icon="globe" intent="primary" style={{ padding: 7, marginLeft: -5 }} />
-                        )
+                        showRightElement && <Icon icon="globe" intent="primary" style={{ padding: "7px 5px" }} />
                     }
                     timePickerProps={
                         this.state.timePrecision === undefined