raystack / raystack/apsara

DataView: forward align on Filters/DisplayControls, and let Search control its leading icon

Open
#848 0 comments 0 reactions 0 assignees View on GitHub

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.

  1. DataView.Filters and DataView.DisplayControls — popup alignment is fixed.
  2. DataView.Search — the leading magnifier icon can't be removed or replaced.

1. Forward align on Filters and DisplayControls

  • DataView.DisplayControls exposes trigger + hideViewSwitcher/hideOrdering/hideGrouping/hideDisplayProperties, but no align.
  • DataView.Filters exposes trigger + classNames, but no align.

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.