@instructure/ui-color-picker 8.28.2 → 8.28.3-snapshot-5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.28.3-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.28.2...v8.28.3-snapshot-5) (2022-09-20)
+
+**Note:** Version bump only for package @instructure/ui-color-picker
+
+
+
+
+
 ## [8.28.2](https://github.com/instructure/instructure-ui/compare/v8.28.0...v8.28.2) (2022-09-16)
 
 **Note:** Version bump only for package @instructure/ui-color-picker

package/es/ColorMixer/ColorPalette/index.js

@@ -33,6 +33,7 @@ import shallowCompare from '../utils/shallowCompare';
 import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { px } from '@instructure/ui-utils';
 /**
 ---
 private: true
@@ -42,11 +43,14 @@ private: true
 
 let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class ColorPalette extends Component {
   constructor(props) {
+    var _this$props$styles;
+
     super(props);
     this.ref = null;
     this._paletteRef = null;
     this._mouseMoveListener = void 0;
     this._mouseUpListener = void 0;
+    this._paletteOffset = px((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.paletteOffset);
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -121,19 +125,21 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   }
 
   get paletteWidth() {
-    return this._paletteRef.getBoundingClientRect().width;
+    return this._paletteRef.getBoundingClientRect().width - this._paletteOffset;
   }
 
   get paletteHeight() {
-    return this._paletteRef.getBoundingClientRect().height;
+    return this._paletteRef.getBoundingClientRect().height - this._paletteOffset;
   }
 
   calcPositionFromColor(hsv) {
     const s = hsv.s,
           v = hsv.v;
+    const x = s * this.paletteWidth;
+    const y = (1 - v) * this.paletteHeight;
     return {
-      x: s * this.paletteWidth,
-      y: this.paletteHeight - v * this.paletteHeight
+      x,
+      y
     };
   }
 
@@ -226,7 +232,7 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   }
 
   render() {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+    var _this$props$styles2, _this$props$styles3, _this$props$styles4;
 
     return jsx(View, {
       elementRef: this.handleRef,
@@ -243,11 +249,11 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       onMouseDown: e => this.handlePaletteMouseDown(e),
       "aria-label": this.props.navigationExplanationScreenReaderLabel
     }, jsx("div", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.indicator
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.indicator
     }), this.props.disabled && jsx("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.disabledOverlay
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.disabledOverlay
     }), jsx("div", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.palette,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.palette,
       ref: ref => {
         this._paletteRef = ref;
       }

package/es/ColorMixer/ColorPalette/styles.js

@@ -74,7 +74,8 @@ const generateStyle = (componentTheme, props, state) => {
       position: 'absolute',
       top: '-.5rem',
       left: '-.5rem'
-    }
+    },
+    paletteOffset: componentTheme.paletteOffset
   };
 };
 

package/es/ColorMixer/ColorPalette/theme.js

@@ -39,7 +39,8 @@ const generateComponentTheme = theme => {
     indicatorBorderWidth: borders.widthSmall,
     paletteBorderRadius: borders.radiusMedium,
     paletteBorderWidth: borders.widthSmall,
-    disabledOverlayZIndex: stacking.topmost
+    disabledOverlayZIndex: stacking.topmost,
+    paletteOffset: '0.125rem'
   };
   return { ...componentVariables
   };

package/lib/ColorMixer/ColorPalette/index.js

@@ -25,6 +25,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _px = require("@instructure/ui-utils/lib/px.js");
+
 var _dec, _class, _class2;
 
 /**
@@ -35,11 +37,14 @@ private: true
 **/
 let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class ColorPalette extends _react.Component {
   constructor(props) {
+    var _this$props$styles;
+
     super(props);
     this.ref = null;
     this._paletteRef = null;
     this._mouseMoveListener = void 0;
     this._mouseUpListener = void 0;
+    this._paletteOffset = (0, _px.px)((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.paletteOffset);
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -114,19 +119,21 @@ let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
   }
 
   get paletteWidth() {
-    return this._paletteRef.getBoundingClientRect().width;
+    return this._paletteRef.getBoundingClientRect().width - this._paletteOffset;
   }
 
   get paletteHeight() {
-    return this._paletteRef.getBoundingClientRect().height;
+    return this._paletteRef.getBoundingClientRect().height - this._paletteOffset;
   }
 
   calcPositionFromColor(hsv) {
     const s = hsv.s,
           v = hsv.v;
+    const x = s * this.paletteWidth;
+    const y = (1 - v) * this.paletteHeight;
     return {
-      x: s * this.paletteWidth,
-      y: this.paletteHeight - v * this.paletteHeight
+      x,
+      y
     };
   }
 
@@ -219,7 +226,7 @@ let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
   }
 
   render() {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+    var _this$props$styles2, _this$props$styles3, _this$props$styles4;
 
     return (0, _emotion.jsx)(_View.View, {
       elementRef: this.handleRef,
@@ -236,11 +243,11 @@ let ColorPalette = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       onMouseDown: e => this.handlePaletteMouseDown(e),
       "aria-label": this.props.navigationExplanationScreenReaderLabel
     }, (0, _emotion.jsx)("div", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.indicator
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.indicator
     }), this.props.disabled && (0, _emotion.jsx)("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.disabledOverlay
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.disabledOverlay
     }), (0, _emotion.jsx)("div", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.palette,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.palette,
       ref: ref => {
         this._paletteRef = ref;
       }

package/lib/ColorMixer/ColorPalette/styles.js

@@ -82,7 +82,8 @@ const generateStyle = (componentTheme, props, state) => {
       position: 'absolute',
       top: '-.5rem',
       left: '-.5rem'
-    }
+    },
+    paletteOffset: componentTheme.paletteOffset
   };
 };
 

