@instructure/ui-color-picker 8.56.1 → 8.56.2-snapshot-2

package/src/ColorPicker/index.tsx

@@ -30,12 +30,8 @@ import { withStyle, jsx } from '@instructure/emotion'
 import { warn, error } from '@instructure/console'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
-import {
-  colorToHex8,
-  isValid,
-  contrast as getContrast
-} from '@instructure/ui-color-utils'
-
+import { isValid, contrast as getContrast } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import { TextInput } from '@instructure/ui-text-input'
 import { Tooltip } from '@instructure/ui-tooltip'
 import { Button, IconButton } from '@instructure/ui-buttons'
@@ -444,7 +440,9 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           children(
             `#${this.mixedColorWithStrippedAlpha}`,
             (newColor: string) => {
-              this.setState({ mixedColor: colorToHex8(newColor).slice(1) })
+              this.setState({
+                mixedColor: conversions.colorToHex8(newColor).slice(1)
+              })
             },
             () => {
               this.setState({
@@ -470,7 +468,9 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           <ColorMixer
             value={`#${this.state.mixedColor}`}
             onChange={(newColor: string) =>
-              this.setState({ mixedColor: colorToHex8(newColor).slice(1) })
+              this.setState({
+                mixedColor: conversions.colorToHex8(newColor).slice(1)
+              })
             }
             withAlpha={this.props.colorMixerSettings.colorMixer.withAlpha}
             rgbRedInputScreenReaderLabel={

package/src/ColorPreset/index.tsx

@@ -28,7 +28,7 @@ import { Component } from 'react'
 import { withStyle, jsx } from '@instructure/emotion'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
-import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 
 import { IconButton, Button } from '@instructure/ui-buttons'
 import { View } from '@instructure/ui-view'
@@ -101,7 +101,10 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
 
   isSelectedColor(color: string) {
     const { selected } = this.props
-    return !!selected && colorToHex8(selected) === colorToHex8(color)
+    return (
+      !!selected &&
+      conversions.colorToHex8(selected) === conversions.colorToHex8(color)
+    )
   }
 
   onMenuItemSelected =
@@ -149,9 +152,9 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
     >
       <div css={this.props.styles?.popoverContent}>
         <ColorMixer
-          value={colorToHex8(this.state.newColor)}
+          value={conversions.colorToHex8(this.state.newColor)}
           onChange={(newColor: string) =>
-            this.setState({ newColor: colorToRGB(newColor) })
+            this.setState({ newColor: conversions.colorToRGB(newColor) })
           }
           withAlpha={this.props?.colorMixerSettings?.colorMixer?.withAlpha}
           rgbRedInputScreenReaderLabel={
@@ -189,7 +192,7 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
               firstColor={
                 this.props.colorMixerSettings.colorContrast.firstColor
               }
-              secondColor={colorToHex8(this.state.newColor)}
+              secondColor={conversions.colorToHex8(this.state.newColor)}
               label={this.props.colorMixerSettings.colorContrast.label}
               successLabel={
                 this.props.colorMixerSettings.colorContrast.successLabel
@@ -220,7 +223,7 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
         <Button
           onClick={() => {
             this.props?.colorMixerSettings?.onPresetChange([
-              colorToHex8(this.state.newColor),
+              conversions.colorToHex8(this.state.newColor),
               ...this.props.colors
             ])
             this.setState({ openAddNew: false })