Buttons not responsive in AG Grid
- 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
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