fix:add icon sizes, table checkbox padding not align for sm size, tab…

deepfence_frontend/packages/ui-components/src/components/button/Button.stories.tsx

@@ -18,6 +18,40 @@ Default.args = {
   children: 'Button text md',
 };
 
+export const XsSize = Template.bind({});
+XsSize.args = {
+  children: 'Button text md',
+  endIcon: <FaAmazon />,
+  size: 'xs',
+};
+
+export const SMSize = Template.bind({});
+SMSize.args = {
+  children: 'Button text md',
+  endIcon: <FaAmazon />,
+  size: 'sm',
+};
+
+export const MDSize = Template.bind({});
+MDSize.args = {
+  children: 'Button text md',
+  endIcon: <FaAmazon />,
+};
+
+export const LGSize = Template.bind({});
+LGSize.args = {
+  children: 'Button text md',
+  endIcon: <FaAmazon />,
+  size: 'lg',
+};
+
+export const XLSize = Template.bind({});
+XLSize.args = {
+  children: 'Button text md',
+  endIcon: <FaAmazon />,
+  size: 'xl',
+};
+
 export const NormalButton = Template.bind({});
 NormalButton.args = {
   children: 'Normal text md',
@@ -112,8 +146,8 @@ PrimaryWithBothIcon.args = {
   endIcon: <FaAmazon />,
 };
 
-export const DefaultWithIcon = Template.bind({});
-DefaultWithIcon.args = {
+export const XSWithIcon = Template.bind({});
+XSWithIcon.args = {
   children: 'Button text',
   size: 'xs',
   startIcon: <FaAmazon />,

deepfence_frontend/packages/ui-components/src/components/button/Button.tsx

@@ -1,5 +1,6 @@
 import { cva, VariantProps } from 'cva';
 import React, { ComponentProps, useId } from 'react';
+import { IconContext } from 'react-icons';
 import { twMerge } from 'tailwind-merge';
 
 import { ObjectWithNonNullableValues } from '@/types/utils';
@@ -156,11 +157,11 @@ interface ButtonProps
 const iconCva = cva('', {
   variants: {
     size: {
-      xs: '',
-      sm: '',
-      md: '',
-      lg: '',
-      xl: '',
+      xs: 'w-3 h-3',
+      sm: 'w-3.5 h-3.5',
+      md: 'w-4.5 h-4.5',
+      lg: 'w-5.5 h-5.5',
+      xl: 'w-5.5 h-5.5',
     },
     withStartIcon: {
       true: '',
@@ -229,30 +230,36 @@ interface IconProps extends VariantProps<typeof iconCva> {
 
 const StartIcon = ({ id, startIcon, endIcon, size }: IconProps) => {
   return (
-    <span
-      className={iconCva({
-        size,
-        withStartIcon: !!startIcon,
-        withEndIcon: !!endIcon,
-      })}
-      data-testid={`button-icon-start-${id}`}
-    >
-      {startIcon}
+    <span data-testid={`button-icon-start-${id}`}>
+      <IconContext.Provider
+        value={{
+          className: iconCva({
+            size,
+            withStartIcon: !!startIcon,
+            withEndIcon: !!endIcon,
+          }),
+        }}
+      >
+        {startIcon}
+      </IconContext.Provider>
     </span>
   );
 };
 
 const EndIcon = ({ id, size, startIcon, endIcon }: IconProps) => {
   return (
-    <span
-      className={iconCva({
-        size,
-        withStartIcon: !!startIcon,
-        withEndIcon: !!endIcon,
-      })}
-      data-testid={`button-icon-end-${id}`}
-    >
-      {endIcon}
+    <span data-testid={`button-icon-end-${id}`}>
+      <IconContext.Provider
+        value={{
+          className: iconCva({
+            size,
+            withStartIcon: !!startIcon,
+            withEndIcon: !!endIcon,
+          }),
+        }}
+      >
+        {endIcon}
+      </IconContext.Provider>
     </span>
   );
 };

deepfence_frontend/packages/ui-components/src/components/table/Table.stories.tsx

@@ -24,6 +24,11 @@ type Fruit = {
 const Template: ComponentStory<typeof Table<Fruit>> = (args) => {
   const columnHelper = createColumnHelper<Fruit>();
 
+  const checkboxRow = getRowSelectionColumn(columnHelper, {
+    size: 100,
+    minSize: 100,
+    maxSize: 100,
+  });
   const columns = useMemo(
     () => [
       columnHelper.accessor('id', {
@@ -42,6 +47,9 @@ const Template: ComponentStory<typeof Table<Fruit>> = (args) => {
     ],
     [],
   );
+  if (args.enableRowSelection) {
+    columns.unshift(checkboxRow);
+  }
   return (
     <Table
       {...args}
@@ -73,6 +81,11 @@ Default.args = {};
 export const SmallTable = Template.bind({});
 SmallTable.args = {
   size: 'sm',
+  enableRowSelection: true,
+  rowSelectionState: {},
+  onRowSelectionChange: () => {
+    return false;
+  },
 };
 
 export const StripedTable = Template.bind({});

deepfence_frontend/packages/ui-components/src/components/table/Table.tsx

@@ -251,8 +251,8 @@ function Th<TData>({
       onClick={header.column.getToggleSortingHandler()}
     >
       <div
-        className={cx(`w-full h-full flex`, {
-          ['p-3']: size === 'sm',
+        className={cx(`w-full h-full flex px-4`, {
+          ['py-3']: size === 'sm',
           ['p-4']: size === 'md',
         })}
       >
@@ -360,12 +360,16 @@ function Td<TData>({
     <td
       key={cell.id}
       style={{ width: cell.column.getSize() }}
-      className={cx(`text-sm text-gray-900 dark:text-white`, Typography.weight.normal, {
-        'border-b border-gray-200 dark:border-gray-700':
-          !striped && rowIdx !== totalRows - 1,
-        ['p-2']: size === 'sm',
-        ['p-4']: size === 'md',
-      })}
+      className={cx(
+        `text-sm text-gray-900 dark:text-white px-4`,
+        Typography.weight.normal,
+        {
+          'border-b border-gray-200 dark:border-gray-700':
+            !striped && rowIdx !== totalRows - 1,
+          ['py-2']: size === 'sm',
+          ['p-4']: size === 'md',
+        },
+      )}
     >
       {flexRender(cell.column.columnDef.cell, cell.getContext())}
     </td>

deepfence_frontend/packages/ui-components/src/components/table/__snapshots__/table.test.tsx.snap

@@ -1,35 +1,35 @@
 // Vitest Snapshot v1
 
-exports[`Component Table > should render a basic table > cells with border 0 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white font-normal border-b border-gray-200 dark:border-gray-700 p-4\\">0</td>"`;
+exports[`Component Table > should render a basic table > cells with border 0 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white px-4 font-normal border-b border-gray-200 dark:border-gray-700 p-4\\">0</td>"`;
 
-exports[`Component Table > should render a basic table > cells with border 1 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white font-normal border-b border-gray-200 dark:border-gray-700 p-4\\">Fruit 0</td>"`;
+exports[`Component Table > should render a basic table > cells with border 1 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white px-4 font-normal border-b border-gray-200 dark:border-gray-700 p-4\\">Fruit 0</td>"`;
 
-exports[`Component Table > should render a basic table > cells with border 2 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white font-normal border-b border-gray-200 dark:border-gray-700 p-4\\">Description for 0</td>"`;
+exports[`Component Table > should render a basic table > cells with border 2 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white px-4 font-normal border-b border-gray-200 dark:border-gray-700 p-4\\">Description for 0</td>"`;
 
-exports[`Component Table > should render a basic table > cells without border 3 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white font-normal p-4\\">1</td>"`;
+exports[`Component Table > should render a basic table > cells without border 3 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white px-4 font-normal p-4\\">1</td>"`;
 
-exports[`Component Table > should render a basic table > cells without border 4 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white font-normal p-4\\">Fruit 1</td>"`;
+exports[`Component Table > should render a basic table > cells without border 4 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white px-4 font-normal p-4\\">Fruit 1</td>"`;
 
-exports[`Component Table > should render a basic table > cells without border 5 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white font-normal p-4\\">Description for 1</td>"`;
+exports[`Component Table > should render a basic table > cells without border 5 1`] = `"<td style=\\"width: 150px;\\" class=\\"text-sm text-gray-900 dark:text-white px-4 font-normal p-4\\">Description for 1</td>"`;
 
 exports[`Component Table > should render a basic table > row with hover state on normal table 1`] = `
 <tr
   class="hover:!bg-gray-100 dark:hover:!bg-gray-600 transition-colors"
 >
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     1
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Fruit 1
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Description for 1
@@ -39,7 +39,7 @@ exports[`Component Table > should render a basic table > row with hover state on
 
 exports[`Component Table > should render a striped table > cells should not have border 1`] = `
 <td
-  class="text-sm text-gray-900 dark:text-white font-normal p-4"
+  class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
   style="width: 150px;"
 >
   Fruit 0
@@ -51,19 +51,19 @@ exports[`Component Table > should render a striped table > even rows should have
   class="bg-gray-50 dark:bg-gray-700 hover:!bg-gray-100 dark:hover:!bg-gray-600 transition-colors"
 >
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     1
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Fruit 1
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Description for 1
@@ -76,19 +76,19 @@ exports[`Component Table > should render a striped table > odd rows should have
   class="hover:!bg-gray-100 dark:hover:!bg-gray-600 transition-colors"
 >
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     0
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Fruit 0
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Description for 0
@@ -101,19 +101,19 @@ exports[`Component Table > should render a striped table > row with hover state
   class="bg-gray-50 dark:bg-gray-700 hover:!bg-gray-100 dark:hover:!bg-gray-600 transition-colors"
 >
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     1
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Fruit 1
   </td>
   <td
-    class="text-sm text-gray-900 dark:text-white font-normal p-4"
+    class="text-sm text-gray-900 dark:text-white px-4 font-normal p-4"
     style="width: 150px;"
   >
     Description for 1

deepfence_frontend/packages/ui-components/src/components/tabs/Tabs.tsx

@@ -30,9 +30,9 @@ const classes = {
 };
 
 const Tabs = (props: TabProps) => {
-  const { tabs, value, defaultValue, size = 'sm', children, ...rest } = props;
+  const { tabs, value, size = 'sm', children, ...rest } = props;
   return (
-    <TabsPrimitive.Root defaultValue={defaultValue} {...rest} data-testid={'tabs-testid'}>
+    <TabsPrimitive.Root {...rest} data-testid={'tabs-testid'} value={value}>
       <TabsPrimitive.List
         className={cx(
           'inline-flex gap-x-8 border-b bg-transparent border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 dark:bg-gray-900',