feat: Success Button (#283)

RocketChat · Sep 15, 2020 · d35f7b3 · d35f7b3
1 parent e2f1d06
commit d35f7b3
Show file tree

Hide file tree

Showing 22 changed files with 85 additions and 0 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png
diff --git a/....loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png b/....loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png
diff --git a/...elage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png b/...elage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png
diff --git a/...oki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Small_Variant.png b/...oki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Small_Variant.png
diff --git a/...age/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Variant.png b/...age/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Variant.png
diff --git a/...elage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png b/...elage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_Success.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_Success.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States.png
diff --git a/.../.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png b/.../.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png
diff --git a/...selage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png b/...selage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png
diff --git a/...loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Small_Variant.png b/...loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Small_Variant.png
diff --git a/...lage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Variant.png b/...lage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Variant.png
diff --git a/...selage/.loki/reference/chrome_laptop_Buttons_Button_States_of_Small_Variant.png b/...selage/.loki/reference/chrome_laptop_Buttons_Button_States_of_Small_Variant.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_Success.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_Success.png
diff --git a/packages/fuselage/src/components/Button/ActionButton.js b/packages/fuselage/src/components/Button/ActionButton.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+import { Button } from '.';
+import { Icon } from '../Icon';
+
+export const ActionButton = ({ icon, ...props }) => <Button {...props} square small flexShrink={0}><Icon name={icon} size='x20'/></Button>;
diff --git a/packages/fuselage/src/components/Button/Button.stories.mdx b/packages/fuselage/src/components/Button/Button.stories.mdx
@@ -36,6 +36,14 @@ Indicates an actionable user action.
   </Story>
 </Canvas>
 
+### Success
+
+<Canvas>
+  <Story name='Success'>
+    <Button success>Button</Button>
+  </Story>
+</Canvas>
+
 ### Danger
 
 <Canvas>
@@ -93,6 +101,7 @@ Indicates an actionable user action.
       'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x20' /> },
       'text + icon': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</> },
       'text + icon + danger': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</>, danger: true },
+      'text + icon + success': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, success: true },
     }}
     yAxis={{
       default: {},
@@ -115,6 +124,7 @@ Indicates an actionable user action.
       'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x16' /> },
       'text + icon': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</> },
       'text + icon + danger': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, danger: true },
+      'text + icon + success': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, success: true },
     }}
     yAxis={{
       default: {},
@@ -137,6 +147,7 @@ Indicates an actionable user action.
       'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x20' /> },
       'text + icon': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</> },
       'text + icon + danger': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</>, danger: true },
+      'text + icon + success': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, success: true },
     }}
     yAxis={{
       default: {},
@@ -159,6 +170,7 @@ Indicates an actionable user action.
       'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x16' /> },
       'text + icon': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</> },
       'text + icon + danger': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, danger: true },
+      'text + icon + success': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, success: true },
     }}
     yAxis={{
       default: {},
@@ -181,6 +193,7 @@ Indicates an actionable user action.
       'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x20' /> },
       'text + icon': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</> },
       'text + icon + danger': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</>, danger: true },
+      'text + icon + success': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, success: true },
     }}
     yAxis={{
       default: {},
@@ -203,6 +216,7 @@ Indicates an actionable user action.
       'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x16' /> },
       'text + icon': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</> },
       'text + icon + danger': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, danger: true },
