add filter layer side drawer guidance

[britt6612]

Deploy Preview

What does this PR do?

This PR adds a section about filtering in a side drawer and guidance on how that should be displayed

This also cleans up the code example we had for Configuration Form currently it shows this. This is not only empty but its shows the wrong footer.

I changed the code to use the grommet Data too be more aligned.

Where should the reviewer start?

side-drawer-layer.mdx

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• Small, medium, and large screen sizes
• Cross-browsers (FireFox, Chrome, and Safari)
• Light & dark modes
• All hyperlinks route properly

Accessibility Checks

• Keyboard interactions
• Screen reader experience
• Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• Console is free of warnings and errors
• Passes E2E commit checks
• Visual snapshots are reasonable

How should this be manually tested?

site

Any background context you want to provide?

"Filter layer" should be an exception from other actionable modals.
update Design System guidance with rationale.

What are the relevant issues?

part of issue #3629

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

yes

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

[taysea]

Looking good, filed a suggestion PR into this branch with some wording thoughts:
#3719

[taysea]

Small thing, can we make sure this fills the full width of the example? in mdx maybe we need to add width="100%" to Example?

Also, can you add back DataSummary below Toolbar?

[taysea]

The filter layer still has the "Undo changes" button. Can you update the yarn.lock to get the latest from Grommet?

[britt6612]

@taysea updated now

[taysea]

LGTM, thank you!

[jcfilben]

Looks good!