fix: Fixes table editable cell styles and simplifies it (#3061)

cloudscape-design · Dec 16, 2024 · 468db9e · 468db9e
1 parent 4531149
commit 468db9e
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 60 deletions.
diff --git a/src/table/body-cell/inline-editor.tsx b/src/table/body-cell/inline-editor.tsx
@@ -114,7 +114,7 @@ export function InlineEditor<ItemType>({
         aria-label={ariaLabels?.activateEditLabel?.(column, item)}
         onKeyDown={handleEscape}
       >
-        <form onSubmit={onSubmitClick} className={styles['body-cell-editor-form']}>
+        <form onSubmit={onSubmitClick}>
           <FormField
             stretch={true}
             label={ariaLabel}

diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
@@ -25,8 +25,9 @@ $edit-button-padding-right: calc(#{awsui.$space-xs} + #{awsui.$space-xxs});
 // Cell vertical padding + xxs space that would normally come from the button.
 $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
 $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+$editing-cell-padding-inline: awsui.$space-xxs;
+$editing-cell-padding-block: awsui.$space-scaled-xxxs;
 $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
-
 // Ensuring enough space for absolute-positioned focus outlines of focus-able cell content elements.
 $cell-negative-space-vertical: 2px;
 
@@ -131,11 +132,18 @@ $cell-negative-space-vertical: 2px;
 
   &-content {
     box-sizing: border-box;
-  }
-  &:not(.body-cell-wrap) > .body-cell-content {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    block-size: 100%;
+    align-content: center;
+
+    &.body-cell-align-top {
+      align-content: baseline;
+    }
+
+    &:not(.body-cell-wrap) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
   &:first-child {
     border-inline-start: $border-placeholder;
@@ -177,20 +185,10 @@ $cell-negative-space-vertical: 2px;
     &:not(.has-selection):not(.body-cell-editable) {
       border-inline-start: none;
     }
-
-    // Give extra space on the edge to allow slight content overflow.
-    // That is to prevent focus outline on cell content from being cut out.
-    > .body-cell-content {
-      padding-inline-start: awsui.$border-divider-list-width;
-      margin-inline-start: calc(-1 * #{awsui.$border-divider-list-width});
-    }
   }
   &:first-child:not(.is-visual-refresh) {
     @include cell-padding-inline-start($cell-edge-horizontal-padding);
   }
-  &-align-top {
-    vertical-align: top;
-  }
   &-first-row {
     border-block-start: $border-placeholder;
   }
@@ -380,19 +378,6 @@ $cell-negative-space-vertical: 2px;
       color: awsui.$color-text-button-normal-active;
     }
 
-    &-form {
-      margin-block: calc(-1 * #{awsui.$space-xs});
-      margin-inline: calc(-1.5 * #{awsui.$space-xs});
-
-      .is-visual-refresh.body-cell:first-child.has-striped-rows > & {
-        margin-inline-start: calc(-1 * #{awsui.$space-xxs});
-      }
-
-      .is-visual-refresh.body-cell:first-child:not(.has-striped-rows) > & {
-        margin-inline-start: calc(-1 * #{awsui.$space-xxxs});
-      }
-    }
-
     &-row {
       display: flex;
       flex-flow: row nowrap;
@@ -431,6 +416,9 @@ $cell-negative-space-vertical: 2px;
       > .body-cell-content {
         overflow: visible;
       }
+      @include cell-padding-inline-start($editing-cell-padding-inline);
+      @include cell-padding-inline-end($editing-cell-padding-inline);
+      @include cell-padding-block($editing-cell-padding-block);
     }
 
     &:not(.body-cell-edit-active) {

diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
 import { TableProps } from '../interfaces.js';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
@@ -18,7 +19,6 @@ import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableTdElementProps {
-  style?: React.CSSProperties;
   wrapLines: boolean | undefined;
   isRowHeader?: boolean;
   isFirstRow: boolean;
@@ -51,6 +51,7 @@ export interface TableTdElementProps {
   collapseButtonLabel?: string;
   verticalAlign?: TableProps.VerticalAlign;
   resizableColumns?: boolean;
+  resizableStyle?: ColumnWidthStyle;
   isEditable: boolean;
   isEditing: boolean;
   isEditingDisabled?: boolean;
@@ -60,7 +61,6 @@ export interface TableTdElementProps {
 export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(
   (
     {
-      style,
       children,
       wrapLines,
       isRowHeader,
@@ -90,6 +90,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
       collapseButtonLabel,
       verticalAlign,
       resizableColumns,
+      resizableStyle,
       isEditable,
       isEditing,
       isEditingDisabled,
@@ -101,6 +102,8 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
     const Element = isRowHeader ? 'th' : 'td';
     const isVisualRefresh = useVisualRefresh();
 
+    resizableStyle = resizableColumns ? {} : resizableStyle;
+
     nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
 
     const stickyStyles = useStickyCellStyles({
@@ -115,10 +118,9 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
 
     return (
       <Element
-        style={{ ...style, ...stickyStyles.style }}
+        style={{ ...resizableStyle, ...stickyStyles.style }}
         className={clsx(
           styles['body-cell'],
-          wrapLines && styles['body-cell-wrap'],
           isFirstRow && styles['body-cell-first-row'],
           isLastRow && styles['body-cell-last-row'],
           isSelected && styles['body-cell-selected'],
@@ -137,7 +139,6 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           hasSuccessIcon && styles['body-cell-has-success'],
           level !== undefined && styles['body-cell-expandable'],
           level !== undefined && styles[`expandable-level-${getLevelClassSuffix(level)}`],
-          verticalAlign === 'top' && styles['body-cell-align-top'],
           stickyStyles.className
         )}
         onClick={onClick}
@@ -159,7 +160,15 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           </div>
         )}
 
-        <div className={styles['body-cell-content']}>{children}</div>
+        <div
+          className={clsx(
+            styles['body-cell-content'],
+            verticalAlign === 'top' && styles['body-cell-align-top'],
+            wrapLines && styles['body-cell-wrap']
+          )}
+        >
+          {children}
+        </div>
       </Element>
     );
   }

diff --git a/src/table/column-widths-utils.ts b/src/table/column-widths-utils.ts
@@ -5,14 +5,20 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { TableProps } from './interfaces';
 
+export interface ColumnWidthStyle {
+  width?: string | number;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+}
+
 export function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {
   for (const column of columnDefinitions) {
     checkProperty(column, 'minWidth');
     checkProperty(column, 'width');
   }
 }
 
-export function setElementWidths(element: HTMLElement, styles: React.CSSProperties) {
+export function setElementWidths(element: HTMLElement, styles: ColumnWidthStyle) {
   function setProperty(property: 'width' | 'minWidth' | 'maxWidth') {
     const value = styles[property];
     let widthCssValue = '';

diff --git a/src/table/header-cell/index.tsx b/src/table/header-cell/index.tsx
@@ -13,6 +13,7 @@ import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { KeyCode } from '../../internal/keycode';
 import { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
 import { Divider, Resizer } from '../resizer';
 import { StickyColumnsModel } from '../sticky-columns';
@@ -24,7 +25,6 @@ import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableHeaderCellProps<ItemType> {
-  style?: React.CSSProperties;
   tabIndex: number;
   column: TableProps.ColumnDefinition<ItemType>;
   activeSortingColumn?: TableProps.SortingColumn<ItemType>;
@@ -40,6 +40,7 @@ export interface TableHeaderCellProps<ItemType> {
   colIndex: number;
   updateColumn: (columnId: PropertyKey, newWidth: number) => void;
   resizableColumns?: boolean;
+  resizableStyle?: ColumnWidthStyle;
   isEditable?: boolean;
   columnId: PropertyKey;
   stickyState: StickyColumnsModel;
@@ -53,7 +54,6 @@ export interface TableHeaderCellProps<ItemType> {
 }
 
 export function TableHeaderCell<ItemType>({
-  style,
   tabIndex,
   column,
   activeSortingColumn,
@@ -69,6 +69,7 @@ export function TableHeaderCell<ItemType>({
   colIndex,
   updateColumn,
   resizableColumns,
+  resizableStyle,
   onResizeFinish,
   isEditable,
   columnId,
@@ -120,7 +121,7 @@ export function TableHeaderCell<ItemType>({
 
   return (
     <TableThElement
-      style={style}
+      resizableStyle={resizableStyle}
       cellRef={cellRefCombined}
       sortingStatus={sortingStatus}
       sortingDisabled={sortingDisabled}

diff --git a/src/table/header-cell/th-element.tsx b/src/table/header-cell/th-element.tsx
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
 import { getTableColHeaderRoleProps, TableRole } from '../table-role';
@@ -18,7 +19,7 @@ import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableThElementProps {
-  style?: React.CSSProperties;
+  resizableStyle?: ColumnWidthStyle;
   sortingStatus?: SortingStatus;
   sortingDisabled?: boolean;
   focusedComponent?: null | string;
@@ -38,7 +39,7 @@ export interface TableThElementProps {
 }
 
 export function TableThElement({
-  style,
+  resizableStyle,
   sortingStatus,
   sortingDisabled,
   focusedComponent,
@@ -91,7 +92,7 @@ export function TableThElement({
         },
         stickyStyles.className
       )}
-      style={{ ...style, ...stickyStyles.style }}
+      style={{ ...resizableStyle, ...stickyStyles.style }}
       ref={mergedRef}
       {...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}
       tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}

diff --git a/src/table/internal.tsx b/src/table/internal.tsx
@@ -623,15 +623,11 @@ const InternalTable = React.forwardRef(
                                     <TableBodyCell
                                       key={getColumnKey(column, colIndex)}
                                       {...sharedCellProps}
-                                      style={
-                                        resizableColumns
-                                          ? {}
-                                          : {
-                                              width: column.width,
-                                              minWidth: column.minWidth,
-                                              maxWidth: column.maxWidth,
-                                            }
-                                      }
+                                      resizableStyle={{
+                                        width: column.width,
+                                        minWidth: column.minWidth,
+                                        maxWidth: column.maxWidth,
+                                      }}
                                       ariaLabels={ariaLabels}
                                       column={column}
                                       item={row.item}

diff --git a/src/table/styles.scss b/src/table/styles.scss
@@ -53,6 +53,7 @@
 
 .table {
   inline-size: 100%;
+  block-size: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;

diff --git a/src/table/thead.tsx b/src/table/thead.tsx
@@ -124,7 +124,6 @@ const Thead = React.forwardRef(
               <TableHeaderCell
                 {...commonCellProps}
                 key={columnId}
-                style={getColumnStyles(sticky, columnId)}
                 tabIndex={sticky ? -1 : 0}
                 focusedComponent={focusedComponent}
                 column={column}
@@ -137,6 +136,7 @@ const Thead = React.forwardRef(
                 updateColumn={updateColumn}
                 onResizeFinish={() => onResizeFinish(columnWidths)}
                 resizableColumns={resizableColumns}
+                resizableStyle={getColumnStyles(sticky, columnId)}
                 onClick={detail => {
                   setLastUserAction('sorting');
                   fireNonCancelableEvent(onSortingChange, detail);

diff --git a/src/table/use-column-widths.tsx b/src/table/use-column-widths.tsx
@@ -5,15 +5,12 @@ import React, { createContext, useContext, useEffect, useRef, useState } from 'r
 import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
-import { setElementWidths } from './column-widths-utils';
+import { ColumnWidthStyle, setElementWidths } from './column-widths-utils';
 
 export const DEFAULT_COLUMN_WIDTH = 120;
 
-export interface ColumnWidthDefinition {
+export interface ColumnWidthDefinition extends ColumnWidthStyle {
   id: PropertyKey;
-  minWidth?: string | number;
-  maxWidth?: string | number;
-  width?: string | number;
 }
 
 function readWidths(
@@ -61,7 +58,7 @@ function updateWidths(
 }
 
 interface WidthsContext {
-  getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;
+  getColumnStyles(sticky: boolean, columnId: PropertyKey): ColumnWidthStyle;
   columnWidths: Map<PropertyKey, number>;
   updateColumn: (columnId: PropertyKey, newWidth: number) => void;
   setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;
@@ -98,7 +95,7 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain
     }
   };
 
-  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {
+  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): ColumnWidthStyle => {
     const column = visibleColumns.find(column => column.id === columnId);
     if (!column) {
       return {};