Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] icon must inherit fontSize from baseIconButton #12900

Open
vadimka123 opened this issue Apr 25, 2024 · 2 comments
Open

[data grid] icon must inherit fontSize from baseIconButton #12900

vadimka123 opened this issue Apr 25, 2024 · 2 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@vadimka123
Copy link

vadimka123 commented Apr 25, 2024

Summary

Currently I'm unable to override fontSize of icon in GridActionsCellItem IconButton
https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx#L50
Here hardcoded always small

baseIconButton size can be overwritten easy through props or slotProps, but not icon itself

So I'd like to inherit fontSize from button (if look suitable for most of cases)
Or any ability to customize fontSize instead of having hardcoded one

Examples

No response

Motivation

No response

Search keywords: data grid, icon, baseIconButton

@vadimka123 vadimka123 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 25, 2024
@michelengelen
Copy link
Member

hey @vadimka123
this is a great suggestion, so thanks for raising this.
I would advocate for just inheriting the fontSize from the IconButton.

So the diff for this would look something like this:

diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
index d11bd1518..8e70a68e5 100644
--- a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
+++ b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -47,7 +47,7 @@ const GridActionsCellItem = React.forwardRef<HTMLElement, GridActionsCellItemPro
           onClick={handleClick}
           {...rootProps.slotProps?.baseIconButton}
         >
-          {React.cloneElement(icon!, { fontSize: 'small' })}
+          {React.cloneElement(icon!, { fontSize: 'inherit' })}
         </rootProps.slots.baseIconButton>
       );
     }

you could then change the sizing by just adding in a size prop on the GridActionCellItem

<GridActionsCellItem
  icon={<EditIcon />}
  label="Edit"
  className="textPrimary"
  onClick={handleEditClick(id)}
  color="inherit"
  size="large"
/>

Since this a rather small change i would like to open this up as a good first issue.

objections @mui/xgrid ?

@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. enhancement This is not a bug, nor a new feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 25, 2024
@vadimka123
Copy link
Author

@michelengelen , yep, I already using size prop for GridActionsCellItem, but as result getting medium button with small icon

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

No branches or pull requests

2 participants