Show column types in table nodes when the table is highlighted

liam-hq · Dec 20, 2024 · ee77b3f · ee77b3f
1 parent f4c6be3
commit ee77b3f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/frontend/.changeset/hungry-dots-help.md b/frontend/.changeset/hungry-dots-help.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Show column types in table nodes when the table is highlighted
diff --git a/...nents/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.module.css b/...nents/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.module.css
@@ -52,7 +52,7 @@
   transition: opacity 300ms var(--default-timing-function);
 }
 
-:global([data-erd='table-node']):hover .columnType {
+:global([data-erd='table-node-highlighted']) .columnType {
   opacity: 1;
 }
 

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
@@ -34,7 +34,7 @@ export const TableNode: FC<Props> = ({ data }) => {
         isTableHighlighted && styles.wrapperHighlighted,
         isActive && styles.wrapperActive,
       )}
-      data-erd="table-node"
+      data-erd={isTableHighlighted && 'table-node-highlighted'}
     >
       <TableHeader data={data} />
       {showMode === 'ALL_FIELDS' && <TableColumnList data={data} />}