Improve responsive styling for integration category chips#7727
Improve responsive styling for integration category chips#7727shteypandey28-hue wants to merge 1 commit into
Conversation
shteypandey28-hue
force-pushed
the
fix/integration-category-chip-styling
branch
from
780e1ac to
8a3bcf7
Compare
- Invert chip styling: active chips now use light bg with border, inactive chips use dark filled bg (fixes layer5io#7593) - Replace react-slick slider with responsive flexbox/scroll layout - Add proper button elements with data-category attrs for robust filtering - Add ARIA attributes (role, aria-pressed, aria-label) for accessibility - Add focus-visible ring, reduced-motion support - Add mobile horizontal scroll with snap and overflow fade indicator - Add smooth hover/active transitions with Keppel theme colors - Touch-friendly sizing on mobile with no clipping or overflow issues - Full dark mode support using existing theme tokens Signed-off-by: shteypandey28-hue <shteypandey28@gmail.com>
shteypandey28-hue
force-pushed
the
fix/integration-category-chip-styling
branch
from
8a3bcf7 to
b62d11c
Compare
|
🚀 Preview deployment: https://layer5.io/pr-preview/pr-7727/
|
|
@leecalcote @MUzairS15 @CodexRaunak @YASHMAHAKAL This PR is ready for review. Fixes #7593 — Inverts category chip styling (active → light, inactive → dark), replaces the react-slick slider with a responsive flexbox layout, and adds accessibility improvements (keyboard navigation, ARIA attributes, focus-visible ring). All CI checks are passing ✅ |
|
Here's the full visual summary in the artifact above. The key screenshots: Light Mode — The "ALL" chip is shown with the new selected styling: light mint-green background + Keppel green border (inverted from the old dark bg): 
Dark Mode — Same chip with dark theme support: teal-tinted background + Keppel green border: 
The lite build excludes integrations data so only "ALL (0)" is visible. On the full production build (or the PR preview deployment), all 10+ category chips will render with the same pill-shaped, properly wrapped layout. |
1 participant
Summary
This PR refactors the category chip UI for better responsiveness, accessibility, and mobile usability.
Changes
react-slickwith responsive flexbox + horizontal scrolldata-categoryDescription
Fixes #
Notes for Reviewers
react-slickdependency