Skip to content

Commit a5d7ca3

Browse files
chaitanyadeorukhkarchaitanyadeorukhkar
committed
Merge remote-tracking branch 'origin/feat/table-component' into feat/table-component-tests
2 parents fe7fdc7 + 626ae07 commit a5d7ca3

File tree

1 file changed

+31
-28
lines changed

1 file changed

+31
-28
lines changed

‎packages/blade/src/components/Table/TableBody.web.tsx

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,20 @@ const StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: bool
2525
'&&&': {
2626
border: 'none',
2727
transition: rowBackgroundTransition,
28-
'& tr:last-child td': {
28+
'& tr:last-child .cell-wrapper': {
2929
borderBottom: 'none',
3030
},
3131

32-
'& .row-select-single-selected td, .row-select-selected td': {
32+
'& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': {
3333
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected),
3434
},
35-
'& .row-select-single-selected:hover:not(.disabled-row) td, .row-select-selected:hover:not(.disabled-row) td': {
35+
'& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': {
3636
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover),
3737
},
38-
'& .row-select-single-selected:focus:not(.disabled-row) td, .row-select-selected:focus:not(.disabled-row) td': {
38+
'& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': {
3939
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus),
4040
},
41-
'& .row-select-single-selected:active:not(.disabled-row) td, .row-select-selected:active:not(.disabled-row) td': {
41+
'& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': {
4242
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive),
4343
},
4444

@@ -52,7 +52,7 @@ const StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: bool
5252
'& tr:nth-child(even) .cell-wrapper': {
5353
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),
5454
},
55-
'& tr:nth-child(even) td': {
55+
'& tr:nth-child(even) .cell-wrapper-base': {
5656
backgroundColor: tableRow.stripe.backgroundColor,
5757
},
5858
}),
@@ -90,26 +90,26 @@ const StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: bool
9090
),
9191
},
9292

93-
'& tr:nth-child(even):hover:not(.disabled-row) td': {
93+
'& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': {
9494
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),
9595
},
96-
'& tr:nth-child(even):focus:not(.disabled-row) td': {
96+
'& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': {
9797
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),
9898
},
99-
'& tr:nth-child(even):active:not(.disabled-row) td': {
99+
'& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': {
100100
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),
101101
},
102102

103-
'& .row-select-single-selected:nth-child(even) td, .row-select-selected:nth-child(even) td ': {
103+
'& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': {
104104
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected),
105105
},
106-
'& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) td, .row-select-selected:nth-child(even):hover:not(.disabled-row) td ': {
106+
'& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': {
107107
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover),
108108
},
109-
'& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) td, .row-select-selected:nth-child(even):focus:not(.disabled-row) td ': {
109+
'& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': {
110110
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus),
111111
},
112-
'& .row-select-single-selected:nth-child(even):active:not(.disabled-row) td, .row-select-selected:nth-child(even):active:not(.disabled-row) td ': {
112+
'& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': {
113113
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive),
114114
},
115115
}),
@@ -191,18 +191,21 @@ const _TableCell = ({ children }: TableCellProps): React.ReactElement => {
191191
$surfaceLevel={surfaceLevel}
192192
{...metaAttribute({ name: MetaConstants.TableCell })}
193193
>
194-
<CellWrapper
195-
className="cell-wrapper"
196-
rowDensity={rowDensity}
197-
showStripedRows={showStripedRows}
198-
display="flex"
199-
alignItems="center"
200-
// when a direct string child is passed we want to disable pointer events
201-
// for custom cells components, consumers can handle pointer events themselves
202-
pointerEvents={isChildrenString && isSelectable ? 'none' : 'auto'}
203-
>
204-
{isChildrenString ? <Text size="medium">{children}</Text> : children}
205-
</CellWrapper>
194+
<BaseBox className="cell-wrapper-base" display="flex" alignItems="center" height="100%">
195+
<CellWrapper
196+
className="cell-wrapper"
197+
rowDensity={rowDensity}
198+
showStripedRows={showStripedRows}
199+
display="flex"
200+
alignItems="center"
201+
flex={1}
202+
// when a direct string child is passed we want to disable pointer events
203+
// for custom cells components, consumers can handle pointer events themselves
204+
pointerEvents={isChildrenString && isSelectable ? 'none' : 'auto'}
205+
>
206+
{isChildrenString ? <Text size="medium">{children}</Text> : children}
207+
</CellWrapper>
208+
</BaseBox>
206209
</StyledCell>
207210
);
208211
};
@@ -244,17 +247,17 @@ const StyledRow = styled(Row)<{ $isSelectable: boolean }>(({ theme, $isSelectabl
244247
'&&&': {
245248
backgroundColor: 'transparent',
246249
...($isSelectable && {
247-
'&:hover:not(.disabled-row) td': {
250+
'&:hover:not(.disabled-row) .cell-wrapper-base': {
248251
transition: rowBackgroundTransition,
249252
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorHover),
250253
cursor: 'pointer',
251254
},
252-
'&:focus:not(.disabled-row) td': {
255+
'&:focus:not(.disabled-row) .cell-wrapper-base': {
253256
transition: rowBackgroundTransition,
254257
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorFocus),
255258
cursor: 'pointer',
256259
},
257-
'&:active:not(.disabled-row) td': {
260+
'&:active:not(.disabled-row) .cell-wrapper-base': {
258261
transition: rowBackgroundTransition,
259262
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorActive),
260263
cursor: 'pointer',

0 commit comments

Comments
 (0)