feat(Datagrid): adds view all feature for checkboxes

[AlexanderMelox]

Adding this feature to add the ability to display multiple checkboxes under a view all button.

Solution for #2714

If Checkboxes exceed 10 then only show 5 and show the rest after clicking View all

https://github.com/carbon-design-system/ibm-products/assets/12755042/2dcf4bac-8d25-4453-a46e-076d0bc1cccd

Talked to Shelley Dignum about the change, and this is a good first step. The true behavior is that is should open a multi add/select.

From Shelley:

What did you change?

I changed the render method of checkboxes inside useFilters. This checks if the checkboxes are larger than 10, then only display 5 checkboxes and hide the rest collapsed.

How did you test and verify your work?

Storybook

[netlify[bot]]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	1a7b102f6dbd958d1e1f38023f4476bf5d6bb79d
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6536aef08353af0008be70c8
😎 Deploy Preview	https://deploy-preview-3560--carbon-for-ibm-products.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.

[sdignum]

@AlexanderMelox Three things:

1. The ghost button should sit 16px to the left so that the text of the button aligns with the text above it.
2. The expanded button label should be "View less" instead of hide all.
3. Please use the small ghost button (looks like it's a medium in your video)

[AlexanderMelox]

Added the new changes @sdignum

[sdignum]

@AlexanderMelox Apologies on not using clearer language....align the text of the button with the content above it, in this case the checkboxes. So it should be flush with the edge of the filter panel. As seen in the guidance:

Also, no need for the number with the "View less" label on the expanded view.

[AlexanderMelox]

@sdignum Oh okay! When we flush the button to the left, the hover will also be flushed. Just wondering if thats okay.

An example

[sdignum]

@AlexanderMelox yes, that is fine. I know it's a little weird, but it's a general way of dealing with ghost buttons when they're aligned left under other content. Thanks! And just a reminder or making you sure you saw my note about the "view less" button not needing the number with it.

[AlexanderMelox]

@AlexanderMelox yes, that is fine. I know it's a little weird, but it's a general way of dealing with ghost buttons when they're aligned left under other content. Thanks! And just a reminder or making you sure you saw my note about the "view less" button not needing the number with it.

Yup I saw it, so align left and when View less is visible no number 👍🏻

[AlexanderMelox]

@sdignum you can check the latest changes here https://deploy-preview-3560--carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-datagrid-datagrid-canary-extensions-panel--panel-many-checkboxes

[sdignum]

@sdignum you can check the latest changes here https://deploy-preview-3560--carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-datagrid-datagrid-canary-extensions-panel--panel-many-checkboxes

@AlexanderMelox Apologies for missing the Github email. I reviewed and it looks good (not sure why all the checkboxes are disabled but assuming that would not be the case for normal experience I'm good with it).

[AlexanderMelox]

@sdignum you can check the latest changes here https://deploy-preview-3560--carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-datagrid-datagrid-canary-extensions-panel--panel-many-checkboxes

@AlexanderMelox Apologies for missing the Github email. I reviewed and it looks good (not sure why all the checkboxes are disabled but assuming that would not be the case for normal experience I'm good with it).

The checkboxes are disabled because they are dummy checkboxes that don't do anything so I don't want the code to break because of it. It's there to show the usage