mi6 / mi6/ic-ui-kit

Buttons not responsive in AG Grid

Open
#2,235 1 comment 0 reactions 0 assignees View on GitHub
component: ic-button
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary of the bug
When buttons are used in an AG Grid and the column width is made smaller than that of the buttons, they just get cropped and do not resize.

## 🪜 How to reproduce
1. Create an AG Grid (see [AG Grid Getting Started docs](https://www.ag-grid.com/react-data-grid/getting-started/)). (There should be a story added once #2130 is complete which you can use.)
2. Add some buttons into one of the columns.
3. Make the column width smaller than the width of the buttons (drag the column divider in the UI).
4. See that the buttons don't resize at all and are just cropped.

## 📸 Screenshots or code
https://github.com/user-attachments/assets/a16095db-7b4c-455b-8642-5a5af2022952

## 🧐 Expected behaviour
The buttons should resize to match the size of the column. Considering what has been implemented as part of #2130 (see [chip AG Grid story](https://mi6.github.io/ic-ui-kit/branches/v3.0.0/develop/react/?path=/story/react-components-chip--in-an-ag-grid)), it would probably be best for the label to be truncated with an ellipsis (but only when in an AG Grid, e.g. using the new `isElInAGGrid` helper function).

Using an ellipsis matches how other component in an AG Grid behave (e.g. try expanding the [AG Grid cell components example](https://www.ag-grid.com/react-data-grid/component-cell-renderer/)). If you would like to understand more about the solution used for chips and typography, please see the [comment on #2130](https://github.com/mi6/ic-ui-kit/issues/2130#issuecomment-2271880908).

## 📝 Acceptance Criteria
*Given* that I am using an AG Grid and add buttons to the columns
*When* I resize those columns to have a smaller width than the buttons
*Then* the buttons resize to match the width
*And* the text should be truncated with an ellipsis.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the AG Grid Getting Started setup and compare the chip AG Grid story from #2130, including the isElInAGGrid helper and the linked comment. The work is done when buttons fit the resized column and their labels truncate with an ellipsis, matching the acceptance criteria.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.