wp-calypso
wp-calypso copied to clipboard
A4A: Marketplace|Products - Make product slider sticky on scroll
Related to https://github.com/Automattic/automattic-for-agencies-dev/issues/451
Proposed Changes
-
This PR moves the bundle size selection slider to the page header, as requested in https://github.com/Automattic/automattic-for-agencies-dev/issues/451. The header's position remains unchanged, as it's already sticky, the slider also respects this behavior.
-
When the screen size is not big enough to accommodate the slider within the header, it is moved down and remains sticky.
Testing Instructions
- Navigate to the products section of the Marketplace (
http://agencies.localhost:3000/marketplace/products
) - Verify that the slider is positioned according to https://github.com/Automattic/automattic-for-agencies-dev/issues/451
- Verify that the slider is sticky
- Shrink down the page
- Verify that the slider always respects borders and does not overflow
- Verify that both sliders are in sync and always show the same bundle size
Pre-merge Checklist
- [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
- [ ] Have you written new tests for your changes?
- [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- [ ] Have you checked for TypeScript, React or other console errors?
- [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
- [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?