+      'text + icon + success': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, success: true },
     }}
     yAxis={{
       default: {},

diff --git a/packages/fuselage/src/components/Button/index.js b/packages/fuselage/src/components/Button/index.js
@@ -5,6 +5,7 @@ import { Box } from '../Box';
 
 export const Button = forwardRef(function Button({
   danger,
+  success,
   external,
   ghost,
   is = 'button',
@@ -27,10 +28,13 @@ export const Button = forwardRef(function Button({
     is={is}
     rcx-button
     rcx-button--danger={!primary && danger && !ghost}
+    rcx-button--success={!primary && success && !ghost}
     rcx-button--ghost={!primary && !danger && ghost}
     rcx-button--ghost-danger={!primary && danger && ghost}
+    rcx-button--ghost-success={!primary && success && ghost}
     rcx-button--primary={primary && !danger && !ghost}
     rcx-button--primary-danger={primary && danger && !ghost}
+    rcx-button--primary-success={primary && success && !ghost}
     rcx-button--small={small}
     rcx-button--square={square}
     rcx-button--small-square={small && square}

diff --git a/packages/fuselage/src/components/Button/styles.scss b/packages/fuselage/src/components/Button/styles.scss
@@ -86,6 +86,15 @@
     );
   }
 
+  &--success {
+    color: colors.success(500);
+
+    &.disabled,
+    &:disabled {
+      color: colors.success(100);
+    }
+  }
+
   &--danger {
     color: colors.danger(500);
 
@@ -103,6 +112,10 @@
     @extend %button--danger;
   }
 
+  &--primary-success {
+    @extend %button--success;
+  }
+
   &--ghost {
     border-color: transparent;
     background-color: transparent;
@@ -118,4 +131,15 @@
       color: colors.danger(100);
     }
   }
+
+  &--ghost-success {
+    color: colors.success(500);
+    border-color: transparent;
+    background-color: transparent;
+
+    &.disabled,
+    &:disabled {
+      color: colors.success(100);
+    }
+  }
 }
diff --git a/packages/fuselage/src/components/ButtonGroup/styles.scss b/packages/fuselage/src/components/ButtonGroup/styles.scss
@@ -49,6 +49,10 @@
     }
   }
 
+  .rcx-button-group.rcx-button-group--small > & {
+    margin-inline: lengths.margin(2);
+  }
+
   .rcx-button-group--wrap > & {
     margin-block-end: lengths.margin(16);
     margin-inline-start: lengths.margin(none);

diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js
@@ -4,6 +4,7 @@ export * from './Avatar';
 export * from './Badge';
 export * from './Box';
 export * from './Button';
+export * from './Button/ActionButton';
 export * from './ButtonGroup';
 export * from './Callout';
 export * from './CheckBox';

diff --git a/packages/fuselage/src/styles/primitives/button.scss b/packages/fuselage/src/styles/primitives/button.scss
@@ -88,6 +88,24 @@
   );
 }
 
+%button--success {
+  @include as-button(
+    $background-color: $button-colors-success-background-color,
+    $border-color: $button-colors-success-border-color,
+    $color: $button-colors-success-color,
+    $hover-background-color: $button-colors-success-hover-background-color,
+    $hover-border-color: $button-colors-success-hover-border-color,
+    $active-background-color: $button-colors-success-active-background-color,
+    $active-border-color: $button-colors-success-active-border-color,
+    $focus-background-color: $button-colors-success-focus-background-color,
+    $focus-border-color: $button-colors-success-focus-border-color,
+    $focus-shadow-color: $button-colors-success-focus-shadow-color,
+    $disabled-background-color: $button-colors-success-disabled-background-color,
+    $disabled-border-color: $button-colors-success-disabled-border-color,
+    $disabled-color: $button-colors-success-disabled-color,
+  );
+}
+
 %button--danger {
   @include as-button(
     $background-color: $button-colors-danger-background-color,

diff --git a/packages/fuselage/src/styles/variables/button-colors.scss b/packages/fuselage/src/styles/variables/button-colors.scss
@@ -28,6 +28,20 @@ $button-colors-secondary-disabled-background-color: theme('button-colors-seconda
 $button-colors-secondary-disabled-border-color: theme('button-colors-secondary-disabled-border-color', colors.neutral(100));
 $button-colors-secondary-disabled-color: theme('button-colors-secondary-disabled-color', colors.neutral(400));
 
+$button-colors-success-background-color: theme('button-colors-success-background-color', colors.success(500));
+$button-colors-success-border-color: theme('button-colors-success-border-color', colors.success(500));
+$button-colors-success-color: theme('button-colors-success-color', colors.foreground(alternative));
+$button-colors-success-hover-background-color: theme('button-colors-success-hover-background-color', colors.success(600));
+$button-colors-success-hover-border-color: theme('button-colors-success-hover-border-color', colors.success(600));
+$button-colors-success-active-background-color: theme('button-colors-success-active-background-color', colors.success(700));
+$button-colors-success-active-border-color: theme('button-colors-success-active-border-color', colors.success(700));
+$button-colors-success-focus-background-color: theme('button-colors-success-focus-background-color', colors.success(500));
+$button-colors-success-focus-border-color: theme('button-colors-success-focus-border-color', colors.success(700));
+$button-colors-success-focus-shadow-color: theme('button-colors-success-focus-shadow-color', colors.success(100));
+$button-colors-success-disabled-background-color: theme('button-colors-success-disabled-background-color', colors.success(200));
+$button-colors-success-disabled-border-color: theme('button-colors-success-disabled-border-color', colors.success(200));
+$button-colors-success-disabled-color: theme('button-colors-success-disabled-color', colors.foreground(alternative));
+
 $button-colors-danger-background-color: theme('button-colors-danger-background-color', colors.danger(500));
 $button-colors-danger-border-color: theme('button-colors-danger-border-color', colors.danger(500));
 $button-colors-danger-color: theme('button-colors-danger-color', colors.foreground(alternative));