@instructure/ui-color-picker 8.26.1 → 8.26.2

package/src/ColorPreset/ColorPresetLocator.ts

@@ -22,8 +22,54 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator'
+import { find } from '@instructure/ui-test-queries'
+
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+import { DrilldownLocator } from '@instructure/ui-drilldown/es/Drilldown/DrilldownLocator'
+// @ts-expect-error bypass no type definition found error
+import { TooltipLocator } from '@instructure/ui-tooltip/es/Tooltip/TooltipLocator'
+// @ts-expect-error bypass no type definition found error
+import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocator'
+/* eslint-enable no-restricted-imports */
+
+import { ColorIndicatorLocator } from '../ColorIndicator/ColorIndicatorLocator'
 
 import { ColorPreset } from './index'
 
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-export const ColorPresetLocator = locator(ColorPreset.selector)
+export const ColorPresetLocator = locator(ColorPreset.selector, {
+  findAllColorIndicators: (...args: any[]) => {
+    return ColorIndicatorLocator.findAll(...args)
+  },
+  findAllColorTooltips: (...args: any[]) => {
+    return TooltipLocator.findAll(...args)
+  },
+  findAllColorMenus: (...args: any[]) => {
+    return DrilldownLocator.findAll(...args)
+  },
+  findSelectedIndicator: async (...args: any[]) => {
+    const selected = await find('[aria-label="selected"]', ...args)
+
+    if (!selected) {
+      return selected
+    }
+
+    return await ColorIndicatorLocator.find(selected.getDOMNode())
+  },
+  findSelectedIcon: (...args: any[]) => {
+    return find('[class$=-colorPreset__selectedIndicator]', ...args)
+  },
+  findAddColorPopoverContent: (...args: any[]) => {
+    return PopoverLocator.findContent(...args)
+  },
+  getMenuForIndex: async (_element: any, index: number) => {
+    const component = await ColorPresetLocator.find()
+    const indicators = await component.findAllColorIndicators()
+    const menus = await component.findAllColorMenus()
+
+    await indicators[index].click()
+
+    return await menus[index].findPopoverContent()
+  }
+})

package/src/ColorPreset/README.md

