From a15d707c9344b072c61d951da5a98638944aaf94 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Thu, 5 Dec 2024 15:07:44 +0100 Subject: [PATCH] fix the styling --- .changeset/nervous-turtles-heal.md | 5 + .../rwa-demo/src/app/(app)/assets/page.tsx | 1 + .../src/components/AgentsList/AgentsList.tsx | 1 + .../components/InvestorList/InvestorList.tsx | 1 + .../kode-ui/src/components/Table/Body.tsx | 27 ++-- .../kode-ui/src/components/Table/Header.tsx | 11 +- .../kode-ui/src/components/Table/Table.css.ts | 124 +++++++++++++----- .../kode-ui/src/components/Table/Table.tsx | 16 ++- .../components/Table/TableSelectAllCell.tsx | 2 +- .../components/Table/TableSelectionCell.tsx | 2 +- .../patterns/CompactTable/CompactTable.tsx | 2 +- .../CompactTableDesktop.tsx | 3 +- .../CompactTableDesktop/styles.css.ts | 28 ++-- 13 files changed, 153 insertions(+), 70 deletions(-) create mode 100644 .changeset/nervous-turtles-heal.md diff --git a/.changeset/nervous-turtles-heal.md b/.changeset/nervous-turtles-heal.md new file mode 100644 index 0000000000..6bb663b972 --- /dev/null +++ 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 index 75f529954b..d5f383a94e 100644 --- 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 ( <> { /> { { item: GridNode; @@ -39,16 +39,19 @@ export function TableRow({ const { isHovered, hoverProps } = useHover({ isDisabled: false }); return ( - - {children} - + <> + {variant === 'open' && } + + {children} + + ); } diff --git a/packages/libs/kode-ui/src/components/Table/Header.tsx b/packages/libs/kode-ui/src/components/Table/Header.tsx index 2ea98096ee..a9deea08a5 100644 --- 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 { item: GridNode; diff --git a/packages/libs/kode-ui/src/components/Table/Table.css.ts b/packages/libs/kode-ui/src/components/Table/Table.css.ts index 5cdbe33d75..76b66e8f87 100644 --- 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 index 8062a5d8ee..142a6340f1 100644 --- 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(props: ITableProps) {
diff --git a/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx b/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx index 7393815c80..5034b5ef85 100644 --- 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 { diff --git a/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx b/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx index 26bc75aa77..7628d15619 100644 --- 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 { diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx index 9d09d8bf54..3e80340caa 100644 --- 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 index 53934ba0ec..7be5f91545 100644 --- 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 = ({ }) => { return (
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: {}, + }, + }, +});