feat(protocol-designer): add custom liquid color picker

This PR adds a custom liquid color picker and field to the liquids page in Protocol Designer. closes #10573, closes #10601
Opentrons · Jun 30, 2022 · f33ff39 · f33ff39
1 parent 2176de7
commit f33ff39
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 17 deletions.
diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css
@@ -1,6 +1,7 @@
 .swatch {
   display: inline-block;
   cursor: pointer;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.41);
 }
 
 .color {
@@ -10,14 +11,14 @@
 }
 
 .popover {
-  margin-top: 10px;
-  padding-right: 100px;
+  margin-top: 15px;
   position: absolute;
+  right: 24px;
 }
 
 .cover {
   position: fixed;
-  top: 0px;
+  top: 10px;
   right: 0px;
   bottom: 0px;
   left: 0px;

diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { ColorResult, TwitterPicker } from 'react-color'
-import { colors } from '../swatchColors'
+import { COLORS } from '@opentrons/components'
 
 import styles from './ColorPicker.css'
 
@@ -32,13 +32,13 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
             onClick={() => setShowColorPicker(false)}
           />
           <TwitterPicker
-            colors={colors}
+            colors={COLORS.liquidColors}
             color={props.value}
             onChange={(color, event) => {
               props.onChange(color.hex)
               setShowColorPicker(showColorPicker => !showColorPicker)
             }}
-            triangle="top-left"
+            triangle="top-right"
           />
         </div>
       ) : null}

diff --git a/protocol-designer/src/components/IngredientsList/index.tsx b/protocol-designer/src/components/IngredientsList/index.tsx
@@ -1,12 +1,12 @@
 // TODO: Ian 2018-10-09 figure out what belongs in LiquidsSidebar vs IngredientsList after #2427
 import * as React from 'react'
-
+import { useSelector } from 'react-redux'
+import { selectors } from '../../labware-ingred/selectors'
 import { IconButton, SidePanel } from '@opentrons/components'
 import { sortWells } from '@opentrons/shared-data'
 import { i18n } from '../../localization'
 import { PDTitledList, PDListItem } from '../lists'
 import { TitledListNotes } from '../TitledListNotes'
-import { swatchColors } from '../swatchColors'
 import { LabwareDetailsCard } from './LabwareDetailsCard'
 import styles from './IngredientsList.css'
 import { LiquidGroupsById, LiquidGroup } from '../../labware-ingred/types'
@@ -48,6 +48,8 @@ const LiquidGroupCard = (props: LiquidGroupCardProps): JSX.Element | null => {
     .sort(sortWells)
     .filter(well => labwareWellContents[well][groupId])
 
+  const liquidGroups = useSelector(selectors.getLiquidGroupsById)
+
   if (wellsWithIngred.length < 1) {
     // do not show liquid card if it has no instances for this labware
     return null
@@ -56,7 +58,7 @@ const LiquidGroupCard = (props: LiquidGroupCardProps): JSX.Element | null => {
   return (
     <PDTitledList
       title={ingredGroup.name || i18n.t('card.unnamedLiquid')}
-      iconProps={{ style: { fill: swatchColors(groupId) } }}
+      iconProps={{ style: { fill: liquidGroups[groupId].displayColor } }}
       iconName="circle"
       onCollapseToggle={toggleAccordion}
       collapsed={!expanded}

diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
@@ -91,10 +91,10 @@ export function LiquidEditForm(props: Props): JSX.Element {
               <div className={formStyles.header}>
                 {i18n.t('form.liquid_edit.details')}
               </div>
-              <div className={formStyles.row_wrapper}>
+              <div className={formStyles.row_container}>
                 <FormGroup
                   label={i18n.t('form.liquid_edit.name')}
-                  className={formStyles.column_1_3}
+                  className={formStyles.column}
                 >
                   <InputField
                     name="name"
@@ -106,15 +106,15 @@ export function LiquidEditForm(props: Props): JSX.Element {
                 </FormGroup>
                 <FormGroup
                   label={i18n.t('form.liquid_edit.description')}
-                  className={formStyles.column_1_3}
+                  className={formStyles.column}
                 >
                   <InputField
                     name="description"
                     value={values.description}
                     onChange={handleChange}
                   />
                 </FormGroup>
-                <FormGroup label={'Liquid'} className={formStyles.column_1_3}>
+                <FormGroup label={i18n.t('form.liquid_edit.displayColor')}>
                   <Field
                     name="displayColor"
                     component={ColorPicker}

diff --git a/protocol-designer/src/components/forms/forms.css b/protocol-designer/src/components/forms/forms.css
@@ -27,10 +27,21 @@
  * that doesn't match the layout of transfer/distribute/consolidate/mix.
  * Eg the Pause form is an example of an exceptional layout.
  */
-.column_1_3 {
-  lost-column: 1/3;
+.column_1_2 {
+  lost-column: 1/2;
 }
 
 .row_wrapper {
   lost-utility: clearfix;
 }
+
+.row_container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.column {
+  flex: 1;
+  margin-right: 15.5px;
+}
diff --git a/protocol-designer/src/file-data/selectors/fileCreator.ts b/protocol-designer/src/file-data/selectors/fileCreator.ts
@@ -29,7 +29,6 @@ import {
   DEFAULT_MM_TOUCH_TIP_OFFSET_FROM_TOP,
   DEFAULT_MM_BLOWOUT_OFFSET_FROM_TOP,
 } from '../../constants'
-import { swatchColors } from '../../components/swatchColors'
 import type {
   ModuleEntity,
   PipetteEntity,
@@ -186,7 +185,7 @@ export const createFile: Selector<ProtocolFile> = createSelector(
           [liquidId]: {
             displayName: liquidData.name,
             description: liquidData.description ?? '',
-            displayColor: swatchColors(liquidId),
+            displayColor: liquidData.displayColor,
           },
         }
       },

diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json
@@ -15,6 +15,7 @@
   "liquid_edit": {
     "details": "Details",
     "description": "Description",
+    "displayColor": "Color",
     "name": "Liquid name",
     "serialize": "Serialize",
     "serialize_title": "Serialization",