@instructure/ui-color-picker 10.26.2 → 10.26.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.26.3](https://github.com/instructure/instructure-ui/compare/v10.26.2...v10.26.3) (2025-11-19)
+
+
+### Bug Fixes
+
+* **ui-color-picker:** fix popover scrolling and button alignment issues ([b7fbf0b](https://github.com/instructure/instructure-ui/commit/b7fbf0b807ddf480ab0f5fab35bf9a38666f8dd0))
+
+
+
+
+
 ## [10.26.2](https://github.com/instructure/instructure-ui/compare/v10.26.1...v10.26.2) (2025-10-13)
 
 **Note:** Version bump only for package @instructure/ui-color-picker

package/es/ColorPicker/index.js

@@ -64,7 +64,16 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     this.inputContainerRef = null;
     this.handleInputContainerRef = el => {
       this.inputContainerRef = el;
-      this.setLabelHeight();
+      if (el) {
+        // Defer measurement until after layout is complete and CSS-in-JS styles are applied
+        requestAnimationFrame(() => {
+          this.setLabelHeight();
+        });
+      }
+    };
+    this.popoverContentRef = null;
+    this.handlePopoverContentRef = el => {
+      this.popoverContentRef = el;
     };
     this.setLabelHeight = () => {
       if (this.inputContainerRef) {
@@ -74,6 +83,56 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         });
       }
     };
+    // Calculate the maximum height the popover can have without extending beyond
+    // the viewport. This enables scrolling when the ColorPicker's content (all
+    // color mixing controls, presets, and contrast checker) would otherwise exceed
+    // the available viewport space. Without this calculation, the popover would
+    // render off-screen on smaller viewports.
+    this.handlePopoverPositioned = position => {
+      if (this.popoverContentRef) {
+        // Double requestAnimationFrame ensures measurements happen after all child components
+        // (ColorMixer, ColorPreset, ColorContrast) complete their mount lifecycle and Emotion
+        // finishes injecting CSS-in-JS styles. A single rAF was insufficient as styles are
+        // injected dynamically in componentDidMount(). This timing issue only manifested when
+        // StrictMode was disabled, since StrictMode's double-rendering provided an accidental
+        // second measurement pass.
+        requestAnimationFrame(() => {
+          // First frame: DOM structure is laid out
+          requestAnimationFrame(() => {
+            // Second frame: styles injected, child components mounted, dimensions stable
+            if (!this.popoverContentRef) return;
+            const rect = this.popoverContentRef.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+
+            // Detect if popover is positioned above (top) or below (bottom) the trigger.
+            // The Position component provides placement strings like "top center" or "bottom center".
+            const placement = (position === null || position === void 0 ? void 0 : position.placement) || '';
+            const isPositionedAbove = placement.startsWith('top');
+            let availableHeight;
+            if (isPositionedAbove) {
+              // When opening upward: available space is from viewport top to popover bottom.
+              // This is the space where the popover can expand within the viewport.
+              availableHeight = rect.top + rect.height - 16;
+            } else {
+              // When opening downward: available space is from popover top to viewport bottom.
+              // Subtract a small buffer (16px) for padding/margin.
+              availableHeight = viewportHeight - rect.top - 16;
+            }
+            const propMaxHeight = this.props.popoverMaxHeight;
+            let calculatedMaxHeight = `${Math.max(100, availableHeight)}px`;
+
+            // If prop specifies a maxHeight, respect it as an additional constraint
+            if (propMaxHeight && propMaxHeight !== '100vh') {
+              calculatedMaxHeight = propMaxHeight;
+            }
+            this.setState({
+              calculatedPopoverMaxHeight: calculatedMaxHeight,
+              isHeightCalculated: true
+            });
+          });
+        });
+      }
+    };
     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.', '');
@@ -96,7 +155,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         onShowContent: () => {
           this.setState({
             openColorPicker: true,
-            mixedColor: this.state.hexCode
+            mixedColor: this.state.hexCode,
+            calculatedPopoverMaxHeight: void 0,
+            isHeightCalculated: false
           });
         },
         onHideContent: () => {
@@ -110,8 +171,11 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         shouldReturnFocus: true,
         shouldCloseOnDocumentClick: true,
         offsetY: "10rem",
+        onPositioned: this.handlePopoverPositioned,
+        onPositionChanged: this.handlePopoverPositioned,
         children: _jsx("div", {
           css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.popoverContentContainer,
+          ref: this.handlePopoverContentRef,
           children: this.isDefaultPopover ? this.renderDefaultPopoverContent() : this.renderCustomPopoverContent()
         })
       });
