From 9d01136a1bd49f7fd9eb86699c684d359215bebf Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Tue, 30 May 2023 01:21:51 +0330
Subject: [PATCH] feat: add outlined and filled variant options to button
 component

---
 .../src/components/Button/Button.classes.ts       |  2 ++
 .../src/components/Button/Button.styles.ts        | 15 ++++++++++++---
 .../lsd-react/src/components/Button/Button.tsx    |  4 +++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/lsd-react/src/components/Button/Button.classes.ts b/packages/lsd-react/src/components/Button/Button.classes.ts
index 42fa8d7..a2c9c4c 100644
--- a/packages/lsd-react/src/components/Button/Button.classes.ts
+++ b/packages/lsd-react/src/components/Button/Button.classes.ts
@@ -5,6 +5,8 @@ export const buttonClasses = {
   medium: `lsd-button--medium`,
   small: `lsd-button--small`,
   withIcon: `lsd-button--with-icon`,
+  outlined: 'lsd-button--outlined',
+  filled: 'lsd-button--filled',
 
   text: `lsd-button__text`,
   icon: `lsd-button__icon`,
diff --git a/packages/lsd-react/src/components/Button/Button.styles.ts b/packages/lsd-react/src/components/Button/Button.styles.ts
index ce56b9d..851884a 100644
--- a/packages/lsd-react/src/components/Button/Button.styles.ts
+++ b/packages/lsd-react/src/components/Button/Button.styles.ts
@@ -4,9 +4,6 @@ import { buttonClasses } from './Button.classes'
 export const ButtonStyles = css`
   .${buttonClasses.root} {
     width: auto;
-    color: rgb(var(--lsd-text-primary));
-    background: none;
-    border: 1px solid rgb(var(--lsd-border-primary));
 
     cursor: pointer;
     padding: 6px 24px;
@@ -65,4 +62,16 @@ export const ButtonStyles = css`
       margin-left: 10px;
     }
   }
+
+  .${buttonClasses.outlined} {
+    background: none;
+    color: rgb(var(--lsd-text-primary));
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  .${buttonClasses.filled} {
+    background: rgb(var(--lsd-surface-secondary));
+    color: rgb(var(--lsd-text-secondary));
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
 `
diff --git a/packages/lsd-react/src/components/Button/Button.tsx b/packages/lsd-react/src/components/Button/Button.tsx
index 6971adf..8007a16 100644
--- a/packages/lsd-react/src/components/Button/Button.tsx
+++ b/packages/lsd-react/src/components/Button/Button.tsx
@@ -6,12 +6,13 @@ import { buttonClasses } from './Button.classes'
 export type ButtonProps = CommonProps &
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: 'large' | 'medium' | 'small'
+    variant?: 'outlined' | 'filled'
     icon?: React.ReactNode
   }
 
 export const Button: React.FC<ButtonProps> & {
   classes: typeof buttonClasses
-} = ({ size = 'medium', icon, children, ...props }) => {
+} = ({ size = 'medium', variant = 'outlined', icon, children, ...props }) => {
   const commonProps = useCommonProps(props)
 
   return (
@@ -23,6 +24,7 @@ export const Button: React.FC<ButtonProps> & {
           props.className,
           buttonClasses.root,
           buttonClasses[size],
+          buttonClasses[variant],
           props.disabled && buttonClasses.disabled,
           icon && buttonClasses.withIcon,
         )}