#543 - Button - Create Float button (#544)

livechat · May 18, 2023 · 204d4c9 · 204d4c9
1 parent 87e57ca
commit 204d4c9
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/packages/react-components/src/components/Button/Button.module.scss b/packages/react-components/src/components/Button/Button.module.scss
@@ -226,6 +226,29 @@ $base-class: 'btn';
     }
   }
 
+  &--float {
+    border-radius: 100px;
+    border-color: transparent;
+    box-shadow: var(--shadow-float);
+    background-color: var(--surface-primary-default);
+    color: var(--content-basic-primary);
+
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: transparent;
+      background-color: var(--surface-primary-hover);
+      color: var(--content-basic-primary);
+    }
+
+    &[aria-disabled='true'] {
+      border-color: transparent;
+      box-shadow: none;
+      background-color: transparent;
+      color: var(--content-basic-disabled);
+    }
+  }
+
   &--loading {
     transition: all 0.2s cubic-bezier(0.64, 0, 0.35, 1);
     cursor: progress;

diff --git a/packages/react-components/src/components/Button/Button.stories.tsx b/packages/react-components/src/components/Button/Button.stories.tsx
@@ -339,6 +339,48 @@ export const KindsAndStates = (): React.ReactElement => (
         icon={<Icon source={MaterialIcons.AddCircle} />}
       />
     </StoryDescriptor>
+    <StoryDescriptor title="Float">
+      <Button kind="float">Float</Button>
+
+      <Button disabled kind="float">
+        Disabled
+      </Button>
+      <Button loading kind="float">
+        Loading
+      </Button>
+    </StoryDescriptor>
+    <StoryDescriptor title="Float with icon">
+      <Button kind="float" icon={<Icon source={MaterialIcons.AddCircle} />}>
+        Float
+      </Button>
+      <Button
+        disabled
+        kind="float"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      >
+        Disabled
+      </Button>
+      <Button
+        loading
+        kind="float"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      >
+        Loading
+      </Button>
+    </StoryDescriptor>
+    <StoryDescriptor title="Float with icon only">
+      <Button kind="float" icon={<Icon source={MaterialIcons.AddCircle} />} />
+      <Button
+        disabled
+        kind="float"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      />
+      <Button
+        loading
+        kind="float"
+        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
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import cx from 'clsx';
 import { Loader } from '../Loader';
-import { Size } from 'utils';
 import styles from './Button.module.scss';
+import { Size } from 'utils';
 
 export type ButtonKind =
   | 'basic'
@@ -12,7 +12,8 @@ export type ButtonKind =
   | 'text'
   | 'plain'
   | 'plain-light'
-  | 'subtle';
+  | 'subtle'
+  | 'float';
 
 export type ButtonProps = {
   /**