@@ -133,7 +197,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           onChange === null || onChange === void 0 ? void 0 : onChange(`#${this.mixedColorWithStrippedAlpha}`);
         }, () => this.setState({
           openColorPicker: false,
-          mixedColor: this.state.hexCode
+          mixedColor: this.state.hexCode,
+          calculatedPopoverMaxHeight: void 0,
+          isHeightCalculated: false
         }))
       });
     };
@@ -186,7 +252,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           children: [_jsx(Button, {
             onClick: () => this.setState({
               openColorPicker: false,
-              mixedColor: this.state.hexCode
+              mixedColor: this.state.hexCode,
+              calculatedPopoverMaxHeight: void 0,
+              isHeightCalculated: false
             }),
             color: "secondary",
             margin: "xx-small",
@@ -217,7 +285,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       showHelperErrorMessages: false,
       openColorPicker: false,
       mixedColor: '',
-      labelHeight: 0
+      labelHeight: 0,
+      calculatedPopoverMaxHeight: void 0,
+      isHeightCalculated: false
     };
   }
   componentDidMount() {
@@ -467,6 +537,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }), !this.isSimple && _jsx("div", {
         css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer,
         style: {
+          alignSelf: this.state.labelHeight > 0 ? 'flex-start' : 'flex-end',
           paddingTop: this.state.labelHeight
         },
         children: _jsx("div", {

package/es/ColorPicker/styles.js

@@ -42,7 +42,8 @@ const generateStyle = (componentTheme, props, state) => {
   const checkContrast = props.checkContrast,
     popoverMaxHeight = props.popoverMaxHeight,
     margin = props.margin;
-  const isSimple = state.isSimple;
+  const isSimple = state.isSimple,
+    calculatedPopoverMaxHeight = state.calculatedPopoverMaxHeight;
   const cssMargin = mapSpacingToShorthand(margin, spacing);
   return {
     colorPicker: {
@@ -112,8 +113,14 @@ const generateStyle = (componentTheme, props, state) => {
     },
     popoverContentContainer: {
       label: 'colorPicker__popoverContentContainer',
-      maxHeight: popoverMaxHeight || '100vh',
-      overflow: 'auto'
+      maxHeight: calculatedPopoverMaxHeight || popoverMaxHeight || '100vh',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      scrollbarGutter: 'stable',
+      display: 'flex',
+      flexDirection: 'column',
+      opacity: state.isHeightCalculated ? 1 : 0,
+      transition: 'opacity 150ms ease-in'
     },
     colorMixerButtonWrapper: {
       label: 'colorPicker__colorMixerButtonWrapper',

package/lib/ColorPicker/index.js

@@ -75,7 +75,16 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
     this.inputContainerRef = null;
     this.handleInputContainerRef = el => {
       this.inputContainerRef = el;
-      this.setLabelHeight();
+      if (el) {
+        // Defer measurement until after layout is complete and CSS-in-JS styles are applied
+        requestAnimationFrame(() => {
+          this.setLabelHeight();
+        });
+      }
+    };
+    this.popoverContentRef = null;
+    this.handlePopoverContentRef = el => {
+      this.popoverContentRef = el;
     };
     this.setLabelHeight = () => {
       if (this.inputContainerRef) {
@@ -85,6 +94,56 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
         });
       }
     };
+    // Calculate the maximum height the popover can have without extending beyond
+    // the viewport. This enables scrolling when the ColorPicker's content (all
+    // color mixing controls, presets, and contrast checker) would otherwise exceed
+    // the available viewport space. Without this calculation, the popover would
+    // render off-screen on smaller viewports.
+    this.handlePopoverPositioned = position => {
+      if (this.popoverContentRef) {
+        // Double requestAnimationFrame ensures measurements happen after all child components
+        // (ColorMixer, ColorPreset, ColorContrast) complete their mount lifecycle and Emotion
+        // finishes injecting CSS-in-JS styles. A single rAF was insufficient as styles are
+        // injected dynamically in componentDidMount(). This timing issue only manifested when
+        // StrictMode was disabled, since StrictMode's double-rendering provided an accidental
+        // second measurement pass.
+        requestAnimationFrame(() => {
+          // First frame: DOM structure is laid out
+          requestAnimationFrame(() => {
+            // Second frame: styles injected, child components mounted, dimensions stable
+            if (!this.popoverContentRef) return;
+            const rect = this.popoverContentRef.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+
+            // Detect if popover is positioned above (top) or below (bottom) the trigger.
+            // The Position component provides placement strings like "top center" or "bottom center".
+            const placement = (position === null || position === void 0 ? void 0 : position.placement) || '';
+            const isPositionedAbove = placement.startsWith('top');
+            let availableHeight;
+            if (isPositionedAbove) {
+              // When opening upward: available space is from viewport top to popover bottom.
+              // This is the space where the popover can expand within the viewport.
+              availableHeight = rect.top + rect.height - 16;
+            } else {
+              // When opening downward: available space is from popover top to viewport bottom.
+              // Subtract a small buffer (16px) for padding/margin.
+              availableHeight = viewportHeight - rect.top - 16;
+            }
+            const propMaxHeight = this.props.popoverMaxHeight;
+            let calculatedMaxHeight = `${Math.max(100, availableHeight)}px`;
+
+            // If prop specifies a maxHeight, respect it as an additional constraint
+            if (propMaxHeight && propMaxHeight !== '100vh') {
+              calculatedMaxHeight = propMaxHeight;
+            }
+            this.setState({
+              calculatedPopoverMaxHeight: calculatedMaxHeight,
+              isHeightCalculated: true
+            });
+          });
+        });
+      }
+    };
     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.', '');
@@ -107,7 +166,9 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
         onShowContent: () => {
           this.setState({
             openColorPicker: true,
-            mixedColor: this.state.hexCode
+            mixedColor: this.state.hexCode,
+            calculatedPopoverMaxHeight: void 0,
+            isHeightCalculated: false
           });
         },
         onHideContent: () => {
@@ -121,8 +182,11 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
         shouldReturnFocus: true,
         shouldCloseOnDocumentClick: true,
         offsetY: "10rem",
+        onPositioned: this.handlePopoverPositioned,
+        onPositionChanged: this.handlePopoverPositioned,
         children: (0, _jsxRuntime.jsx)("div", {
           css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.popoverContentContainer,
+          ref: this.handlePopoverContentRef,
           children: this.isDefaultPopover ? this.renderDefaultPopoverContent() : this.renderCustomPopoverContent()
         })
       });
@@ -144,7 +208,9 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
           onChange === null || onChange === void 0 ? void 0 : onChange(`#${this.mixedColorWithStrippedAlpha}`);
         }, () => this.setState({
           openColorPicker: false,
-          mixedColor: this.state.hexCode
+          mixedColor: this.state.hexCode,
+          calculatedPopoverMaxHeight: void 0,
+          isHeightCalculated: false
         }))
       });
     };
