feat: pretty filter labels #2911
Conversation
… components, initialize yarn workspace for Filters, initialize FiltersList and FilterMenu components, add licenses, stub out files needed for generating READMEs for FilterMenu and FiltersList
* feat(local only storybook): add ability to only display a story in the sidebar when running storybook locally by adding a 'local-dev' tag to the story meta * feat(local only storybook): use tag in mdx files as well * feat(local only storybook): add local story stubs for FiltersList, add documentation for local-dev tag in storybook/README.md * fix(tag): remove local-dev tag from dropdownmenu readme
…in storybook/package.json in order to merge local dev tagging to filters files branch
…or effective component API
…ader, update conditional onclicks to give an alert for POC purposes
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
ByronDWall
force-pushed
the
bw/filters-exploration
branch
from
2274a50
to
e36c19f
Compare
ByronDWall
requested review from
a team,
jaikamat,
ddouglasz,
tylermorrisford and
ByronDWall
and removed request for
a team
| import { Footer } from './footer'; | ||
| import { Header } from './header'; | ||
| import { TriggerButton } from './trigger-button'; | ||
| import * as Popover from '@radix-ui/react-popover'; |
There was a problem hiding this comment.
I'm really happy with how radix handles the popover compared to the DropdownMenu. I think we should use it.
I also think we should consider replacing the DropdownMenu internals with the radix popover instead of trying to implement complicated bugfixes and a11y updates to it ourselves.
| const { colorNeutral85, colorNeutral40, colorPrimary, fontSize20 } = | ||
| designTokens; | ||
|
|
||
| const useScrollObserver = (ref: RefObject<HTMLElement>, totalCount: number) => { |
There was a problem hiding this comment.
This is a really elegant solution to hiding Chips and displaying a count of how many Chips are hidden in the Badge.
| height: '2rem', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| background: 'linear-gradient(to right, transparent, white 25%)', |
There was a problem hiding this comment.
the gradient is a nice touch
| </ClearButtonContainer> | ||
|
|
||
| <CaretDownIcon size="small" color="neutral60" /> | ||
| <OverlayButton ref={ref} aria-label={label} {...rest} /> |
There was a problem hiding this comment.
This is a good solution to not requiring nested buttons
creating a draft to have a storybook which displays the current filter status