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.

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

Add new Picker components #2375

Merged
merged 39 commits into from
Oct 25, 2024
Merged

Add new Picker components #2375

merged 39 commits into from
Oct 25, 2024

Conversation

bryancunningham-okta
Copy link
Contributor

@bryancunningham-okta bryancunningham-okta commented Oct 3, 2024

DES-5646

Summary

  • Adds 2 new 'picker' components for multiple use case. Picker and PickerWithOptionAdornment

Testing & Screenshots

Picker

image

PickerWithOptionAdornment

Small adornment

image

Large adornment

image
  • I have confirmed this change with my designer and the Odyssey Design Team.

@bryancunningham-okta bryancunningham-okta marked this pull request as ready for review October 7, 2024 16:19
@bryancunningham-okta bryancunningham-okta requested a review from a team as a code owner October 7, 2024 16:19
@bryancunningham-okta bryancunningham-okta force-pushed the bc_group_picker branch 2 times, most recently from 3460b40 to cf892ca Compare October 11, 2024 14:28
Comment on lines 238 to 246
const useResetCache = (length: number) => {
const resetCacheRef = useRef<VariableSizeList>(null);
useEffect(() => {
if (resetCacheRef.current) {
resetCacheRef.current.resetAfterIndex(0, true);
}
}, [length]);
return resetCacheRef;
};
Copy link
Contributor

@KevinGhadyani-Okta KevinGhadyani-Okta Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's useResetCache doing for us? Is there an X somewhere that this resets?

Why store the data outside of hooks like useState?

We should probably add comments for all these decisions too.

Copy link
Contributor Author

@bryancunningham-okta bryancunningham-okta Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something to do with virtualization. I just moved this code from Autocomplete didn't look too deeply into it

Comment on lines +125 to +106
>(() => {
if (hasMultipleChoices) {
if (value === undefined) {
return defaultValue;
}
return [] as AutocompleteValue<
OptionType,
HasMultipleChoices,
undefined,
IsCustomValueAllowed
>;
}
return value === undefined ? defaultValue : undefined;
}, [defaultValue, hasMultipleChoices, value]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought all this hasMultipleChoices logic was in MUI. If it's something we have to check for all over the place, this is why I suggest we separate them into separate components.

Is this the only place it's relevant?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is the only place we do any type of checking. But, I also feel like this could be a simpler. Again, I just moved this code into the hook for reusability.

Comment on lines 258 to 267
const {
inputValueProp,
isVirtualized,
onChange,
onInputChange,
renderInput,
t,
valueProps,
ListboxComponent,
} = useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shouldn't return t right? If we need the translation function, we should grab it from that useTranslation hook right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@KevinGhadyani-Okta I had mixed feelings about this. Felt a little weird to return it here but, I also felt like it might make sense to do it to keep from calling the hook again. I'm good either way

@KevinGhadyani-Okta
Copy link
Contributor

I would like to see some unit tests, but it's overall fine after the changes we made the other day.

@oktapp-aperture-okta oktapp-aperture-okta bot merged commit 6e4f7a6 into main Oct 25, 2024
3 checks passed
@oktapp-aperture-okta oktapp-aperture-okta bot deleted the bc_group_picker branch October 25, 2024 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants