Skip to content

Commit 8d62aa8

Browse files
author
Sharma
committed
Got rid of the deprecated Grid and replaced it with Grid2
1 parent 881197c commit 8d62aa8

File tree

22 files changed

+171
-177
lines changed

22 files changed

+171
-177
lines changed

‎packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Grid from '@mui/material/Grid';
1+
import { Grid2 } from '@mui/material';
22
import './Banner.css';
33

44
// AlertBanner is one of the few components that does NOT have getPConnect.
@@ -37,14 +37,14 @@ export default function Banner(props: BannerProps) {
3737
</div>
3838
</div>
3939
</div>
40-
<Grid container item xs={12} className='banner-layout' spacing={1}>
41-
<Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
40+
<Grid2 container size={12} className='banner-layout' spacing={1}>
41+
<Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
4242
{a}
43-
</Grid>
44-
<Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
43+
</Grid2>
44+
<Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>
4545
{b}
46-
</Grid>
47-
</Grid>
46+
</Grid2>
47+
</Grid2>
4848
</div>
4949
);
5050
}

‎packages/react-sdk-components/src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect } from 'react';
22
import isDeepEqual from 'fast-deep-equal/react';
3-
import Grid from '@mui/material/Grid';
3+
import { Grid2 } from '@mui/material';
44
import TextField from '@mui/material/TextField';
55

66
import { getDateFormatInfo } from '../../helpers/date-format-utils';
@@ -227,9 +227,9 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
227227
// display the field when either visibility property doesn't exist or is true(if exists)
228228
if (field.config.visibility === undefined || field.config.visibility === true) {
229229
return (
230-
<Grid item xs={6} key={field.config.label}>
230+
<Grid2 size={{ xs: 6 }} key={field.config.label}>
231231
{getFieldValue(field)}
232-
</Grid>
232+
</Grid2>
233233
);
234234
}
235235

@@ -263,8 +263,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
263263
}
264264

265265
return (
266-
<Grid container className='psdk-case-summary-fields'>
266+
<Grid2 container className='psdk-case-summary-fields'>
267267
{theFieldsAsGridItems}
268-
</Grid>
268+
</Grid2>
269269
);
270270
}

‎packages/react-sdk-components/src/components/designSystemExtension/DetailsFields/DetailsFields.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable react/no-array-index-key */
22
import React, { createElement, isValidElement } from 'react';
3-
import Grid from '@mui/material/Grid';
3+
import Grid2 from '@mui/material/Grid2';
44
import Typography from '@mui/material/Typography';
55
import makeStyles from '@mui/styles/makeStyles';
66

@@ -62,11 +62,11 @@ export default function DetailsFields(props: DetailsFieldsProps) {
6262
const dispValue = field.label;
6363

6464
return (
65-
<Grid item xs={6} key={keyVal}>
65+
<Grid2 size={{ xs: 6 }} key={keyVal}>
6666
<Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
6767
{dispValue}
6868
</Typography>
69-
</Grid>
69+
</Grid2>
7070
);
7171
}
7272

@@ -97,21 +97,21 @@ export default function DetailsFields(props: DetailsFieldsProps) {
9797
const formattedValue = formatItemValue(field);
9898

9999
return (
100-
<Grid item xs={6} key={keyVal}>
100+
<Grid2 size={{ xs: 6 }} key={keyVal}>
101101
<Typography variant='body2' component='span' className={classes.fieldValue}>
102102
{formattedValue}
103103
</Typography>
104-
</Grid>
104+
</Grid2>
105105
);
106106
}
107107

108108
function getGridItem(field: any, keyVal: string) {
109109
return (
110-
<Grid item xs={12} key={keyVal}>
110+
<Grid2 size={{ xs: 12 }} key={keyVal}>
111111
<Typography variant='body2' component='span' className={classes.fieldValue}>
112112
{field?.value}
113113
</Typography>
114-
</Grid>
114+
</Grid2>
115115
);
116116
}
117117

