[feat] Create Custom Multi-Select Dropdown and Style Seasonal Planting Guide

[kylezryr]

What's new in this PR 🧑‍🌾

Description

• Refactored Filter Dropdown Buttons (FilterDropdownMultiple and FilterDropdownSingle)
  • Used and styled React Select
  • Updated filtering logic for checkGrowingSeason to only consider Outdoors Season
• Seasonal Planting Guide
  • Styled Clear Filters button
  • Styled Filter Dropdowns
  • Re-styled PlantCalendarList (fix scrolling behavior / excessive whitespace)
• View Plants
  • Added PlantCardKey
• Miscellaneous changes
  • Deleted Button.tsx file (none of the button styles in that file were being used)
    • However, this file can serve as an example of how to use forwardRef
  • Header
    • Styled the Login/Sign up links
  • Renamed useTitleCase to toTitleCase
    • Impacts PlantCard, YourPlantDetails

Screenshots

note: these screenshots are old; the Clear Filters button is now styled

How to review

• Go to /seasonal-planting-guide and check that the styling matches
• Use the filters and check that styling matches, check that filters still work to filter out rows

Next steps

• Do we want the hasValue styling (i.e. background-colour becomes shrub when the filter has a value) to apply for the Multi Select as well?
  • (It’s only present for the SingleSelect currently) → would need to modify multiValueLabel, control, dropdownIndicator just as was done for FilterDropdownSingle
• try to eventually resolve the aria error

bigger changes that we can consider doing in a separate PR

• Possibly combining the multi select and single select into a single FilterDropdown component (see my comment for reasoning)
  • Or, at least reuse the styling between the two (single source of truth! + allows us to do the hasValue styling for both filters)
• Consider creating a FilterGroup component to be used in both view plants and planting timeline (see my comment for reasoning)
• decide how to handle the forwardRef for PlantCardKey (see comments)

Relevant links

Online sources

https://react-select.com/styles
https://react-select.com/components

Related PRs

CC: @ccatherinetan

[ccatherinetan]

haven't gotten a chance to go over super in depth, but it is looking amazing; since there's a console error, i haven't merged yet.

the remaining steps are

1. resolve the console error
2. update the PR description

[ccatherinetan]

i'm getting a console error:
"You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly."

perhaps we need to pass an onChange here?

here's more from the console error

[ccatherinetan]

optimization note: each time isCardKeyOpen changes, the entire page will re-render, which is expensive and unnecessary, so we should consider

1. maybe separate out the PlantCardList out into a separate component (and wrap it in a memo), or
2. wrap the PlantCardList section (i.e. everything under the title) in a useMemo? -- this would do the same thing but would mitigate having to define a new component

for more on re-rendering / how to prevent it: https://www.developerway.com/posts/react-re-renders-guide

however, we've already wrapped PlantCard in a memo, so maybe it's chill? something to consider tho!

[ccatherinetan]

looking amazing! a couple final things

• Do we want the hasValue styling (i.e. background-colour becomes shrub when the filter has a value) to apply for the Multi Select as well?
  • (It’s only present for the SingleSelect currently) → would need to modify multiValueLabel, control, dropdownIndicator just as was done for FilterDropdownSingle
• miscellaneous styling (see my comments)
  • remove the ref for IconButton?
  • cover the drop shadow above View Plants
  • ensure that the filter borders in View Plants aren't cut off

bigger changes that we can consider doing in a separate PR

• Consider combining the multi select and single select into a single FilterDropdown component (see my comment for reasoning)
  • Or, at least reuse the styling between the two (single source of truth!)
• Consider creating a FilterGroup component to be used in both view plants and planting timeline (see my comment for reasoning)
• decide how to handle the forwardRef for PlantCardKey

I was able to resolve part of the console error, but the remaining error regards aria, an assistive screen-reader tool, in particular aria-activedescendant

