feat: improve readability of multiselect

[jzfrank]

Description

Improve readability of selected items in MultiSelect

Related issue(s)
#635

What kind of change does this PR introduce? (check at least one)

• Bug fix (non-breaking change which fixes an issue)
• New Feature (non-breaking change which adds functionality)
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

How has This been tested?

Storybook

Screenshots (if appropriate):

• Truncate longer text with lg as breakpoint
• Able to close by item or all together.

In mobile:

horizontally scrollable without showing scroll bar.

In desktop:

The PR fulfills these requirements:

• It's submitted to the main branch
• When resolving a specific issue, it's referenced in the related issue section above
• My change requires a change to the documentation. (Managed by Tremor Team)
• I have added tests to cover my changes
• Check the "Allow edits from maintainers" option while creating your PR.
• Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.

[christopherkindl]

Thank you so much, @jzfrank! We will review it asap.

[christopherkindl]

@jzfrank Works great so far, one thing to be fixed would be to add a white background for the global close button, such that it does not overlay with the selected items:

[christopherkindl]

@jzfrank + no change in height of the input bar when an item is selected. Currently it gets bigger once an item is selected 🙂

[jzfrank]

@christopherkindl Thanks for the review! Now it should get fixed.

[jzfrank]

A quick follow up question: I hide the horizontal scrollbar for a better UI. However, if the user does not have a trackpad or ability to scroll horizontally, should we show the scrollbar? Maybe we should add a prop showScrollBar with default to be false?

[christopherkindl]

Thanks so much @jzfrank! Will review it asap. And good question, will try out what feels better.

[severinlandolt]

@christopherkindl @jzfrank Added support for dark mode.

[christopherkindl]

@jzfrank updated styling of selected items
@severinlandolt not sure how we can keep the same height as in the other input elements without compromising the aesthetics. Would avoid shrinking the font size of selected item pills, maybe let's change the padding between selected items <> input?

[severinlandolt]

@christopherkindl Should now have the same height:

[github-actions]

🎉 This PR is included in version 3.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