@@ -122,16 +122,16 @@ export default function DetailsFields(props: DetailsFieldsProps) {
122122
}
123123
if (isValidElement(field?.value)) {
124124
return (
125-
<Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
125+
<Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
126126
{getGridItem(field, `${index}-item`)}
127-
</Grid>
127+
</Grid2>
128128
);
129129
}
130130
return (
131-
<Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
131+
<Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
132132
{getGridItemLabel(field, `${index}-label`)}
133133
{getGridItemValue(field, `${index}-value`)}
134-
</Grid>
134+
</Grid2>
135135
);
136136
});
137137
return gridItems;

‎packages/react-sdk-components/src/components/designSystemExtension/FieldGroup/FieldGroup.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type PropsWithChildren, useState } from 'react';
2-
import Grid from '@mui/material/Grid';
2+
import Grid2 from '@mui/material/Grid2';
33
import makeStyles from '@mui/styles/makeStyles';
44
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
55
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -45,18 +45,18 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
4545
const [collapsed, setCollapsed] = useState(false);
4646

4747
const descAndChildren = (
48-
<Grid container>
48+
<Grid2 container>
4949
<div className={classes.fullWidth}>{children}</div>
50-
</Grid>
50+
</Grid2>
5151
);
5252

5353
const headerClickHandler = () => {
5454
setCollapsed(current => !current);
5555
};
5656

