DataView: forward align on Filters/DisplayControls, and let Search control its leading icon
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
Two DataView controls hard-code a positioning / rendering detail and expose no prop to change it, even though the underlying primitive already supports it.
DataView.FiltersandDataView.DisplayControls— popup alignment is fixed.DataView.Search— the leading magnifier icon can't be removed or replaced.
1. Forward align on Filters and DisplayControls
DataView.DisplayControlsexposestrigger+hideViewSwitcher/hideOrdering/hideGrouping/hideDisplayProperties, but noalign.DataView.Filtersexposestrigger+classNames, but noalign.
The underlying Menu.Content / Popover.Content already extend Base UI's Positioner.Props and accept align / side / sideOffset; these controls just don't forward them.
Request: expose align (and ideally side / sideOffset) on both DataView.Filters and DataView.DisplayControls, forwarding to the underlying menu / popover. Default to today's behavior. Base UI's Positioner already handles collision flip/shift, so this is prop-forwarding only.
2. Let Search control its leading icon
DataView.Search extends the base Search, whose props are Omit<InputProps, 'leadingIcon'>. The base Input accepts leadingIcon, but Search removes it and hard-codes a magnifier, with no supported way to hide or replace it.
Request: re-expose leadingIcon on Search (settable to a custom node or null), or add a showSearchIcon={false} / hideIcon flag. Default keeps the magnifier.
Willing to contribute
Happy to open a PR if the approach looks right.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Locate the DataView.Filters, DataView.DisplayControls, and DataView.Search implementations, then inspect the underlying Menu.Content, Popover.Content, and base Search/Input prop definitions. Forward the requested positioning and leading-icon props while preserving current defaults, and verify the component behavior with the existing test setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100