package/lib/ColorMixer/ColorPalette/theme.js

@@ -47,7 +47,8 @@ const generateComponentTheme = theme => {
     indicatorBorderWidth: borders.widthSmall,
     paletteBorderRadius: borders.radiusMedium,
     paletteBorderWidth: borders.widthSmall,
-    disabledOverlayZIndex: stacking.topmost
+    disabledOverlayZIndex: stacking.topmost,
+    paletteOffset: '0.125rem'
   };
   return { ...componentVariables
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "8.28.2",
+  "version": "8.28.3-snapshot-5",
   "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.13.10",
-    "@instructure/console": "8.28.2",
-    "@instructure/emotion": "8.28.2",
-    "@instructure/shared-types": "8.28.2",
-    "@instructure/ui-a11y-content": "8.28.2",
-    "@instructure/ui-buttons": "8.28.2",
-    "@instructure/ui-color-utils": "8.28.2",
-    "@instructure/ui-dom-utils": "8.28.2",
-    "@instructure/ui-drilldown": "8.28.2",
-    "@instructure/ui-form-field": "8.28.2",
-    "@instructure/ui-icons": "8.28.2",
-    "@instructure/ui-pill": "8.28.2",
-    "@instructure/ui-popover": "8.28.2",
-    "@instructure/ui-react-utils": "8.28.2",
-    "@instructure/ui-testable": "8.28.2",
-    "@instructure/ui-text": "8.28.2",
-    "@instructure/ui-text-input": "8.28.2",
-    "@instructure/ui-themes": "8.28.2",
-    "@instructure/ui-tooltip": "8.28.2",
-    "@instructure/ui-utils": "8.28.2",
-    "@instructure/ui-view": "8.28.2",
+    "@instructure/console": "8.28.3-snapshot-5",
+    "@instructure/emotion": "8.28.3-snapshot-5",
+    "@instructure/shared-types": "8.28.3-snapshot-5",
+    "@instructure/ui-a11y-content": "8.28.3-snapshot-5",
+    "@instructure/ui-buttons": "8.28.3-snapshot-5",
+    "@instructure/ui-color-utils": "8.28.3-snapshot-5",
+    "@instructure/ui-dom-utils": "8.28.3-snapshot-5",
+    "@instructure/ui-drilldown": "8.28.3-snapshot-5",
+    "@instructure/ui-form-field": "8.28.3-snapshot-5",
+    "@instructure/ui-icons": "8.28.3-snapshot-5",
+    "@instructure/ui-pill": "8.28.3-snapshot-5",
+    "@instructure/ui-popover": "8.28.3-snapshot-5",
+    "@instructure/ui-react-utils": "8.28.3-snapshot-5",
+    "@instructure/ui-testable": "8.28.3-snapshot-5",
+    "@instructure/ui-text": "8.28.3-snapshot-5",
+    "@instructure/ui-text-input": "8.28.3-snapshot-5",
+    "@instructure/ui-themes": "8.28.3-snapshot-5",
+    "@instructure/ui-tooltip": "8.28.3-snapshot-5",
+    "@instructure/ui-utils": "8.28.3-snapshot-5",
+    "@instructure/ui-view": "8.28.3-snapshot-5",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.28.2",
-    "@instructure/ui-test-locator": "8.28.2",
-    "@instructure/ui-test-queries": "8.28.2",
-    "@instructure/ui-test-utils": "8.28.2"
+    "@instructure/ui-babel-preset": "8.28.3-snapshot-5",
+    "@instructure/ui-test-locator": "8.28.3-snapshot-5",
+    "@instructure/ui-test-queries": "8.28.3-snapshot-5",
+    "@instructure/ui-test-utils": "8.28.3-snapshot-5"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/ColorMixer/ColorPalette/index.tsx

@@ -39,6 +39,7 @@ import type { ColorPaletteProps, ColorPaletteState } from './props'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
+import { px } from '@instructure/ui-utils'
 
 /**
 ---
@@ -63,6 +64,7 @@ class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
   private _paletteRef: HTMLDivElement | null = null
   private _mouseMoveListener?: { remove(): void }
   private _mouseUpListener?: { remove(): void }
+  private _paletteOffset = px(this.props.styles?.paletteOffset as string)
 
   handleRef = (el: Element | null) => {
     const { elementRef } = this.props
@@ -95,11 +97,13 @@ class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
   }
 
   get paletteWidth() {
-    return this._paletteRef!.getBoundingClientRect().width
+    return this._paletteRef!.getBoundingClientRect().width - this._paletteOffset
   }
 
   get paletteHeight() {
-    return this._paletteRef!.getBoundingClientRect().height
+    return (
+      this._paletteRef!.getBoundingClientRect().height - this._paletteOffset
+    )
   }
   calcSaturation = (position: number) =>
     Math.round((position / this.paletteWidth) * 100) / 100
@@ -109,10 +113,9 @@ class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
 
   calcPositionFromColor(hsv: HSVType) {
     const { s, v } = hsv
-    return {
-      x: s * this.paletteWidth,
-      y: this.paletteHeight - v * this.paletteHeight
-    }
+    const x = s * this.paletteWidth
+    const y = (1 - v) * this.paletteHeight
+    return { x, y }
   }
 
   handlePaletteMouseDown(e: React.MouseEvent<ViewOwnProps, MouseEvent>) {

package/src/ColorMixer/ColorPalette/props.ts

@@ -57,7 +57,7 @@ type ColorPaletteProps = ColorPaletteOwnProps &
   OtherHTMLAttributes<ColorPaletteOwnProps>
 
 type ColorPaletteStyle = ComponentStyle<
-  'ColorPalette' | 'indicator' | 'palette' | 'disabledOverlay'
+  'ColorPalette' | 'indicator' | 'palette' | 'disabledOverlay' | 'paletteOffset'
 >
 
 const propTypes: PropValidators<PropKeys> = {

package/src/ColorMixer/ColorPalette/styles.ts

@@ -87,7 +87,8 @@ const generateStyle = (
       position: 'absolute',
       top: '-.5rem',
       left: '-.5rem'
-    }
+    },
+    paletteOffset: componentTheme.paletteOffset
   }
 }
 

package/src/ColorMixer/ColorPalette/theme.ts

@@ -41,7 +41,8 @@ const generateComponentTheme = (theme: Theme): ColorMixerPaletteTheme => {
     indicatorBorderWidth: borders.widthSmall,
     paletteBorderRadius: borders.radiusMedium,
     paletteBorderWidth: borders.widthSmall,
-    disabledOverlayZIndex: stacking.topmost
+    disabledOverlayZIndex: stacking.topmost,
+    paletteOffset: '0.125rem'
   }
 
   return {