add hover state

kadena-community · Dec 5, 2024 · 21cd1c5 · 21cd1c5
1 parent 1ed2228
commit 21cd1c5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/packages/libs/kode-ui/src/components/Table/Table.css.ts b/packages/libs/kode-ui/src/components/Table/Table.css.ts
@@ -242,9 +242,9 @@ export const tableDataCell = recipe({
           paddingBlock: 'n3',
           paddingInline: 'n4',
           border: 'hairline',
-          backgroundColor: 'layer.default',
         }),
         {
+          backgroundColor: token('color.background.layer.default'),
           backdropFilter: 'blur(18px)',
           borderInlineWidth: '0!important',
           selectors: {
@@ -258,6 +258,9 @@ export const tableDataCell = recipe({
               borderEndEndRadius: `${token('radius.sm')}!important`,
               borderInlineEndWidth: `${token('border.width.hairline')}!important`,
             },
+            [`${tableRow}[data-hovered] &`]: {
+              backgroundColor: token('color.neutral.n1@alpha80'),
+            },
           },
         },
       ],

diff --git a/packages/libs/kode-ui/src/components/Table/Table.stories.tsx b/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
@@ -73,6 +73,12 @@ const meta: Meta<typeof Table> = {
       },
       options: ['single', 'multiple', 'none'],
     },
+    variant: {
+      control: {
+        type: 'radio',
+      },
+      options: ['default', 'open'],
+    },
   },
 };
 

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
@@ -26,7 +26,7 @@ const meta: Meta<ICompactTableProps> = {
     },
     variant: {
       control: {
-        type: 'select',
+        type: 'radio',
       },
       options: ['default', 'open'],
     },
@@ -79,10 +79,11 @@ export const Primary: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -113,10 +114,11 @@ export const FormatLink: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -150,10 +152,11 @@ export const FormatStatus: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -193,10 +196,11 @@ export const FormatMultiStepTx: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -236,10 +240,11 @@ export const FormatAmount: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -280,10 +285,11 @@ export const FormatWithkeyArray: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -317,13 +323,14 @@ export const FormatWithAction: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     const callAction = (value: any) => {
       alert(value);
     };
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {