feat(components, app): add custom pipette select with category support #3996
Conversation
b-cooper
added
app
Codecov Report
@@ Coverage Diff @@
## edge #3996 +/- ##
==========================================
- Coverage 76.5% 57.18% -19.33%
==========================================
Files 110 851 +741
Lines 13201 24064 +10863
==========================================
+ Hits 10100 13760 +3660
- Misses 3101 10304 +7203
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
App looks good and correct options are displayed. Change request is for the following style issue:
- When a dropdown is selected, its background should become white. See Wi-Fi selection for an example or the Zeplin components library form fields spec
None of my comments below are change requests, but it looks like we have some alignment work to do on our usage of react-select throughout our codebase so I wanted to call some stuff out
| import styles from './styles.css' | ||
|
|
||
| const LABEL = 'Select the pipette you wish to attach:' | ||
|
|
||
| export type PipetteSelectionProps = { | ||
| onChange: $PropertyType<React.ElementProps<typeof DropdownField>, 'onChange'>, | ||
| ...React.ElementProps<typeof PipetteSelect>, |
There was a problem hiding this comment.
Since we're spreading, we probably want to make PipetteSelectionProps exact if we can. Might need to do the same for the props of PipetteSelect, too (or at least wrap it in an $Exact here)
| @@ -0,0 +1,19 @@ | |||
| This component uses the `react-select` library. So the change/blur events are not | |||
| normal DOM events, but special ones. To make the difference clear, `SelectField` | |||
| doesn't have `onChange` and `onBlur` but instead `onValueChange` and `onLoseFocus`. | |||
There was a problem hiding this comment.
Copy paste typo and are we going to have onValueChange and onLoseFocus props in PipetteSelect? It seems like our reasoning for having those props in the SelectField component still apply here
With the addition of more pipette options, with more coming, this adds a newly designed component to the CL that takes advantage of react-select and provides a straight-forward shareable way of allowing users to select a pipette from a list of available instruments.
With the addition of more pipette options, with more coming, this adds a newly designed component to the CL that takes advantage of react-select and provides a straight-forward shareable way of allowing users to select a pipette from a list of available instruments.
b-cooper
force-pushed
the
cl_pipette-select-react-select
branch
from
d6b7d0b
to
0a7f733
Compare
b-cooper
force-pushed
the
cl_pipette-select-react-select
branch
from
926f815
to
b234605
Compare
Overview
With the addition of more pipette options, with more coming, this adds a newly designed component to the CL that takes advantage of react-select and provides a straight-forward shareable way of allowing users to select a pipette from a list of available instruments.
Closes #3597
Review Requests