From b241d61bae31d358f2e34b0dd5fee6f48b49b339 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Mon, 22 May 2023 12:29:51 +0200
Subject: [PATCH] New button variant, UI fixes

---
 .../src/components/Button/Button.module.scss  | 46 ++++++++++++++++---
 .../src/components/Button/Button.stories.tsx  | 41 +++++++++++++++++
 .../src/components/Button/Button.tsx          |  3 +-
 3 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/src/components/Button/Button.module.scss b/packages/react-components/src/components/Button/Button.module.scss
index e2913b002..2ffbeb8fd 100644
--- a/packages/react-components/src/components/Button/Button.module.scss
+++ b/packages/react-components/src/components/Button/Button.module.scss
@@ -143,8 +143,8 @@ $base-class: 'btn';
 
   &--large {
     padding: 11px 16px;
-    min-width: 42px;
-    height: 42px;
+    min-width: 44px;
+    height: 44px;
 
     &.#{$base-class}--icon-only {
       padding: 9px;
@@ -249,6 +249,32 @@ $base-class: 'btn';
     }
   }
 
+  &--dotted {
+    border-style: dotted;
+    border-color: var(--border-basic-primary);
+    background-color: var(--btn-basic-background-enabled);
+    color: var(--action-primary-default);
+
+    &:hover {
+      border-color: var(--border-basic-hover);
+      background-color: var(--surface-primary-active);
+      color: var(--action-primary-default);
+    }
+
+    &:active,
+    &:focus {
+      border-color: var(--border-basic-primary);
+      background-color: var(--surface-primary-active);
+      color: var(--action-primary-default);
+    }
+
+    &[aria-disabled='true'] {
+      border-color: var(--border-basic-disabled);
+      background-color: var(--btn-basic-background-enabled);
+      color: var(--action-primary-disabled);
+    }
+  }
+
   &--loading {
     transition: all 0.2s cubic-bezier(0.64, 0, 0.35, 1);
     cursor: progress;
@@ -295,14 +321,12 @@ $base-class: 'btn';
 
     &--left {
       order: -1;
-      margin-right: 5px;
-      margin-left: -4px;
+      margin-right: 4px;
     }
 
     &--right {
       order: 1;
-      margin-right: -4px;
-      margin-left: 5px;
+      margin-left: 4px;
     }
   }
 
@@ -319,6 +343,16 @@ $base-class: 'btn';
         background-color: var(--btn-plain-icon-background-active);
         color: var(--content-invert-primary);
       }
+
+      &.#{$base-class} {
+        &--disabled {
+          &:focus,
+          &:active,
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
     }
 
     .#{$base-class}__icon--left,
diff --git a/packages/react-components/src/components/Button/Button.stories.tsx b/packages/react-components/src/components/Button/Button.stories.tsx
index 9f10e3481..75850064a 100644
--- a/packages/react-components/src/components/Button/Button.stories.tsx
+++ b/packages/react-components/src/components/Button/Button.stories.tsx
@@ -381,6 +381,47 @@ export const KindsAndStates = (): React.ReactElement => (
         icon={<Icon source={MaterialIcons.AddCircle} />}
       />
     </StoryDescriptor>
+    <StoryDescriptor title="Dotted">
+      <Button kind="dotted">Float</Button>
+      <Button disabled kind="dotted">
+        Disabled
+      </Button>
+      <Button loading kind="dotted">
+        Loading
+      </Button>
+    </StoryDescriptor>
+    <StoryDescriptor title="Dotted with icon">
+      <Button kind="dotted" icon={<Icon source={MaterialIcons.AddCircle} />}>
+        Float
+      </Button>
+      <Button
+        disabled
+        kind="dotted"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      >
+        Disabled
+      </Button>
+      <Button
+        loading
+        kind="dotted"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      >
+        Loading
+      </Button>
+    </StoryDescriptor>
+    <StoryDescriptor title="Dotted with icon only">
+      <Button kind="dotted" icon={<Icon source={MaterialIcons.AddCircle} />} />
+      <Button
+        disabled
+        kind="dotted"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      />
+      <Button
+        loading
+        kind="dotted"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      />
+    </StoryDescriptor>
   </div>
 );
 
diff --git a/packages/react-components/src/components/Button/Button.tsx b/packages/react-components/src/components/Button/Button.tsx
index 1ad9060cc..831cba85a 100644
--- a/packages/react-components/src/components/Button/Button.tsx
+++ b/packages/react-components/src/components/Button/Button.tsx
@@ -13,7 +13,8 @@ export type ButtonKind =
   | 'plain'
   | 'plain-light'
   | 'subtle'
-  | 'float';
+  | 'float'
+  | 'dotted';
 
 export type ButtonProps = {
   /**