feat(ui-components): add info variant and hover state to Button component (#45541)

* add info variant

* add styling for hover state

* feat: add info variant

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

tools/ui-components/src/button/button.stories.tsx

@@ -13,7 +13,7 @@ const story = {
   },
   argTypes: {
     variant: {
-      options: ['primary', 'danger']
+      options: ['primary', 'danger', 'info']
     },
     size: {
       options: ['small', 'medium', 'large']
@@ -36,6 +36,12 @@ Danger.args = {
   children: 'Button'
 };
 
+export const Info = Template.bind({});
+Info.args = {
+  variant: 'info',
+  children: 'Button'
+};
+
 export const Large = Template.bind({});
 Large.args = {
   size: 'large',

tools/ui-components/src/button/button.tsx

@@ -18,7 +18,18 @@ const computeClassNames = ({
       classNames.push(
         'border-default-foreground-danger',
         'bg-default-background-danger',
-        'text-default-foreground-danger'
+        'text-default-foreground-danger',
+        'hover:bg-default-background-danger-hover',
+        'hover:text-default-foreground-danger-hover'
+      );
+      break;
+    case 'info':
+      classNames.push(
+        'border-default-foreground-info',
+        'bg-default-background-info',
+        'text-default-foreground-info',
+        'hover:bg-default-background-info-hover',
+        'hover:text-default-foreground-info-hover'
       );
       break;
     // default variant is 'primary'
@@ -26,7 +37,9 @@ const computeClassNames = ({
       classNames.push(
         'border-default-foreground-secondary',
         'bg-default-background-quaternary',
-        'text-default-foreground-secondary'
+        'text-default-foreground-secondary',
+        'hover:bg-default-background-primary-hover',
+        'hover:text-default-foreground-primary-hover'
       );
   }
 

tools/ui-components/src/button/types.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
 
-export type ButtonVariant = 'primary' | 'danger';
+export type ButtonVariant = 'primary' | 'danger' | 'info';
 
 export type ButtonSize = 'small' | 'medium' | 'large';
 

tools/ui-components/src/colors.css

@@ -96,12 +96,22 @@ div.light {
   --default-foreground-tertiary: var(--gray80);
   --default-foreground-quaternary: var(--gray75);
   --default-foreground-danger: var(--red15);
+  --default-foreground-info: var(--blue30);
 
   --default-background-primary: var(--gray00);
   --default-background-secondary: var(--gray05);
   --default-background-tertiary: var(--gray10);
   --default-background-quaternary: var(--gray15);
   --default-background-danger: var(--red90);
+  --default-background-info: var(--blue90);
+
+  --default-foreground-primary-hover: var(--gray00);
+  --default-foreground-danger-hover: var(--red90);
+  --default-foreground-info-hover: var(--blue90);
+
+  --default-background-primary-hover: var(--gray90);
+  --default-background-danger-hover: var(--red15);
+  --default-background-info-hover: var(--blue30);
 }
 
 html.dark,
@@ -110,10 +120,20 @@ div.dark {
   --default-foreground-secondary: var(--gray05);
   --default-foreground-quaternary: var(--gray15);
   --default-foreground-danger: var(--red90);
+  --default-foreground-info: var(--blue90);
 
   --default-background-primary: var(--gray90);
   --default-background-secondary: var(--gray85);
   --default-background-tertiary: var(--gray80);
   --default-background-quaternary: var(--gray75);
   --default-background-danger: var(--red15);
+  --default-background-info: var(--blue30);
+
+  --default-foreground-primary-hover: var(--gray90);
+  --default-foreground-danger-hover: var(--red15);
+  --default-foreground-info-hover: var(--blue30);
+
+  --default-background-primary-hover: var(--gray00);
+  --default-background-danger-hover: var(--red90);
+  --default-background-info-hover: var(--blue90);
 }

tools/ui-components/tailwind.config.js

@@ -11,16 +11,32 @@ module.exports = {
       transparent: 'transparent',
       'dark-theme-background': 'var(--gray90)',
       'light-theme-background': 'var(--gray00)',
+      // Foreground
       'default-foreground-primary': 'var(--default-foreground-primary)',
       'default-foreground-secondary': 'var(--default-foreground-secondary)',
       'default-foreground-tertiary': 'var(--default-foreground-tertiary)',
       'default-foreground-quaternary': 'var(--default-foreground-quaternary)',
       'default-foreground-danger': 'var(--default-foreground-danger)',
+      'default-foreground-info': 'var(--default-foreground-info)',
+      // Background
       'default-background-primary': 'var(--default-background-primary)',
       'default-background-secondary': 'var(--default-background-secondary)',
       'default-background-tertiary': 'var(--default-background-tertiary)',
       'default-background-quaternary': 'var(--default-background-quaternary)',
       'default-background-danger': 'var(--default-background-danger)',
+      'default-background-info': 'var(--default-background-info)',
+      // Foreground hover
+      'default-foreground-primary-hover':
+        'var(--default-foreground-primary-hover)',
+      'default-foreground-danger-hover':
+        'var(--default-foreground-danger-hover)',
+      'default-foreground-info-hover': 'var(--default-foreground-info-hover)',
+      // Background hover
+      'default-background-primary-hover':
+        'var(--default-background-primary-hover)',
+      'default-background-danger-hover':
+        'var(--default-background-danger-hover)',
+      'default-background-info-hover': 'var(--default-background-info-hover)',
       green: {
         50: 'var(--green05)',
         100: 'var(--green10)',