Unverified Commit d35f7b3e authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

feat: Success Button (#283)

parent e2f1d067
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>;
......@@ -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: {},
......
......@@ -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}
......
......@@ -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);
}
}
}
......@@ -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);
......
......@@ -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';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment