Restructure project selection #171
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
oyamauchi
changed the title
oyamauchi
commented
Jun 21, 2024
Comment on lines
-474
to
-479
| // We're filtering out IRA rebates in favor of state-specific handling. | ||
| const allEligible = response.incentives | ||
| // Forward compatibility for when only eligible incentives are returned from | ||
| // the API, with no eligible flag. | ||
| .filter(i => i.eligible === true || i.eligible === undefined) | ||
| .filter(i => !isIRARebate(i)); |
There was a problem hiding this comment.
This filtering is all being done in the backend now; we're not losing any functionality here.
oyamauchi
changed the title
## Description The idea here is to move project selection out of the main form, and have the user select a project after submitting. The headline of the results section is now dynamic. The row-of-pills selector is gone; it's now a dropdown menu on all layouts. There's one major element of the new design that's not implemented here yet: a no-project-selected state. (This implementation automatically selects the alphabetically-first project that has incentives available, which is usually battery storage.) The no-selection state is pretty easily separated from the rest of the work, so I'd rather do that to keep this PR from getting too big. There are no multiple-selection dropdowns anywhere anymore, so I removed that code, but I did it in a separate commit for ease of reviewing. Some design questions: - I changed the down-arrow on the right of the dropdown to purple, as the design says, but is that meant to apply to the dropdowns in the form as well? (I made it do so.) - To implement this, I made it so that the selected item in single-select dropdowns gets a checkmark to the left. (Previously, only multi-select dropdowns got that treatment.) This affects the dropdowns in the form as well. I actually prefer it this way --- better visual indication of which item is selected --- but wanted to make sure that's intentional. - In part of the Figma, the rows in the dropdown have light grey lines separating them, and in another part they don't. I haven't added the lines, but I can if they're supposed to be there. - The background color of the number badge (purple-100) is the same as the color of the active (i.e. hovered) row in the dropdown, which makes the badge just a free-floating number in the active row. Just want to make sure that's intentional. ## Test Plan In all of browsers [Chrome, Safari, Firefox, MobileSafari]: - View the component on all layout widths; make sure it looks nice - Interact with the component with the keyboard. (Nothing about its interaction has changed substantially, but just to make sure.) - Interact with the component with VoiceOver, to make sure the number badge gets announced in an understandable way. (It'll say like `project, battery storage, 1 result` when you're on the main button.)
matelau
reviewed
Jul 8, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The idea here is to move project selection out of the main form, and
have the user select a project after submitting. The headline of the
results section is now dynamic. The row-of-pills selector is gone;
it's now a dropdown menu on all layouts.
There's one major element of the new design that's not implemented
here yet: a no-project-selected state. (This implementation
automatically selects the alphabetically-first project that has
incentives available, which is usually battery storage.) The
no-selection state is pretty easily separated from the rest of the
work, so I'd rather do that anyway to keep this PR from getting too big.
There are no multiple-selection dropdowns anywhere anymore, so I
removed that code, but I did it in a separate commit for ease of
reviewing.
Some design notes:
I changed the down-arrow on the right of the dropdown to purple, as
the design says. This applies to the dropdowns in the form as well.
To implement this, I made it so that the selected item in
single-select dropdowns gets a checkmark to the left. (Previously,
only multi-select dropdowns got that treatment.) This affects the
dropdowns in the form as well. I actually prefer it this way ---
better visual indication of which item is selected.
The background color of the number badge (purple-100) is the same as
the color of the active (i.e. hovered) row in the dropdown, so
there's a gray border around the badge in the hovered/active state.
Test Plan
Submit the form, select a project other than the first one. Reload
the page, submit the form again, make sure the previously selected
project is restored.
Put in a low income and submit the form. Select "cooking", which
usually has only the IRA rebate card. Put in a high income and submit
again. Make sure "cooking" is not selected (because it has zero
incentives), and the first project that has nonzero incentives is
selected.
In all of browsers [Chrome, Safari, Firefox, MobileSafari]:
View the component on all layout widths; make sure it looks nice
Interact with the component with the keyboard. (Nothing about its
interaction has changed substantially, but just to make sure.)
Interact with the component with VoiceOver, to make sure the number
badge gets announced in an understandable way. (It'll say like
project, battery storage, 1 resultwhen you're on the main button.)