UXD-1692: ListBox - Align with UI Kit

[slee1130]

Purpose 🚀

ListBox styling in general needs to be changed

Notes ✏️

1 size for the ListBox: Medium

• Texts: Lato regular 14px
• The trigger like “Select” can still have 2 sizes (see Inputs) ⚠️ → "Select" have 3 sizes.. (?)

Content list

• 32px row height for 1 line of information
• 48px row height for 2 lines of information like Users
• No paddings between rows
• Full width on hover and select states

Section (eg. Villain)

• No more divider
• Paddings in the 32px row height: 14px top [section name] 2px bottom
• Multi select content always have checkboxes
• Tags content always have the “+” icon

Footer

• 48px height
• Medium buttons 32px

Updates 📦

If you have changed a component's source code (not stories, specs, or docs), before merging your branch run yarn changeset. This will prompt you to:

• indicate if changes were patch/minor/major for each modified package
• enter a release message

Storybook 📕

http://storybooks.highbond-s3.com/paprika/uxd-1692-ListBox

Screenshots 📸

optional but highly recommended

References 🔗

https://aclgrc.atlassian.net/browse/UXD-1692

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 48cb23231d16b92e82d5cb4b2e43740f435cec5f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

| Name | Type | | --------------------------- | ----- | | @paprika/list-box | Patch | | @paprika/list-box-browser | Patch | | @paprika/list-box-with-tags | Patch | | @paprika/filter | Patch | | @paprika/inline-editors | Patch | | @paprika/search | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR