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

[DataGridPro] Fix column pinning layout #14966

Merged
merged 11 commits into from
Oct 23, 2024

Conversation

cherniavskii
Copy link
Member

Fixes #14965

@cherniavskii cherniavskii added component: data grid This is the name of the generic UI component, not the React module! regression A bug, but worse feature: Column pinning Related to the data grid Column pinning feature labels Oct 14, 2024
@mui-bot
Copy link

mui-bot commented Oct 14, 2024

Deploy preview: https://deploy-preview-14966--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 71cdfe6

@cherniavskii cherniavskii added the bug 🐛 Something doesn't work label Oct 22, 2024
@@ -86,10 +86,10 @@ describe('<DataGridPro /> - Detail panel', () => {
await microtasks();

const virtualScrollerContent = $('.MuiDataGrid-virtualScrollerContent')!;
expect(virtualScrollerContent).toHaveInlineStyle({
width: 'auto',
expect(virtualScrollerContent).toHaveComputedStyle({
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed height to flex-basis in https://github.com/mui/mui-x/pull/14966/files#diff-74adfff8c7dc341a80f5a489eb850b9d566b1be041dfdf0e47a9848609f5ac53R537, and I makes more sense to check the actual height rather than specific inline style.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment not specific to this in particular, but I feel like we often test the implementation too closely, e.g. we set a specific style and test for that style. Quite a few of our tests would be better as visual regression tests, they would be more resilient to implementation changes, and would catch actual regressions (like this one could have been caught if we had the visual regression test).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return (
<Element
{...props}
className={clsx(classes.root, gridClasses['container--bottom'])}
style={{ transform: `translateY(${offset}px)` }}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for that because filler now grows

@cherniavskii cherniavskii marked this pull request as ready for review October 22, 2024 23:56
@cherniavskii cherniavskii requested a review from a team October 22, 2024 23:56
@cherniavskii cherniavskii added the needs cherry-pick The PR should be cherry-picked to master after merge label Oct 23, 2024
@cherniavskii cherniavskii merged commit 66c7b5a into mui:master Oct 23, 2024
20 checks passed
@cherniavskii cherniavskii deleted the fix-column-pinning-filler branch October 23, 2024 16:27
@cherniavskii cherniavskii added the plan: Pro Impact at least one Pro user label Oct 23, 2024
cherniavskii added a commit to cherniavskii/mui-x that referenced this pull request Oct 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column pinning Related to the data grid Column pinning feature needs cherry-pick The PR should be cherry-picked to master after merge plan: Pro Impact at least one Pro user regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Column pinning layout regression
3 participants