5757
return (
58-
<Grid container spacing={4} justifyContent='space-between'>
59-
<Grid item style={{ width: '100%' }}>
58+
<Grid2 container spacing={4} justifyContent='space-between'>
59+
<Grid2 style={{ width: '100%' }}>
6060
{name && (
6161
<div className={classes.fieldMargin}>
6262
{collapsible ? (
@@ -74,7 +74,7 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
7474
<div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
7575
)}
7676
{!collapsed && descAndChildren}
77-
</Grid>
78-
</Grid>
77+
</Grid2>
78+
</Grid2>
7979
);
8080
}

‎packages/react-sdk-components/src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Grid from '@mui/material/Grid';
1+
import Grid2 from '@mui/material/Grid2';
22
import Divider from '@mui/material/Divider';
33
import Link from '@mui/material/Link';
44

@@ -20,11 +20,11 @@ export default function FieldGroupList(props: FieldGroupListProps) {
2020
}
2121

2222
return (
23-
<Grid container spacing={4} justifyContent='space-between'>
24-
<Grid item style={{ width: '100%' }}>
25-
<Grid container spacing={1}>
23+
<Grid2 container spacing={4} justifyContent='space-between'>
24+
<Grid2 style={{ width: '100%' }}>
25+
<Grid2 container spacing={1}>
2626
{props.items.map(item => (
27-
<Grid item style={{ width: '100%' }}>
27+
<Grid2 style={{ width: '100%' }}>
2828
<b>{item.name}</b>
2929
{props.onDelete && (
3030
<button
@@ -44,15 +44,15 @@ export default function FieldGroupList(props: FieldGroupListProps) {
4444
<br />
4545
{props.onAdd && <Divider />}
4646
<br />
47-
</Grid>
47+
</Grid2>
4848
))}
4949
{props.onAdd && (
5050
<Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
5151
+Add
5252
</Link>
5353
)}
54-
</Grid>
55-
</Grid>
56-
</Grid>
54+
</Grid2>
55+
</Grid2>
56+
</Grid2>
5757
);
5858
}

‎packages/react-sdk-components/src/components/designSystemExtension/FieldValueList/FieldValueList.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Grid from '@mui/material/Grid';
1+
import Grid2 from '@mui/material/Grid2';
22
import Typography from '@mui/material/Typography';
33
import makeStyles from '@mui/styles/makeStyles';
44

@@ -51,19 +51,19 @@ export default function FieldValueList(props: FieldValueListProps) {
5151

5252
function getGridItemLabel() {
5353
return (
54-
<Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
54+
<Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
5555
<Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
5656
{name}
5757
</Typography>
58-
</Grid>
58+
</Grid2>
5959
);
6060
}
6161

6262
function getGridItemValue() {
6363
const formattedValue = formatItemValue(value);
6464

6565
return (
66-
<Grid item xs={variant === 'stacked' || !name ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
66+
<Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
6767
{isHtml ? (
6868
// eslint-disable-next-line react/no-danger
6969
<div dangerouslySetInnerHTML={{ __html: formattedValue }} />
@@ -72,14 +72,14 @@ export default function FieldValueList(props: FieldValueListProps) {
7272
{formattedValue}
7373
</Typography>
7474
)}
75-
</Grid>
75+
</Grid2>
7676
);
7777
}
7878

7979
return (
80-
<Grid container spacing={4} justifyContent='space-between'>
80+
<Grid2 container spacing={4} justifyContent='space-between'>
8181
{name ? getGridItemLabel() : null}
8282
{getGridItemValue()}
83-
</Grid>
83+
</Grid2>
8484
);
8585
}

‎packages/react-sdk-components/src/components/designSystemExtension/Operator/Operator.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import TextField from '@mui/material/TextField';
33
import Popover from '@mui/material/Popover';
4-
import Grid from '@mui/material/Grid';
4+
import Grid2 from '@mui/material/Grid2';
55
import Typography from '@mui/material/Typography';
66
import makeStyles from '@mui/styles/makeStyles';
77

@@ -162,25 +162,25 @@ export default function Operator(props: OperatorProps) {
162162

163163
// There are fields, so build the grid.
164164
return (
165-
<Grid container className={classes.popover} spacing={1}>
166-
<Grid item xs={12}>
165+
<Grid2 container className={classes.popover} spacing={1}>
166+
<Grid2 size={{ xs: 12 }}>
167167
<Typography variant='h6'>{caseOpName}</Typography>
168-
</Grid>
168+
</Grid2>
169169
{popoverFields.map(field => {
170170
return (
171171
<React.Fragment key={field.id}>
172-
<Grid container item xs={12} spacing={1}>
173-
<Grid item xs={6}>
172+
<Grid2 container size={{ xs: 12 }} spacing={1}>
173+
<Grid2 size={{ xs: 12 }}>
174174
<Typography variant='caption'>{field.name}</Typography>
175-
</Grid>
176-
<Grid item xs={6}>
175+
</Grid2>
176+
<Grid2 size={{ xs: 12 }}>
177177
<Typography variant='subtitle2'>{field.value}</Typography>
178-
</Grid>
179-
</Grid>
178+
</Grid2>
179+
</Grid2>
180180
</React.Fragment>
181181
);
182182
})}
183-
</Grid>
183+
</Grid2>
184184
);
185185
}
186186

‎packages/react-sdk-components/src/components/field/CancelAlert/CancelAlert.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Button, Grid, IconButton, Snackbar } from '@mui/material';
2+
import { Button, Grid2, IconButton, Snackbar } from '@mui/material';
33
import CloseIcon from '@mui/icons-material/Close';
44

55
import type { PConnFieldProps } from '../../../types/PConnProps';
@@ -125,10 +125,10 @@ export default function CancelAlert(props: CancelAlertProps) {
125125
<p>{localizedVal(content, localeCategory)}</p>
126126
</div>
127127
<div className='action-controls'>
128-
<Grid container spacing={4} justifyContent='space-between'>
129-
<Grid item>{leftButton}</Grid>
130-
<Grid item>{rightButton}</Grid>
131-
</Grid>
128+
<Grid2 container spacing={4} justifyContent='space-between'>
129+
<Grid2>{leftButton}</Grid2>
130+
<Grid2>{rightButton}</Grid2>
131+
</Grid2>
132132
</div>
133133
</div>
134134
</div>

‎packages/react-sdk-components/src/components/field/Group/Group.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type ReactElement, useMemo } from 'react';
2-
import { Grid } from '@mui/material';
2+
import { Grid2 } from '@mui/material';
33
import FieldGroup from '../../designSystemExtension/FieldGroup';
44
import type { PConnFieldProps } from '../../../types/PConnProps';
55

@@ -19,13 +19,13 @@ export default function Group(props: GroupProps) {
1919

2020
const content = useMemo(() => {
2121
return (
22-
<Grid container spacing={2}>
22+
<Grid2 container spacing={2}>
2323
{children?.map(child => (
24-
<Grid item xs={12} key={child.key}>
24+
<Grid2 size={{ xs: 12 }} key={child.key}>
2525
{child}
26-
</Grid>
26+
</Grid2>
2727
))}
28-
</Grid>
28+
</Grid2>
2929
);
3030
}, [children, type, isReadOnly]);
3131

0 commit comments

Comments
 (0)