fix: removed the extra spacing between the chips in search and filter from vanilla example

[Nisarg-18]

Done

Removed extra spacing between search & filter chips that are only present in the Vanilla examples by setting the font-size to 0 as suggested by @lyubomir-popov in the issue conversation.

Fixes #5227

QA

• Open search & filter examples and verify they look correct
• Open search & filter docs and verify the markup in the example code snippets is easy to read

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshot

[webteam-app]

Demo: https://vanilla-framework-5414.demos.haus/docs/patterns/search-and-filter

[bartaz]

Thank you for you contribution.

Reducing font size to 0 may end up being quite risky change (as it may affect child elements if it's not reset back to standard size. It's probably not worth that risk.

Another, simpler and safer fix proposed in the issue was to simply remove the excess whitespace from the example HTML code. This component is used only in its React implementation, (where whitespaces between chips are not rendered), so it seems valid to reflect that in HTML of our examples.

Would you be willing to do this change instead @Nisarg-18 ?

[Nisarg-18]

Yep, I agree, It is a risky change.

Yes, I will implement the safer option of changing the HTML code.

[Nisarg-18]

@bartaz, I have made the changes in the HTML code. I have used comments (<!-- -->) instead of putting everything in a single line to make the code more readable. Let me know if this syntax is okay.

[bartaz]

OK. I'd probably just do them all in one line, but it doesn't matter too much. As I said, this component is meant to be used via React anyway.

It does look a bit weird in code preview in docs, but it's not too bad:

Thank you for your contribution @Nisarg-18.