feat: [M3-7665] - RegionMultiSelect Component

[cpathipa]

Description 📝

This Allows to select multiple regions and renders the list of selected regions

Changes 🔄

• RemovableSelectionsList - Added an optional prop to render custom label component.

Preview 📷

Region Multi select	Renders selected list

How to test 🧪

• Run story book verify the functionality of Region Multi select component.

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[github-actions]

Coverage Report: ✅
Base Coverage: 79.95%
Current Coverage: 80.18%

[jaalah-akamai]

The dark mode background colors/shading is a little weird. Do we also want to have a border under Select All and Deselect All like in the original Autocomplete example?

[abailly-akamai]

Thanks for breaking this down in its own component!

The component tested in Storybook looks good 👍

Left a couple questions and some comments to improve code

Also, I am not a fan of this UI pattern in general. When selecting a region, the user has no idea a list is behind the dropdown, and the checkmark next to the region is faint. There's a risk the user does not know the selection worked. I'd like to bring this to UX cause we may want to re-thing this pattern. CC @jaalah-akamai

[cpathipa]

@jaalah-akamai @jaalah-akamai Great feedback.

• Renamed - RenderSelectedRegionsList to SelectedRegionsList
• Renamed - removeOption to handleRemoveOption
• improved readability in story book variable naming - selectedRegionsIds, setSelectedRegionsIds
• Removed debugger and commented code and described the util function.
• Added UX concern of selected region list and checkmark selection item to our next cafe.
• Added border under Select All and Deselect All.
• Extract RenderOption as a Separate Component in RegionMultiSelect
• RegionMultiSelect -Test coverage
• Created a followup ticket M3-7675 for coverage and to make renderOption as reusable for RegionSelect and RegionMultiSelect.

[abailly-akamai]

Thanks for the changes! - a couple more comments to clean things up and this should be good to go

[jaalah-akamai]

Thanks for re-using RegionOption, much better. I'm sure there's more we can do, but this is good for now

[bnussman-akamai]

One day, we may want to combine RegionSelect and RegionMultiSelect into one component, but this is good for now!