Skip to content

Commit 468db9e

Browse files
pan-kotpan-kot
authored
fix: Fixes table editable cell styles and simplifies it (#3061)
1 parent 4531149 commit 468db9e

10 files changed

+59
-60
lines changed

‎src/table/body-cell/inline-editor.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export function InlineEditor<ItemType>({
114114
aria-label={ariaLabels?.activateEditLabel?.(column, item)}
115115
onKeyDown={handleEscape}
116116
>
117-
<form onSubmit={onSubmitClick} className={styles['body-cell-editor-form']}>
117+
<form onSubmit={onSubmitClick}>
118118
<FormField
119119
stretch={true}
120120
label={ariaLabel}

‎src/table/body-cell/styles.scss

+17-29
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ $edit-button-padding-right: calc(#{awsui.$space-xs} + #{awsui.$space-xxs});
2525
// Cell vertical padding + xxs space that would normally come from the button.
2626
$success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
2727
$interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
28+
$editing-cell-padding-inline: awsui.$space-xxs;
29+
$editing-cell-padding-block: awsui.$space-scaled-xxxs;
2830
$cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
29-
3031
// Ensuring enough space for absolute-positioned focus outlines of focus-able cell content elements.
3132
$cell-negative-space-vertical: 2px;
3233

@@ -131,11 +132,18 @@ $cell-negative-space-vertical: 2px;
131132

132133
&-content {
133134
box-sizing: border-box;
134-
}
135-
&:not(.body-cell-wrap) > .body-cell-content {
136-
white-space: nowrap;
137-
overflow: hidden;
138-
text-overflow: ellipsis;
135+
block-size: 100%;
136+
align-content: center;
137+
138+
&.body-cell-align-top {
139+
align-content: baseline;
140+
}
141+
142+
&:not(.body-cell-wrap) {
143+
white-space: nowrap;
144+
overflow: hidden;
145+
text-overflow: ellipsis;
146+
}
139147
}
140148
&:first-child {
141149
border-inline-start: $border-placeholder;
@@ -177,20 +185,10 @@ $cell-negative-space-vertical: 2px;
177185
&:not(.has-selection):not(.body-cell-editable) {
178186
border-inline-start: none;
179187
}
180-
181-
// Give extra space on the edge to allow slight content overflow.
182-
// That is to prevent focus outline on cell content from being cut out.
183-
> .body-cell-content {
184-
padding-inline-start: awsui.$border-divider-list-width;
185-
margin-inline-start: calc(-1 * #{awsui.$border-divider-list-width});
186-
}
187188
}
188189
&:first-child:not(.is-visual-refresh) {
189190
@include cell-padding-inline-start($cell-edge-horizontal-padding);
190191
}
191-
&-align-top {
192-
vertical-align: top;
193-
}
194192
&-first-row {
195193
border-block-start: $border-placeholder;
196194
}
@@ -380,19 +378,6 @@ $cell-negative-space-vertical: 2px;
380378
color: awsui.$color-text-button-normal-active;
381379
}
382380

383-
&-form {
384-
margin-block: calc(-1 * #{awsui.$space-xs});
385-
margin-inline: calc(-1.5 * #{awsui.$space-xs});
386-
387-
.is-visual-refresh.body-cell:first-child.has-striped-rows > & {
388-
margin-inline-start: calc(-1 * #{awsui.$space-xxs});
389-
}
390-
391-
.is-visual-refresh.body-cell:first-child:not(.has-striped-rows) > & {
392-
margin-inline-start: calc(-1 * #{awsui.$space-xxxs});
393-
}
394-
}
395-
396381
&-row {
397382
display: flex;
398383
flex-flow: row nowrap;
@@ -431,6 +416,9 @@ $cell-negative-space-vertical: 2px;
431416
> .body-cell-content {
432417
overflow: visible;
433418
}
419+
@include cell-padding-inline-start($editing-cell-padding-inline);
420+
@include cell-padding-inline-end($editing-cell-padding-inline);
421+
@include cell-padding-block($editing-cell-padding-block);
434422
}
435423

436424
&:not(.body-cell-edit-active) {

‎src/table/body-cell/td-element.tsx

+15-6
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
88
import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
99
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
1010
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
11+
import { ColumnWidthStyle } from '../column-widths-utils';
1112
import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
1213
import { TableProps } from '../interfaces.js';
1314
import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
@@ -18,7 +19,6 @@ import tableStyles from '../styles.css.js';
1819
import styles from './styles.css.js';
1920

2021
export interface TableTdElementProps {
21-
style?: React.CSSProperties;
2222
wrapLines: boolean | undefined;
2323
isRowHeader?: boolean;
2424
isFirstRow: boolean;
@@ -51,6 +51,7 @@ export interface TableTdElementProps {
5151
collapseButtonLabel?: string;
5252
verticalAlign?: TableProps.VerticalAlign;
5353
resizableColumns?: boolean;
54+
resizableStyle?: ColumnWidthStyle;
5455
isEditable: boolean;
5556
isEditing: boolean;
5657
isEditingDisabled?: boolean;
@@ -60,7 +61,6 @@ export interface TableTdElementProps {
6061
export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(
6162
(
6263
{
63-
style,
6464
children,
6565
wrapLines,
6666
isRowHeader,
@@ -90,6 +90,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
9090
collapseButtonLabel,
9191
verticalAlign,
9292
resizableColumns,
93+
resizableStyle,
9394
isEditable,
9495
isEditing,
9596
isEditingDisabled,
@@ -101,6 +102,8 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
101102
const Element = isRowHeader ? 'th' : 'td';
102103
const isVisualRefresh = useVisualRefresh();
103104

105+
resizableStyle = resizableColumns ? {} : resizableStyle;
106+
104107
nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
105108

106109
const stickyStyles = useStickyCellStyles({
@@ -115,10 +118,9 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
115118

116119
return (
117120
<Element
118-
style={{ ...style, ...stickyStyles.style }}
121+
style={{ ...resizableStyle, ...stickyStyles.style }}
119122
className={clsx(
120123
styles['body-cell'],
121-
wrapLines && styles['body-cell-wrap'],
122124
isFirstRow && styles['body-cell-first-row'],
123125
isLastRow && styles['body-cell-last-row'],
124126
isSelected && styles['body-cell-selected'],
@@ -137,7 +139,6 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
137139
hasSuccessIcon && styles['body-cell-has-success'],
138140
level !== undefined && styles['body-cell-expandable'],
139141
level !== undefined && styles[`expandable-level-${getLevelClassSuffix(level)}`],
140-
verticalAlign === 'top' && styles['body-cell-align-top'],
141142
stickyStyles.className
142143
)}
143144
onClick={onClick}
@@ -159,7 +160,15 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
159160
</div>
160161
)}
161162

162-
<div className={styles['body-cell-content']}>{children}</div>
163+
<div
164+
className={clsx(
165+
styles['body-cell-content'],
166+
verticalAlign === 'top' && styles['body-cell-align-top'],
167+
wrapLines && styles['body-cell-wrap']
168+
)}
169+
>
170+
{children}
171+
</div>
163172
</Element>
164173
);
165174
}

‎src/table/column-widths-utils.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,20 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
55

66
import { TableProps } from './interfaces';
77

8+
export interface ColumnWidthStyle {
9+
width?: string | number;
10+
minWidth?: string | number;
11+
maxWidth?: string | number;
12+
}
13+
814
export function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {
915
for (const column of columnDefinitions) {
1016
checkProperty(column, 'minWidth');
1117
checkProperty(column, 'width');
1218
}
1319
}
1420

15-
export function setElementWidths(element: HTMLElement, styles: React.CSSProperties) {
21+
export function setElementWidths(element: HTMLElement, styles: ColumnWidthStyle) {
1622
function setProperty(property: 'width' | 'minWidth' | 'maxWidth') {
1723
const value = styles[property];
1824
let widthCssValue = '';

‎src/table/header-cell/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
1313
import { useUniqueId } from '../../internal/hooks/use-unique-id';
1414
import { KeyCode } from '../../internal/keycode';
1515
import { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';
16+
import { ColumnWidthStyle } from '../column-widths-utils';
1617
import { TableProps } from '../interfaces';
1718
import { Divider, Resizer } from '../resizer';
1819
import { StickyColumnsModel } from '../sticky-columns';
@@ -24,7 +25,6 @@ import analyticsSelectors from '../analytics-metadata/styles.css.js';
2425
import styles from './styles.css.js';
2526

2627
export interface TableHeaderCellProps<ItemType> {
27-
style?: React.CSSProperties;
2828
tabIndex: number;
2929
column: TableProps.ColumnDefinition<ItemType>;
3030
activeSortingColumn?: TableProps.SortingColumn<ItemType>;
@@ -40,6 +40,7 @@ export interface TableHeaderCellProps<ItemType> {
4040
colIndex: number;
4141
updateColumn: (columnId: PropertyKey, newWidth: number) => void;
4242
resizableColumns?: boolean;
43+
resizableStyle?: ColumnWidthStyle;
4344
isEditable?: boolean;
4445
columnId: PropertyKey;
4546
stickyState: StickyColumnsModel;
@@ -53,7 +54,6 @@ export interface TableHeaderCellProps<ItemType> {
5354
}
5455

5556
export function TableHeaderCell<ItemType>({
56-
style,
5757
tabIndex,
5858
column,
5959
activeSortingColumn,
@@ -69,6 +69,7 @@ export function TableHeaderCell<ItemType>({
6969
colIndex,
7070
updateColumn,
7171
resizableColumns,
72+
resizableStyle,
7273
onResizeFinish,
7374
isEditable,
7475
columnId,
@@ -120,7 +121,7 @@ export function TableHeaderCell<ItemType>({
120121

121122
return (
122123
<TableThElement
123-
style={style}
124+
resizableStyle={resizableStyle}
124125
cellRef={cellRefCombined}
125126
sortingStatus={sortingStatus}
126127
sortingDisabled={sortingDisabled}

‎src/table/header-cell/th-element.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
88
import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
99
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
1010
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
11+
import { ColumnWidthStyle } from '../column-widths-utils';
1112
import { TableProps } from '../interfaces';
1213
import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
1314
import { getTableColHeaderRoleProps, TableRole } from '../table-role';
@@ -18,7 +19,7 @@ import tableStyles from '../styles.css.js';
1819
import styles from './styles.css.js';
1920

2021
export interface TableThElementProps {
21-
style?: React.CSSProperties;
22+
resizableStyle?: ColumnWidthStyle;
2223
sortingStatus?: SortingStatus;
2324
sortingDisabled?: boolean;
2425
focusedComponent?: null | string;
@@ -38,7 +39,7 @@ export interface TableThElementProps {
3839
}
3940

4041
export function TableThElement({
41-
style,
42+
resizableStyle,
4243
sortingStatus,
4344
sortingDisabled,
4445
focusedComponent,
@@ -91,7 +92,7 @@ export function TableThElement({
9192
},
9293
stickyStyles.className
9394
)}
94-
style={{ ...style, ...stickyStyles.style }}
95+
style={{ ...resizableStyle, ...stickyStyles.style }}
9596
ref={mergedRef}
9697
{...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}
9798
tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}

‎src/table/internal.tsx

+5-9
Original file line numberDiff line numberDiff line change
@@ -623,15 +623,11 @@ const InternalTable = React.forwardRef(
623623
<TableBodyCell
624624
key={getColumnKey(column, colIndex)}
625625
{...sharedCellProps}
626-
style={
627-
resizableColumns
628-
? {}
629-
: {
630-
width: column.width,
631-
minWidth: column.minWidth,
632-
maxWidth: column.maxWidth,
633-
}
634-
}
626+
resizableStyle={{
627+
width: column.width,
628+
minWidth: column.minWidth,
629+
maxWidth: column.maxWidth,
630+
}}
635631
ariaLabels={ariaLabels}
636632
column={column}
637633
item={row.item}

‎src/table/styles.scss

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353

5454
.table {
5555
inline-size: 100%;
56+
block-size: 100%;
5657
border-spacing: 0;
5758
position: relative;
5859
box-sizing: border-box;

‎src/table/thead.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@ const Thead = React.forwardRef(
124124
<TableHeaderCell
125125
{...commonCellProps}
126126
key={columnId}
127-
style={getColumnStyles(sticky, columnId)}
128127
tabIndex={sticky ? -1 : 0}
129128
focusedComponent={focusedComponent}
130129
column={column}
@@ -137,6 +136,7 @@ const Thead = React.forwardRef(
137136
updateColumn={updateColumn}
138137
onResizeFinish={() => onResizeFinish(columnWidths)}
139138
resizableColumns={resizableColumns}
139+
resizableStyle={getColumnStyles(sticky, columnId)}
140140
onClick={detail => {
141141
setLastUserAction('sorting');
142142
fireNonCancelableEvent(onSortingChange, detail);

‎src/table/use-column-widths.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,12 @@ import React, { createContext, useContext, useEffect, useRef, useState } from 'r
55
import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
66
import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
77

8-
import { setElementWidths } from './column-widths-utils';
8+
import { ColumnWidthStyle, setElementWidths } from './column-widths-utils';
99

1010
export const DEFAULT_COLUMN_WIDTH = 120;
1111

12-
export interface ColumnWidthDefinition {
12+
export interface ColumnWidthDefinition extends ColumnWidthStyle {
1313
id: PropertyKey;
14-
minWidth?: string | number;
15-
maxWidth?: string | number;
16-
width?: string | number;
1714
}
1815

1916
function readWidths(
@@ -61,7 +58,7 @@ function updateWidths(
6158
}
6259

6360
interface WidthsContext {
64-
getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;
61+
getColumnStyles(sticky: boolean, columnId: PropertyKey): ColumnWidthStyle;
6562
columnWidths: Map<PropertyKey, number>;
6663
updateColumn: (columnId: PropertyKey, newWidth: number) => void;
6764
setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;
@@ -98,7 +95,7 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain
9895
}
9996
};
10097

101-
const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {
98+
const getColumnStyles = (sticky: boolean, columnId: PropertyKey): ColumnWidthStyle => {
10299
const column = visibleColumns.find(column => column.id === columnId);
103100
if (!column) {
104101
return {};

0 commit comments

Comments
 (0)