search

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.81k stars 1.17k forks source link

[Filters] need a way to configure sticky header. #11666

Closed cbmaiolo closed 1 month ago

cbmaiolo commented 8 months ago

Summary

Filters use the same styling as IndexFilters, including the sticky header styles applied on mobile. However, unlike IndexFilters, there is no disableStickyMode or isFlushWhenSticky props.

As well, in both components you cannot modify the z-index, so if you have other items on the page (including basic Polaris components with drop shadows, like cards) the sticky header isn't rendered high enough on the stack.

Relevant issue: https://github.com/Shopify/flow-app/issues/3371

Expected behavior

You can turn off the sticky header, make it flush to the top, and ensure the z-index is high enough. Other objects should not be visible through the header.

Actual behavior

Polaris card drop shadows render above the sticky header, the header cannot be turned off or snapped to the top.

Screenshot 2024-02-28 at 8 30 11 AM

Steps to reproduce

No response

Are you using React components?

Yes

Polaris version number

12.10.0

Browser

Chrome

Device

Mac

github-actions[bot] commented 2 months ago

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.