@instructure/ui-color-picker 8.44.1-snapshot-2 → 8.44.1-snapshot-3

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.44.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.44.0...v8.44.1-snapshot-2) (2023-09-28)
+## [8.44.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.44.0...v8.44.1-snapshot-3) (2023-09-29)
 
-**Note:** Version bump only for package @instructure/ui-color-picker
+
+### Bug Fixes
+
+* **ui-color-picker:** add a padding to colorpicker button ([de420dd](https://github.com/instructure/instructure-ui/commit/de420ddd06328b58789474c47121d15894c958a1))
 
 
 

package/es/ColorPicker/index.js

@@ -62,6 +62,19 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         elementRef(el);
       }
     };
+    this.inputContainerRef = null;
+    this.handleInputContainerRef = el => {
+      this.inputContainerRef = el;
+      this.setLabelHeight();
+    };
+    this.setLabelHeight = () => {
+      if (this.inputContainerRef) {
+        var _this$inputContainerR;
+        this.setState({
+          labelHeight: this.inputContainerRef.getBoundingClientRect().y - (((_this$inputContainerR = this.inputContainerRef.parentElement) === null || _this$inputContainerR === void 0 ? void 0 : _this$inputContainerR.getBoundingClientRect().y) || 0)
+        });
+      }
+    };
     this.checkSettings = () => {
       if (this.props.children && this.props.colorMixerSettings) {
         warn(false, 'You should either use children, colorMixerSettings or neither, not both. In this case, the colorMixerSettings will be ignored.', '');
@@ -190,7 +203,8 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       hexCode: '',
       showHelperErrorMessages: false,
       openColorPicker: false,
-      mixedColor: ''
+      mixedColor: '',
+      labelHeight: 0
     };
   }
   componentDidMount() {
@@ -400,13 +414,17 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       },
       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 && jsx("div", {
-      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer
+      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer,
+      style: {
+        paddingTop: this.state.labelHeight
+      }
     }, jsx("div", {
       css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.colorMixerButtonWrapper
     }, this.renderPopover())));

package/es/ColorPicker/styles.js

@@ -102,7 +102,7 @@ const generateStyle = (componentTheme, props, state) => {
     },
     colorMixerButtonContainer: {
       label: 'colorPicker__colorMixerButtonContainer',
-      alignSelf: 'flex-end',
+      alignSelf: 'flex-start',
       marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
     },
     popoverContentContainer: {

package/lib/ColorPicker/index.js

@@ -74,6 +74,19 @@ let ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
         elementRef(el);
       }
     };
+    this.inputContainerRef = null;
+    this.handleInputContainerRef = el => {
+      this.inputContainerRef = el;
+      this.setLabelHeight();
+    };
+    this.setLabelHeight = () => {
+      if (this.inputContainerRef) {
+        var _this$inputContainerR;
+        this.setState({
+          labelHeight: this.inputContainerRef.getBoundingClientRect().y - (((_this$inputContainerR = this.inputContainerRef.parentElement) === null || _this$inputContainerR === void 0 ? void 0 : _this$inputContainerR.getBoundingClientRect().y) || 0)
+        });
+      }
+    };
     this.checkSettings = () => {
       if (this.props.children && this.props.colorMixerSettings) {
         (0, _console.warn)(false, 'You should either use children, colorMixerSettings or neither, not both. In this case, the colorMixerSettings will be ignored.', '');
@@ -202,7 +215,8 @@ let ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       hexCode: '',
       showHelperErrorMessages: false,
       openColorPicker: false,
-      mixedColor: ''
+      mixedColor: '',
+      labelHeight: 0
     };
   }
   componentDidMount() {
@@ -412,13 +426,17 @@ let ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       },
       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 && (0, _emotion.jsx)("div", {
-      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer
+      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer,
+      style: {
+        paddingTop: this.state.labelHeight
+      }
     }, (0, _emotion.jsx)("div", {
       css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.colorMixerButtonWrapper
     }, this.renderPopover())));

package/lib/ColorPicker/styles.js

@@ -108,7 +108,7 @@ const generateStyle = (componentTheme, props, state) => {
     },
     colorMixerButtonContainer: {
       label: 'colorPicker__colorMixerButtonContainer',
-      alignSelf: 'flex-end',
+      alignSelf: 'flex-start',
       marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
     },
     popoverContentContainer: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "8.44.1-snapshot-2",