@@ -83,10 +83,13 @@ class Example extends React.Component {
           colors={this.state.colors}
           selected={this.state.selected}
           onSelect={(selected) => this.setState({ selected })}
-          addNewPresetButtonScreenReaderLabel='Add new color'
           colorMixerSettings={{
             addNewPresetButtonScreenReaderLabel:'Add new preset button label',
+            selectColorLabel: 'Select',
+            removeColorLabel: 'Remove',
             onPresetChange:(colors) => this.setState({ colors }),
+            popoverAddButtonLabel: "Add",
+            popoverCloseButtonLabel: "Cancel",
             colorMixer:{
               rgbRedInputScreenReaderLabel:'Input field for red',
               rgbGreenInputScreenReaderLabel:'Input field for green',
@@ -98,7 +101,6 @@ class Example extends React.Component {
             },
             colorContrast:{
                 firstColor:"#FF0000",
-                secondColor:"#FFFF00",
                 label:"Color Contrast Ratio",
                 successLabel:"PASS",
                 failureLabel:"FAIL",

package/src/ColorPreset/index.tsx

@@ -26,7 +26,7 @@
 import { Component } from 'react'
 
 import { withStyle, jsx } from '@instructure/emotion'
-import { passthroughProps } from '@instructure/ui-react-utils'
+import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils'
 
@@ -68,6 +68,7 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
 
   constructor(props: ColorPresetProps) {
     super(props)
+
     this.state = {
       openEditor: false,
       openAddNew: false,
@@ -95,6 +96,15 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
     this.props.makeStyles?.()
   }
 
+  get isModifiable() {
+    return typeof this.props.colorMixerSettings?.onPresetChange === 'function'
+  }
+
+  isSelectedColor(color: string) {
+    const { selected } = this.props
+    return !!selected && colorToHex8(selected) === colorToHex8(color)
+  }
+
   onMenuItemSelected =
     (color: string): DrilldownProps['onSelect'] =>
     (_e, args) => {
@@ -219,18 +229,19 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
           color="primary"
           margin="0 xx-small 0 xx-small"
         >
-          Add
+          {this.props.colorMixerSettings?.popoverAddButtonLabel}
         </Button>
         <Button
           onClick={() => this.setState({ openAddNew: false })}
           color="secondary"
           margin="0 xx-small 0 xx-small"
         >
-          Close
+          {this.props.colorMixerSettings?.popoverCloseButtonLabel}
         </Button>
       </div>
     </Popover>
   )
+
   renderColorIndicator = (color: string, selectOnClick?: boolean) => (
     <Tooltip renderTip={<div>{color}</div>}>
       <View
@@ -248,12 +259,12 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
         {...(selectOnClick
           ? { onClick: () => this.props.onSelect(color) }
           : {})}
-        {...(this.props.selected === color ? { 'aria-label': 'selected' } : {})}
+        {...(this.isSelectedColor(color) ? { 'aria-label': 'selected' } : {})}
         role="presentation"
       >
         <div>
           <ColorIndicator color={color} shape="rectangle" />
-          {this.props.selected === color && (
+          {this.isSelectedColor(color) && (
             <div css={this.props?.styles?.selectedIndicator}>
               <IconCheckDarkSolid
                 themeOverride={{ sizeXSmall: '0.8rem' }}
@@ -265,6 +276,7 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
       </View>
     </Tooltip>
   )
+
   renderSettingsMenu = (color: string, index: number) => (
     <Drilldown
       onSelect={this.onMenuItemSelected(color)}
@@ -276,30 +288,27 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
     >
       <Drilldown.Page withoutHeaderSeparator id="root" renderTitle={color}>
         <Drilldown.Option value="select" id="select">
-          Select
+          {this.props.colorMixerSettings!.selectColorLabel}
         </Drilldown.Option>
         <Drilldown.Option value="remove" id="remove">
-          Remove
+          {this.props.colorMixerSettings!.removeColorLabel}
         </Drilldown.Option>
       </Drilldown.Page>
     </Drilldown>
   )
 
   render() {
-    const {
-      disabled,
-      onSelect,
-      selected,
-      styles,
-      label,
-      colorMixerSettings,
-      colors,
-      elementRef,
-      ...props
-    } = this.props
+    const { styles, label, colors } = this.props
+
+    if (!this.isModifiable && colors.length === 0) {
+      // if there is no preset and no ability to add new,
+      // there is no point of rendering the component
+      return null
+    }
+
     return (
       <div
-        {...passthroughProps(props)}
+        {...omitProps(this.props, ColorPreset.allowedProps)}
         ref={this.handleRef}
         css={styles?.colorPreset}
       >
@@ -308,17 +317,18 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
             <Text weight="bold">{label}</Text>
           </div>
         )}
-        {typeof colorMixerSettings?.onPresetChange === 'function' &&
-          this.renderAddNewPresetButton()}
-        {colors.map((color, index) =>
-          typeof colorMixerSettings?.onPresetChange === 'function' ? (
+
+        {this.isModifiable && this.renderAddNewPresetButton()}
+
+        {colors.map((color, index) => {
+          return this.isModifiable ? (
             this.renderSettingsMenu(color, index)
           ) : (
             <div key={`color-preset-color-${index}`}>
               {this.renderColorIndicator(color, true)}
             </div>
           )
-        )}
+        })}
       </div>
     )
   }

package/src/ColorPreset/props.ts

@@ -30,13 +30,9 @@ import type {
   PropValidators,
   ColorPresetTheme
 } from '@instructure/shared-types'
-import type { RGBAType } from '../ColorMixer/props'
+import type { RGBAType } from '@instructure/ui-color-utils'
 
 type ContrastStrength = 'min' | 'mid' | 'max'
-type MessageType = Array<{
-  type: 'success' | 'hint' | 'error' | 'screenreader-only'
-  text: string
-}>
 
 type ColorPresetOwnProps = {
   /**
@@ -67,10 +63,14 @@ type ColorPresetOwnProps = {
      * screenReaderLabel for the add new preset button
      */
     addNewPresetButtonScreenReaderLabel: string
-    maxHeight: string
+    selectColorLabel: string
+    removeColorLabel: string
     onPresetChange: (colors: ColorPresetOwnProps['colors']) => void
+    popoverAddButtonLabel: string
+    popoverCloseButtonLabel: string
+    maxHeight?: string
     colorMixer: {
-      withAlpha: boolean
+      withAlpha?: boolean
       rgbRedInputScreenReaderLabel: string
       rgbGreenInputScreenReaderLabel: string
       rgbBlueInputScreenReaderLabel: string
@@ -102,7 +102,7 @@ type ColorPresetOwnProps = {
   /**
    * The currently selected HEX string
    */
-  selected: string | null
+  selected?: string
 }
 
 type ColorPresetState = {
@@ -132,13 +132,45 @@ type ColorPresetStyle = ComponentStyle<
 
 const propTypes: PropValidators<PropKeys> = {
   colors: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  selected: PropTypes.string,
   disabled: PropTypes.bool,
   elementRef: PropTypes.func,
   label: PropTypes.string,
-  colorMixerSettings: PropTypes.object,
-  onSelect: PropTypes.func.isRequired,
   popoverScreenReaderLabel: PropTypes.string,
-  selected: PropTypes.string.isRequired
+  colorMixerSettings: PropTypes.shape({
+    addNewPresetButtonScreenReaderLabel: PropTypes.string.isRequired,
+    selectColorLabel: PropTypes.string.isRequired,
+    removeColorLabel: PropTypes.string.isRequired,
+    onPresetChange: PropTypes.func,
+    popoverAddButtonLabel: PropTypes.string.isRequired,
+    popoverCloseButtonLabel: PropTypes.string.isRequired,
+    maxHeight: PropTypes.string,
+    colorMixer: PropTypes.shape({
+      withAlpha: PropTypes.bool,
+      rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
+      rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
+      rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,
+      rgbAlphaInputScreenReaderLabel: PropTypes.string.isRequired,
+      colorSliderNavigationExplanationScreenReaderLabel:
+        PropTypes.string.isRequired,
+      alphaSliderNavigationExplanationScreenReaderLabel:
+        PropTypes.string.isRequired,
+      colorPaletteNavigationExplanationScreenReaderLabel:
+        PropTypes.string.isRequired
+    }).isRequired,
+    colorContrast: PropTypes.shape({
+      firstColor: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      successLabel: PropTypes.string.isRequired,
+      failureLabel: PropTypes.string.isRequired,
+      normalTextLabel: PropTypes.string.isRequired,
+      largeTextLabel: PropTypes.string.isRequired,
+      graphicsTextLabel: PropTypes.string.isRequired,
+      firstColorLabel: PropTypes.string.isRequired,
+      secondColorLabel: PropTypes.string.isRequired
+    })
+  })
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -156,7 +188,6 @@ export type {
   ColorPresetProps,
   ColorPresetStyle,
   ColorPresetState,
-  ContrastStrength,
-  MessageType
+  ContrastStrength
 }
 export { propTypes, allowedProps }