fix(TableSection): border-radius (#4462)

lumada-design · Dec 4, 2024 · c9adeda · c9adeda
1 parent d97234c
commit c9adeda
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 67 deletions.
diff --git a/packages/cli/src/templates/DetailsView/Table.tsx b/packages/cli/src/templates/DetailsView/Table.tsx
@@ -9,6 +9,7 @@ import {
   HvTableHead,
   HvTableHeader,
   HvTableRow,
+  HvTableSection,
   useHvData,
   useHvPagination,
 } from "@hitachivantara/uikit-react-core";
@@ -59,42 +60,45 @@ export const Table = ({ modelId }: TableProps) => {
   }, [instance.state]);
 
   return (
-    <HvLoadingContainer hidden={!loading}>
-      <HvTableContainer style={{ padding: "2px" }}>
-        <HvTable {...instance.getTableProps()}>
-          <HvTableHead>
-            <HvTableRow>
-              {columns.map((col) => (
-                <HvTableHeader key={col.Header}>{col.Header}</HvTableHeader>
-              ))}
-            </HvTableRow>
-          </HvTableHead>
-          <HvTableBody {...instance.getTableBodyProps()}>
-            {instance.page.map((row) => {
-              instance.prepareRow(row);
-              const { key, ...rowProps } = row.getRowProps();
-              return (
-                <HvTableRow key={key} {...rowProps}>
-                  {row.cells.map((cell) => {
-                    const { key: cellKey, ...cellProps } = cell.getCellProps();
-                    return (
-                      <HvTableCell key={cellKey} {...cellProps}>
-                        {cell.render("Cell")}
-                      </HvTableCell>
-                    );
-                  })}
-                </HvTableRow>
-              );
-            })}
-          </HvTableBody>
-        </HvTable>
-      </HvTableContainer>
-      {instance.page?.length ? (
-        <HvPagination
-          {...instance.getHvPaginationProps?.()}
-          pageSizeOptions={PAGE_OPTIONS}
-        />
-      ) : undefined}
-    </HvLoadingContainer>
+    <HvTableSection>
+      <HvLoadingContainer hidden={!loading}>
+        <HvTableContainer>
+          <HvTable {...instance.getTableProps()}>
+            <HvTableHead>
+              <HvTableRow>
+                {columns.map((col) => (
+                  <HvTableHeader key={col.Header}>{col.Header}</HvTableHeader>
+                ))}
+              </HvTableRow>
+            </HvTableHead>
+            <HvTableBody {...instance.getTableBodyProps()}>
+              {instance.page.map((row) => {
+                instance.prepareRow(row);
+                const { key, ...rowProps } = row.getRowProps();
+                return (
+                  <HvTableRow key={key} {...rowProps}>
+                    {row.cells.map((cell) => {
+                      const { key: cellKey, ...cellProps } =
+                        cell.getCellProps();
+                      return (
+                        <HvTableCell key={cellKey} {...cellProps}>
+                          {cell.render("Cell")}
+                        </HvTableCell>
+                      );
+                    })}
+                  </HvTableRow>
+                );
+              })}
+            </HvTableBody>
+          </HvTable>
+        </HvTableContainer>
+        {instance.page?.length > 0 && (
+          <HvPagination
+            {...instance.getHvPaginationProps?.()}
+            pageSizeOptions={PAGE_OPTIONS}
+          />
+        )}
+      </HvLoadingContainer>
+    </HvTableSection>
   );
 };
diff --git a/packages/core/src/Table/stories/TableSection/CompleteTableSection.tsx b/packages/core/src/Table/stories/TableSection/CompleteTableSection.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import {
   HvActionGeneric,
   HvBulkActions,
+  HvLoadingContainer,
   HvPagination,
   HvTable,
   HvTableBody,
@@ -113,36 +114,41 @@ export const CompleteTableSection = () => {
           { id: "preview", label: "Preview", icon: <Preview /> },
         ]}
       />
-      <HvTableContainer tabIndex={0}>
-        <HvTable {...getTableProps()}>
-          <HvTableHead>
-            {headerGroups.map((headerGroup) => (
-              <HvTableRow
-                {...headerGroup.getHeaderGroupProps()}
-                key={headerGroup.getHeaderGroupProps().key}
-              >
-                {headerGroup.headers.map((col) => (
-                  <HvTableHeader
-                    {...col.getHeaderProps()}
-                    key={col.getHeaderProps().key}
-                  >
-                    {col.render("Header")}
-                  </HvTableHeader>
-                ))}
-              </HvTableRow>
-            ))}
-          </HvTableHead>
-          <HvTableBody {...getTableBodyProps()}>
-            {pageSize && [...Array(pageSize).keys()].map(renderTableRow)}
-          </HvTableBody>
-        </HvTable>
-      </HvTableContainer>
-      {page?.length ? (
-        <HvPagination
-          {...getHvPaginationProps?.()}
-          labels={{ pageSizePrev: "", pageSizeEntryName: `of ${data.length}` }}
-        />
-      ) : undefined}
+      <HvLoadingContainer hidden>
+        <HvTableContainer tabIndex={0}>
+          <HvTable {...getTableProps()}>
+            <HvTableHead>
+              {headerGroups.map((headerGroup) => (
+                <HvTableRow
+                  {...headerGroup.getHeaderGroupProps()}
+                  key={headerGroup.getHeaderGroupProps().key}
+                >
+                  {headerGroup.headers.map((col) => (
+                    <HvTableHeader
+                      {...col.getHeaderProps()}
+                      key={col.getHeaderProps().key}
+                    >
+                      {col.render("Header")}
+                    </HvTableHeader>
+                  ))}
+                </HvTableRow>
+              ))}
+            </HvTableHead>
+            <HvTableBody {...getTableBodyProps()}>
+              {pageSize && [...Array(pageSize).keys()].map(renderTableRow)}
+            </HvTableBody>
+          </HvTable>
+        </HvTableContainer>
+        {page?.length > 0 && (
+          <HvPagination
+            {...getHvPaginationProps?.()}
+            labels={{
+              pageSizePrev: "",
+              pageSizeEntryName: `of ${data.length}`,
+            }}
+          />
+        )}
+      </HvLoadingContainer>
     </HvTableSection>
   );
 };
diff --git a/packages/core/src/TableSection/TableSection.styles.tsx b/packages/core/src/TableSection/TableSection.styles.tsx
@@ -38,6 +38,8 @@ export const { staticClasses, useClasses } = createClasses("HvTableSection", {
 
     [`& .${tableContainerClasses.root}`]: {
       paddingBottom: 0,
+      borderTopLeftRadius: "inherit",
+      borderTopRightRadius: "inherit",
     },
 
     [`& .${tableHeaderClasses.head}`]: {
@@ -82,6 +84,8 @@ export const { staticClasses, useClasses } = createClasses("HvTableSection", {
       backgroundColor: theme.colors.atmo2,
       padding: theme.space.xs,
       borderTop: `1px solid ${theme.colors.atmo3}`,
+      borderBottomLeftRadius: "inherit",
+      borderBottomRightRadius: "inherit",
     },
 
     [`& .${paginationClasses.pageSizeOptions}`]: {