fix: fix table icon td (#57)

Co-authored-by: dev-redo <[email protected]>
corca-ai · May 8, 2024 · a94201c · a94201c
1 parent 667bc62
commit a94201c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/components/Table/Td.tsx b/src/components/Table/Td.tsx
@@ -210,16 +210,17 @@ const TABLE_KEBAB_TD_WIDTH: Record<TdSizeType, number> = {
  * @description
  * @property {ReactNode} children - use CDS Kebab component as children
  */
-export const KebabTd = ({ size, children }: { size: TdSizeType; children: ReactNode }) => {
+export const IconTd = ({ size, children }: { size: TdSizeType; children: ReactNode }) => {
   return (
-    <TableKebob valign="middle" height={TABLE_TD_HEIGHT[size]} width={TABLE_KEBAB_TD_WIDTH[size]}>
+    <TableIcon valign="middle" height={TABLE_TD_HEIGHT[size]} width={TABLE_KEBAB_TD_WIDTH[size]}>
       {children}
-    </TableKebob>
+    </TableIcon>
   );
 };
 
-const TableKebob = styled(TableDefaultTd)`
+const TableIcon = styled(TableDefaultTd)`
   text-align: center;
+  vertical-align: middle;
 `;
 
 const Td = {
@@ -230,7 +231,7 @@ const Td = {
   Select: SelectTd,
   Checkbox: CheckboxTd,
   Radio: RadioTd,
-  Kebob: KebabTd,
+  Icon: IconTd,
 };
 
 export default Td;
diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx
@@ -216,9 +216,9 @@ export const Basic = () => {
             <Table.Td.Radio size={size}>
               <Radio.Item value={index} selected onSelect={() => {}} />
             </Table.Td.Radio>
-            <Table.Td.Kebob size={size}>
+            <Table.Td.Icon size={size}>
               <Icon.DotsHori />
-            </Table.Td.Kebob>
+            </Table.Td.Icon>
             <Table.Td.Checkbox size={size}>
               <Checkbox selected onSelect={() => {}} />
             </Table.Td.Checkbox>
@@ -304,9 +304,9 @@ export const ThWithIcon = () => {
                   <Table.Td.Radio size={size}>
                     <Radio.Item value={index} selected onSelect={() => {}} />
                   </Table.Td.Radio>
-                  <Table.Td.Kebob size={size}>
+                  <Table.Td.Icon size={size}>
                     <Icon.DotsHori />
-                  </Table.Td.Kebob>
+                  </Table.Td.Icon>
                   <Table.Td.Checkbox size={size}>
                     <Checkbox selected onSelect={() => {}} />
                   </Table.Td.Checkbox>
@@ -391,9 +391,9 @@ export function Size() {
                   <Table.Td.Radio size={td}>
                     <Radio.Item value={index} selected onSelect={() => {}} />
                   </Table.Td.Radio>
-                  <Table.Td.Kebob size={td}>
+                  <Table.Td.Icon size={td}>
                     <Icon.DotsHori />
-                  </Table.Td.Kebob>
+                  </Table.Td.Icon>
                   <Table.Td.Checkbox size={td}>
                     <Checkbox selected onSelect={() => {}} />
                   </Table.Td.Checkbox>
@@ -478,9 +478,9 @@ export function WithEllipsis() {
             <Table.Td.Radio size={thSize}>
               <Radio.Item value={index} selected onSelect={() => {}} />
             </Table.Td.Radio>
-            <Table.Td.Kebob size={thSize}>
+            <Table.Td.Icon size={thSize}>
               <Icon.DotsHori />
-            </Table.Td.Kebob>
+            </Table.Td.Icon>
             <Table.Td.Checkbox size={thSize}>
               <Checkbox
                 selected={checkedCheckboxList.includes(index)}