@instructure/ui-color-picker 8.25.1-snapshot-20

package/src/ColorMixer/ColorPalette/index.tsx

@@ -0,0 +1,250 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyrigfht notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import React, { Component } from 'react'
+
+import { withStyle, jsx } from '@instructure/emotion'
+import { addEventListener } from '@instructure/ui-dom-utils'
+import shallowCompare from '../utils/shallowCompare'
+
+import { View } from '@instructure/ui-view'
+import type { ViewOwnProps } from '@instructure/ui-view'
+
+import { propTypes, allowedProps } from './props'
+import type { ColorPaletteProps, ColorPaletteState } from './props'
+import type { HSVType } from '../props'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * @tsProps
+ **/
+@withStyle(generateStyle, generateComponentTheme)
+class ColorPalette extends Component<ColorPaletteProps, ColorPaletteState> {
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static readonly componentId = 'ColorMixer.Palette'
+
+  constructor(props: ColorPaletteProps) {
+    super(props)
+    this.state = {
+      colorPosition: { x: 0, y: 0 }
+    }
+  }
+
+  ref: Element | null = null
+  private _paletteRef: HTMLDivElement | null = null
+  private _mouseMoveListener?: { remove(): void }
+  private _mouseUpListener?: { remove(): void }
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.(this.state)
+    this.setState({
+      colorPosition: this.calcPositionFromColor(this.props.color)
+    })
+  }
+
+  componentDidUpdate(prevProps: ColorPaletteProps) {
+    this.props.makeStyles?.(this.state)
+
+    if (shallowCompare(prevProps.color, this.props.color)) {
+      this.setState({
+        colorPosition: this.calcPositionFromColor(this.props.color)
+      })
+    }
+  }
+  componentWillUnmount() {
+    this.removeEventListeners()
+  }
+
+  get paletteWidth() {
+    return this._paletteRef!.getBoundingClientRect().width
+  }
+
+  get paletteHeight() {
+    return this._paletteRef!.getBoundingClientRect().height
+  }
+  calcSaturation = (position: number) =>
+    Math.round((position / this.paletteWidth) * 100) / 100
+  calcLuminance = (position: number) =>
+    Math.round(((this.paletteHeight - position) / this.paletteHeight) * 100) /
+    100
+
+  calcPositionFromColor(hsv: HSVType) {
+    const { s, v } = hsv
+    return {
+      x: s * this.paletteWidth,
+      y: this.paletteHeight - v * this.paletteHeight
+    }
+  }
+
+  handlePaletteMouseDown(e: React.MouseEvent<ViewOwnProps, MouseEvent>) {
+    this.handleChange(e)
+
+    this._mouseMoveListener = addEventListener(
+      window,
+      'mousemove',
+      this.handleChange
+    )
+    this._mouseUpListener = addEventListener(
+      window,
+      'mouseup',
+      this.handleMouseUp
+    )
+  }
+
+  handleMouseUp = () => {
+    this.removeEventListeners()
+  }
+
+  removeEventListeners() {
+    this._mouseMoveListener?.remove()
+    this._mouseUpListener?.remove()
+  }
+
+  calcColorPosition(clientX: number, clientY: number) {
+    const { x, y } = this._paletteRef!.getBoundingClientRect()
+
+    return this.applyBoundaries(clientX - x, clientY - y)
+  }
+
+  applyBoundaries(x: number, y: number) {
+    let newXPosition = x
+    let newYPosition = y
+    if (x > this.paletteWidth) {
+      newXPosition = this.paletteWidth
+    }
+    if (x < 0) {
+      newXPosition = 0
+    }
+    if (y > this.paletteHeight) {
+      newYPosition = this.paletteHeight
+    }
+    if (y < 0) {
+      newYPosition = 0
+    }
+    return { newXPosition, newYPosition }
+  }
+
+  handleChange = (e: React.MouseEvent<ViewOwnProps, MouseEvent>) => {
+    if (this.props.disabled) return
+    const { clientX, clientY } = e
+    const { newXPosition, newYPosition } = this.calcColorPosition(
+      clientX,
+      clientY
+    )
+    this.setState({
+      colorPosition: { x: newXPosition, y: newYPosition }
+    })
+
+    this.props.onChange({
+      h: this.props.hue,
+      s: this.calcSaturation(newXPosition),
+      v: this.calcLuminance(newYPosition)
+    })
+  }
+
+  handleKeyDown(e: React.KeyboardEvent<ViewOwnProps>) {
+    if (this.props.disabled) return
+    const { key } = e
+    if (key === 'Tab') return
+    e.preventDefault()
+    let deltaX = 0
+    let deltaY = 0
+    if (key === 'ArrowLeft' || key === 'a') {
+      deltaX = -2
+    }
+    if (key === 'ArrowRight' || key === 'd') {
+      deltaX = 2
+    }
+    if (key === 'ArrowUp' || key === 'w') {
+      deltaY = -2
+    }
+    if (key === 'ArrowDown' || key === 's') {
+      deltaY = 2
+    }
+
+    const { newXPosition, newYPosition } = this.applyBoundaries(
+      this.state.colorPosition.x + deltaX,
+      this.state.colorPosition.y + deltaY
+    )
+
+    this.setState({
+      colorPosition: { x: newXPosition, y: newYPosition }
+    })
+    this.props.onChange({
+      h: this.props.hue,
+      s: this.calcSaturation(newXPosition),
+      v: this.calcLuminance(newYPosition)
+    })
+  }
+
+  render() {
+    return (
+      <View
+        elementRef={this.handleRef}
+        disabled={this.props.disabled}
+        position="relative"
+        background="transparent"
+        display="inline-block"
+        borderRadius="medium"
+        borderWidth="0"
+        padding="0"
+        as="div"
+        tabIndex={this.props.disabled ? undefined : 0}
+        onKeyDown={(e) => this.handleKeyDown(e)}
+        onMouseDown={(e) => this.handlePaletteMouseDown(e)}
+        aria-label={this.props.navigationExplanationScreenReaderLabel}
+      >
+        <div css={this.props.styles?.indicator} />
+        {this.props.disabled && (
+          <div css={this.props.styles?.disabledOverlay} />
+        )}
+        <div
+          css={this.props.styles?.palette}
+          ref={(ref) => {
+            this._paletteRef = ref
+          }}
+        />
+      </View>
+    )
+  }
+}
+
+export default ColorPalette

