feat: Add isSelected prop to entity list item

[mgueyraud]

Purpose of PR

Add a prop isSelected to the entity list item, and the corresponding styles of it. Basically the same way as the card works

PR Checklist

• [x] I have read the relevant readme.md file(s)
• [x] All commits follow our Git commit message convention
• [x] Tests are added/updated/not required
• [x] Tests are passing
• [x] Storybook stories are added/updated/not required
• [x] Usage notes are added/updated/not required
• [x] Has been tested based on Contentful's browser support
• [x] Doesn't contain any sensitive information

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 3069882798a3ba2728c98fc4e32156f9ff8d42a2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel[bot]]

@mgueyraud is attempting to deploy a commit to the Contentful Apps Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
forma-36	✅ Ready (Inspect)	Visit Preview	Jun 21, 2022 at 8:17AM (UTC)

[burakukula]

@mgueyraud Thanks so much for the contribution! Amazing! From the code perspective it looks great! 🙌 There are a couple of styling issues that we would have to figure out. Just a couple of issues with borders for selected elements:

There is also a question how the hover state for item should look like when there is onClick handler on the item. I will reach out to our design team for suggestions and come back to you with a visual proposal so we could adjust styles a bit. What do you think?

[burakukula]

Hey @mgueyraud! Sure thing. In general, we need to make sure that there are no double borders visible when the element is selected (grey and blue visible at the same time). The pseudo element approach might be a quick win over here. I'm wondering how to solve the issue of double blue border, when 2 items are selected... 🤔 But for now, let me just clarify details with the design team and come back to you, before we move forward, so you have all the info needed to work on that. Hope that's ok with you 🙂

[burakukula]

Hey @mgueyraud! Sorry for the small delay from our end. So we talked about the isSelected functionality and for your PR I would suggest the following:

• cleanup the borders, so there is only the selected border visible (I would maybe suggest to try to rewrite a bit CSS so you don't have to hack it with pseudo elements, if possible.)
• hover state would stay the same as it is right now, which means you don't need to introduce any new styling for that, the only adjustment that you might do is to add cursor:pointer for the item which has onClick or is draggable. I think we might have a bug here, so if you have a moment, that might be a nice improvement.
• make sure that isSelected is not possible for the element that has dragging functionality. We would like to allow that, but in order to make it possible (drag and drop multiple elements), we need to figure out visuals a bit more. We would rather introduce this functionality in a separate release, as soon as we have all the insights from the design side. I hope this would allow you to move forward with the PR. Let me know if you need any help. 🙂

[mgueyraud]

Hey @burakukula ,

Sounds good to me!

Will be working in that and let you know

[burakukula]

Hey @mgueyraud! how are you doing? 🙂 I wanted to check with you how is it going with changes for this PR. Did you face any issues? Can we help somehow?

[github-actions[bot]]

Marking pull request as stale since there was no acitivty for 30 days

[denkristoffer]

Thank you for the contribution! I'm going to close this PR for now as work has stalled. Feel free to ping us If you want to pick this back up in the future 🙂 And again, thank you for the contribution regardless.