From de420ddd06328b58789474c47121d15894c958a1 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Tue, 26 Sep 2023 15:02:13 +0200
Subject: [PATCH] fix(ui-color-picker): add a padding to colorpicker button

Closes: INSTUI-3867

Adding a padding to color picker button calculated by
the text input children element's label height and margin.

This should be replaced in INSTUI v9 with a better solution.
---
 .../ui-color-picker/src/ColorPicker/index.tsx | 26 +++++++++++++++++--
 .../ui-color-picker/src/ColorPicker/props.ts  |  1 +
 .../ui-color-picker/src/ColorPicker/styles.ts |  2 +-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/ui-color-picker/src/ColorPicker/index.tsx b/packages/ui-color-picker/src/ColorPicker/index.tsx
index b96a183375..664764f40d 100644
--- a/packages/ui-color-picker/src/ColorPicker/index.tsx
+++ b/packages/ui-color-picker/src/ColorPicker/index.tsx
@@ -116,7 +116,8 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
       hexCode: '',
       showHelperErrorMessages: false,
       openColorPicker: false,
-      mixedColor: ''
+      mixedColor: '',
+      labelHeight: 0
     }
   }
 
@@ -132,6 +133,23 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
     }
   }
 
+  inputContainerRef: Element | null = null
+
+  handleInputContainerRef = (el: Element | null) => {
+    this.inputContainerRef = el
+    this.setLabelHeight()
+  }
+
+  setLabelHeight = () => {
+    if (this.inputContainerRef) {
+      this.setState({
+        labelHeight:
+          this.inputContainerRef.getBoundingClientRect().y -
+          (this.inputContainerRef.parentElement?.getBoundingClientRect().y || 0)
+      })
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.({ ...this.state, isSimple: this.isSimple })
     this.checkSettings()
@@ -591,6 +609,7 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           themeOverride={{ padding: '' }}
           renderAfterInput={this.renderAfterInput()}
           renderBeforeInput={this.renderBeforeInput()}
+          inputContainerRef={this.handleInputContainerRef}
           value={this.state.hexCode}
           onChange={(event, value) => this.handleOnChange(event, value)}
           onPaste={(event) => this.handleOnPaste(event)}
@@ -598,7 +617,10 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           messages={this.renderMessages()}
         />
         {!this.isSimple && (
-          <div css={this.props.styles?.colorMixerButtonContainer}>
+          <div
+            css={this.props.styles?.colorMixerButtonContainer}
+            style={{ paddingTop: this.state.labelHeight }}
+          >
             <div css={this.props.styles?.colorMixerButtonWrapper}>
               {this.renderPopover()}
             </div>
diff --git a/packages/ui-color-picker/src/ColorPicker/props.ts b/packages/ui-color-picker/src/ColorPicker/props.ts
index 4541b505ee..ae9c54e550 100644
--- a/packages/ui-color-picker/src/ColorPicker/props.ts
+++ b/packages/ui-color-picker/src/ColorPicker/props.ts
@@ -225,6 +225,7 @@ type ColorPickerState = {
   showHelperErrorMessages: boolean
   openColorPicker: boolean
   mixedColor: string
+  labelHeight: number
 }
 
 type PropKeys = keyof ColorPickerOwnProps
diff --git a/packages/ui-color-picker/src/ColorPicker/styles.ts b/packages/ui-color-picker/src/ColorPicker/styles.ts
index ffedb6a7aa..890dbe6bbb 100644
--- a/packages/ui-color-picker/src/ColorPicker/styles.ts
+++ b/packages/ui-color-picker/src/ColorPicker/styles.ts
@@ -114,7 +114,7 @@ const generateStyle = (
     },
     colorMixerButtonContainer: {
       label: 'colorPicker__colorMixerButtonContainer',
-      alignSelf: 'flex-end',
+      alignSelf: 'flex-start',
       marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
     },
     popoverContentContainer: {