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.

Sign up for GitHub

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

[DataGrid] Column header design updates #14293

Merged
merged 18 commits into from
Sep 3, 2024
Merged

[DataGrid] Column header design updates #14293

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
77250ac
[DataGrid] Column header design updates
KenanYusuf Aug 22, 2024
6867cc1
fix shrinking separator
KenanYusuf Aug 22, 2024
ec97638
adjust column header button positions
KenanYusuf Aug 22, 2024
59e4b1f
update column separator style and behavior
KenanYusuf Aug 23, 2024
c30292b
restore column header moving style
KenanYusuf Aug 23, 2024
dc03720
restore showColumnVerticalBorder style
KenanYusuf Aug 23, 2024
89154b3
undo last change
KenanYusuf Aug 23, 2024
bfcb7f6
improve touch styles
KenanYusuf Aug 23, 2024
0ef49b3
reduce repetition in styles
KenanYusuf Aug 27, 2024
81a44dd
move static styles
KenanYusuf Aug 27, 2024
14345bb
hide overflow when there is horizontal scrolling
KenanYusuf Aug 27, 2024
129f30f
add transition to icon separator
KenanYusuf Aug 27, 2024
035e9cf
Merge branch 'master' into column-header-design-updates
KenanYusuf Aug 27, 2024
b194f5d
update tests
KenanYusuf Aug 27, 2024
4303b0e
add ignore to new class
KenanYusuf Aug 27, 2024
d18c885
hide separator for pinned right columns
KenanYusuf Aug 28, 2024
7a37ce8
fix showColumnVerticalBorder prop
KenanYusuf Aug 28, 2024
8051e7c
improve prop descriptions
KenanYusuf Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/pages/x/api/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1851,6 +1851,12 @@
"description": "Styles applied to the virtualization container.",
"isGlobal": false
},
{
"key": "virtualScroller--hasScrollX",
"className": "MuiDataGridPremium-virtualScroller--hasScrollX",
"description": "Styles applied to the virtualization container when it is scrollable in the horizontal direction.",
"isGlobal": false
},
{
"key": "virtualScrollerContent",
"className": "MuiDataGridPremium-virtualScrollerContent",
Expand Down
6 changes: 6 additions & 0 deletions docs/pages/x/api/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1765,6 +1765,12 @@
"description": "Styles applied to the virtualization container.",
"isGlobal": false
},
{
"key": "virtualScroller--hasScrollX",
"className": "MuiDataGridPro-virtualScroller--hasScrollX",
"description": "Styles applied to the virtualization container when it is scrollable in the horizontal direction.",
"isGlobal": false
},
{
"key": "virtualScrollerContent",
"className": "MuiDataGridPro-virtualScrollerContent",
Expand Down
6 changes: 6 additions & 0 deletions docs/pages/x/api/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1651,6 +1651,12 @@
"description": "Styles applied to the virtualization container.",
"isGlobal": false
},
{
"key": "virtualScroller--hasScrollX",
"className": "MuiDataGrid-virtualScroller--hasScrollX",
"description": "Styles applied to the virtualization container when it is scrollable in the horizontal direction.",
"isGlobal": false
},
{
"key": "virtualScrollerContent",
"className": "MuiDataGrid-virtualScrollerContent",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1181,6 +1181,11 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the virtualization container"
},
"virtualScroller--hasScrollX": {
"description": "Styles applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the virtualization container",
"conditions": "it is scrollable in the horizontal direction"
},
"virtualScrollerContent": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the virtualization content"
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1119,6 +1119,11 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the virtualization container"
},
"virtualScroller--hasScrollX": {
"description": "Styles applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the virtualization container",
"conditions": "it is scrollable in the horizontal direction"
},
"virtualScrollerContent": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the virtualization content"
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1008,6 +1008,11 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the virtualization container"
},
"virtualScroller--hasScrollX": {
"description": "Styles applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the virtualization container",
"conditions": "it is scrollable in the horizontal direction"
},
"virtualScrollerContent": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the virtualization content"
Expand Down
3 changes: 3 additions & 0 deletions packages/x-data-grid/src/components/containers/GridRootStyles.ts
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

Side note: Sometimes Argos diff surprises me – it doesn't pick up the separator 😅

Screen.Recording.2024-08-23.at.23.36.55.mov

Copy link
Member

Choose a reason for hiding this comment

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

Also, this PR warrants a minor release.

Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,9 @@ export const GridRootStyles = styled('div', {
display: 'flex',
alignItems: 'center',
},
[`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
overflow: 'hidden',
},
[`& .${c['columnHeader--sorted']} .${c.iconButtonContainer}, & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]:
{
visibility: 'visible',
Expand Down
3 changes: 1 addition & 2 deletions packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,13 @@ const useUtilityClasses = (
loadingOverlayVariant: GridLoadingOverlayVariant | null,
) => {
const { classes } = ownerState;

const slots = {
root: [
'main',
dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight',
loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay',
],
scroller: ['virtualScroller'],
scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX'],
};

return composeClasses(slots, getDataGridUtilityClass, classes);
Expand Down
5 changes: 5 additions & 0 deletions packages/x-data-grid/src/constants/gridClasses.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,10 @@ export interface GridClasses {
* Styles applied to the virtualization container.
*/
virtualScroller: string;
/**
* Styles applied to the virtualization container when it is scrollable in the horizontal direction.
*/
'virtualScroller--hasScrollX': string;
KenanYusuf marked this conversation as resolved.
Show resolved Hide resolved
/**
* Styles applied to the virtualization content.
*/
Expand Down Expand Up @@ -770,6 +774,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
'toolbarContainer',
'toolbarFilterList',
'virtualScroller',
'virtualScroller--hasScrollX',
'virtualScrollerContent',
'virtualScrollerContent--overflowed',
'virtualScrollerRenderZone',
Expand Down