Fixes border radius on top corners of Table component (#2143)

Also removes `border-radius: inherit` from the `Table` component.
iTwin · Jul 23, 2024 · 88e2826 · 88e2826
1 parent e4b624b
commit 88e2826
Show file tree

Hide file tree

Showing 24 changed files with 30 additions and 20 deletions.
diff --git a/.changeset/brave-pants-drop.md b/.changeset/brave-pants-drop.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Added `border-radius` to the `Table` component so that the border radius is correctly applied to the `Table`'s corners.
diff --git a/.changeset/itchy-pigs-repair.md b/.changeset/itchy-pigs-repair.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+Added `border-radius` to the `.iui-table` class so that the border radius is correctly applied to the table's corners.
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Basic.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Basic.png
diff --git a/...t-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Column Manager.png b/...t-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Column Manager.png
diff --git a/.../react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Condensed.png b/.../react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Condensed.png
diff --git a/...workshop/cypress-visual-screenshots/baseline/Table.test.ts-Controlled State.png b/...workshop/cypress-visual-screenshots/baseline/Table.test.ts-Controlled State.png
diff --git a/...ct-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Disabled Rows.png b/...ct-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Disabled Rows.png
diff --git a/...orkshop/cypress-visual-screenshots/baseline/Table.test.ts-Draggable Columns.png b/...orkshop/cypress-visual-screenshots/baseline/Table.test.ts-Draggable Columns.png
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Editable.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Editable.png
diff --git a/...rkshop/cypress-visual-screenshots/baseline/Table.test.ts-Expandable Subrows.png b/...rkshop/cypress-visual-screenshots/baseline/Table.test.ts-Expandable Subrows.png
diff --git a/...react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Expandable.png b/...react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Expandable.png
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Filters.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Filters.png
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Full.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Full.png
diff --git a/...ct-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Global Filter.png b/...ct-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Global Filter.png
diff --git a/...ct-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Initial State.png b/...ct-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Initial State.png
diff --git a/.../react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Localized.png b/.../react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Localized.png
diff --git a/...orkshop/cypress-visual-screenshots/baseline/Table.test.ts-Resizable Columns.png b/...orkshop/cypress-visual-screenshots/baseline/Table.test.ts-Resizable Columns.png
diff --git a/...workshop/cypress-visual-screenshots/baseline/Table.test.ts-Selectable Multi.png b/...workshop/cypress-visual-screenshots/baseline/Table.test.ts-Selectable Multi.png
diff --git a/...orkshop/cypress-visual-screenshots/baseline/Table.test.ts-Selectable Single.png b/...orkshop/cypress-visual-screenshots/baseline/Table.test.ts-Selectable Single.png
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Sortable.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Sortable.png
diff --git a/...hop/cypress-visual-screenshots/baseline/Table.test.ts-Status And Cell Icons.png b/...hop/cypress-visual-screenshots/baseline/Table.test.ts-Status And Cell Icons.png
diff --git a/...rkshop/cypress-visual-screenshots/baseline/Table.test.ts-Zebra Striped Rows.png b/...rkshop/cypress-visual-screenshots/baseline/Table.test.ts-Zebra Striped Rows.png
diff --git a/packages/itwinui-css/src/table/base.scss b/packages/itwinui-css/src/table/base.scss
@@ -10,6 +10,7 @@
   overflow: auto;
   scrollbar-gutter: stable;
   background-color: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
 
   @include iui-table-cell-icon;
 
@@ -28,8 +29,6 @@
 
   display: flex;
   flex-shrink: 0;
-  border-start-start-radius: var(--iui-border-radius-1);
-  border-start-end-radius: var(--iui-border-radius-1);
 }
 
 @mixin iui-table-header {
@@ -153,10 +152,6 @@
   min-inline-size: 100%;
   display: flex;
 
-  &:last-of-type {
-    border-radius: inherit;
-  }
-
   .iui-table-header & {
     flex-grow: 1;
   }
@@ -308,6 +303,13 @@
     }
     // #endregion Statuses & states
   }
+
+  .iui-table-body:not(:has(+ .iui-table-paginator)) & {
+    &:last-of-type {
+      border-end-start-radius: var(--iui-border-radius-1);
+      border-end-end-radius: var(--iui-border-radius-1);
+    }
+  }
 }
 
 // For content placed after the table body and before the paginator
@@ -360,11 +362,6 @@
     }
   }
 
-  &:last-child {
-    border-end-start-radius: var(--iui-border-radius-1);
-    border-end-end-radius: var(--iui-border-radius-1);
-  }
-
   &.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected='true']) .iui-table-cell {
     background-color: var(--iui-color-background-zebra);
   }
@@ -397,9 +394,19 @@
   position: relative;
   word-break: break-word;
 
+  //Adds the border-radius only to the first and last cells in the last row when the table has no paginator.
+  .iui-table-body:not(:has(+ .iui-table-paginator)) > .iui-table-row:last-of-type & {
+    &:first-of-type {
+      border-end-start-radius: var(--iui-border-radius-1);
+    }
+
+    &:last-of-type {
+      border-end-end-radius: var(--iui-border-radius-1);
+    }
+  }
+
   &:first-of-type {
     border-inline-start: solid 1px transparent;
-    border-end-start-radius: inherit;
   }
 
   &:last-of-type {

diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx
@@ -1152,14 +1152,7 @@ export const Table = <
             (isSelectable && selectionMode === 'multi') || undefined
           }
         >
-          <ShadowRoot
-            css={`
-              div,
-              slot {
-                border-radius: inherit;
-              }
-            `}
-          >
+          <ShadowRoot>
             {enableVirtualization ? (
               <div
                 style={{