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 { hexCode: '', showHelperErrorMessages: false, openColorPicker: false, - mixedColor: '' + mixedColor: '', + labelHeight: 0 } } @@ -132,6 +133,23 @@ class ColorPicker extends Component { } } + 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 { 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 { messages={this.renderMessages()} /> {!this.isSimple && ( -
+
{this.renderPopover()}
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: {