added category pills#26
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new CategoryPills UI element to the customer Discovery page to display a horizontally scrollable set of selectable category “pills”.
Changes:
- Introduced
CategoryPillscomponent with internal active-state handling. - Added pill styling (active gradient pill + token-based inactive pill).
- Rendered
CategoryPillsinDiscoveryPagebelow the search bar.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts | Adds inline style objects for the pills and scroll container. |
| apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx | Implements the category pill button group UI and active selection state. |
| apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx | Wires the new CategoryPills component into the page layout. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export const scrollContainer: CSSProperties = { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| gap: '0.5rem', | ||
| overflowX: 'auto', | ||
| padding: '0 1rem', | ||
| scrollbarWidth: 'none', | ||
| }; |
There was a problem hiding this comment.
The exported style object name scrollContainer is inconsistent with the surrounding DiscoveryPage component style files, which consistently suffix exported CSSProperties with Style (e.g., containerStyle, filterButtonStyle). Consider renaming to scrollContainerStyle for consistency (and updating usages).
| export const getInactivePill = (token: GlobalToken): CSSProperties => ({ | ||
| backgroundColor: token.colorBgContainer, | ||
| border: `1px solid ${token.colorBorder}`, | ||
| borderRadius: 20, | ||
| padding: '0.35rem 0.85rem', | ||
| cursor: 'pointer', | ||
| whiteSpace: 'nowrap', | ||
| flexShrink: 0, | ||
| }); |
There was a problem hiding this comment.
getInactivePill is a style factory but its name doesn't indicate it's returning a style object, and it’s inconsistent with activePillStyle / other get*Style helpers in this area. Consider renaming to something like getInactivePillStyle (or making it a constant like inactivePillStyle if it doesn’t need token).
| <DiscoveryHeader name={name} avatar={avatar} /> | ||
| <SearchBar /> | ||
| {/* CategoryPills — next */} | ||
| <CategoryPills /> |
There was a problem hiding this comment.
PR description still contains an incomplete issue reference (Fixes SOLY-). Please link the correct ticket/issue ID (or remove the placeholder) so the change is traceable.
Description
Related Issue(s)
Fixes SOLY-
Checklist
Screenshots (if appropriate)