start with table open variant

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

Hide file tree

Showing 10 changed files with 214 additions and 40 deletions.
diff --git a/packages/libs/kode-ui/src/components/Table/Body.tsx b/packages/libs/kode-ui/src/components/Table/Body.tsx
@@ -10,19 +10,22 @@ import {
   useTableCell,
   useTableRow,
 } from 'react-aria';
+import { ITableProps } from './Table';
 import { tableDataCell, tableRow } from './Table.css';
 
 export interface ITableRowProps<T> {
   item: GridNode<T>;
   state: TableState<T> | TreeGridState<T>;
   children: ReactNode;
   selectionMode: TableProps<T>['selectionMode'];
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableRow<T extends object>({
   item,
   children,
   state,
+  variant,
 }: ITableRowProps<T>) {
   const ref = useRef(null);
   const { rowProps, isSelected } = useTableRow(
@@ -52,11 +55,13 @@ export function TableRow<T extends object>({
 interface ITableCellProps<T> {
   cell: GridNode<T>;
   state: TableState<T>;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableCell<T extends object>({
   cell,
   state,
+  variant = 'default',
 }: ITableCellProps<T>) {
   const ref = useRef(null);
   const { gridCellProps } = useTableCell({ node: cell }, state, ref);
@@ -65,7 +70,7 @@ export function TableCell<T extends object>({
   return (
     <td
       {...mergeProps(gridCellProps, focusProps)}
-      className={tableDataCell}
+      className={tableDataCell({ variant })}
       data-focused={isFocusVisible || undefined}
       ref={ref}
     >

diff --git a/packages/libs/kode-ui/src/components/Table/Header.tsx b/packages/libs/kode-ui/src/components/Table/Header.tsx
@@ -8,7 +8,7 @@ import {
   useTableColumnHeader,
   useTableHeaderRow,
 } from 'react-aria';
-import { Stack } from '..';
+import { ITableProps, Stack } from '..';
 
 import { MonoExpandLess, MonoExpandMore } from '@kadena/kode-icons/system';
 import classNames from 'classnames';
@@ -24,23 +24,24 @@ interface ITableHeaderRowProps<T> {
   state: TableState<T>;
   children: ReactNode;
   isSubtle?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableHeaderRow<T extends object>({
   item,
   state,
   children,
   isSubtle = false,
+  variant = 'default',
 }: ITableHeaderRowProps<T>) {
   const ref = useRef(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
 
+  console.log({ variant });
+
   return (
     <tr
-      className={classNames(headerBase, {
-        [subtleHeader]: isSubtle,
-        [defaultHeader]: !isSubtle,
-      })}
+      className={headerBase({ variant, subtleHeader: isSubtle })}
       {...rowProps}
       ref={ref}
     >
@@ -65,11 +66,13 @@ interface ITableColumnHeaderProps<T> {
   column: GridNode<T>;
   state: TableState<T>;
   isSubtle?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableColumnHeader<T extends object>({
   column,
   state,
+  variant,
 }: ITableColumnHeaderProps<T>) {
   const ref = useRef(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -87,7 +90,7 @@ export function TableColumnHeader<T extends object>({
     <th
       {...mergeProps(columnHeaderProps, focusProps)}
       colSpan={column.colspan}
-      className={columnHeader}
+      className={columnHeader({ variant })}
       style={{
         width: getWidthStyle(column.props.width),
         minWidth: getWidthStyle(column.props.minWidth),

diff --git a/packages/libs/kode-ui/src/components/Table/Table.css.ts b/packages/libs/kode-ui/src/components/Table/Table.css.ts
@@ -1,5 +1,7 @@
 import {
+  atoms,
   globalStyle,
+  recipe,
   style,
   styleVariants,
   token,
@@ -19,24 +21,62 @@ export const table = style([
   },
 ]);
 
-export const headerBase = style([
-  {
-    borderRadius: token('radius.sm'),
-    borderBlockEnd: token('color.border.base.default'),
-    color: token('color.text.base.inverse.default'),
-    backgroundColor: token('color.background.base.inverse.default'),
-  },
-  uiSmallBold,
+const openHeader = style([
+  atoms({
+    backgroundColor: 'surface.default',
+    color: 'text.base.@init',
+    paddingBlock: 'n3',
+    paddingInline: 'n4',
+    border: 'hairline',
+  }),
 ]);
 
-export const subtleHeader = style({
-  color: token('color.text.base.default'),
-  backgroundColor: token('color.background.base.@hover'),
-});
-
-export const defaultHeader = style({
-  color: token('color.text.base.inverse.default'),
-  backgroundColor: token('color.background.base.inverse.default'),
+export const headerBase = recipe({
+  defaultVariants: {
+    variant: 'default',
+  },
+  base: [
+    {
+      borderRadius: token('radius.sm'),
+      borderBlockEnd: token('color.border.base.default'),
+    },
+    uiSmallBold,
+  ],
+  variants: {
+    subtleHeader: {
+      false: {
+        color: token('color.text.base.default'),
+        backgroundColor: token('color.background.base.@hover'),
+      },
+      true: {
+        color: token('color.text.base.inverse.default'),
+        backgroundColor: token('color.background.base.inverse.default'),
+      },
+    },
+    variant: {
+      default: {
+        color: token('color.text.base.inverse.default'),
+        backgroundColor: token('color.background.base.inverse.default'),
+      },
+      open: [],
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        subtleHeader: true,
+        variant: 'open',
+      },
+      style: openHeader,
+    },
+    {
+      variants: {
+        subtleHeader: false,
+        variant: 'open',
+      },
+      style: openHeader,
+    },
+  ],
 });
 
 export const tableRow = style([
@@ -69,27 +109,40 @@ export const baseCell = style([
   },
 ]);
 
-export const columnHeader = style([
-  baseCell,
-  {
-    textAlign: 'left',
-    selectors: {
-      '&[data-multi-column]': {
-        textAlign: 'center',
-      },
-      '&[data-sortable]': {
-        cursor: 'pointer',
+export const columnHeader = recipe({
+  base: [
+    baseCell,
+    {
+      textAlign: 'left',
+      selectors: {
+        '&[data-multi-column]': {
+          textAlign: 'center',
+        },
+        '&[data-sortable]': {
+          cursor: 'pointer',
+        },
       },
     },
+  ],
+  variants: {
+    variant: {
+      default: {},
+      open: [
+        atoms({
+          paddingBlock: 'n3',
+          paddingInline: 'n4',
+        }),
+      ],
+    },
   },
-]);
+});
 
-globalStyle(`${headerBase} th:first-of-type `, {
+globalStyle(`${headerBase()} th:first-of-type `, {
   borderTopLeftRadius: token('radius.sm'),
   borderBottomLeftRadius: token('radius.sm'),
 });
 
-globalStyle(`${headerBase} th:last-of-type`, {
+globalStyle(`${headerBase()} th:last-of-type`, {
   borderTopRightRadius: token('radius.sm'),
   borderBottomRightRadius: token('radius.sm'),
 });
@@ -138,4 +191,16 @@ const dataCell = style({
   },
 });
 
-export const tableDataCell = style([baseCell, dataCell]);
+export const tableDataCell = recipe({
+  base: [baseCell, dataCell],
+  variants: {
+    variant: {
+      default: {},
+      open: [
+        atoms({
+          paddingBlock: 'n3',
+        }),
+      ],
+    },
+  },
+});
diff --git a/packages/libs/kode-ui/src/components/Table/Table.stories.tsx b/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
@@ -109,6 +109,37 @@ export const Primary: Story = {
   },
 };
 
+export const OpenStyle: Story = {
+  name: 'Openstyle Table',
+  args: {
+    isStriped: false,
+    isCompact: false,
+    variant: 'open',
+  },
+  render: (args) => {
+    return (
+      <Table {...args} aria-label="Example static collection table">
+        <TableHeader>
+          {columns.map((column) => (
+            <Column key={column.key} isRowHeader={column.isRowHeader}>
+              {column.name}
+            </Column>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {rows.map((row) => (
+            <Row key={row.id}>
+              <Cell>{row.name}</Cell>
+              <Cell>{row.type}</Cell>
+              <Cell>{row.date}</Cell>
+            </Row>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
 export const Striped: Story = {
   name: 'Striped Table',
   render: () => {

diff --git a/packages/libs/kode-ui/src/components/Table/Table.tsx b/packages/libs/kode-ui/src/components/Table/Table.tsx
@@ -18,6 +18,7 @@ export interface ITableProps<T>
     Omit<ComponentProps<'table'>, 'children'> {
   isStriped?: boolean;
   isCompact?: boolean;
+  variant?: 'default' | 'open';
 }
 
 export function Table<T extends object>(props: ITableProps<T>) {
@@ -50,6 +51,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
             return (
               <React.Fragment key={headerRow.key}>
                 <TableHeaderRow
+                  variant={props.variant}
                   key={headerRow.key}
                   item={headerRow}
                   state={state}
@@ -58,13 +60,15 @@ export function Table<T extends object>(props: ITableProps<T>) {
                   {[...headerRow.childNodes].map((column) =>
                     column.props?.isSelectionCell ? (
                       <TableSelectAllCell
+                        variant={props.variant}
                         key={column.key}
                         column={column}
                         state={state}
                         inverse={alternateRow}
                       />
                     ) : (
                       <TableColumnHeader
+                        variant={props.variant}
                         key={column.key}
                         column={column}
                         state={state}
@@ -82,6 +86,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
         <TableRowGroup isStriped={props.isStriped} type="tbody">
           {[...collection.body.childNodes].map((row) => (
             <TableRow
+              variant={props.variant}
               key={row.key}
               item={row}
               state={state}
@@ -90,13 +95,15 @@ export function Table<T extends object>(props: ITableProps<T>) {
               {[...row.childNodes].map((cell) =>
                 cell.props.isSelectionCell ? (
                   <TableSelectionCell
+                    variant={props.variant}
                     key={cell.key}
                     cell={cell}
                     state={state}
                     selectionMode={props.selectionMode}
                   />
                 ) : (
                   <TableCell
+                    variant={props.variant}
                     key={cell.key}
                     cell={cell}
                     state={state}

diff --git a/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx b/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx
@@ -9,18 +9,21 @@ import {
 import type { ICheckboxProps } from '../Form';
 import { Checkbox } from '../Form';
 import type { ITableRowProps } from './Body';
+import { ITableProps } from './Table';
 import { selectorCell, tableDataCell } from './Table.css';
 
 interface ITableSelectAllCellProps<T> {
   column: GridNode<T>;
   state: ITableRowProps<T>['state'];
   inverse?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableSelectAllCell<T>({
   column,
   state,
   inverse = false,
+  variant,
 }: ITableSelectAllCellProps<T>) {
   const ref = useRef<HTMLTableCellElement | null>(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -34,7 +37,7 @@ export function TableSelectAllCell<T>({
     <th
       {...columnHeaderProps}
       ref={ref}
-      className={classNames(selectorCell.header, tableDataCell)}
+      className={classNames(selectorCell.header, tableDataCell({ variant }))}
     >
       {state.selectionManager.selectionMode === 'single' ? (
         <VisuallyHidden>{checkboxProps['aria-label']}</VisuallyHidden>