Skip to content

Commit

Permalink
refactor: styles for table and table body
Browse files Browse the repository at this point in the history
  • Loading branch information
@tewarig
tewarig committed Jan 23, 2025
1 parent 8be1b12 commit 7cb1f2e
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 162 deletions.
138 changes: 7 additions & 131 deletions packages/blade/src/components/Table/TableBody.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
getTableRowBackgroundTransition,
getTableDataSelector,
} from './utils';
import { getTableBodyStyles } from './commonStyles';
import getIn from '~utils/lodashButBetter/get';
import { Text } from '~components/Typography';
import type { CheckboxProps } from '~components/Checkbox';
Expand Down Expand Up @@ -47,140 +48,15 @@ const StyledBody = styled(Body)<{
borderBottom: 'none',
},

'& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected),
},
'& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover),
...getTableActionsHoverStyles({
hoverColor: tableRow.nonStripe.backgroundColorSelectedHover,
backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover,
theme,
}),
},
'& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus),
...getTableActionsHoverStyles({
hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus,
backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus,
theme,
}),
},
'& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive),
...getTableActionsHoverStyles({
hoverColor: tableRow.nonStripe.backgroundColorSelectedActive,
backgroundGradientColor: tableRow.nonStripe.backgroundColorHover,
...{
...getTableBodyStyles({
addCommonStyles: true,
theme,
isSelectable: $isSelectable,
showStripedRows: $showStripedRows,
isVirtualized: false,
}),
},

...($isSelectable && {
'& tr:active:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive),
},
}),

...($showStripedRows && {
'& tr:nth-child(even) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),
},
'& tr:nth-child(even) .cell-wrapper-base': {
backgroundColor: tableRow.stripe.backgroundColor,
},
}),

...($showStripedRows &&
$isSelectable && {
'& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover),
},
'& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus),
},
'& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive),
},
'& .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': {
backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected),
},
'& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(
theme.colors,
tableRow.stripeWrapper.backgroundColorSelectedHover,
),
},
'& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(
theme.colors,
tableRow.stripeWrapper.backgroundColorSelectedFocus,
),
},
'& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
backgroundColor: getIn(
theme.colors,
tableRow.stripeWrapper.backgroundColorSelectedActive,
),
},

'& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorHover,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover,
}),
},
'& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorFocus,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus,
}),
},
'& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorActive,
backgroundGradientColor: tableRow.stripe.backgroundColorHover,
theme,
}),
},

'& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelected,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected,
}),
},
'& .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 ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelectedHover,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover,
}),
},
'& .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 ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelectedFocus,
theme,
backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus,
}),
},
'& .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 ': {
backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive),
...getTableActionsHoverStyles({
hoverColor: tableRow.stripe.backgroundColorSelectedActive,
theme,
backgroundGradientColor: tableRow.stripe.backgroundColorHover,
}),
},
}),
},
};
});
Expand Down
Loading

0 comments on commit 7cb1f2e

Please sign in to comment.