body cell wrapper inner

Author: pan-kot

pages/table/cell-permutations.page.tsx

@@ -12,6 +12,7 @@ import {
   FormField,
   Header,
   Input,
+  Link,
   Slider,
   SpaceBetween,
   StatusIndicator,
@@ -192,15 +193,37 @@ 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
         ? {
@@ -216,7 +239,7 @@ function TableCellsDemo() {
               return (
                 <Input
                   autoFocus={true}
-                  value={currentValue ?? cellContent(item)}
+                  value={currentValue ?? cellRenderer.getText(item)}
                   onChange={event => setValue(event.detail.value)}
                 />
               );

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}

src/table/body-cell/styles.scss

@@ -25,11 +25,10 @@ $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;
-
 @mixin cell-focus-outline {
   @include styles.focus-highlight(calc(-1 * #{awsui.$space-scaled-xxs}));
 
@@ -99,20 +98,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 +127,12 @@ $cell-negative-space-vertical: 2px;
 
   &-content {
     box-sizing: border-box;
+    block-size: 100%;
+    align-content: center;
+
+    &.body-cell-align-top {
+      align-content: baseline;
+    }
 
     &:not(.body-cell-wrap) {
       white-space: nowrap;
@@ -178,20 +180,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;
   }
@@ -381,19 +373,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;
@@ -429,9 +408,9 @@ $cell-negative-space-vertical: 2px;
     }
 
     &.body-cell-edit-active {
-      > .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) {

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'],
+            wrapLines && styles['body-cell-wrap']
+          )}
+        >
+          {children}
+        </div>
       </Element>
     );
   }

src/table/styles.scss

@@ -53,6 +53,7 @@
 
 .table {
   inline-size: 100%;
+  block-size: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;