style(v2): update style when table.cell use rowspan & add font-sarabu…

…n in table.cell
thinc-org · Nov 10, 2024 · 3a44542 · 3a44542
1 parent 20d7444
commit 3a44542
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/ui/src/components/table/table-cell.svelte b/packages/ui/src/components/table/table-cell.svelte
@@ -11,7 +11,7 @@
 
 <td
   class="{cn(
-    'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-on-surface font-normal text-body1',
+    'p-4 align-middle data-[rowspan=true]:align-top  [&:has([role=checkbox])]:pr-0 text-on-surface font-normal font-sarabun text-body1',
     className,
   )}"
   {...$$restProps}

diff --git a/packages/ui/src/components/table/table.stories.svelte b/packages/ui/src/components/table/table.stories.svelte
@@ -18,7 +18,8 @@ This example demonstrates the use of each sub-component:
 - **Table.Row**: Represents a row within either the header or the body.
 - **Table.Head**: Column headers, typically styled differently from body cells.
 - **Table.Body**: Contains the main content rows.
-- **Table.Cell**: Represents an individual data cell, with support for styling and spans.
+- **Table.Cell**: Represents an individual data cell, with support for styling and spans. 
+**(don't forget to use data-rowspan='true' or 'false' to apply correct style)**
           `,
         },
       },
@@ -44,7 +45,7 @@ This example demonstrates the use of each sub-component:
     </Table.Header>
     <Table.Body>
       <Table.Row class="border-b-0">
-        <Table.Cell rowspan="{2}">INV001</Table.Cell>
+        <Table.Cell data-rowspan="{true}" rowspan="{2}">INV001</Table.Cell>
         <Table.Cell>Paid</Table.Cell>
         <Table.Cell>Credit Card</Table.Cell>
         <Table.Cell>$250.00</Table.Cell>