DS Storybook - Add DataFilters story

[jcfilben]

https://deploy-preview-5814--unrivaled-bublanina-3a9bae.netlify.app/?path=/story/components-datafilters--default

What does this PR do?

Add story for DataFilters

What are the relevant issues?

#5710

Where should the reviewer start?

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 38a6349

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

[netlify]

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	38a6349
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-theme-preview/deploys/69973f648b11870008dd835a
😎 Deploy Preview	https://deploy-preview-5814--hpe-theme-preview.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 project configuration.

[netlify]

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	38a6349
🔍 Latest deploy log	https://app.netlify.com/projects/unrivaled-bublanina-3a9bae/deploys/69973f645a9de30008e2c108
😎 Deploy Preview	https://deploy-preview-5814--unrivaled-bublanina-3a9bae.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 project configuration.

[netlify]

✅ Deploy Preview for hpe-design-icons-grommet ready!

Name	Link
🔨 Latest commit	38a6349
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-design-icons-grommet/deploys/69973f648b11870008dd835e
😎 Deploy Preview	https://deploy-preview-5814--hpe-design-icons-grommet.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 project configuration.

[jcfilben]

Don't merge yet, need to add datatable baed on yesterday's dev discussion

[jcfilben]

Update example to include Datatable

[Sulaymon333]

I notice the closed icon won't close the drop when it is active, but clicking out of the drop close it and it closes when in layer mode as well. We did not have the icon on the community strorybook example

community storybook example

[jcfilben]

@Sulaymon333 I'm not seeing the close icon when I'm in the 'drop' mode of the story

[jcfilben]

Do you have layer set to true at the same time as drop is set to true? If so only one can be true the other should be false

[Sulaymon333]

Yes, I had both of them on. Should we add mutually exclusive check for both layer and drop props in the story?

[Sulaymon333]

Should we consider adding padding to the bounding box so that the badge number can show?

[britt6612]

Should we consider adding padding to the bounding box so that the badge number can show?

@Sulaymon333 we have a follow on issue for all the stories for spacing
#5760 so we can tackle that next.

[jcfilben]

Should we add mutually exclusive check for both layer and drop props in the story?

i can see this being useful, for now I'm okay with moving forward as is for MVP