body cell wrapper inner

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

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/pages/table/cell-permutations.page.tsx b/pages/table/cell-permutations.page.tsx
@@ -200,7 +200,14 @@ function TableCellsDemo() {
       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 =>
+        index === 3 ? (
+          <StatusIndicator>{cellContent(item)}</StatusIndicator>
+        ) : index === 4 ? (
+          <Box textAlign="right">{index}</Box>
+        ) : (
+          cellContent(item)
+        ),
       verticalAlign: settings.verticalAlign,
       editConfig: settings.isEditable
         ? {

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
@@ -131,6 +131,17 @@ $cell-negative-space-vertical: 2px;
 
   &-content {
     box-sizing: border-box;
+    block-size: 100%;
+    display: flex;
+    align-items: center;
+
+    &.body-cell-align-top {
+      align-items: baseline;
+    }
+  }
+  &-content-inner {
+    box-sizing: border-box;
+    inline-size: 100%;
 
     &:not(.body-cell-wrap) {
       white-space: nowrap;
@@ -189,9 +200,6 @@ $cell-negative-space-vertical: 2px;
   &: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;
   }

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,11 @@ 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'])}>
+          <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;