mi6 / mi6/ic-ui-kit

Internal issue 3248 - AG Grid filter display issue when applying ICDS theme

Open
#4,491 0 comments 0 reactions 0 assignees View on GitHub
data-table component good first issue
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

Raised on behalf of a customer (see comment on internal ticket for more details).

When the ICDS AG Grid theme is applied to an AG Grid data table (specifically AGGridReact) which has filters enabled, the magnifying glass icon displayed in the "Filter" field in the filter pop-up overlaps the placeholder.

This issue does not happen if the AG Grid Quartz theme (`ag-grid-community/styles/ag-theme-quartz.css`) is used.

The images below show the ICDS theme compared to the Quartz theme.

Image

Image

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in the AGGridReact filter pop-up with the ICDS theme, then compare its filter-field styling with ag-grid-community/styles/ag-theme-quartz.css. Trace the theme rules affecting the magnifying glass and placeholder, and verify that the icon no longer overlaps the placeholder while filters remain usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.