#548 - Button - New button variant, UI fixes (#564)

New button variant, UI fixes
livechat · May 23, 2023 · af3e0e3 · af3e0e3
1 parent b43f17a
commit af3e0e3
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 7 deletions.
diff --git 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
@@ -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
@@ -13,7 +13,8 @@ export type ButtonKind =
   | 'plain'
   | 'plain-light'
   | 'subtle'
-  | 'float';
+  | 'float'
+  | 'dotted';
 
 export type ButtonProps = {
   /**