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

Refactor icons passed as props with the new way (#1492)

Browse Source 
* Refactor icons passed as props with the new way

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Update more files

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Fix according to review

* Fix according to review

* Fix according to review

* Fix chromatic regressions

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-10 19:39:17 +01:00
committed by GitHub
parent 89fed80537
commit fb737e2021
82 changed files with 341 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
import React, { useMemo } from 'react';
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { TablerIconsProps } from '@/ui/icon';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { SoonPill } from '@/ui/pill/components/SoonPill';
export type ButtonSize = 'medium' | 'small';
@ -11,7 +12,7 @@ export type ButtonAccent = 'default' | 'blue' | 'danger';
export type ButtonProps = {
className?: string;
icon?: React.ReactNode;
Icon?: IconComponent;
title?: string;
fullWidth?: boolean;
variant?: ButtonVariant;
@ -278,7 +279,7 @@ const StyledButton = styled.button<
export function Button({
className,
icon: initialIcon,
Icon,
title,
fullWidth = false,
variant = 'primary',
@ -290,15 +291,7 @@ export function Button({
focus = false,
onClick,
}: ButtonProps) {
const icon = useMemo(() => {
if (!initialIcon || !React.isValidElement(initialIcon)) {
return null;
}
return React.cloneElement<TablerIconsProps>(initialIcon as any, {
size: 14,
});
}, [initialIcon]);
const theme = useTheme();
return (
<StyledButton
@ -312,7 +305,7 @@ export function Button({
className={className}
onClick={onClick}
>
{icon}
{Icon && <Icon size={theme.icon.size.sm} />}
{title}
{soon && <SoonPill />}
</StyledButton>