Skip to content

Decouple Filter desktop and mobile variants #810

@qroll

Description

@qroll

Component
Filter

Describe the feature request
The Filter automatically switches between a sidebar variant (desktop) and modal variant (tablet/mobile) based on the viewport size. This was originally done under the assumption that the component would be positioned in the same place across different screen sizes. In reality, products have been rendering the variants in separate locations.

To support these use cases, the variants should be available as standalone components.

  • Extract Filter.Sidebar and Filter.Modal from the original implementation
  • Declare new FilterSidebarProps and FilterModalProps prop types
  • Refactor the original Filter to use these new components
  • Remove the _dangerouslyForceMobile flag
  • Update the Storybook documentation to include usages of these new components
  • Add unit tests to assert the standalone variants can render correctly

Acceptance criteria

  • Storybook example showcasing the usage of Filter.Sidebar and Filter.Modal

References
Code
Sidebar Figma
Modal Figma
Storybook

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions