Skip to content

Commit a52064b

Browse files
author
Amrit Borah
committed
fix: uat
1 parent e3119eb commit a52064b

3 files changed

Lines changed: 57 additions & 24 deletions

File tree

‎src/Shared/Components/Table/TableContent.tsx‎

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ const TableContent = <
290290

291291
setActiveRowIndex(visibleRowIndex)
292292

293-
onRowClick?.(row)
293+
onRowClick?.(row, isExpandedRow)
294294
}
295295

296296
const handleToggleBulkSelectionForRow = () => {
@@ -312,6 +312,8 @@ const TableContent = <
312312
(isAnyRowExpandable && !isExpandedRow && !!(row as RowType<RowData>).expandableRows) ||
313313
!!bulkSelectionReturnValue
314314

315+
const expandBtnOrRowStartIconGutterStickyConfig = getStickyColumnConfig(gridTemplateColumns, 0)
316+
315317
return (
316318
<div
317319
key={row.id}
@@ -336,13 +338,19 @@ const TableContent = <
336338
tabIndex={-1}
337339
>
338340
{rowStartIconConfig && !isExpandedRow && (
339-
<div className="flex row-start-icon">
341+
<div
342+
className={`flex row-start-icon ${expandBtnOrRowStartIconGutterStickyConfig.className}`}
343+
style={{ left: expandBtnOrRowStartIconGutterStickyConfig.left }}
344+
>
340345
<Icon {...rowStartIconConfig} />
341346
</div>
342347
)}
343348

344349
{!isExpandedRow && !!(row as RowType<RowData>).expandableRows ? (
345-
<div className="flex expand-row-btn">
350+
<div
351+
className={`flex expand-row-btn ${expandBtnOrRowStartIconGutterStickyConfig.className}`}
352+
style={{ left: expandBtnOrRowStartIconGutterStickyConfig.left }}
353+
>
346354
<Button
347355
// NOTE: this dataTestId is being used in styles.scss
348356
dataTestId={`expand-row-${row.id}`}
@@ -366,14 +374,20 @@ const TableContent = <
366374
{/* empty div needed for alignment; therefore hide if rowStartIconConfig (only applies to parent rows) is present */}
367375
{isAnyRowExpandable &&
368376
(isExpandedRow || (!(row as RowType<RowData>).expandableRows && !rowStartIconConfig)) && (
369-
<div className="dc__position-rel expanded-tree-line" />
377+
<div
378+
className={`dc__position-rel expanded-tree-line ${expandBtnOrRowStartIconGutterStickyConfig.className}`}
379+
style={{ left: expandBtnOrRowStartIconGutterStickyConfig.left }}
380+
/>
370381
)}
371382

372383
{visibleColumns.map(({ field, horizontallySticky: isStickyColumn, CellComponent }, index) => {
373384
const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
374385
const horizontallySticky = isStickyColumn || isBulkActionGutter
375386
const { className: stickyClassName = '', left: stickyLeftValue = '' } = horizontallySticky
376-
? getStickyColumnConfig(gridTemplateColumns, index)
387+
? getStickyColumnConfig(
388+
gridTemplateColumns,
389+
index + (isAnyRowExpandable || rowStartIconConfig ? 1 : 0),
390+
)
377391
: {}
378392

379393
if (isBulkActionGutter && !isExpandedRow) {
@@ -435,6 +449,8 @@ const TableContent = <
435449
})
436450
}
437451

452+
const expandAllBtnStickyConfig = getStickyColumnConfig(gridTemplateColumns, 0)
453+
438454
return (
439455
<div
440456
{...shortcutContainerProps}
@@ -466,22 +482,27 @@ const TableContent = <
466482
}}
467483
>
468484
{isAnyRowExpandable ? (
469-
<Button
470-
dataTestId="expand-all-rows"
471-
icon={
472-
<Icon
473-
name="ic-expand-right-sm"
474-
color={null}
475-
rotateBy={areAllRowsExpanded ? 90 : 0}
476-
/>
477-
}
478-
ariaLabel="Expand/Collapse all rows"
479-
showAriaLabelInTippy={false}
480-
variant={ButtonVariantType.borderLess}
481-
size={ComponentSizeType.xs}
482-
style={ButtonStyleType.neutral}
483-
onClick={toggleExpandAll}
484-
/>
485+
<div
486+
className={`flex ${expandAllBtnStickyConfig.className}`}
487+
style={{ left: expandAllBtnStickyConfig.left }}
488+
>
489+
<Button
490+
dataTestId="expand-all-rows"
491+
icon={
492+
<Icon
493+
name="ic-expand-right-sm"
494+
color={null}
495+
rotateBy={areAllRowsExpanded ? 90 : 0}
496+
/>
497+
}
498+
ariaLabel="Expand/Collapse all rows"
499+
showAriaLabelInTippy={false}
500+
variant={ButtonVariantType.borderLess}
501+
size={ComponentSizeType.xs}
502+
style={ButtonStyleType.neutral}
503+
onClick={toggleExpandAll}
504+
/>
505+
</div>
485506
) : null}
486507

487508
{visibleColumns.map(
@@ -501,7 +522,12 @@ const TableContent = <
501522
const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
502523
const horizontallySticky = isStickyColumn || isBulkActionGutter
503524
const { className: stickyClassName = '', left: stickyLeftValue = '' } =
504-
horizontallySticky ? getStickyColumnConfig(gridTemplateColumns, index) : {}
525+
horizontallySticky
526+
? getStickyColumnConfig(
527+
gridTemplateColumns,
528+
index + (isAnyRowExpandable ? 1 : 0),
529+
)
530+
: {}
505531

506532
if (field === BULK_ACTION_GUTTER_LABEL) {
507533
return (

‎src/Shared/Components/Table/styles.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@
4040
left: -20px;
4141
width: 20px;
4242
}
43+
44+
&.expand-row-btn::before,
45+
&.row-start-icon::before,
46+
&.expanded-tree-libe::before {
47+
left: -24px;
48+
width: 24px;
49+
}
4350
}
4451

4552
&--scrolled {
@@ -137,7 +144,7 @@
137144
content: '';
138145
width: 1px;
139146
height: 100%;
140-
background: var(--N100);
147+
background: var(--N200);
141148
left: calc(50% - 1px); // offset to left by width for perfect centering
142149
top: 0;
143150
position: absolute;

‎src/Shared/Components/Table/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@ export type InternalTableProps<
329329
*/
330330
rowStartIconConfig?: Omit<IconsProps, 'dataTestId'>
331331

332-
onRowClick?: (row: RowType<RowData>) => void
332+
onRowClick?: (row: RowType<RowData>, isExpandedRow: boolean) => void
333333
} & (
334334
| {
335335
/**

0 commit comments

Comments
 (0)