fix the styling

kadena-community · Dec 5, 2024 · a15d707 · a15d707
1 parent 2a16fe6
commit a15d707
Show file tree

Hide file tree

Showing 13 changed files with 153 additions and 70 deletions.
diff --git a/.changeset/nervous-turtles-heal.md b/.changeset/nervous-turtles-heal.md
@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': minor
+---
+
+add an extra styling variant to the table component
diff --git a/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx b/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx
@@ -10,6 +10,7 @@ const Assets = () => {
   return (
     <>
       <CompactTable
+        variant="open"
         fields={[
           {
             key: 'uuid',

diff --git a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx
@@ -58,6 +58,7 @@ export const AgentsList: FC = () => {
           />
           <SectionCardBody>
             <CompactTable
+              variant="open"
               fields={[
                 {
                   label: 'Name',

diff --git a/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx b/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx
@@ -53,6 +53,7 @@ export const InvestorList: FC = () => {
 
           <SectionCardBody>
             <CompactTable
+              variant="open"
               fields={[
                 {
                   label: 'Name',

diff --git a/packages/libs/kode-ui/src/components/Table/Body.tsx b/packages/libs/kode-ui/src/components/Table/Body.tsx
@@ -10,8 +10,8 @@ import {
   useTableCell,
   useTableRow,
 } from 'react-aria';
-import { ITableProps } from './Table';
-import { tableDataCell, tableRow } from './Table.css';
+import type { ITableProps } from './Table';
+import { spacerClass, tableDataCell, tableRow } from './Table.css';
 
 export interface ITableRowProps<T> {
   item: GridNode<T>;
@@ -39,16 +39,19 @@ export function TableRow<T extends object>({
   const { isHovered, hoverProps } = useHover({ isDisabled: false });
 
   return (
-    <tr
-      className={tableRow}
-      {...mergeProps(rowProps, focusProps, hoverProps)}
-      data-focused={isFocusVisible || undefined}
-      data-hovered={isHovered || undefined}
-      data-selected={isSelected || undefined}
-      ref={ref}
-    >
-      {children}
-    </tr>
+    <>
+      {variant === 'open' && <tr className={spacerClass} />}
+      <tr
+        className={tableRow}
+        {...mergeProps(rowProps, focusProps, hoverProps)}
+        data-focused={isFocusVisible || undefined}
+        data-hovered={isHovered || undefined}
+        data-selected={isSelected || undefined}
+        ref={ref}
+      >
+        {children}
+      </tr>
+    </>
   );
 }
 

diff --git a/packages/libs/kode-ui/src/components/Table/Header.tsx b/packages/libs/kode-ui/src/components/Table/Header.tsx
@@ -8,16 +8,11 @@ import {
   useTableColumnHeader,
   useTableHeaderRow,
 } from 'react-aria';
-import { ITableProps, Stack } from '..';
+import type { ITableProps } from '..';
+import { Stack } from '..';
 
 import { MonoExpandLess, MonoExpandMore } from '@kadena/kode-icons/system';
-import classNames from 'classnames';
-import {
-  columnHeader,
-  defaultHeader,
-  headerBase,
-  subtleHeader,
-} from './Table.css';
+import { columnHeader, headerBase } from './Table.css';
 
 interface ITableHeaderRowProps<T> {
   item: GridNode<T>;

diff --git a/packages/libs/kode-ui/src/components/Table/Table.css.ts b/packages/libs/kode-ui/src/components/Table/Table.css.ts
@@ -13,22 +13,32 @@ export const tableWrapper = style({
   overflowX: 'auto',
 });
 
-export const table = style([
-  {
-    color: token('color.text.base.default'),
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
+export const table = style({
+  color: token('color.text.base.default'),
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+});
+
+export const tableVariants = recipe({
+  base: {},
+  variants: {
+    variant: {
+      default: {},
+      open: {
+        borderCollapse: 'separate',
+      },
+    },
   },
-]);
+  defaultVariants: {
+    variant: 'default',
+  },
+});
 
 const openHeader = style([
   atoms({
-    backgroundColor: 'surface.default',
-    color: 'text.base.@init',
-    paddingBlock: 'n3',
-    paddingInline: 'n4',
-    border: 'hairline',
+    backgroundColor: 'transparent',
   }),
+  {},
 ]);
 
 export const headerBase = recipe({
@@ -112,6 +122,7 @@ export const baseCell = style([
 export const columnHeader = recipe({
   base: [
     baseCell,
+
     {
       textAlign: 'left',
       selectors: {
@@ -129,39 +140,69 @@ export const columnHeader = recipe({
       default: {},
       open: [
         atoms({
-          paddingBlock: 'n3',
-          paddingInline: 'n4',
+          backgroundColor: 'surface.default',
+          color: 'text.base.@init',
+          border: 'hairline',
         }),
+        {
+          borderInlineWidth: '0!important',
+          paddingBlock: token('spacing.n3'),
+          paddingInline: token('spacing.n4'),
+          selectors: {
+            '&:first-child': {
+              borderStartStartRadius: `${token('radius.sm')}!important`,
+              borderEndStartRadius: `${token('radius.sm')}!important`,
+              borderInlineStartWidth: '1px!important',
+            },
+            '&:last-child': {
+              borderStartEndRadius: `${token('radius.sm')}!important`,
+              borderEndEndRadius: `${token('radius.sm')}!important`,
+              borderInlineEndWidth: '1px!important',
+            },
+          },
+        },
       ],
     },
   },
 });
 
-globalStyle(`${headerBase()} th:first-of-type `, {
-  borderTopLeftRadius: token('radius.sm'),
-  borderBottomLeftRadius: token('radius.sm'),
-});
+globalStyle(
+  `${table}:not([data-variant="open"]) ${headerBase()} th:first-of-type `,
+  {
+    borderTopLeftRadius: token('radius.sm'),
+    borderBottomLeftRadius: token('radius.sm'),
+  },
+);
 
-globalStyle(`${headerBase()} th:last-of-type`, {
-  borderTopRightRadius: token('radius.sm'),
-  borderBottomRightRadius: token('radius.sm'),
-});
+globalStyle(
+  `${table}:not([data-variant="open"]) ${headerBase()} th:last-of-type`,
+  {
+    borderTopRightRadius: token('radius.sm'),
+    borderBottomRightRadius: token('radius.sm'),
+  },
+);
 
-globalStyle(`${tableRow} td:first-of-type`, {
-  borderInlineStart: '4px solid transparent',
-  borderTopLeftRadius: token('size.n2'),
-  borderBottomLeftRadius: token('size.n2'),
-});
+globalStyle(
+  `${table}:not([data-variant="open"]) ${tableRow} td:first-of-type`,
+  {
+    borderInlineStart: '4px solid transparent',
+    borderTopLeftRadius: token('size.n2'),
+    borderBottomLeftRadius: token('size.n2'),
+  },
+);
 
-globalStyle(`${tableRow} td:last-of-type`, {
+globalStyle(`${table}:not([data-variant="open"]) ${tableRow} td:last-of-type`, {
   borderInlineEnd: '4px solid transparent',
   borderTopRightRadius: token('size.n2'),
   borderBottomRightRadius: token('size.n2'),
 });
 
-globalStyle(`${table} tbody[data-isstriped="true"] tr:nth-child(even)`, {
-  backgroundColor: token('color.background.surface.default'),
-});
+globalStyle(
+  `${table}:not([data-variant="open"]) tbody[data-isstriped="true"] tr:nth-child(even)`,
+  {
+    backgroundColor: token('color.background.surface.default'),
+  },
+);
 
 export const tableRowContent = style({
   display: 'flex',
@@ -199,8 +240,31 @@ export const tableDataCell = recipe({
       open: [
         atoms({
           paddingBlock: 'n3',
+          paddingInline: 'n4',
+          border: 'hairline',
+          backgroundColor: 'layer.default',
         }),
+        {
+          backdropFilter: 'blur(18px)',
+          borderInlineWidth: '0!important',
+          selectors: {
+            '&:first-child': {
+              borderStartStartRadius: `${token('radius.sm')}!important`,
+              borderEndStartRadius: `${token('radius.sm')}!important`,
+              borderInlineStartWidth: `${token('border.width.hairline')}!important`,
+            },
+            '&:last-child': {
+              borderStartEndRadius: `${token('radius.sm')}!important`,
+              borderEndEndRadius: `${token('radius.sm')}!important`,
+              borderInlineEndWidth: `${token('border.width.hairline')}!important`,
+            },
+          },
+        },
       ],
     },
   },
 });
+
+export const spacerClass = style({
+  height: token('spacing.n2'),
+});
diff --git a/packages/libs/kode-ui/src/components/Table/Table.tsx b/packages/libs/kode-ui/src/components/Table/Table.tsx
@@ -8,7 +8,7 @@ import { useTableState } from 'react-stately';
 
 import { TableCell, TableRow } from './Body';
 import { TableColumnHeader, TableHeaderRow } from './Header';
-import { table, tableWrapper } from './Table.css';
+import { table, tableVariants, tableWrapper } from './Table.css';
 import { TableSelectAllCell } from './TableSelectAllCell';
 import { TableSelectionCell } from './TableSelectionCell';
 
@@ -38,10 +38,16 @@ export function Table<T extends object>(props: ITableProps<T>) {
     <div className={tableWrapper} ref={scrollRef}>
       <table
         {...gridProps}
-        className={classNames(table, props.className, {
-          striped: props.isStriped,
-          compact: props.isCompact,
-        })}
+        data-variant={props.variant}
+        className={classNames(
+          table,
+          tableVariants({ variant: props.variant }),
+          props.className,
+          {
+            striped: props.isStriped,
+            compact: props.isCompact,
+          },
+        )}
         ref={ref}
       >
         <TableRowGroup type="thead">

diff --git a/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx b/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx
@@ -9,7 +9,7 @@ import {
 import type { ICheckboxProps } from '../Form';
 import { Checkbox } from '../Form';
 import type { ITableRowProps } from './Body';
-import { ITableProps } from './Table';
+import type { ITableProps } from './Table';
 import { selectorCell, tableDataCell } from './Table.css';
 
 interface ITableSelectAllCellProps<T> {

diff --git a/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx b/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx
@@ -8,7 +8,7 @@ import { Checkbox } from '../Form';
 import { boxClass, iconClass } from '../Form/RadioGroup/Radio.css';
 import { RadioGroup } from '../Form/RadioGroup/RadioGroup';
 import type { ITableRowProps } from './Body';
-import { ITableProps } from './Table';
+import type { ITableProps } from './Table';
 import { selectorCell, tableDataCell } from './Table.css';
 
 interface ITableSelectionCell<T> {

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ITableProps } from 'src/components';
+import type { ITableProps } from 'src/components';
 import { Media } from './../../components/Media';
 import { CompactTableDesktop } from './CompactTableDesktop/CompactTableDesktop';
 import { CompactTableMobile } from './CompactTableMobile/CompactTableMobile';

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx
@@ -28,11 +28,10 @@ export const CompactTableDesktop: FC<IProps> = ({
 }) => {
   return (
     <Stack
-      padding="sm"
       width="100%"
       flexDirection="column"
       gap="sm"
-      className={tableBorderClass}
+      className={tableBorderClass({ variant })}
     >
       <Table
         aria-label={label}

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts
@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css';
-import { atoms } from './../../../styles';
+import { atoms, recipe } from './../../../styles';
 
 export const tableClass = style({
   width: '100%',
@@ -14,12 +14,20 @@ globalStyle(`${tableClass} td > span`, {
   whiteSpace: 'nowrap',
 });
 
-export const tableBorderClass = style([
-  atoms({
-    borderRadius: 'lg',
-    borderColor: 'base.subtle',
-    borderWidth: 'hairline',
-    borderStyle: 'solid',
-  }),
-  {},
-]);
+export const tableBorderClass = recipe({
+  base: {},
+  variants: {
+    variant: {
+      default: [
+        atoms({
+          padding: 'sm',
+          borderRadius: 'lg',
+          borderColor: 'base.subtle',
+          borderWidth: 'hairline',
+          borderStyle: 'solid',
+        }),
+      ],
+      open: {},
+    },
+  },
+});