feat: Success Button (#283)

Author: ggazzo

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png

@@ -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>;

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png

@@ -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: {},

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png

@@ -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}

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Small_Variant.png

@@ -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);
+    }
+  }
 }

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Variant.png

@@ -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);

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png

@@ -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';

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_Success.png

@@ -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,

packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States.png

@@ -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));