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.
instructure · Sep 29, 2023 · de420dd · de420dd
1 parent 2c61afa
commit de420dd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git 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,14 +609,18 @@ 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)}
           onBlur={() => this.handleOnBlur()}
           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
@@ -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
@@ -114,7 +114,7 @@ const generateStyle = (
     },
     colorMixerButtonContainer: {
       label: 'colorPicker__colorMixerButtonContainer',
-      alignSelf: 'flex-end',
+      alignSelf: 'flex-start',
       marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
     },
     popoverContentContainer: {