From 4b559e5b6fe7508db7ac25e53dcba67ac4af90f8 Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@protonmail.com>
Date: Thu, 23 May 2024 16:46:00 +0200
Subject: [PATCH] fix(tables): set SimpleTable.Td line-height & .CellLoader
 height to 22px

---
 src/tables/SimpleTable/CellLoader.tsx             | 2 +-
 src/tables/SimpleTable/Td.tsx                     | 1 +
 stories/tables/SimpleTable/WithLoader.stories.tsx | 7 ++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/tables/SimpleTable/CellLoader.tsx b/src/tables/SimpleTable/CellLoader.tsx
index a3760dc38..0c4ed2463 100644
--- a/src/tables/SimpleTable/CellLoader.tsx
+++ b/src/tables/SimpleTable/CellLoader.tsx
@@ -11,7 +11,7 @@ const cellLoaderAnimation = keyframes`
 `
 export const CellLoader = styled.div`
   background: ${p => p.theme.color.gainsboro};
-  height: 18px;
+  height: 22px;
   overflow: hidden;
   position: relative;
 
diff --git a/src/tables/SimpleTable/Td.tsx b/src/tables/SimpleTable/Td.tsx
index 7bdcab14f..909ba25e1 100644
--- a/src/tables/SimpleTable/Td.tsx
+++ b/src/tables/SimpleTable/Td.tsx
@@ -16,6 +16,7 @@ export const Td = styled.td.attrs<TdProps, TdProps>(props => ({
   color: ${p => p.theme.color.gunMetal};
   font-size: 13px;
   font-weight: 500;
+  line-height: 22px;
   max-width: 0;
   overflow: hidden;
   padding: 10px;
diff --git a/stories/tables/SimpleTable/WithLoader.stories.tsx b/stories/tables/SimpleTable/WithLoader.stories.tsx
index 50296b46d..cd72251ab 100644
--- a/stories/tables/SimpleTable/WithLoader.stories.tsx
+++ b/stories/tables/SimpleTable/WithLoader.stories.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { META_DEFAULTS } from '../../../.storybook/constants'
 import { generateStoryDecorator } from '../../../.storybook/utils/generateStoryDecorator'
-import { SimpleTable } from '../../../src'
+import { Icon, IconButton, SimpleTable, Size } from '../../../src'
 
 import type { Meta } from '@storybook/react'
 
@@ -45,6 +45,7 @@ export function WithLoader() {
         <SimpleTable.Th $width={48}>ID</SimpleTable.Th>
         <SimpleTable.Th $width={240}>Name</SimpleTable.Th>
         <SimpleTable.Th $width={480}>Address</SimpleTable.Th>
+        <SimpleTable.Th $width={44} />
       </SimpleTable.Head>
       <tbody>
         {isLoading &&
@@ -54,6 +55,7 @@ export function WithLoader() {
               <SimpleTable.Td $isLoading />
               <SimpleTable.Td $isLoading />
               <SimpleTable.Td $isLoading />
+              <SimpleTable.Td $isLoading />
             </SimpleTable.BodyTr>
           ))}
         {!isLoading &&
@@ -62,6 +64,9 @@ export function WithLoader() {
               <SimpleTable.Td>{brewery.id}</SimpleTable.Td>
               <SimpleTable.Td>{brewery.name}</SimpleTable.Td>
               <SimpleTable.Td>{`${brewery.street}, ${brewery.city} ${brewery.postalCode}, ${brewery.state}`}</SimpleTable.Td>
+              <SimpleTable.Td>
+                <IconButton Icon={Icon.Check} size={Size.SMALL} />
+              </SimpleTable.Td>
             </SimpleTable.BodyTr>
           ))}
       </tbody>