Skip to content

Commit bab288a

Browse files
nstepiennstepien
authored
Replace most box-shadows with border/outline (adazzle#2821)
* Replace most box-shadows with border/outline * Fix ellipsis next to checkbox
1 parent bcf84ec commit bab288a

File tree

10 files changed

+68
-35
lines changed

10 files changed

+68
-35
lines changed

‎src/DataGrid.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1033,6 +1033,7 @@ function DataGrid<R, SR, K extends Key>(
10331033
viewportColumns={rowColumns}
10341034
childRows={row.childRows}
10351035
rowIdx={rowIdx}
1036+
lastFrozenColumnIndex={lastFrozenColumnIndex}
10361037
row={row}
10371038
gridRowStart={gridRowStart}
10381039
height={getRowHeight(rowIdx)}

‎src/GroupRow.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import { memo } from 'react';
22
import clsx from 'clsx';
33
import { css } from '@linaria/core';
44

5-
import { cell, cellFrozenLast, rowClassname, rowSelectedClassname } from './style';
5+
import {
6+
cell,
7+
cellFrozenLast,
8+
rowClassname,
9+
rowSelectedClassname,
10+
rowSelectedWithFrozenCell
11+
} from './style';
612
import { SELECT_COLUMN_KEY } from './Columns';
713
import GroupCell from './GroupCell';
814
import type { CalculatedColumn, GroupRow, Omit } from './types';
@@ -16,6 +22,7 @@ export interface GroupRowRendererProps<R, SR>
1622
viewportColumns: readonly CalculatedColumn<R, SR>[];
1723
childRows: readonly R[];
1824
rowIdx: number;
25+
lastFrozenColumnIndex: number;
1926
row: GroupRow<R>;
2027
gridRowStart: number;
2128
height: number;
@@ -45,6 +52,7 @@ function GroupedRow<R, SR>({
4552
viewportColumns,
4653
childRows,
4754
rowIdx,
55+
lastFrozenColumnIndex,
4856
row,
4957
gridRowStart,
5058
height,
@@ -56,6 +64,7 @@ function GroupedRow<R, SR>({
5664
toggleGroup,
5765
...props
5866
}: GroupRowRendererProps<R, SR>) {
67+
const isRowFocused = selectedCellIdx === -1;
5968
// Select is always the first column
6069
const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
6170

@@ -74,7 +83,8 @@ function GroupedRow<R, SR>({
7483
groupRowClassname,
7584
`rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
7685
{
77-
[rowSelectedClassname]: selectedCellIdx === -1
86+
[rowSelectedClassname]: isRowFocused,
87+
[rowSelectedWithFrozenCell]: isRowFocused && lastFrozenColumnIndex !== -1
7888
}
7989
)}
8090
onClick={handleSelectGroup}

‎src/HeaderRow.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import HeaderCell from './HeaderCell';
66
import type { CalculatedColumn, Direction } from './types';
77
import { getColSpan, getRowStyle } from './utils';
88
import type { DataGridProps } from './DataGrid';
9-
import { cell, cellFrozen, rowSelectedClassname } from './style';
9+
import { cell, cellFrozen, rowSelectedClassname, rowSelectedWithFrozenCell } from './style';
1010

1111
type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
1212
DataGridProps<R, SR, K>,
@@ -58,6 +58,7 @@ function HeaderRow<R, SR, K extends React.Key>({
5858
shouldFocusGrid,
5959
direction
6060
}: HeaderRowProps<R, SR, K>) {
61+
const isRowFocused = selectedCellIdx === -1;
6162
const cells = [];
6263
for (let index = 0; index < columns.length; index++) {
6364
const column = columns[index];
@@ -89,7 +90,8 @@ function HeaderRow<R, SR, K extends React.Key>({
8990
role="row"
9091
aria-rowindex={1} // aria-rowindex is 1 based
9192
className={clsx(headerRowClassname, {
92-
[rowSelectedClassname]: selectedCellIdx === -1
93+
[rowSelectedClassname]: isRowFocused,
94+
[rowSelectedWithFrozenCell]: isRowFocused && lastFrozenColumnIndex !== -1
9395
})}
9496
style={getRowStyle(1)}
9597
>

‎src/Row.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import clsx from 'clsx';
55
import Cell from './Cell';
66
import { RowSelectionProvider, useLatestFunc } from './hooks';
77
import { getColSpan, getRowStyle } from './utils';
8-
import { rowClassname, rowSelectedClassname } from './style';
8+
import { rowClassname, rowSelectedClassname, rowSelectedWithFrozenCell } from './style';
99
import type { RowRendererProps } from './types';
1010

1111
function Row<R, SR>(
@@ -43,11 +43,14 @@ function Row<R, SR>(
4343
onMouseEnter?.(event);
4444
}
4545

46+
const isRowFocused = selectedCellIdx === -1;
47+
4648
className = clsx(
4749
rowClassname,
4850
`rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
4951
{
50-
[rowSelectedClassname]: selectedCellIdx === -1
52+
[rowSelectedClassname]: isRowFocused,
53+
[rowSelectedWithFrozenCell]: isRowFocused && lastFrozenColumnIndex !== -1
5154
},
5255
rowClass?.(row),
5356
className

‎src/SummaryRow.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { memo } from 'react';
22
import clsx from 'clsx';
33
import { css } from '@linaria/core';
44

5-
import { cell, row, rowClassname, rowSelectedClassname } from './style';
5+
import { cell, row, rowClassname, rowSelectedClassname, rowSelectedWithFrozenCell } from './style';
66
import { getColSpan, getRowStyle } from './utils';
77
import SummaryCell from './SummaryCell';
88
import type { CalculatedColumn, RowRendererProps } from './types';
@@ -51,6 +51,7 @@ function SummaryRow<R, SR>({
5151
selectCell,
5252
'aria-rowindex': ariaRowIndex
5353
}: SummaryRowProps<R, SR>) {
54+
const isRowFocused = selectedCellIdx === -1;
5455
const cells = [];
5556
for (let index = 0; index < viewportColumns.length; index++) {
5657
const column = viewportColumns[index];
@@ -81,9 +82,10 @@ function SummaryRow<R, SR>({
8182
rowClassname,
8283
`rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
8384
summaryRowClassname,
84-
{ [summaryRowBorderClassname]: rowIdx === 0 },
8585
{
86-
[rowSelectedClassname]: selectedCellIdx === -1
86+
[summaryRowBorderClassname]: rowIdx === 0,
87+
[rowSelectedClassname]: isRowFocused,
88+
[rowSelectedWithFrozenCell]: isRowFocused && lastFrozenColumnIndex !== -1
8789
}
8890
)}
8991
style={

‎src/formatters/CheckboxFormatter.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ const checkbox = css`
3030
background-color: var(--rdg-background-color);
3131
.${checkboxInput}:checked + & {
3232
background-color: var(--rdg-checkbox-color);
33-
box-shadow: inset 0px 0px 0px 4px var(--rdg-background-color);
33+
outline: 4px solid var(--rdg-background-color);
34+
outline-offset: -6px;
3435
}
3536
.${checkboxInput}:focus + & {
3637
border-color: var(--rdg-checkbox-focus-color);

‎src/style/cell.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const cell = css`
1717
outline: none;
1818
1919
&[aria-selected='true'] {
20-
box-shadow: inset 0 0 0 2px var(--rdg-selection-color);
20+
outline: 2px solid var(--rdg-selection-color);
21+
outline-offset: -2px;
2122
}
2223
`;
2324

@@ -39,7 +40,7 @@ export const cellFrozen = css`
3940
export const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
4041

4142
export const cellFrozenLast = css`
42-
box-shadow: var(--rdg-frozen-cell-box-shadow);
43+
box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
4344
`;
4445

4546
export const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;

‎src/style/core.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ const darkTheme = `
3636
const root = css`
3737
${lightTheme}
3838
--rdg-selection-color: #66afe9;
39-
--rdg-frozen-cell-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
4039
--rdg-font-size: 14px;
4140
4241
display: grid;

‎src/style/row.ts

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { css } from '@linaria/core';
22

3-
import { cell, cellFrozenLast } from '../style';
4-
53
export const row = css`
64
display: contents;
75
line-height: var(--rdg-row-height);
@@ -22,27 +20,28 @@ export const row = css`
2220

2321
export const rowClassname = `rdg-row ${row}`;
2422

25-
const topBoxShadow = 'inset 0 2px 0 0 var(--rdg-selection-color)';
26-
const rightBoxShadow = 'inset calc(-2px * var(--rdg-sign)) 0 0 0 var(--rdg-selection-color)';
27-
const bottomBoxShadow = 'inset 0 -2px 0 0 var(--rdg-selection-color)';
28-
const leftBoxShadow = 'inset calc(2px * var(--rdg-sign)) 0 0 0 var(--rdg-selection-color)';
29-
3023
const rowSelected = css`
31-
outline: none;
32-
33-
> .${cell} {
34-
box-shadow: ${topBoxShadow}, ${bottomBoxShadow};
35-
&:first-child {
36-
box-shadow: ${topBoxShadow}, ${bottomBoxShadow}, ${leftBoxShadow};
37-
}
38-
&:last-child {
39-
box-shadow: ${topBoxShadow}, ${bottomBoxShadow}, ${rightBoxShadow};
40-
}
41-
}
42-
43-
> .${cellFrozenLast} {
44-
box-shadow: ${topBoxShadow}, ${bottomBoxShadow}, var(--rdg-frozen-cell-box-shadow);
24+
&::after {
25+
content: '';
26+
grid-column: 1 / -1;
27+
grid-row-start: var(--rdg-grid-row-start);
28+
border: 2px solid var(--rdg-selection-color);
29+
pointer-events: none;
30+
z-index: 2;
4531
}
4632
`;
4733

4834
export const rowSelectedClassname = `rdg-row-selected ${rowSelected}`;
35+
36+
export const rowSelectedWithFrozenCell = css`
37+
&::before {
38+
content: '';
39+
grid-column-start: 1;
40+
grid-row-start: var(--rdg-grid-row-start);
41+
position: sticky;
42+
inset-inline-start: 0;
43+
border-inline-start: 2px solid var(--rdg-selection-color);
44+
pointer-events: none;
45+
z-index: 2;
46+
}
47+
`;

‎website/demos/CustomizableComponents.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
import { useMemo, useState, forwardRef } from 'react';
2+
import { css } from '@linaria/core';
23

34
import DataGrid, { SelectColumn, TextEditor } from '../../src';
45
import type { Column, CheckboxFormatterProps, SortColumn, SortIconProps } from '../../src';
56
import type { Props } from './types';
67

8+
const selectCellClassname = css`
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
13+
> input {
14+
margin: 0;
15+
}
16+
`;
17+
718
interface Row {
819
id: number;
920
task: string;
@@ -28,7 +39,11 @@ function createRows(): readonly Row[] {
2839
}
2940

3041
const columns: readonly Column<Row>[] = [
31-
SelectColumn,
42+
{
43+
...SelectColumn,
44+
headerCellClass: selectCellClassname,
45+
cellClass: selectCellClassname
46+
},
3247
{
3348
key: 'id',
3449
name: 'ID',

0 commit comments

Comments
 (0)