[Feature] an inline Filters component variant

[marcinkrasowski]

We'd like to enhance our existing Filters component by adding a new display variant that renders filters directly in the UI without requiring a drawer.

Currently, our Filters component (documented at Storybook) only offers a version where:

• There is a button that opens a drawer with filters
• Optionally allows one of the filters to be presented beside the trigger button

This implementation works well for many use cases, but we need an additional display option for scenarios where all filters should be immediately visible to users.

Requirements

We need to implement a new variant of the Filters component that:

• Instead of a drawer, renders all filters immediately in a flex container that wraps into multiple lines as needed
• Has a bottom row with "Apply" and "Clear all filters" buttons (this logic is already present in the current version)
• Maintains the same functionality as the drawer variant but with a different visual presentation
• As a rough expectation how this new inline variant could look like, see a quick mockup:
  

Component modifications

• Modify the FiltersSection component (that is often used to e.g. render a list heading) to propagate the variant prop down to the Filters component
• InFilters component, add a new prop variant with possible values: 'drawer' | 'inline'
• Maintain a single Filters component that conditionally renders different versions based on the variant prop
• Refactor the code as needed to ensure clarity and maintainability
• Try not to modify the data model for the Filters component beyond adding the variant prop
• Ensure backward compatibility with existing implementations

Acceptance Criteria

• The Filters component accepts a new variant prop with values drawer (default) or inline
• When variant="inline", filters are rendered directly without requiring a drawer
• A bottom row with "Apply" and "Clear all filters" buttons is displayed
• The FiltersSection component correctly propagates the variant prop to the Filters component
• All existing functionality works correctly in both variants
• Make sure the new variant is appropriately documented in Storybook

Testing

You can test your implementation using the following methods:

1. Storybook

   • Make changes to the Filters component and view the effects in Storybook (npm run storybook)
   • Ensure both variants work correctly and maintain all existing functionality

2. Application

   • Run the whole app (npm run dev)
   • Temporarily modify one of the components that uses filters (set variant="inline"), such as the NotificationsList (packages/blocks/notification-list/src/frontend/NotificationList.client.tsx)
   • Navigate to http://localhost:3000/en/notifications to view the results

Additional Information

• For references and help, view our official docs at openselfservice.com/docs

In order to encourage new contributors, a tip of $10 will be rewarded if the PR is submitted by someone that has not yet contributed to the project

As an additional requirement, please provide a short feedback on your experiences with working with this framework - how easy or difficult it was to get started (including starting the project, getting around the monorepo or reading our docs) and to make the required changes.

---

This repo is using Opire - what does it mean? 👇

💵 Everyone can add rewards for this issue commenting /reward 100 (replace 100 with the amount).
🕵️‍♂️ If someone starts working on this issue to earn the rewards, they can comment /try to let everyone know!
🙌 And when they open the PR, they can comment /claim #354 either in the PR description or in a PR's comment.

🪙 Also, everyone can tip any user commenting /tip 20 @marcinkrasowski (replace 20 with the amount, and @marcinkrasowski with the user to tip).

📖 If you want to learn more, check out our documentation.

[marcinkrasowski]

/reward 20

How to earn this $20.00 reward?

💪 Comment /try below and start working on it!
🙌 Once your PR is open, comment /claim #354 either in the PR description or within the comments.

[Aqil-Ahmad]

/try

Check if you're the only one trying 👇

You're the first one to try to solve this issue, go for it! 😉

[iAn-P1nt0]

/try

Check if you're the only one trying 👇

There are already people trying to solve this issue. You're welcome to tackle it independently, but we encourage you to reach out to the contributors that are trying to solve the issue if you'd like to collaborate with them.

The other contributor is: @Aqil-Ahmad.

[opirebot]

🎉 The user @iAn-P1nt0 has claimed all rewards for this issue using Opire.
🔍 You can see the PR here
💸 @marcinkrasowski you can pay the related rewards here