feat(Table): table size supported

gravity-ui · Sep 17, 2024 · 343025e · 343025e
1 parent ffd60ca
commit 343025e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -16,10 +16,20 @@ $block: '.#{variables.$ns}styled-table';
         @include mixins.text-subheader-1();
     }
 
+    &_size {
+        &_s {
+            --_--cell-padding: 7px var(--g-spacing-2) 6px;
+        }
+
+        &_m {
+            --_--cell-padding: 11px var(--g-spacing-2) 10px;
+        }
+    }
+
     &__cell,
     &__header-cell,
     &__footer-cell {
-        padding: 11px var(--g-spacing-2) 10px;
+        padding: var(--_--cell-padding);
         border-block-end: 1px solid var(--g-color-line-generic);
     }
 }
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -4,11 +4,15 @@ import {BaseTable} from '../BaseTable';
 import type {BaseTableProps} from '../BaseTable';
 
 import {b} from './Table.classname';
+import type {TableSize} from './types';
 
 import './Table.scss';
 
 export interface TableProps<TData, TScrollElement extends Element | Window = HTMLDivElement>
-    extends BaseTableProps<TData, TScrollElement> {}
+    extends BaseTableProps<TData, TScrollElement> {
+    /** Table size */
+    size?: TableSize;
+}
 
 export const Table = React.forwardRef(
     <TData, TScrollElement extends Element | Window = HTMLDivElement>(
@@ -18,6 +22,7 @@ export const Table = React.forwardRef(
             footerCellClassName: footerCellClassNameProp,
             headerCellClassName: headerCellClassNameProp,
             headerClassName,
+            size = 'm',
             ...props
         }: TableProps<TData, TScrollElement>,
         ref: React.Ref<HTMLTableElement>,
@@ -49,7 +54,7 @@ export const Table = React.forwardRef(
         return (
             <BaseTable
                 ref={ref}
-                className={b(null, className)}
+                className={b({size}, className)}
                 cellClassName={cellClassName}
                 footerCellClassName={footerCellClassName}
                 headerCellClassName={headerCellClassName}

diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
@@ -1 +1,2 @@
 export * from './Table';
+export * from './types';
diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
@@ -0,0 +1 @@
+export type TableSize = 's' | 'm';