Skip to content

Commit 8f82ded

Browse files
tammy-a11ytammy-a11y
committed
SDK-R Fixed grid styling issues and container border
1 parent 5bff85b commit 8f82ded

File tree

3 files changed

+156
-159
lines changed

3 files changed

+156
-159
lines changed

‎packages/react-sdk-components/src/components/infra/View/View.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ const NO_HEADER_TEMPLATES = [
3838
'WideNarrowDetails',
3939
'Confirmation',
4040
'DynamicTabs',
41-
'DetailsSubTabs'
41+
'DetailsSubTabs',
42+
'ListView'
4243
];
4344

4445
export default function View(props: PropsWithChildren<ViewProps>) {

‎packages/react-sdk-components/src/components/template/ListView/ListView.tsx‎

Lines changed: 152 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,9 @@ export default function ListView(props: ListViewProps) {
157157
width: '100%',
158158
marginTop: theme.spacing(2),
159159
marginBottom: theme.spacing(2),
160-
display: 'grid'
161-
},
162-
search: {
163-
padding: '5px 5px'
160+
display: 'grid',
161+
borderRadius: 16,
162+
padding: 20
164163
},
165164
table: {
166165
minWidth: 750
@@ -189,10 +188,6 @@ export default function ListView(props: ListViewProps) {
189188
position: 'absolute',
190189
top: 20,
191190
width: 1
192-
},
193-
title: {
194-
marginTop: theme.spacing(1),
195-
marginLeft: theme.spacing(1)
196191
}
197192
})
198193
);
@@ -1065,162 +1060,162 @@ export default function ListView(props: ListViewProps) {
10651060
<>
10661061
{arColumns && arColumns.length > 0 && (
10671062
<Paper className={classes.paper}>
1068-
<Typography className={classes.title} variant='h6' color='textPrimary' gutterBottom>
1069-
{_listTitle()}
1070-
</Typography>
1071-
{globalSearch && (
1072-
<Grid2 container spacing={1} alignItems='flex-end' className={classes.search}>
1073-
<Grid2>
1074-
<SearchIcon />
1075-
</Grid2>
1076-
<Grid2>
1077-
<TextField
1078-
label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
1079-
fullWidth
1080-
variant='outlined'
1081-
placeholder=''
1082-
size='small'
1083-
id='search'
1084-
onChange={_onSearch}
1085-
/>
1063+
<Grid2 container justifyContent='space-between'>
1064+
<Typography variant='h6' color='textPrimary' gutterBottom>
1065+
{_listTitle()}
1066+
</Typography>
1067+
{globalSearch && (
1068+
<Grid2 container spacing={1} alignItems='flex-end'>
1069+
<Grid2>
1070+
<SearchIcon />
1071+
</Grid2>
1072+
<Grid2>
1073+
<TextField
1074+
label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
1075+
fullWidth
1076+
variant='outlined'
1077+
placeholder=''
1078+
size='small'
1079+
id='search'
1080+
onChange={_onSearch}
1081+
/>
1082+
</Grid2>
10861083
</Grid2>
1087-
</Grid2>
1088-
)}
1089-
<>
1090-
{!bInForm ? (
1091-
<TableContainer id='list-view' className={classes.tableInForm}>
1092-
<Table stickyHeader aria-label='sticky table'>
1093-
<TableHead>
1094-
<TableRow>
1095-
{arColumns.map(column => {
1084+
)}
1085+
</Grid2>
1086+
{!bInForm ? (
1087+
<TableContainer id='list-view' className={classes.tableInForm}>
1088+
<Table stickyHeader aria-label='sticky table'>
1089+
<TableHead>
1090+
<TableRow>
1091+
{arColumns.map(column => {
1092+
return (
1093+
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1094+
<TableSortLabel
1095+
active={orderBy === column.id}
1096+
direction={orderBy === column.id ? order : 'asc'}
1097+
onClick={createSortHandler(column.id)}
1098+
>
1099+
{column.label}
1100+
{_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
1101+
{orderBy === column.id ? (
1102+
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1103+
) : null}
1104+
</TableSortLabel>
1105+
<MoreIcon
1106+
className={classes.moreIcon}
1107+
onClick={event => {
1108+
_menuClick(event, column.id, column.type, column.label);
1109+
}}
1110+
/>
1111+
</TableCell>
1112+
);
1113+
})}
1114+
</TableRow>
1115+
</TableHead>
1116+
<TableBody>
1117+
{arRows &&
1118+
stableSort(arRows, getComparator(order, orderBy))
1119+
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1120+
.map(row => {
10961121
return (
1097-
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1098-
<TableSortLabel
1099-
active={orderBy === column.id}
1100-
direction={orderBy === column.id ? order : 'asc'}
1101-
onClick={createSortHandler(column.id)}
1102-
>
1103-
{column.label}
1104-
{_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
1105-
{orderBy === column.id ? (
1106-
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1107-
) : null}
1108-
</TableSortLabel>
1109-
<MoreIcon
1110-
className={classes.moreIcon}
1111-
onClick={event => {
1112-
_menuClick(event, column.id, column.type, column.label);
1113-
}}
1114-
/>
1115-
</TableCell>
1122+
<TableRow key={row.pxRefObjectInsName || row.pyID}>
1123+
{arColumns.map(column => {
1124+
const value = row[column.id];
1125+
return (
1126+
<TableCell key={column.id} align={column.align} className={classes.cell}>
1127+
{_showButton(column.id, row) || column.displayAsLink ? (
1128+
<Link
1129+
component='button'
1130+
onClick={() => {
1131+
_listViewClick(row, column);
1132+
}}
1133+
underline='hover'
1134+
>
1135+
{column.format && typeof value === 'number' ? column.format(value) : value}
1136+
</Link>
1137+
) : (
1138+
<>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1139+
)}
1140+
</TableCell>
1141+
);
1142+
})}
1143+
</TableRow>
11161144
);
11171145
})}
1118-
</TableRow>
1119-
</TableHead>
1120-
<TableBody>
1121-
{arRows &&
1122-
stableSort(arRows, getComparator(order, orderBy))
1123-
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1124-
.map(row => {
1125-
return (
1126-
<TableRow key={row.pxRefObjectInsName || row.pyID}>
1127-
{arColumns.map(column => {
1128-
const value = row[column.id];
1129-
return (
1130-
<TableCell key={column.id} align={column.align} className={classes.cell}>
1131-
{_showButton(column.id, row) || column.displayAsLink ? (
1132-
<Link
1133-
component='button'
1134-
onClick={() => {
1135-
_listViewClick(row, column);
1136-
}}
1137-
underline='hover'
1138-
>
1139-
{column.format && typeof value === 'number' ? column.format(value) : value}
1140-
</Link>
1141-
) : (
1142-
<>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1143-
)}
1144-
</TableCell>
1145-
);
1146-
})}
1147-
</TableRow>
1148-
);
1149-
})}
1150-
</TableBody>
1151-
</Table>
1152-
</TableContainer>
1153-
) : (
1154-
<TableContainer id='list-view'>
1155-
<Table>
1156-
<TableHead>
1157-
<TableRow>
1158-
{(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
1159-
{arColumns.map(column => {
1146+
</TableBody>
1147+
</Table>
1148+
</TableContainer>
1149+
) : (
1150+
<TableContainer id='list-view'>
1151+
<Table>
1152+
<TableHead>
1153+
<TableRow>
1154+
{(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
1155+
{arColumns.map(column => {
1156+
return (
1157+
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1158+
<TableSortLabel
1159+
active={orderBy === column.id}
1160+
direction={orderBy === column.id ? order : 'asc'}
1161+
onClick={createSortHandler(column.id)}
1162+
>
1163+
{column.label}
1164+
{orderBy === column.id ? (
1165+
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1166+
) : null}
1167+
</TableSortLabel>
1168+
</TableCell>
1169+
);
1170+
})}
1171+
</TableRow>
1172+
</TableHead>
1173+
<TableBody>
1174+
{arRows &&
1175+
arRows.length > 0 &&
1176+
stableSort(arRows, getComparator(order, orderBy))
1177+
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1178+
.map(row => {
11601179
return (
1161-
<TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
1162-
<TableSortLabel
1163-
active={orderBy === column.id}
1164-
direction={orderBy === column.id ? order : 'asc'}
1165-
onClick={createSortHandler(column.id)}
1166-
>
1167-
{column.label}
1168-
{orderBy === column.id ? (
1169-
<span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
1170-
) : null}
1171-
</TableSortLabel>
1172-
</TableCell>
1180+
<TableRow key={row[rowID]}>
1181+
{selectionMode === SELECTION_MODE.SINGLE && (
1182+
<TableCell>
1183+
<Radio
1184+
onChange={handleChange}
1185+
value={row[rowID]}
1186+
name='radio-buttons'
1187+
inputProps={{ 'aria-label': 'A' }}
1188+
checked={selectedValue === row[rowID]}
1189+
/>
1190+
</TableCell>
1191+
)}
1192+
{selectionMode === SELECTION_MODE.MULTI && (
1193+
<TableCell>
1194+
<Checkbox
1195+
onChange={onCheckboxClick}
1196+
checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
1197+
value={row[rowID]}
1198+
/>
1199+
</TableCell>
1200+
)}
1201+
{arColumns.map(column => {
1202+
const value = row[column.id];
1203+
return (
1204+
<TableCell className={classes.cell} key={column.id} align={column.align}>
1205+
{processColumnValue(column, value)}
1206+
</TableCell>
1207+
);
1208+
})}
1209+
</TableRow>
11731210
);
11741211
})}
1175-
</TableRow>
1176-
</TableHead>
1177-
<TableBody>
1178-
{arRows &&
1179-
arRows.length > 0 &&
1180-
stableSort(arRows, getComparator(order, orderBy))
1181-
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1182-
.map(row => {
1183-
return (
1184-
<TableRow key={row[rowID]}>
1185-
{selectionMode === SELECTION_MODE.SINGLE && (
1186-
<TableCell>
1187-
<Radio
1188-
onChange={handleChange}
1189-
value={row[rowID]}
1190-
name='radio-buttons'
1191-
inputProps={{ 'aria-label': 'A' }}
1192-
checked={selectedValue === row[rowID]}
1193-
/>
1194-
</TableCell>
1195-
)}
1196-
{selectionMode === SELECTION_MODE.MULTI && (
1197-
<TableCell>
1198-
<Checkbox
1199-
onChange={onCheckboxClick}
1200-
checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
1201-
value={row[rowID]}
1202-
/>
1203-
</TableCell>
1204-
)}
1205-
{arColumns.map(column => {
1206-
const value = row[column.id];
1207-
return (
1208-
<TableCell className={classes.cell} key={column.id} align={column.align}>
1209-
{processColumnValue(column, value)}
1210-
</TableCell>
1211-
);
1212-
})}
1213-
</TableRow>
1214-
);
1215-
})}
1216-
</TableBody>
1217-
</Table>
1218-
{(!arRows || arRows.length === 0) && (
1219-
<div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
1220-
)}
1221-
</TableContainer>
1222-
)}
1223-
</>
1212+
</TableBody>
1213+
</Table>
1214+
{(!arRows || arRows.length === 0) && (
1215+
<div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
1216+
)}
1217+
</TableContainer>
1218+
)}
12241219
{arRows && arRows.length > 0 && (
12251220
<TablePagination
12261221
id='pagination'

‎packages/react-sdk-components/src/components/widget/ToDo/ToDo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,8 @@ const useStyles = makeStyles(theme => ({
8686
marginBottom: theme.spacing(1),
8787
paddingBottom: theme.spacing(1),
8888
borderLeft: '6px solid',
89-
borderLeftColor: theme.palette.primary.light
89+
borderLeftColor: theme.palette.primary.light,
90+
borderRadius: 16
9091
},
9192
avatar: {
9293
backgroundColor: theme.palette.primary.light,

0 commit comments

Comments
 (0)