Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Button by Figma #167

Merged
merged 8 commits into from
Dec 14, 2023
Merged

New Button by Figma #167

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6333f95
new button by figma
mdlucas Dec 12, 2023
82dac08
fix size button
mdlucas Dec 12, 2023
01deb9c
fix border
mdlucas Dec 12, 2023
f821982
remove font-size of button
mdlucas Dec 12, 2023
1b24928
fix border Button
mdlucas Dec 14, 2023
cb19b83
fix version theme-toolkit
mdlucas Dec 14, 2023
9257b03
added type size
mdlucas Dec 14, 2023
afcd72b
remove material var css
mdlucas Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Button/button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('Component: Button', () => {
// when
const { getByText } = render(
<ThemeProvider theme={theme}>
<Button {...defaultProps} disabled variant="secondary">
<Button {...defaultProps} disabled variant="filled">
{defaultContent}
</Button>
</ThemeProvider>,
Expand Down
5 changes: 0 additions & 5 deletions src/components/Button/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,7 @@ const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
loading: { control: 'boolean' },
rounded: { control: 'boolean' },
contrast: { control: 'boolean' },
hasBorder: { control: 'boolean' },
disabled: { control: 'boolean' },
minWidth: { control: 'text' },
maxWidth: { control: 'text' },
id: { control: 'text' },
testID: { control: 'text' },
},
Expand Down
63 changes: 17 additions & 46 deletions src/components/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,22 @@
import { FC, ReactNode } from 'react';
import {
ButtonVariants,
TypographyVariants,
} from '@platformbuilders/theme-toolkit';
import RadixIcon from '@radix-ui/react-icons';
import { FC } from 'react';
import Icons from '../Icons';
import { ContentWrapper, Loading, TextButton, Touchable } from './styles';

type TouchableType = {
id?: string;
accessibility: string;
testID?: string;
disabled?: boolean;
onPress?: (param: any) => void;
};

export type ButtonProps = {
style?: any;
type?: 'button' | 'submit' | 'reset';
textStyle?: any;
rounded?: boolean;
loading?: boolean;
contrast?: boolean;
variant?: ButtonVariants;
typographyVariant?: TypographyVariants;
children?: string | ReactNode;
minWidth?: string | number;
maxWidth?: string | number;
leftIconName?: keyof typeof RadixIcon;
rightIconName?: keyof typeof RadixIcon;
hasBorder?: boolean;
} & TouchableType;
import { ButtonProps } from './types';

const Button: FC<ButtonProps> = ({
id,
children,
onPress,
accessibility,
textStyle = {},
disabled = false,
rounded = false,
loading = false,
contrast = false,
hasBorder = false,
variant = 'primary',
fullWidth = false,
variant = 'filled',
typographyVariant = 'md',
leftIconName,
rightIconName,
colorVariant = 'primary',
size = 'normal',
...rest
}) => {
const LeftIcon = leftIconName ? Icons[leftIconName] : undefined;
Expand All @@ -58,22 +28,22 @@ const Button: FC<ButtonProps> = ({
accessibility={accessibility}
disabled={loading || disabled}
onPress={onPress}
$hasBorder={hasBorder}
$rounded={rounded}
variant={variant}
colorVariant={colorVariant}
size={size}
{...rest}
>
{loading ? (
<Loading contrast={contrast} />
<Loading />
) : (
<ContentWrapper $buttonVariant={variant}>
<ContentWrapper
accessibility="container button"
variant={variant}
size={size}
fullWidth={fullWidth}
>
{LeftIcon ? <LeftIcon /> : null}
<TextButton
style={textStyle}
disabled={disabled}
variant={typographyVariant}
$buttonVariant={variant}
>
<TextButton className="text-button" variant={typographyVariant}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Por que usar styled-component com className?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

acho que são coisas distintas, uma não sobrescreve a outra.
usei a classe para ficar facil alterar o estilo do texto do botao com css quando necessário

{children}
</TextButton>
{RightIcon ? <RightIcon /> : null}
Expand All @@ -84,3 +54,4 @@ const Button: FC<ButtonProps> = ({
};

export default Button;
export * from './types';
Loading