feat(multiselect): new All option for multiselect

[Gururajj77]

Closes #16117

Select All feature for multiselect

Changelog

New

• All option created

Changed

• changes in the logic for multiselect and selection.js

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	5b9107f
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/667bfd0e0ba9a50008e5cb67
😎 Deploy Preview	https://deploy-preview-16236--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[guidari]

Hey @Gururajj77 and @preetibansalui
Awesome new functionality! it is working perfect 🚀
Just a couple things I noticed

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	5b9107f
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/667bfd0e7ffd340008068869
😎 Deploy Preview	https://deploy-preview-16236--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[preetibansalui]

1. To check accessibility focus states
2. There has to be 2 different text parameters: prompt text( def value= Choose options), selected text (def value = Options selected)
3. Clicking on indeterminate state should unselect all options

Hey @benjamin-kurien , I have made following changes, please review it.

1. Create a separate story as 'Select All'
2. Click on indeterminate state should deselect all selected items
3. All option should not display active state when clicked on it.
4. Added a new prop as 'labelforSelectAll'.
5. Changed label text to 'Choose options' and 'options selected' by using useState hook for the story only as an example.
6. Changed options to match documentation as suggested by @tay1orjones.

[tay1orjones]

Overall these changes look great to me and the storybook example in particular is so much better with the item label changed to "All roles" 🙌

I did notice that the checkbox and text of the first/select-all is not vertically centered within the item, it sits slightly too low. Might be off by just 1px or so.

[preetibansalui]

Overall these changes look great to me and the storybook example in particular is so much better with the item label changed to "All roles" 🙌

I did notice that the checkbox and text of the first/select-all is not vertically centered within the item, it sits slightly too low. Might be off by just 1px or so.

Hey @tay1orjones , Thanks for reviewing this, we are using same classes for the first option as others. It might be possible you are looking the first item as highlighted one so its making you feels like its not centred align. Pls check the screenshots for the sizing:

For the first element we are just adding a bottom border which too takes place of the border in case of other options. and some margins from left and right.

[tay1orjones]

@preetibansalui Yeah you're right, it's broken in prod too - this is react.carbondesignsystem.com

I'm not sure how it got past Percy VRT. Would you mind fixing it in this PR? I know it's a bit beyond the original scope of this issue, but would be great to get it fixed.

[preetibansalui]

@preetibansalui Yeah you're right, it's broken in prod too - this is react.carbondesignsystem.com

I'm not sure how it got past Percy VRT. Would you mind fixing it in this PR? I know it's a bit beyond the original scope of this issue, but would be great to get it fixed.

Done. It was a small fix only.

[laurenmrice]

Hey all! Looking good! Just wanted to chime in here with a couple design related comments:

Select All story

• The “All roles” option should be at the top of the menu in the multiselect dropdown and not at the bottom, unless the design spec for this has changed.
• The first option that currently gets focus in the menu called “Editor” should be text color token $text-secondary in the focus and enabled states. The text color only turns to $text-primary on the hover and selected states.

Playground story

• When I set the hasSelectAll prop to true, the text for the select all option does not appear in the menu of the multiselect dropdown.
• The “All roles” option should be at the top of the menu and not at the bottom in the multiselect dropdown, unless the design spec for this has changed.
• The first option that currently gets focus in the menu called “An example option that is real…” should be text color token $text-secondary in the focus and enabled states. The text color only turns to $text-primary on the hover and selected states.

[preetibansalui]

Hey all! Looking good! Just wanted to chime in here with a couple design related comments:

Select All story

• The “All roles” option should be at the top of the menu in the multiselect dropdown and not at the bottom, unless the design spec for this has changed.
• The first option that currently gets focus in the menu called “Editor” should be text color token $text-secondary in the focus and enabled states. The text color only turns to $text-primary on the hover and selected states.

Playground story

• When I set the hasSelectAll prop to true, the text for the select all option does not appear in the menu of the multiselect dropdown.
• The “All roles” option should be at the top of the menu and not at the bottom in the multiselect dropdown, unless the design spec for this has changed.
• The first option that currently gets focus in the menu called “An example option that is real…” should be text color token $text-secondary in the focus and enabled states. The text color only turns to $text-primary on the hover and selected states.

Hey @laurenmrice , Thankyou for reviewing this PR. But I am confused with the comments. I can see the All roles in the top only. Attaching the video of preview, please let me know if I misunderstood something.

Screen.Recording.2024-06-20.at.1.56.34.PM.mov

[laurenmrice]

@preetibansalui Thanks. I was using the Deploy Preview (https://deploy-preview-16236--v11-carbon-react.netlify.app/) link in your PR to review it. This is how the designers usually review PRs, but I guess this link has not been updated with the latest changes.

Would you be able to update this, or get help from a dev to update it? I don't know what the procedure is of updating that link. Thanks!

[preetibansalui]

Had a call with @laurenmrice & @benjamin-kurien and found that in Chrome and Safari its fine but in firefox browser only 'All roles' is coming as a last option. I will fix that.
For another issue, option text should be of $text-primary for highlighted text as well but we were able to replicate it in Multiselect, Dropdown & combobox. So Lauren will be creating a separate issue for this.

[tay1orjones]

It doesn't look like this fixed the vertical alignment issue. Playing around with it quickly seems like maybe the label:before needs to be modified? In the history I'm not sure if this maybe introduced this? #14641

[benjamin-kurien]

Looks good. Thanks for making the changes.