package/src/ColorMixer/ColorPalette/props.ts

@@ -0,0 +1,87 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+import type {
+  OtherHTMLAttributes,
+  PropValidators,
+  ColorMixerPaletteTheme
+} from '@instructure/shared-types'
+import type { HSVType } from '../props'
+
+type ColorPaletteOwnProps = {
+  disabled?: boolean
+  hue: number
+  color: HSVType
+  width: number
+  height: number
+  indicatorRadius: number
+  onChange: (rgb: HSVType) => void
+  elementRef?: (element: Element | null) => void
+  navigationExplanationScreenReaderLabel: string
+}
+
+type ColorPaletteState = {
+  colorPosition: { x: number; y: number }
+}
+
+type PropKeys = keyof ColorPaletteOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ColorPaletteProps = ColorPaletteOwnProps &
+  WithStyleProps<ColorMixerPaletteTheme, ColorPaletteStyle> &
+  OtherHTMLAttributes<ColorPaletteOwnProps>
+
+type ColorPaletteStyle = ComponentStyle<
+  'ColorPalette' | 'indicator' | 'palette' | 'disabledOverlay'
+>
+const propTypes: PropValidators<PropKeys> = {
+  disabled: PropTypes.bool,
+  hue: PropTypes.number.isRequired,
+  color: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  indicatorRadius: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+  elementRef: PropTypes.func,
+  navigationExplanationScreenReaderLabel: PropTypes.string.isRequired
+}
+
+const allowedProps: AllowedPropKeys = [
+  'disabled',
+  'hue',
+  'color',
+  'width',
+  'height',
+  'indicatorRadius',
+  'onChange',
+  'elementRef',
+  'navigationExplanationScreenReaderLabel'
+]
+
+export type { ColorPaletteProps, ColorPaletteState, ColorPaletteStyle }
+export { propTypes, allowedProps }

package/src/ColorMixer/ColorPalette/styles.ts

@@ -0,0 +1,94 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type {
+  ColorPaletteStyle,
+  ColorPaletteProps,
+  ColorPaletteState
+} from './props'
+import type { ColorMixerPaletteTheme } from '@instructure/shared-types'
+import { px } from '@instructure/ui-utils'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: ColorMixerPaletteTheme,
+  props: ColorPaletteProps,
+  state: ColorPaletteState
+): ColorPaletteStyle => {
+  return {
+    ColorPalette: {
+      label: 'ColorPalette'
+    },
+    indicator: {
+      label: 'ColorPalette__indicator',
+      width: `${props.indicatorRadius / 8}rem`,
+      height: `${props.indicatorRadius / 8}rem`,
+      borderRadius: `${props.indicatorRadius / 8}rem`,
+      background: componentTheme.whiteColor,
+      position: 'absolute',
+      borderStyle: 'solid',
+      borderWidth: componentTheme.indicatorBorderWidth,
+      borderColor: componentTheme.indicatorBorderColor,
+      top: `${
+        state?.colorPosition?.y - px(`${props.indicatorRadius / 16}rem`)
+      }px`,
+      left: `${
+        state?.colorPosition?.x - px(`${props.indicatorRadius / 16}rem`)
+      }px`
+    },
+    palette: {
+      label: 'ColorPalette__palette',
+      width: `${props.width / 16}rem`,
+      height: `${props.height / 16}rem`,
+      borderRadius: componentTheme.paletteBorderRadius,
+      borderStyle: 'solid',
+      borderWidth: componentTheme.paletteBorderWidth,
+      boxSizing: 'border-box',
+      borderColor: componentTheme.colorIndicatorBorderColor,
+      background: `linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)),
+      linear-gradient(to right, white, hsl(${props.hue},100%,50%))`
+    },
+    disabledOverlay: {
+      label: 'ColorPalette__disabledOverlay',
+      background: 'rgba(255,255,255,.5)',
+      zIndex: componentTheme.disabledOverlayZIndex,
+      width: `${props.width / 16 + 1}rem`,
+      height: `${props.height / 16 + 1}rem`,
+      position: 'absolute',
+      top: '-.5rem',
+      left: '-.5rem'
+    }
+  }
+}
+
+export default generateStyle

package/src/ColorMixer/ColorPalette/theme.ts

@@ -0,0 +1,52 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import type { ColorMixerPaletteTheme } from '@instructure/shared-types'
+import { colorIndicatorBorderColor } from '../../ColorIndicator/theme'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): ColorMixerPaletteTheme => {
+  const { colors, borders, stacking } = theme
+
+  const componentVariables = {
+    indicatorBorderColor: colors.licorice,
+    whiteColor: colors.white,
+    colorIndicatorBorderColor,
+    indicatorBorderWidth: borders.widthSmall,
+    paletteBorderRadius: borders.radiusMedium,
+    paletteBorderWidth: borders.widthSmall,
+    disabledOverlayZIndex: stacking.topmost
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/ColorMixer/README.md

@@ -0,0 +1,98 @@
+---
+describes: ColorMixer
+---
+
+A component for selecting a color. It lets pick from a palette manually or type in an RGBA color.
+
+### Color Mixer
+
+```js
+---
+render: false
+example: true
+---
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "#328DCFC2",
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={{ display: "flex" }}>
+          <ColorMixer
+            withAlpha
+            value={this.state.value}
+            onChange={(value) => this.setState({ value })}
+            rgbRedInputScreenReaderLabel='Input field for red'
+            rgbGreenInputScreenReaderLabel='Input field for green'
+            rgbBlueInputScreenReaderLabel='Input field for blue'
+            rgbAlphaInputScreenReaderLabel='Input field for alpha'
+            colorSliderNavigationExplanationScreenReaderLabel={`You are on a color slider. To navigate the slider left or right, use the 'A' and 'D' buttons respectively`}
+            alphaSliderNavigationExplanationScreenReaderLabel={`You are on an alpha slider. To navigate the slider left or right, use the 'A' and 'D' buttons respectively`}
+            colorPaletteNavigationExplanationScreenReaderLabel={`You are on a color palette. To navigate on the palette up, left, down or right, use the 'W', 'A', 'S' and 'D' buttons respectively`}
+          />
+          <div
+            style={{
+              width: "100px",
+              height: "160px",
+              borderRadius: "4px",
+              backgroundColor: this.state.value,
+              marginLeft: "25px",
+              boxSizing: "border-box",
+              borderStyle: "solid",
+              borderColor: "rgba(56, 74, 88, 0.6)",
+            }}
+          >
+            {this.state.value}
+          </div>
+        </div>
+        <div style={{ marginTop: "10px" }}>
+          <Button onClick={() => this.setState({ value: "#579b17" })}>
+            Jump to #579b17
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+render(<Example />);
+
+
+```
+
+### Disabled Color Mixer
+
+```js
+---
+render: false
+example: true
+---
+class Example extends React.Component {
+  render() {
+    return (
+      <ColorMixer
+        disabled
+        withAlpha
+        value="#328DCFC2"
+        onChange={() => {}}
+        rgbRedInputScreenReaderLabel='Input field for red'
+        rgbGreenInputScreenReaderLabel='Input field for green'
+        rgbBlueInputScreenReaderLabel='Input field for blue'
+        rgbAlphaInputScreenReaderLabel='Input field for alpha'
+        colorSliderNavigationExplanationScreenReaderLabel={`You are on a color slider. To navigate the slider left or right, use the 'A' and 'D' buttons respectively`}
+        alphaSliderNavigationExplanationScreenReaderLabel={`You are on an alpha slider. To navigate the slider left or right, use the 'A' and 'D' buttons respectively`}
+        colorPaletteNavigationExplanationScreenReaderLabel={`You are on a color palette. To navigate on the palette up, left, down or right, use the 'W', 'A', 'S' and 'D' buttons respectively`}
+      />
+    );
+  }
+}
+
+render(<Example />);
+
+
+```