body cell wrapper inner

cloudscape-design · Nov 26, 2024 · 4de7d75 · 4de7d75
1 parent e04b439
commit 4de7d75
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
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,16 @@ $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;
 
     &:not(.body-cell-wrap) {
       white-space: nowrap;
@@ -189,9 +199,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
@@ -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;