From b999ad4e042ee21a719459fb0f6c25aa9d54adc0 Mon Sep 17 00:00:00 2001
From: Pete Hampton <pete@clickhouse.com>
Date: Mon, 9 Sep 2024 19:25:04 +0100
Subject: [PATCH] [Table] Add isActive prop to TableRow (#472)

---
 src/components/Table/Table.stories.tsx | 18 ++++++++++++++++++
 src/components/Table/Table.tsx         | 14 +++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 93f5188c..79f12015 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -18,6 +18,24 @@ const rows = [
       { label: "Mexico" },
     ],
   },
+  {
+    id: "row-3",
+    isActive: true,
+    items: [
+      { label: "Alfreds Futterkiste" },
+      { label: "Maria Anders" },
+      { label: "Germany" },
+    ],
+  },
+  {
+    id: "row-4",
+    isDeleted: true,
+    items: [
+      { label: "Centro comercial Moctezuma" },
+      { label: "Francisco Chang" },
+      { label: "Mexico" },
+    ],
+  },
 ];
 
 export default {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 3a906440..619a0b30 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -156,18 +156,23 @@ interface TableRowProps {
   $isSelectable?: boolean;
   $isDeleted?: boolean;
   $isDisabled?: boolean;
+  $isActive?: boolean;
   $showActions?: boolean;
   $rowHeight?: string;
 }
 
 const TableRow = styled.tr<TableRowProps>`
   overflow: hidden;
-  ${({ theme, $isDeleted, $isDisabled, $rowHeight }) => `
+  ${({ theme, $isDeleted, $isDisabled, $isActive, $rowHeight }) => `
     ${$rowHeight ? `height: ${$rowHeight};` : ""}
     background-color: ${theme.click.table.row.color.background.default};
     border-bottom: ${theme.click.table.cell.stroke} solid ${
-    theme.click.table.row.color.stroke.default
-  };
+      theme.click.table.row.color.stroke.default
+    };
+
+    ${$isActive &&
+      `background-color: ${theme.click.table.row.color.background.active};`}
+
     &:active {
       background-color: ${theme.click.table.row.color.background.active};
     }
@@ -366,6 +371,7 @@ export interface TableRowType
   items: Array<TableCellType>;
   isDisabled?: boolean;
   isDeleted?: boolean;
+  isActive?: boolean;
 }
 
 interface CommonTableProps
@@ -422,6 +428,7 @@ const TableBodyRow = ({
   onDelete,
   onEdit,
   isDeleted,
+  isActive,
   isDisabled,
   size,
   actionsList,
@@ -435,6 +442,7 @@ const TableBodyRow = ({
       $isSelectable={isSelectable}
       $isDeleted={isDeleted}
       $isDisabled={isDisabled}
+      $isActive={isActive}
       $showActions={isDeletable || isEditable}
       $rowHeight={rowHeight}
       {...rowProps}