admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: wip import csv [part 1] (#1033)

Browse Source 
* feat: wip import csv

* feat: start implementing twenty UI

* feat: new radio button component

* feat: use new radio button component and fix scroll issue

* fix: max height modal

* feat: wip try to customize react-data-grid to match design

* feat: wip match columns

* feat: wip match column selection

* feat: match column

* feat: clean heading component & try to fix scroll in last step

* feat: validation step

* fix: small cleaning and remove unused component

* feat: clean folder architecture

* feat: remove translations

* feat: remove chackra theme

* feat: remove unused libraries

* feat: use option button to open spreadsheet & fix stories

* Fix lint and fix imports

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Jérémy M
2023-08-16 00:12:47 +02:00
committed by GitHub
parent 1ca41021cf
commit 56cada6335
95 changed files with 7042 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
front/src/modules/ui/button/components/Button.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import React, { useMemo } from 'react';
import styled from '@emotion/styled';
import { TablerIconsProps } from '@tabler/icons-react';
import { SoonPill } from '@/ui/pill/components/SoonPill';
import { rgba } from '@/ui/theme/constants/colors';
@ -58,6 +59,8 @@ const StyledButton = styled.button<
case 'primary':
case 'secondary':
return `${theme.background.transparent.medium}`;
case 'danger':
return `${theme.border.color.danger}`;
case 'tertiary':
default:
return 'none';
@ -80,6 +83,7 @@ const StyledButton = styled.button<
switch (variant) {
case 'primary':
case 'secondary':
case 'danger':
return position === 'middle' ? `1px 0 1px 0` : `1px`;
case 'tertiary':
default:
@ -98,10 +102,13 @@ const StyledButton = styled.button<
color: ${({ theme, variant, disabled }) => {
if (disabled) {
if (variant === 'primary') {
return theme.color.gray0;
} else {
return theme.font.color.extraLight;
switch (variant) {
case 'primary':
return theme.color.gray0;
case 'danger':
return theme.border.color.danger;
default:
return theme.font.color.extraLight;
}
}
@ -156,6 +163,8 @@ const StyledButton = styled.button<
switch (variant) {
case 'primary':
return `background: linear-gradient(0deg, ${theme.background.transparent.medium} 0%, ${theme.background.transparent.medium} 100%), ${theme.color.blue}`;
case 'danger':
return `background: ${theme.background.transparent.danger}`;
default:
return `background: ${theme.background.tertiary}`;
}
@ -178,7 +187,7 @@ const StyledButton = styled.button<
`;
export function Button({
icon,
icon: initialIcon,
title,
fullWidth = false,
variant = ButtonVariant.Primary,
@ -188,6 +197,16 @@ export function Button({
disabled = false,
...props
}: ButtonProps) {
const icon = useMemo(() => {
if (!initialIcon || !React.isValidElement(initialIcon)) {
return null;
}
return React.cloneElement<TablerIconsProps>(initialIcon as any, {
size: 14,
});
}, [initialIcon]);
return (
<StyledButton
fullWidth={fullWidth}