feat(table): support interactive and selected ui, adjust font and spacings

Author: abelflopes

packages/components/base/src/table/THead/index.module.scss

@@ -10,7 +10,7 @@
 
   // td / th
   > * > * {
-    background-color: theme.get-color(neutral-light-300);
+    background-color: theme.get-color(neutral-light-200);
 
     &:first-child {
       border-top-left-radius: inherit;

packages/components/base/src/table/Table/index.module.scss

@@ -85,31 +85,35 @@
 }
 
 .skin_bordered {
-  @include scss-utils.define-css-var(table, border-color, theme.get-color(neutral-light-400-solid));
+  @include scss-utils.define-css-var(table, border-color, theme.get-color(neutral-light-300-solid));
 }
 
 // Spacing
 
 .spacing_default {
-  @include scss-utils.define-css-var(table, spacing, theme.get-spacing());
+  @include scss-utils.define-css-var(table, spacing, theme.get-spacing(1.5));
+  @include scss-utils.define-css-var(table, min-height, theme.get-spacing(5));
 }
 
 .spacing_compact {
-  @include scss-utils.define-css-var(table, spacing, theme.get-spacing(0.5));
+  @include scss-utils.define-css-var(table, spacing, theme.get-spacing(1));
+  @include scss-utils.define-css-var(table, min-height, theme.get-spacing(4));
 }
 
 // Table
 
 .table {
-  @include text.text-base;
+  @include text.text-base(small);
 
   width: 100%;
   border-radius: inherit;
   border-collapse: collapse;
 
   td,
   th {
-    padding: scss-utils.get-css-var(table, spacing);
+    box-sizing: border-box;
+    height: scss-utils.get-css-var(table, min-height);
+    padding: calc(scss-utils.get-css-var(table, spacing) / 2) scss-utils.get-css-var(table, spacing);
 
     &:not(:last-child) {
       border-right: solid scss-utils.get-css-var(spacing, border)

packages/components/base/src/table/Tr/index.module.scss

@@ -0,0 +1,9 @@
+@use "@react-ck/theme";
+
+.selected {
+  background-color: theme.get-color(highlight-primary-light);
+}
+
+.interactive {
+  cursor: pointer;
+}

packages/components/base/src/table/Tr/index.tsx

@@ -1,7 +1,28 @@
 import React from "react";
+import classNames from "classnames";
+import styles from "./index.module.scss";
 
 /** Props for configuring a table row */
-export type TrProps = React.HTMLAttributes<HTMLTableRowElement>;
+export type TrProps = React.HTMLAttributes<HTMLTableRowElement> & {
+  /** Whether the row is selected */
+  selected?: boolean;
+  /** Whether the row is interactive */
+  interactive?: boolean;
+};
 
 /** Standard table row component */
-export const Tr = (props: Readonly<TrProps>): React.ReactElement => <tr {...props} />;
+export const Tr = ({
+  selected = false,
+  interactive = false,
+  className,
+  ...props
+}: Readonly<TrProps>): React.ReactElement => (
+  <tr
+    className={classNames(
+      selected && styles.selected,
+      interactive && styles.interactive,
+      className,
+    )}
+    {...props}
+  />
+);

packages/docs/stories/src/generic-table.stories.tsx

@@ -34,7 +34,7 @@ const children = [
   </Table.Thead>,
   <Table.TBody key="body">
     {Object.keys(Array.from({ length: rows })).map((r) => (
-      <Table.Tr key={r}>
+      <Table.Tr key={r} selected={r === "1"} interactive={Number(r) < rows / 2}>
         {Object.keys(Array.from({ length: columns })).map((i) => (
           <Table.Td key={i}>{faker.company.catchPhraseDescriptor()}</Table.Td>
         ))}