mirror of
https://github.com/twentyhq/twenty.git
synced 2024-11-22 11:43:34 +03:00
[4725] Inverted Variants of buttons (#5671)
Resolves #4725 --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Hinson Chan
GitHub
parent
9567103d5f
commit
c76bc4729d
@ -16,6 +16,7 @@ export type ButtonProps = {
|
||||
title?: string;
|
||||
fullWidth?: boolean;
|
||||
variant?: ButtonVariant;
|
||||
inverted?: boolean;
|
||||
size?: ButtonSize;
|
||||
position?: ButtonPosition;
|
||||
accent?: ButtonAccent;
|
||||
@ -36,6 +37,7 @@ const StyledButton = styled('button', {
|
||||
ButtonProps,
|
||||
| 'fullWidth'
|
||||
| 'variant'
|
||||
| 'inverted'
|
||||
| 'size'
|
||||
| 'position'
|
||||
| 'accent'
|
||||
@ -46,83 +48,112 @@ const StyledButton = styled('button', {
|
||||
>
|
||||
>`
|
||||
align-items: center;
|
||||
${({ theme, variant, accent, disabled, focus }) => {
|
||||
${({ theme, variant, inverted, accent, disabled, focus }) => {
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
switch (accent) {
|
||||
case 'default':
|
||||
return css`
|
||||
background: ${theme.background.secondary};
|
||||
border-color: ${!disabled
|
||||
background: ${!inverted
|
||||
? theme.background.secondary
|
||||
: theme.background.primary};
|
||||
border-color: ${!inverted
|
||||
? focus
|
||||
? theme.color.blue
|
||||
: theme.background.transparent.light
|
||||
: 'transparent'};
|
||||
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
|
||||
: theme.background.transparent.light};
|
||||
border-width: 1px 1px 1px 1px !important;
|
||||
opacity: ${disabled ? 0.24 : 1};
|
||||
box-shadow: ${!disabled && focus
|
||||
? `0 0 0 3px ${theme.accent.tertiary}`
|
||||
? `0 0 0 3px ${
|
||||
!inverted
|
||||
? theme.accent.tertiary
|
||||
: theme.background.transparent.medium
|
||||
}`
|
||||
: 'none'};
|
||||
color: ${!disabled
|
||||
? theme.font.color.secondary
|
||||
: theme.font.color.extraLight};
|
||||
color: ${!inverted
|
||||
? !disabled
|
||||
? theme.font.color.secondary
|
||||
: theme.font.color.extraLight
|
||||
: theme.font.color.secondary};
|
||||
&:hover {
|
||||
background: ${!disabled
|
||||
background: ${!inverted
|
||||
? theme.background.tertiary
|
||||
: theme.background.secondary};
|
||||
}
|
||||
&:active {
|
||||
background: ${!disabled
|
||||
background: ${!inverted
|
||||
? theme.background.quaternary
|
||||
: theme.background.secondary};
|
||||
: theme.background.tertiary};
|
||||
}
|
||||
`;
|
||||
case 'blue':
|
||||
return css`
|
||||
background: ${theme.color.blue};
|
||||
border-color: ${!disabled
|
||||
background: ${!inverted
|
||||
? theme.color.blue
|
||||
: theme.background.primary};
|
||||
border-color: ${!inverted
|
||||
? focus
|
||||
? theme.color.blue
|
||||
: theme.background.transparent.light
|
||||
: 'transparent'};
|
||||
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
|
||||
: theme.background.transparent.light};
|
||||
border-width: 1px 1px 1px 1px !important;
|
||||
box-shadow: ${!disabled && focus
|
||||
? `0 0 0 3px ${theme.accent.tertiary}`
|
||||
? `0 0 0 3px ${
|
||||
!inverted
|
||||
? theme.accent.tertiary
|
||||
: theme.background.transparent.medium
|
||||
}`
|
||||
: 'none'};
|
||||
color: ${theme.grayScale.gray0};
|
||||
color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
|
||||
opacity: ${disabled ? 0.24 : 1};
|
||||
|
||||
${disabled
|
||||
? ''
|
||||
: css`
|
||||
&:hover {
|
||||
background: ${theme.color.blue50};
|
||||
background: ${!inverted
|
||||
? theme.color.blue50
|
||||
: theme.background.secondary};
|
||||
}
|
||||
&:active {
|
||||
background: ${theme.color.blue60};
|
||||
background: ${!inverted
|
||||
? theme.color.blue60
|
||||
: theme.background.tertiary};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
case 'danger':
|
||||
return css`
|
||||
background: ${theme.color.red};
|
||||
border-color: ${!disabled
|
||||
background: ${!inverted
|
||||
? theme.color.red
|
||||
: theme.background.primary};
|
||||
border-color: ${!inverted
|
||||
? focus
|
||||
? theme.color.red
|
||||
: theme.background.transparent.light
|
||||
: 'transparent'};
|
||||
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
|
||||
: theme.background.transparent.light};
|
||||
border-width: 1px 1px !important;
|
||||
box-shadow: ${!disabled && focus
|
||||
? `0 0 0 3px ${theme.color.red10}`
|
||||
? `0 0 0 3px ${
|
||||
!inverted
|
||||
? theme.color.red10
|
||||
: theme.background.transparent.medium
|
||||
}`
|
||||
: 'none'};
|
||||
color: ${theme.grayScale.gray0};
|
||||
color: ${!inverted ? theme.background.primary : theme.color.red};
|
||||
opacity: ${disabled ? 0.24 : 1};
|
||||
|
||||
${disabled
|
||||
? ''
|
||||
: css`
|
||||
&:hover,
|
||||
&:hover {
|
||||
background: ${!inverted
|
||||
? theme.color.red40
|
||||
: theme.background.secondary};
|
||||
}
|
||||
&:active {
|
||||
background: ${theme.color.red50};
|
||||
background: ${!inverted
|
||||
? theme.color.red50
|
||||
: theme.background.tertiary};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
@ -133,88 +164,143 @@ const StyledButton = styled('button', {
|
||||
switch (accent) {
|
||||
case 'default':
|
||||
return css`
|
||||
background: ${focus
|
||||
? theme.background.transparent.primary
|
||||
: 'transparent'};
|
||||
border-color: ${variant === 'secondary'
|
||||
? !disabled && focus
|
||||
? theme.color.blue
|
||||
: theme.background.transparent.medium
|
||||
: focus
|
||||
? theme.color.blue
|
||||
: 'transparent'};
|
||||
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
|
||||
background: transparent;
|
||||
border-color: ${!inverted
|
||||
? variant === 'secondary'
|
||||
? !disabled && focus
|
||||
? theme.color.blue
|
||||
: theme.background.transparent.medium
|
||||
: focus
|
||||
? theme.color.blue
|
||||
: 'transparent'
|
||||
: variant === 'secondary'
|
||||
? focus || disabled
|
||||
? theme.grayScale.gray0
|
||||
: theme.background.transparent.primary
|
||||
: focus
|
||||
? theme.grayScale.gray0
|
||||
: 'transparent'};
|
||||
border-width: 1px 1px 1px 1px !important;
|
||||
box-shadow: ${!disabled && focus
|
||||
? `0 0 0 3px ${theme.accent.tertiary}`
|
||||
? `0 0 0 3px ${
|
||||
!inverted
|
||||
? theme.accent.tertiary
|
||||
: theme.background.transparent.medium
|
||||
}`
|
||||
: 'none'};
|
||||
color: ${!disabled
|
||||
? theme.font.color.secondary
|
||||
: theme.font.color.extraLight};
|
||||
opacity: ${disabled ? 0.24 : 1};
|
||||
color: ${!inverted
|
||||
? !disabled
|
||||
? theme.font.color.secondary
|
||||
: theme.font.color.extraLight
|
||||
: theme.font.color.inverted};
|
||||
&:hover {
|
||||
background: ${!disabled
|
||||
? theme.background.transparent.light
|
||||
: 'transparent'};
|
||||
background: ${!inverted
|
||||
? !disabled
|
||||
? theme.background.transparent.light
|
||||
: 'transparent'
|
||||
: theme.background.transparent.light};
|
||||
}
|
||||
&:active {
|
||||
background: ${!disabled
|
||||
? theme.background.transparent.light
|
||||
: 'transparent'};
|
||||
background: ${!inverted
|
||||
? !disabled
|
||||
? theme.background.transparent.light
|
||||
: 'transparent'
|
||||
: theme.background.transparent.medium};
|
||||
}
|
||||
`;
|
||||
case 'blue':
|
||||
return css`
|
||||
background: ${focus
|
||||
? theme.background.transparent.primary
|
||||
: 'transparent'};
|
||||
border-color: ${variant === 'secondary'
|
||||
? focus
|
||||
? theme.color.blue
|
||||
: theme.accent.primary
|
||||
: focus
|
||||
? theme.color.blue
|
||||
: 'transparent'};
|
||||
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
|
||||
background: transparent;
|
||||
border-color: ${!inverted
|
||||
? variant === 'secondary'
|
||||
? focus
|
||||
? theme.color.blue
|
||||
: theme.accent.primary
|
||||
: focus
|
||||
? theme.color.blue
|
||||
: 'transparent'
|
||||
: variant === 'secondary'
|
||||
? focus || disabled
|
||||
? theme.grayScale.gray0
|
||||
: theme.background.transparent.primary
|
||||
: focus
|
||||
? theme.grayScale.gray0
|
||||
: 'transparent'};
|
||||
border-width: 1px 1px 1px 1px !important;
|
||||
box-shadow: ${!disabled && focus
|
||||
? `0 0 0 3px ${theme.accent.tertiary}`
|
||||
? `0 0 0 3px ${
|
||||
!inverted
|
||||
? theme.accent.tertiary
|
||||
: theme.background.transparent.medium
|
||||
}`
|
||||
: 'none'};
|
||||
color: ${!disabled ? theme.color.blue : theme.accent.accent4060};
|
||||
opacity: ${disabled ? 0.24 : 1};
|
||||
color: ${!inverted
|
||||
? !disabled
|
||||
? theme.color.blue
|
||||
: theme.accent.accent4060
|
||||
: theme.font.color.inverted};
|
||||
&:hover {
|
||||
background: ${!disabled
|
||||
? theme.accent.tertiary
|
||||
: 'transparent'};
|
||||
background: ${!inverted
|
||||
? !disabled
|
||||
? theme.accent.tertiary
|
||||
: 'transparent'
|
||||
: theme.background.transparent.light};
|
||||
}
|
||||
&:active {
|
||||
background: ${!disabled
|
||||
? theme.accent.secondary
|
||||
: 'transparent'};
|
||||
background: ${!inverted
|
||||
? !disabled
|
||||
? theme.accent.secondary
|
||||
: 'transparent'
|
||||
: theme.background.transparent.medium};
|
||||
}
|
||||
`;
|
||||
case 'danger':
|
||||
return css`
|
||||
background: transparent;
|
||||
border-color: ${variant === 'secondary'
|
||||
? focus
|
||||
? theme.color.red
|
||||
: theme.border.color.danger
|
||||
: focus
|
||||
? theme.color.red
|
||||
: 'transparent'};
|
||||
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
|
||||
border-color: ${!inverted
|
||||
? variant === 'secondary'
|
||||
? focus
|
||||
? theme.color.red
|
||||
: theme.border.color.danger
|
||||
: focus
|
||||
? theme.color.red
|
||||
: 'transparent'
|
||||
: variant === 'secondary'
|
||||
? focus || disabled
|
||||
? theme.grayScale.gray0
|
||||
: theme.background.transparent.primary
|
||||
: focus
|
||||
? theme.grayScale.gray0
|
||||
: 'transparent'};
|
||||
border-width: 1px 1px 1px 1px !important;
|
||||
box-shadow: ${!disabled && focus
|
||||
? `0 0 0 3px ${theme.color.red10}`
|
||||
? `0 0 0 3px ${
|
||||
!inverted
|
||||
? theme.color.red10
|
||||
: theme.background.transparent.medium
|
||||
}`
|
||||
: 'none'};
|
||||
color: ${!disabled
|
||||
? theme.font.color.danger
|
||||
: theme.border.color.danger};
|
||||
opacity: ${disabled ? 0.24 : 1};
|
||||
color: ${!inverted
|
||||
? !disabled
|
||||
? theme.font.color.danger
|
||||
: theme.color.red20
|
||||
: theme.font.color.inverted};
|
||||
&:hover {
|
||||
background: ${!disabled
|
||||
? theme.background.danger
|
||||
: 'transparent'};
|
||||
background: ${!inverted
|
||||
? !disabled
|
||||
? theme.background.danger
|
||||
: 'transparent'
|
||||
: theme.background.transparent.light};
|
||||
}
|
||||
&:active {
|
||||
background: ${!disabled
|
||||
? theme.background.danger
|
||||
: 'transparent'};
|
||||
background: ${!inverted
|
||||
? !disabled
|
||||
? theme.background.danger
|
||||
: 'transparent'
|
||||
: theme.background.transparent.medium};
|
||||
}
|
||||
`;
|
||||
}
|
||||
@ -277,6 +363,7 @@ export const Button = ({
|
||||
title,
|
||||
fullWidth = false,
|
||||
variant = 'primary',
|
||||
inverted = false,
|
||||
size = 'medium',
|
||||
accent = 'default',
|
||||
position = 'standalone',
|
||||
@ -294,6 +381,7 @@ export const Button = ({
|
||||
<StyledButton
|
||||
fullWidth={fullWidth}
|
||||
variant={variant}
|
||||
inverted={inverted}
|
||||
size={size}
|
||||
position={position}
|
||||
disabled={soon || disabled}
|
||||
|
||||
@ -30,6 +30,7 @@ export const Default: Story = {
|
||||
title: 'Button',
|
||||
size: 'small',
|
||||
variant: 'primary',
|
||||
inverted: false,
|
||||
accent: 'danger',
|
||||
disabled: false,
|
||||
focus: false,
|
||||
|
||||
@ -19,16 +19,16 @@ html {
|
||||
padding: 0 !important;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
}
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
*::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,11 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledLayout = styled.div<{ width?: number }>`
|
||||
background: ${({ theme }) => theme.background.primary};
|
||||
const StyledLayout = styled.div<{
|
||||
width?: number;
|
||||
backgroundColor?: string | undefined;
|
||||
}>`
|
||||
background: ${({ theme, backgroundColor }) =>
|
||||
backgroundColor ?? theme.background.primary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-radius: 5px;
|
||||
|
||||
@ -17,12 +21,16 @@ const StyledLayout = styled.div<{ width?: number }>`
|
||||
|
||||
type ComponentStorybookLayoutProps = {
|
||||
width?: number;
|
||||
backgroundColor?: string | undefined;
|
||||
children: JSX.Element;
|
||||
};
|
||||
|
||||
export const ComponentStorybookLayout = ({
|
||||
width,
|
||||
backgroundColor,
|
||||
children,
|
||||
}: ComponentStorybookLayoutProps) => (
|
||||
<StyledLayout width={width}>{children}</StyledLayout>
|
||||
<StyledLayout width={width} backgroundColor={backgroundColor}>
|
||||
{children}
|
||||
</StyledLayout>
|
||||
);
|
||||
|
||||
@ -1,12 +1,35 @@
|
||||
import { Decorator } from '@storybook/react';
|
||||
|
||||
import { GRAY_SCALE, MAIN_COLORS } from '@ui/theme';
|
||||
|
||||
import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
|
||||
|
||||
const getBackgroundColor = (inverted: boolean, accent: string) => {
|
||||
if (!inverted) return undefined;
|
||||
|
||||
switch (accent) {
|
||||
case 'default':
|
||||
return GRAY_SCALE.gray50;
|
||||
case 'danger':
|
||||
return MAIN_COLORS.red;
|
||||
case 'blue':
|
||||
return MAIN_COLORS.blue;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
export const ComponentDecorator: Decorator = (Story, context) => {
|
||||
const { container } = context.parameters;
|
||||
const inverted = context.args.inverted as boolean;
|
||||
const accent = context.args.accent as string;
|
||||
const backgroundColor = getBackgroundColor(inverted, accent);
|
||||
|
||||
return (
|
||||
<ComponentStorybookLayout width={container?.width}>
|
||||
<ComponentStorybookLayout
|
||||
width={container?.width}
|
||||
backgroundColor={backgroundColor}
|
||||
>
|
||||
<Story />
|
||||
</ComponentStorybookLayout>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user