Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 16 commits into from
Jul 11, 2022
Merged

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

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d6d9ab4
add liquid color enhancements feature flag
sakibh Jun 22, 2022
22eb579
add react-color dependency
sakibh Jun 23, 2022
9667acb
add ColorPicker component
sakibh Jun 28, 2022
1ca6d69
add types
sakibh Jun 28, 2022
2176de7
Add display color to liquid type
smb2268 Jun 29, 2022
f33ff39
feat(protocol-designer): add custom liquid color picker
sakibh Jun 30, 2022
63498bf
fix types
sakibh Jun 30, 2022
bd4a4d5
fix css lint errors
sakibh Jul 1, 2022
23a1b91
Merge branch 'edge' into pd_add-color-picker
sakibh Jul 1, 2022
88f95ce
create selector and refactor color sources
sakibh Jul 5, 2022
3696d81
fix e2e migrations test
sakibh Jul 6, 2022
fadf4bb
add hover effect for swatch
sakibh Jul 6, 2022
4253621
remove comment
sakibh Jul 6, 2022
3349f64
add boxShadow when active
sakibh Jul 11, 2022
6dacfb6
merge edge
sakibh Jul 11, 2022
0f39146
refactor conditional styling
sakibh Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions components/src/ui-style-constants/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,28 @@ export const warningBg = '#fffcf5'
export const alphaToOpacity35 = '35'

export const backgroundOverlay = `${darkBlack}${alphaToOpacity35}`

// colors 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'

export const liquidColors = [
electricPurple,
goldenYellow,
aquamarine,
orangePeel,
skyBlue,
popPink,
richBlue,
springGreen,
tartRed,
whaleGrey,
]
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"@types/lodash": "^4.14.168",
"@types/multer": "^1.4.5",
"@types/netmask": "^1.0.30",
"@types/react-color": "^3.0.6",
"@types/react-redux": "^7.1.16",
"@types/react-test-renderer": "^17.0.1",
"@types/redux-mock-store": "^1.0.2",
Expand Down
16 changes: 8 additions & 8 deletions protocol-designer/fixtures/protocol/6/doItAllV3MigratedToV6.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"author": "Fixture",
"description": "Test all v3 commands",
"created": 1585930833548,
"lastModified": 1655820379385,
"lastModified": 1657087816127,
"category": null,
"subcategory": null,
"tags": []
Expand All @@ -13,7 +13,7 @@
"name": "opentrons/protocol-designer",
"version": "6.0.0",
"data": {
"_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT",
"_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT",
"defaultValues": {
"aspirate_mmFromBottom": 1,
"dispense_mmFromBottom": 0.5,
Expand Down Expand Up @@ -201,7 +201,7 @@
"0": {
"displayName": "Water",
"description": "",
"displayColor": "#00d781"
"displayColor": "#b925ff"
}
},
"labwareDefinitions": {
Expand Down Expand Up @@ -2575,31 +2575,31 @@
"modules": {},
"commands": [
{
"key": "52c17e90-f16b-11ec-b2e1-61739b3f8d1d",
"key": "4dec74f0-fcf2-11ec-bdbe-d1c437dcce8c",
"commandType": "loadPipette",
"params": {
"pipetteId": "0b3f2210-75c7-11ea-b42f-4b64e50f43e5",
"mount": "left"
}
},
{
"key": "52c1a5a0-f16b-11ec-b2e1-61739b3f8d1d",
"key": "4dec74f1-fcf2-11ec-bdbe-d1c437dcce8c",
"commandType": "loadLabware",
"params": {
"labwareId": "0b44c760-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_96_tiprack_300ul/1",
"location": { "slotName": "2" }
}
},
{
"key": "52c1a5a1-f16b-11ec-b2e1-61739b3f8d1d",
"key": "4dec74f2-fcf2-11ec-bdbe-d1c437dcce8c",
"commandType": "loadLabware",
"params": {
"labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1",
"location": { "slotName": "1" }
}
},
{
"key": "52c1a5a2-f16b-11ec-b2e1-61739b3f8d1d",
"key": "4dec74f3-fcf2-11ec-bdbe-d1c437dcce8c",
"commandType": "loadLabware",
"params": {
"labwareId": "21ed8f60-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_24_aluminumblock_generic_2ml_screwcap/1",
Expand All @@ -2608,7 +2608,7 @@
},
{
"commandType": "loadLiquid",
"key": "52c1a5a3-f16b-11ec-b2e1-61739b3f8d1d",
"key": "4dec74f4-fcf2-11ec-bdbe-d1c437dcce8c",
"params": {
"liquidId": "0",
"labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1",
Expand Down
20 changes: 10 additions & 10 deletions protocol-designer/fixtures/protocol/6/doItAllV4MigratedToV6.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"author": "Fixture",
"description": "Test all v4 commands",
"created": 1585930833548,
"lastModified": 1655834370844,
"lastModified": 1657088139159,
"category": null,
"subcategory": null,
"tags": []
Expand All @@ -13,7 +13,7 @@
"name": "opentrons/protocol-designer",
"version": "6.0.0",
"data": {
"_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT",
"_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT",
"defaultValues": {
"aspirate_mmFromBottom": 1,
"dispense_mmFromBottom": 0.5,
Expand Down Expand Up @@ -232,7 +232,7 @@
"0": {
"displayName": "Water",
"description": "",
"displayColor": "#00d781"
"displayColor": "#b925ff"
}
},
"labwareDefinitions": {
Expand Down Expand Up @@ -2613,39 +2613,39 @@
},
"commands": [
{
"key": "e650b5c0-f18b-11ec-8c85-d1e531238b7c",
"key": "0e773a70-fcf3-11ec-b56d-7d2b57b14b6d",
"commandType": "loadPipette",
"params": {
"pipetteId": "0b3f2210-75c7-11ea-b42f-4b64e50f43e5",
"mount": "left"
}
},
{
"key": "e650dcd4-f18b-11ec-8c85-d1e531238b7c",
"key": "0e776183-fcf3-11ec-b56d-7d2b57b14b6d",
"commandType": "loadModule",
"params": {
"moduleId": "0b419310-75c7-11ea-b42f-4b64e50f43e5:magneticModuleType",
"location": { "slotName": "1" }
}
},
{
"key": "e650dcd5-f18b-11ec-8c85-d1e531238b7c",
"key": "0e776184-fcf3-11ec-b56d-7d2b57b14b6d",
"commandType": "loadModule",
"params": {
"moduleId": "0b4319b0-75c7-11ea-b42f-4b64e50f43e5:temperatureModuleType",
"location": { "slotName": "3" }
}
},
{
"key": "e650dcd0-f18b-11ec-8c85-d1e531238b7c",
"key": "0e773a71-fcf3-11ec-b56d-7d2b57b14b6d",
"commandType": "loadLabware",
"params": {
"labwareId": "0b44c760-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_96_tiprack_300ul/1",
"location": { "slotName": "2" }
}
},
{
"key": "e650dcd1-f18b-11ec-8c85-d1e531238b7c",
"key": "0e776180-fcf3-11ec-b56d-7d2b57b14b6d",
"commandType": "loadLabware",
"params": {
"labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1",
Expand All @@ -2655,7 +2655,7 @@
}
},
{
"key": "e650dcd2-f18b-11ec-8c85-d1e531238b7c",
"key": "0e776181-fcf3-11ec-b56d-7d2b57b14b6d",
"commandType": "loadLabware",
"params": {
"labwareId": "21ed8f60-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_24_aluminumblock_generic_2ml_screwcap/1",
Expand All @@ -2666,7 +2666,7 @@
},
{
"commandType": "loadLiquid",
"key": "e650dcd3-f18b-11ec-8c85-d1e531238b7c",
"key": "0e776182-fcf3-11ec-b56d-7d2b57b14b6d",
"params": {
"liquidId": "0",
"labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1",
Expand Down
22 changes: 11 additions & 11 deletions protocol-designer/fixtures/protocol/6/example_1_1_0MigratedFromV1_0_0.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"author": "Author name",
"description": "Description here",
"created": 1560957631666,
"lastModified": 1655834013312,
"lastModified": 1657087289027,
"category": null,
"subcategory": null,
"tags": []
Expand All @@ -13,7 +13,7 @@
"name": "opentrons/protocol-designer",
"version": "6.0.0",
"data": {
"_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT",
"_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT",
"defaultValues": {
"aspirate_mmFromBottom": 1,
"dispense_mmFromBottom": 0.5,
Expand Down Expand Up @@ -198,9 +198,9 @@
"0": {
"displayName": "samples",
"description": "",
"displayColor": "#00d781"
"displayColor": "#b925ff"
},
"1": { "displayName": "dna", "description": "", "displayColor": "#0076ff" }
"1": { "displayName": "dna", "description": "", "displayColor": "#ffd600" }
},
"labwareDefinitions": {
"opentrons/opentrons_96_tiprack_10ul/1": {
Expand Down Expand Up @@ -3390,39 +3390,39 @@
"modules": {},
"commands": [
{
"key": "1135cf10-f18b-11ec-8c85-d1e531238b7c",
"key": "13bf6130-fcf1-11ec-9196-697464e70343",
"commandType": "loadPipette",
"params": {
"pipetteId": "c6f45030-92a5-11e9-ac62-1b173f839d9e",
"mount": "left"
}
},
{
"key": "1135cf11-f18b-11ec-8c85-d1e531238b7c",
"key": "13bf6131-fcf1-11ec-9196-697464e70343",
"commandType": "loadPipette",
"params": {
"pipetteId": "c6f47740-92a5-11e9-ac62-1b173f839d9e",
"mount": "right"
}
},
{
"key": "1135cf12-f18b-11ec-8c85-d1e531238b7c",
"key": "13bf6132-fcf1-11ec-9196-697464e70343",
"commandType": "loadLabware",
"params": {
"labwareId": "c6f4ec70-92a5-11e9-ac62-1b173f839d9e:tiprack-10ul",
"location": { "slotName": "1" }
}
},
{
"key": "1135cf13-f18b-11ec-8c85-d1e531238b7c",
"key": "13bf6133-fcf1-11ec-9196-697464e70343",
"commandType": "loadLabware",
"params": {
"labwareId": "c6f51380-92a5-11e9-ac62-1b173f839d9e:tiprack-200ul",
"location": { "slotName": "2" }
}
},
{
"key": "1135cf14-f18b-11ec-8c85-d1e531238b7c",
"key": "13bf6134-fcf1-11ec-9196-697464e70343",
"commandType": "loadLabware",
"params": {
"labwareId": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well",
Expand All @@ -3431,7 +3431,7 @@
},
{
"commandType": "loadLiquid",
"key": "1135cf16-f18b-11ec-8c85-d1e531238b7c",
"key": "13bf8840-fcf1-11ec-9196-697464e70343",
"params": {
"liquidId": "1",
"labwareId": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well",
Expand All @@ -3440,7 +3440,7 @@
},
{
"commandType": "loadLiquid",
"key": "1135cf15-f18b-11ec-8c85-d1e531238b7c",
"key": "13bf6135-fcf1-11ec-9196-697464e70343",
"params": {
"liquidId": "0",
"labwareId": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well",
Expand Down
20 changes: 10 additions & 10 deletions protocol-designer/fixtures/protocol/6/preFlexGrandfatheredProtocolMigratedFromV1_0_0.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"author": "",
"description": "",
"created": 1547476685921,
"lastModified": 1655819704279,
"lastModified": 1657085442366,
"category": null,
"subcategory": null,
"tags": []
Expand All @@ -13,7 +13,7 @@
"name": "opentrons/protocol-designer",
"version": "6.0.0",
"data": {
"_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT",
"_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT",
"defaultValues": {
"aspirate_mmFromBottom": 1,
"dispense_mmFromBottom": 0.5,
Expand Down Expand Up @@ -1826,7 +1826,7 @@
"0": {
"displayName": "Liquid",
"description": "",
"displayColor": "#00d781"
"displayColor": "#b925ff"
}
},
"labwareDefinitions": {
Expand Down Expand Up @@ -4123,47 +4123,47 @@
"modules": {},
"commands": [
{
"key": "c05c7e70-f169-11ec-b2e1-61739b3f8d1d",
"key": "c70d6cf0-fcec-11ec-bd0d-5dfbc21e644d",
"commandType": "loadPipette",
"params": {
"pipetteId": "01217420-180a-11e9-9608-8bed9be8868f",
"mount": "left"
}
},
{
"key": "c05c7e71-f169-11ec-b2e1-61739b3f8d1d",
"key": "c70d6cf1-fcec-11ec-bd0d-5dfbc21e644d",
"commandType": "loadPipette",
"params": {
"pipetteId": "01217421-180a-11e9-9608-8bed9be8868f",
"mount": "right"
}
},
{
"key": "c05c7e72-f169-11ec-b2e1-61739b3f8d1d",
"key": "c70d6cf2-fcec-11ec-bd0d-5dfbc21e644d",
"commandType": "loadLabware",
"params": {
"labwareId": "0121e950-180a-11e9-9608-8bed9be8868f:tiprack-10ul",
"location": { "slotName": "1" }
}
},
{
"key": "c05c7e73-f169-11ec-b2e1-61739b3f8d1d",
"key": "c70d6cf3-fcec-11ec-bd0d-5dfbc21e644d",
"commandType": "loadLabware",
"params": {
"labwareId": "0bc091e0-180a-11e9-9608-8bed9be8868f:trough-12row",
"location": { "slotName": "7" }
}
},
{
"key": "c05c7e74-f169-11ec-b2e1-61739b3f8d1d",
"key": "c70d6cf4-fcec-11ec-bd0d-5dfbc21e644d",
"commandType": "loadLabware",
"params": {
"labwareId": "3c1a31c0-180a-11e9-9608-8bed9be8868f:96-flat",
"location": { "slotName": "8" }
}
},
{
"key": "c05c7e75-f169-11ec-b2e1-61739b3f8d1d",
"key": "c70d6cf5-fcec-11ec-bd0d-5dfbc21e644d",
"commandType": "loadLabware",
"params": {
"labwareId": "cea1c650-1811-11e9-9608-8bed9be8868f",
Expand All @@ -4172,7 +4172,7 @@
},
{
"commandType": "loadLiquid",
"key": "c05ca580-f169-11ec-b2e1-61739b3f8d1d",
"key": "c70d9400-fcec-11ec-bd0d-5dfbc21e644d",
"params": {
"liquidId": "0",
"labwareId": "0bc091e0-180a-11e9-9608-8bed9be8868f:trough-12row",
Expand Down
1 change: 1 addition & 0 deletions protocol-designer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"lodash": "4.17.15",
"query-string": "6.2.0",
"react": "17.0.1",
"react-color": "2.19.3",
"react-dnd": "6.0.0",
"react-dnd-mouse-backend": "0.1.2",
"react-dom": "17.0.1",
Expand Down
Loading