+  "version": "8.44.1-snapshot-3",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,33 +24,33 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@instructure/console": "8.44.1-snapshot-2",
-    "@instructure/emotion": "8.44.1-snapshot-2",
-    "@instructure/shared-types": "8.44.1-snapshot-2",
-    "@instructure/ui-a11y-content": "8.44.1-snapshot-2",
-    "@instructure/ui-buttons": "8.44.1-snapshot-2",
-    "@instructure/ui-color-utils": "8.44.1-snapshot-2",
-    "@instructure/ui-dom-utils": "8.44.1-snapshot-2",
-    "@instructure/ui-drilldown": "8.44.1-snapshot-2",
-    "@instructure/ui-form-field": "8.44.1-snapshot-2",
-    "@instructure/ui-icons": "8.44.1-snapshot-2",
-    "@instructure/ui-pill": "8.44.1-snapshot-2",
-    "@instructure/ui-popover": "8.44.1-snapshot-2",
-    "@instructure/ui-react-utils": "8.44.1-snapshot-2",
-    "@instructure/ui-testable": "8.44.1-snapshot-2",
-    "@instructure/ui-text": "8.44.1-snapshot-2",
-    "@instructure/ui-text-input": "8.44.1-snapshot-2",
-    "@instructure/ui-themes": "8.44.1-snapshot-2",
-    "@instructure/ui-tooltip": "8.44.1-snapshot-2",
-    "@instructure/ui-utils": "8.44.1-snapshot-2",
-    "@instructure/ui-view": "8.44.1-snapshot-2",
+    "@instructure/console": "8.44.1-snapshot-3",
+    "@instructure/emotion": "8.44.1-snapshot-3",
+    "@instructure/shared-types": "8.44.1-snapshot-3",
+    "@instructure/ui-a11y-content": "8.44.1-snapshot-3",
+    "@instructure/ui-buttons": "8.44.1-snapshot-3",
+    "@instructure/ui-color-utils": "8.44.1-snapshot-3",
+    "@instructure/ui-dom-utils": "8.44.1-snapshot-3",
+    "@instructure/ui-drilldown": "8.44.1-snapshot-3",
+    "@instructure/ui-form-field": "8.44.1-snapshot-3",
+    "@instructure/ui-icons": "8.44.1-snapshot-3",
+    "@instructure/ui-pill": "8.44.1-snapshot-3",
+    "@instructure/ui-popover": "8.44.1-snapshot-3",
+    "@instructure/ui-react-utils": "8.44.1-snapshot-3",
+    "@instructure/ui-testable": "8.44.1-snapshot-3",
+    "@instructure/ui-text": "8.44.1-snapshot-3",
+    "@instructure/ui-text-input": "8.44.1-snapshot-3",
+    "@instructure/ui-themes": "8.44.1-snapshot-3",
+    "@instructure/ui-tooltip": "8.44.1-snapshot-3",
+    "@instructure/ui-utils": "8.44.1-snapshot-3",
+    "@instructure/ui-view": "8.44.1-snapshot-3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.44.1-snapshot-2",
-    "@instructure/ui-test-locator": "8.44.1-snapshot-2",
-    "@instructure/ui-test-queries": "8.44.1-snapshot-2",
-    "@instructure/ui-test-utils": "8.44.1-snapshot-2"
+    "@instructure/ui-babel-preset": "8.44.1-snapshot-3",
+    "@instructure/ui-test-locator": "8.44.1-snapshot-3",
+    "@instructure/ui-test-queries": "8.44.1-snapshot-3",
+    "@instructure/ui-test-utils": "8.44.1-snapshot-3"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/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>

package/src/ColorPicker/props.ts

@@ -225,6 +225,7 @@ type ColorPickerState = {
   showHelperErrorMessages: boolean
   openColorPicker: boolean
   mixedColor: string
+  labelHeight: number
 }
 
 type PropKeys = keyof ColorPickerOwnProps

package/src/ColorPicker/styles.ts

@@ -114,7 +114,7 @@ const generateStyle = (
     },
     colorMixerButtonContainer: {
       label: 'colorPicker__colorMixerButtonContainer',
-      alignSelf: 'flex-end',
+      alignSelf: 'flex-start',
       marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
     },
     popoverContentContainer: {