add ColorPicker component

Opentrons · Jun 28, 2022 · 9667acb · 9667acb
1 parent 22eb579
commit 9667acb
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 14 deletions.
diff --git a/components/src/ui-style-constants/colors.ts b/components/src/ui-style-constants/colors.ts
@@ -58,3 +58,15 @@ export const warningBg = '#fffcf5'
 export const alphaToOpacity35 = '35'
 
 export const backgroundOverlay = `${darkBlack}${alphaToOpacity35}`
+
+// colors pd liquid
+export const electricPurple = '#b925ff'
+export const goldenYellow = '#ffd600'
+export const aquamarine = '#9dffd8'
+export const orangePeel = '#ff9900'
+export const skyBlue = '#50d5ff'
+export const popPink = '#ff80f5'
+export const richBlue = '#0380fb'
+export const springGreen = '#7eff42'
+export const tartRed = '#ff4f4f'
+export const whaleGrey = '#9395a0'
diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css
@@ -0,0 +1,24 @@
+.swatch {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.color {
+  width: 59px;
+  height: 24px;
+  border-radius: 2px;
+}
+
+.popover {
+  margin-top: 10px;
+  padding-right: 100px;
+  position: absolute;
+}
+
+.cover {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { ColorResult, TwitterPicker } from 'react-color'
+import { colors } from '../swatchColors'
+
+import styles from './ColorPicker.css'
+
+interface ColorPickerProps {
+  liquidId: string
+}
+
+export function ColorPicker(props: ColorPickerProps): JSX.Element {
+  const [showColorPicker, setShowColorPicker] = React.useState<boolean>(false)
+  const [currentColor, setCurrentColor] = React.useState<ColorResult['hex']>(
+    '#000'
+  )
+  return (
+    <div>
+      <div
+        className={styles.swatch}
+        onClick={() => setShowColorPicker(showColorPicker => !showColorPicker)}
+      >
+        <div
+          className={styles.color}
+          style={{
+            backgroundColor: currentColor,
+          }}
+        />
+      </div>
+      {showColorPicker ? (
+        <div className={styles.popover}>
+          <div
+            className={styles.cover}
+            onClick={() => setShowColorPicker(false)}
+          />
+          <TwitterPicker
+            colors={colors}
+            color={currentColor}
+            onChange={color => {
+              setCurrentColor(color.hex)
+              setShowColorPicker(showColorPicker => !showColorPicker)
+            }}
+            triangle="top-left"
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
@@ -14,6 +14,7 @@ import styles from './LiquidEditForm.css'
 import formStyles from '../forms/forms.css'
 
 import { LiquidGroup } from '../../labware-ingred/types'
+import { ColorPicker } from '../ColorPicker'
 
 type Props = LiquidGroup & {
   canDelete: boolean
@@ -81,7 +82,7 @@ export function LiquidEditForm(props: Props): JSX.Element {
               <div className={formStyles.row_wrapper}>
                 <FormGroup
                   label={i18n.t('form.liquid_edit.name')}
-                  className={formStyles.column_1_2}
+                  className={formStyles.column_1_3}
                 >
                   <InputField
                     name="name"
@@ -93,14 +94,17 @@ export function LiquidEditForm(props: Props): JSX.Element {
                 </FormGroup>
                 <FormGroup
                   label={i18n.t('form.liquid_edit.description')}
-                  className={formStyles.column_1_2}
+                  className={formStyles.column_1_3}
                 >
                   <InputField
                     name="description"
                     value={values.description}
                     onChange={handleChange}
                   />
                 </FormGroup>
+                <FormGroup label={'Liquid'} className={formStyles.column_1_3}>
+                  <ColorPicker liquidId={'1'} />
+                </FormGroup>
               </div>
             </section>
 

diff --git a/protocol-designer/src/components/forms/forms.css b/protocol-designer/src/components/forms/forms.css
@@ -27,8 +27,8 @@
  * that doesn't match the layout of transfer/distribute/consolidate/mix.
  * Eg the Pause form is an example of an exceptional layout.
  */
-.column_1_2 {
-  lost-column: 1/2;
+.column_1_3 {
+  lost-column: 1/3;
 }
 
 .row_wrapper {

diff --git a/protocol-designer/src/components/swatchColors.ts b/protocol-designer/src/components/swatchColors.ts
@@ -1,19 +1,23 @@
 import { AIR } from '@opentrons/step-generation'
+import { COLORS } from '@opentrons/components'
 export const MIXED_WELL_COLOR = '#9b9b9b' // NOTE: matches `--c-med-gray` in colors.css
 
 // TODO factor into CSS or constants or elsewhere
+export const colors = [
+  COLORS.electricPurple,
+  COLORS.goldenYellow,
+  COLORS.aquamarine,
+  COLORS.orangePeel,
+  COLORS.skyBlue,
+  COLORS.popPink,
+  COLORS.richBlue,
+  COLORS.springGreen,
+  COLORS.tartRed,
+  COLORS.whaleGrey,
+]
+
 export const swatchColors = (ingredGroupId: string): string => {
   const num = Number(ingredGroupId)
-  const colors = [
-    '#00d781',
-    '#0076ff',
-    '#ff4888',
-    '#7b21d6',
-    '#ff6161',
-    '#065596',
-    '#2a97dc',
-    '#d24193',
-  ]
 
   if (!Number.isInteger(num)) {
     if (ingredGroupId !== AIR) {