• More on aria: Proposal: use combobox role JedWatson/react-select#4695
• Honestly I can’t figure this one out (and it seems other ppl on Stack Overflow also haven’t) without understanding aria more in depth, but lowk, I think we can just leave it 😔 …
• error message: + aria-activedescendant={undefined} - aria-activedescendant=""

[ccatherinetan]

is it necessary to set the text color here? the placeholder styling is defined below, and we aren't rendering any text outside of the dropdown

(the same comment applies for the FilterDropdownMultiple.)

[ccatherinetan]

FilterDropdownInput isn't being used anywhere, right? do we want to comment this out or otherwise remove it?

[ccatherinetan]

i was able to fix the id hydration error by adding the line below
instanceId="dropdown-single"

[ccatherinetan]

Since there are a lot of shared styles between FilterDropdownMultiple and FilterDropdownSingle, we should consider consolidating the styles. A hacky way to do define the shared styles in FilterDropdownMulti/styles.ts and import the shared styles in FilterDropdownMulti.

However, perhaps we can also consider consolidating the FilterDropdownSingle and FilterDropdownMultiple into just FilterDropdown, which takes isMulti as an additional prop.

I remember you said that you separated them b/c it was getting to unwieldy. I do think it makes things slightly more complicated so perhaps that can be in a separate PR.

However, combining these into FilterDropdown would also make it easier to create the FilterGroup component (see comment in view-plants)

[ccatherinetan]

I was gonna say that customSelectStyles can just be a constant rather than a function, but I see that you need to pass in the $isSmall prop.

If we want to keep this as a constant rather than a function, we can define this constant inside the FilterDropdownSingle component so that it directly has access to all the states.

But honestly maybe it's fine as is

[ccatherinetan]

is the only reason we have the $isSmall b/c we want the Select State dropdown to be wide enough to fit the state options without horizontally scrolling?

Currently, I made the menu options wide enough on it's own (max-content, rather than inheriting the parent dropdown's width); would this mitigate the need for this "small" prop?

we should consult with @kyrenetam

[ccatherinetan]

nit: can we get the TopRowContainer to cover the dropshadow from the Header?

[ccatherinetan]

nit: instead of wrapping PlantCardKey in other div, it might be cleaner to use forwardRef, which would look smth like this:

export const PlantCardKey = forwardRef<HTMLDivElement>((props, ref) => {...} 
PlantCardKey.displayName = 'PlantCardKey';

HOWEVER, apparently, in React 19 (we're using React 18.3) you can directly pass ref as a prop, so maybe we can hold off on this change.
Apparently React 19 might introduce some breaking changes, so upgrading might be done in a separate PR

[ccatherinetan]

In View Plants, the upper/lower borders of the filters are being cutoff. This issue is already addressed in the Planting Timeline page by adding 1px padding to top and bottom. I think this is another argument for consolidating the filters in View Plants and Planting Timeline into a cobined component: FilterGroup which can take in props: CompleteFilter[], where CompleteFilter is typed

filterProps: FilterDropdownProps<T> // coming from FilterDropdownMultiple
checkFilterMatch: (plant: Plant) => boolean,

Then we could refactor filteredPlantList like so

// filterFuncs = completeFilters.map(cf => cf.checkFilterMatch);
const filteredPlantList = useMemo(() => 
  plants.filter(plant =>
      filterFuncs.every(fn => fn(plant));
), [filterFuncs];

this can be done in a separate PR, but I think consolidating the filters into a single component would be cleaner, since it creates a single source of truth and keep styling consistent

[ccatherinetan]

note: my understanding is that singleValue will only be rendered if a value is selected, so this check is kinda redundant (i.e. state.hasValue will always be true, so we can just directly assign the text color to be white)

[ccatherinetan]

note: we can also directly use the unstyled prop in Select, which would remove all non-essential styles, mitigating the need to set these to 0. however, if that interferes with other styling, this is ok

[ccatherinetan]

maybe we can apply this padding directly to FilterDropdownSingle and FilterDropdownMultiple so that we don't have to apply this padding each time we want to use these components