fix(tables): set SimpleTable.Td line-height & .CellLoader height to 22px

MTES-MCT · May 27, 2024 · 176b161 · 176b161
1 parent 6cc137e
commit 176b161
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>