body cell wrapper inner

cloudscape-design · Nov 28, 2024 · a00bad9 · a00bad9
1 parent e04b439
commit a00bad9
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 52 deletions.
diff --git a/pages/table/cell-permutations.page.tsx b/pages/table/cell-permutations.page.tsx
@@ -12,6 +12,7 @@ import {
   FormField,
   Header,
   Input,
+  Link,
   Slider,
   SpaceBetween,
   StatusIndicator,
@@ -192,37 +193,60 @@ function TableCellsDemo() {
 
   const columnDefinitions: TableProps.ColumnDefinition<number>[] = columns.map(index => {
     const columnId = index.toString();
-    const cellContent = (item: number) =>
-      editedValues[`${columnId}:${item}`] ??
-      `Body cell content ${item}:${index}${index === 1 ? ` (L=${itemLevels[item]})` : ''}${index === 8 ? ' with longer text' : ''}`;
+    const cellRenderer = (() => {
+      const getText = (item: number) =>
+        editedValues[`${columnId}:${item}`] ??
+        `Body cell content ${item}:${index}${index === 1 ? ` (L=${itemLevels[item]})` : ''}${index === 8 ? ' with longer text' : ''}`;
+      switch (index) {
+        case 1:
+          return { type: 'link', getText, render: (item: number) => <Link>{getText(item)}</Link> };
+        case 3:
+          return {
+            type: 'status',
+            getText,
+            render: (item: number) => <StatusIndicator>{getText(item)}</StatusIndicator>,
+          };
+        case 4:
+          return { type: 'right-align', getText, render: () => <Box textAlign="right">{index}</Box> };
+        case 10:
+          return {
+            type: 'actions',
+            getText,
+            render: () => <Button variant="icon" iconName="ellipsis" ariaLabel="Actions" />,
+          };
+        default:
+          return { type: 'text', getText, render: getText };
+      }
+    })();
     return {
       id: columnId,
       header: `Header cell content ${index}${index === 8 ? ' with longer text' : ''}`,
       sortingField: index === 2 ? 'field-1' : index === 3 ? 'field-2' : undefined,
       activeSorting: index === 3,
-      cell: cellContent,
+      cell: item => cellRenderer.render(item),
       verticalAlign: settings.verticalAlign,
-      editConfig: settings.isEditable
-        ? {
-            ariaLabel: 'Edit dialog aria label',
-            editIconAriaLabel: 'Edit icon label',
-            errorIconAriaLabel: 'Edit error icon label',
-            validation(_item, value = '') {
-              if (value.trim() && value.toLowerCase().includes('content')) {
-                return 'Must not include "content"';
-              }
-            },
-            editingCell(item, { currentValue, setValue }: TableProps.CellContext<string>) {
-              return (
-                <Input
-                  autoFocus={true}
-                  value={currentValue ?? cellContent(item)}
-                  onChange={event => setValue(event.detail.value)}
-                />
-              );
-            },
-          }
-        : undefined,
+      editConfig:
+        settings.isEditable && cellRenderer.type !== 'link' && cellRenderer.type !== 'actions'
+          ? {
+              ariaLabel: 'Edit dialog aria label',
+              editIconAriaLabel: 'Edit icon label',
+              errorIconAriaLabel: 'Edit error icon label',
+              validation(_item, value = '') {
+                if (value.trim() && value.toLowerCase().includes('content')) {
+                  return 'Must not include "content"';
+                }
+              },
+              editingCell(item, { currentValue, setValue }: TableProps.CellContext<string>) {
+                return (
+                  <Input
+                    autoFocus={true}
+                    value={currentValue ?? cellRenderer.getText(item)}
+                    onChange={event => setValue(event.detail.value)}
+                  />
+                );
+              },
+            }
+          : undefined,
     };
   });
 

diff --git a/src/table/__tests__/table.test.tsx b/src/table/__tests__/table.test.tsx
@@ -298,7 +298,7 @@ test('should render table with react content', () => {
   ];
   const { wrapper } = renderTable(<Table columnDefinitions={columns} items={defaultItems} />);
   const findCellContent = (row: number, col: number) =>
-    wrapper.findBodyCell(row, col)!.findByClassName(bodyCellStyles['body-cell-content'])!;
+    wrapper.findBodyCell(row, col)!.findByClassName(bodyCellStyles['body-cell-content-inner'])!;
   expect(wrapper.findColumnHeaders().map(getHeaderHtmlContent)).toEqual(['id', 'name', 'Advanced <span>header</span>']);
   expect(wrapper.findRows()).toHaveLength(3);
   expect(findCellContent(1, 3)!.getElement().innerHTML).toEqual('<input readonly="" value="Apples">');

diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
@@ -28,7 +28,7 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
 $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;
+$cell-negative-space: 4px;
 
 @mixin cell-focus-outline {
   @include styles.focus-highlight(calc(-1 * #{awsui.$space-scaled-xxs}));
@@ -99,20 +99,17 @@ $cell-negative-space-vertical: 2px;
 }
 @mixin cell-padding-block($padding) {
   > .body-cell-content {
-    padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
-    margin-block: calc(-1 * #{$cell-negative-space-vertical});
+    padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 @mixin cell-padding-block-start($padding) {
   > .body-cell-content {
-    padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
-    margin-block-start: calc(-1 * #{$cell-negative-space-vertical});
+    padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 @mixin cell-padding-block-end($padding) {
   > .body-cell-content {
-    padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
-    margin-block-end: calc(-1 * #{$cell-negative-space-vertical});
+    padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 
@@ -131,6 +128,21 @@ $cell-negative-space-vertical: 2px;
 
   &-content {
     box-sizing: border-box;
+    block-size: 100%;
+    margin-block: calc(-1 * $cell-negative-space);
+    margin-inline: calc(-1 * $cell-negative-space);
+    display: flex;
+    align-items: center;
+
+    &.body-cell-align-top {
+      align-items: baseline;
+    }
+  }
+  &-content-inner {
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding-block: $cell-negative-space;
+    padding-inline: $cell-negative-space;
 
     &:not(.body-cell-wrap) {
       white-space: nowrap;
@@ -178,20 +190,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;
   }
@@ -428,12 +430,6 @@ $cell-negative-space-vertical: 2px;
       position: sticky;
     }
 
-    &.body-cell-edit-active {
-      > .body-cell-content {
-        overflow: visible;
-      }
-    }
-
     &:not(.body-cell-edit-active) {
       cursor: pointer;
 

diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
@@ -102,7 +102,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
     const Element = isRowHeader ? 'th' : 'td';
     const isVisualRefresh = useVisualRefresh();
 
-    resizableStyle = resizableColumns ? resizableStyle : {};
+    resizableStyle = resizableColumns ? {} : resizableStyle;
 
     nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
 
@@ -139,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}
@@ -161,7 +160,15 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           </div>
         )}
 
-        <div className={clsx(styles['body-cell-content'], wrapLines && styles['body-cell-wrap'])}>{children}</div>
+        <div className={clsx(styles['body-cell-content'], verticalAlign === 'top' && styles['body-cell-align-top'])}>
+          {isEditing ? (
+            children
+          ) : (
+            <div className={clsx(styles['body-cell-content-inner'], wrapLines && styles['body-cell-wrap'])}>
+              {children}
+            </div>
+          )}
+        </div>
       </Element>
     );
   }

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;