@@ -197,7 +263,9 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
           children: [(0, _jsxRuntime.jsx)(_Button.Button, {
             onClick: () => this.setState({
               openColorPicker: false,
-              mixedColor: this.state.hexCode
+              mixedColor: this.state.hexCode,
+              calculatedPopoverMaxHeight: void 0,
+              isHeightCalculated: false
             }),
             color: "secondary",
             margin: "xx-small",
@@ -228,7 +296,9 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       showHelperErrorMessages: false,
       openColorPicker: false,
       mixedColor: '',
-      labelHeight: 0
+      labelHeight: 0,
+      calculatedPopoverMaxHeight: void 0,
+      isHeightCalculated: false
     };
   }
   componentDidMount() {
@@ -478,6 +548,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       }), !this.isSimple && (0, _jsxRuntime.jsx)("div", {
         css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer,
         style: {
+          alignSelf: this.state.labelHeight > 0 ? 'flex-start' : 'flex-end',
           paddingTop: this.state.labelHeight
         },
         children: (0, _jsxRuntime.jsx)("div", {

package/lib/ColorPicker/styles.js

@@ -48,7 +48,8 @@ const generateStyle = (componentTheme, props, state) => {
   const checkContrast = props.checkContrast,
     popoverMaxHeight = props.popoverMaxHeight,
     margin = props.margin;
-  const isSimple = state.isSimple;
+  const isSimple = state.isSimple,
+    calculatedPopoverMaxHeight = state.calculatedPopoverMaxHeight;
   const cssMargin = (0, _emotion.mapSpacingToShorthand)(margin, spacing);
   return {
     colorPicker: {
@@ -118,8 +119,14 @@ const generateStyle = (componentTheme, props, state) => {
     },
     popoverContentContainer: {
       label: 'colorPicker__popoverContentContainer',
-      maxHeight: popoverMaxHeight || '100vh',
-      overflow: 'auto'
+      maxHeight: calculatedPopoverMaxHeight || popoverMaxHeight || '100vh',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      scrollbarGutter: 'stable',
+      display: 'flex',
+      flexDirection: 'column',
+      opacity: state.isHeightCalculated ? 1 : 0,
+      transition: 'opacity 150ms ease-in'
     },
     colorMixerButtonWrapper: {
       label: 'colorPicker__colorMixerButtonWrapper',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "10.26.2",
+  "version": "10.26.3",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,32 +24,32 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.2",
-    "@instructure/emotion": "10.26.2",
-    "@instructure/shared-types": "10.26.2",
-    "@instructure/ui-a11y-content": "10.26.2",
-    "@instructure/ui-buttons": "10.26.2",
-    "@instructure/ui-color-utils": "10.26.2",
-    "@instructure/ui-dom-utils": "10.26.2",
-    "@instructure/ui-drilldown": "10.26.2",
-    "@instructure/ui-form-field": "10.26.2",
-    "@instructure/ui-icons": "10.26.2",
-    "@instructure/ui-pill": "10.26.2",
-    "@instructure/ui-popover": "10.26.2",
-    "@instructure/ui-react-utils": "10.26.2",
-    "@instructure/ui-testable": "10.26.2",
-    "@instructure/ui-text": "10.26.2",
-    "@instructure/ui-text-input": "10.26.2",
-    "@instructure/ui-themes": "10.26.2",
-    "@instructure/ui-tooltip": "10.26.2",
-    "@instructure/ui-utils": "10.26.2",
-    "@instructure/ui-view": "10.26.2",
+    "@instructure/console": "10.26.3",
+    "@instructure/emotion": "10.26.3",
+    "@instructure/shared-types": "10.26.3",
+    "@instructure/ui-a11y-content": "10.26.3",
+    "@instructure/ui-buttons": "10.26.3",
+    "@instructure/ui-color-utils": "10.26.3",
+    "@instructure/ui-dom-utils": "10.26.3",
+    "@instructure/ui-drilldown": "10.26.3",
+    "@instructure/ui-form-field": "10.26.3",
+    "@instructure/ui-icons": "10.26.3",
+    "@instructure/ui-pill": "10.26.3",
+    "@instructure/ui-popover": "10.26.3",
+    "@instructure/ui-react-utils": "10.26.3",
+    "@instructure/ui-testable": "10.26.3",
+    "@instructure/ui-text": "10.26.3",
+    "@instructure/ui-text-input": "10.26.3",
+    "@instructure/ui-themes": "10.26.3",
+    "@instructure/ui-tooltip": "10.26.3",
+    "@instructure/ui-utils": "10.26.3",
+    "@instructure/ui-view": "10.26.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.2",
-    "@instructure/ui-babel-preset": "10.26.2",
-    "@instructure/ui-scripts": "10.26.2",
+    "@instructure/ui-axe-check": "10.26.3",
+    "@instructure/ui-babel-preset": "10.26.3",
+    "@instructure/ui-scripts": "10.26.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",

package/src/ColorPicker/index.tsx

@@ -110,7 +110,9 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
       showHelperErrorMessages: false,
       openColorPicker: false,
       mixedColor: '',
-      labelHeight: 0
+      labelHeight: 0,
+      calculatedPopoverMaxHeight: undefined,
+      isHeightCalculated: false
     }
   }
 
@@ -130,7 +132,19 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
 
   handleInputContainerRef = (el: Element | null) => {
     this.inputContainerRef = el
-    this.setLabelHeight()
+
+    if (el) {
+      // Defer measurement until after layout is complete and CSS-in-JS styles are applied
+      requestAnimationFrame(() => {
+        this.setLabelHeight()
+      })
+    }
+  }
+
+  popoverContentRef: HTMLDivElement | null = null
+
+  handlePopoverContentRef = (el: HTMLDivElement | null) => {
+    this.popoverContentRef = el
   }
 
   setLabelHeight = () => {
@@ -143,6 +157,62 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
     }
   }
 
+  // Calculate the maximum height the popover can have without extending beyond
+  // the viewport. This enables scrolling when the ColorPicker's content (all
+  // color mixing controls, presets, and contrast checker) would otherwise exceed
+  // the available viewport space. Without this calculation, the popover would
+  // render off-screen on smaller viewports.
+  handlePopoverPositioned = (position?: { placement?: string }) => {
+    if (this.popoverContentRef) {
+      // Double requestAnimationFrame ensures measurements happen after all child components
+      // (ColorMixer, ColorPreset, ColorContrast) complete their mount lifecycle and Emotion
+      // finishes injecting CSS-in-JS styles. A single rAF was insufficient as styles are
+      // injected dynamically in componentDidMount(). This timing issue only manifested when
+      // StrictMode was disabled, since StrictMode's double-rendering provided an accidental
+      // second measurement pass.
+      requestAnimationFrame(() => {
+        // First frame: DOM structure is laid out
+        requestAnimationFrame(() => {
+          // Second frame: styles injected, child components mounted, dimensions stable
+          if (!this.popoverContentRef) return
+
+          const rect = this.popoverContentRef.getBoundingClientRect()
+          const viewportHeight = window.innerHeight
+
+          // Detect if popover is positioned above (top) or below (bottom) the trigger.
+          // The Position component provides placement strings like "top center" or "bottom center".
+          const placement = position?.placement || ''
+          const isPositionedAbove = placement.startsWith('top')
+
+          let availableHeight: number
+
+          if (isPositionedAbove) {
+            // When opening upward: available space is from viewport top to popover bottom.
+            // This is the space where the popover can expand within the viewport.
+            availableHeight = rect.top + rect.height - 16
+          } else {
+            // When opening downward: available space is from popover top to viewport bottom.
+            // Subtract a small buffer (16px) for padding/margin.
+            availableHeight = viewportHeight - rect.top - 16
+          }
+
+          const propMaxHeight = this.props.popoverMaxHeight
+          let calculatedMaxHeight = `${Math.max(100, availableHeight)}px`
+
+          // If prop specifies a maxHeight, respect it as an additional constraint
+          if (propMaxHeight && propMaxHeight !== '100vh') {
+            calculatedMaxHeight = propMaxHeight
+          }
+
+          this.setState({
+            calculatedPopoverMaxHeight: calculatedMaxHeight,
+            isHeightCalculated: true
+          })
+        })
+      })
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.({ ...this.state, isSimple: this.isSimple })
     this.checkSettings()
@@ -427,7 +497,12 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
       }
       isShowingContent={this.state.openColorPicker}
       onShowContent={() => {
-        this.setState({ openColorPicker: true, mixedColor: this.state.hexCode })
+        this.setState({
+          openColorPicker: true,
+          mixedColor: this.state.hexCode,
+          calculatedPopoverMaxHeight: undefined,
+          isHeightCalculated: false
+        })
       }}
       onHideContent={() => {
         this.setState({ openColorPicker: false })
@@ -438,8 +513,13 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
       shouldReturnFocus
       shouldCloseOnDocumentClick
       offsetY="10rem"
+      onPositioned={this.handlePopoverPositioned}
+      onPositionChanged={this.handlePopoverPositioned}
     >
-      <div css={this.props.styles?.popoverContentContainer}>
+      <div
+        css={this.props.styles?.popoverContentContainer}
+        ref={this.handlePopoverContentRef}
+      >
         {this.isDefaultPopover
           ? this.renderDefaultPopoverContent()
           : this.renderCustomPopoverContent()}
@@ -470,7 +550,9 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
             () =>
               this.setState({
                 openColorPicker: false,
-                mixedColor: this.state.hexCode
+                mixedColor: this.state.hexCode,
+                calculatedPopoverMaxHeight: undefined,
+                isHeightCalculated: false
               })
           )}
       </div>
@@ -576,7 +658,9 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           onClick={() =>
             this.setState({
               openColorPicker: false,
-              mixedColor: this.state.hexCode
+              mixedColor: this.state.hexCode,
+              calculatedPopoverMaxHeight: undefined,
+              isHeightCalculated: false
             })
           }
           color="secondary"
@@ -639,7 +723,10 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
         {!this.isSimple && (
           <div
             css={this.props.styles?.colorMixerButtonContainer}
-            style={{ paddingTop: this.state.labelHeight }}
+            style={{
+              alignSelf: this.state.labelHeight > 0 ? 'flex-start' : 'flex-end',
+              paddingTop: this.state.labelHeight
+            }}
           >
             <div css={this.props.styles?.colorMixerButtonWrapper}>
               {this.renderPopover()}

package/src/ColorPicker/props.ts

@@ -247,6 +247,8 @@ type ColorPickerState = {
   openColorPicker: boolean
   mixedColor: string
   labelHeight: number
+  calculatedPopoverMaxHeight: string | undefined
+  isHeightCalculated: boolean
 }
 
 type PropKeys = keyof ColorPickerOwnProps

package/src/ColorPicker/styles.ts

@@ -54,7 +54,7 @@ const generateStyle = (
     spacing
   } = componentTheme
   const { checkContrast, popoverMaxHeight, margin } = props
-  const { isSimple } = state
+  const { isSimple, calculatedPopoverMaxHeight } = state
 
   const cssMargin = mapSpacingToShorthand(margin, spacing)
   return {
@@ -127,8 +127,14 @@ const generateStyle = (
     },
     popoverContentContainer: {
       label: 'colorPicker__popoverContentContainer',
-      maxHeight: popoverMaxHeight || '100vh',
-      overflow: 'auto'
+      maxHeight: calculatedPopoverMaxHeight || popoverMaxHeight || '100vh',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      scrollbarGutter: 'stable',
+      display: 'flex',
+      flexDirection: 'column',
+      opacity: state.isHeightCalculated ? 1 : 0,
+      transition: 'opacity 150ms ease-in'
     },
     colorMixerButtonWrapper: {
       label: 'colorPicker__colorMixerButtonWrapper',