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

Jump to bottom

Migrate ButtonBase to TS #19067

Closed
wants to merge 5 commits into from
Closed

Migrate ButtonBase to TS #19067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ff9daf8
Migrate ButtonBase to TS
thebinij May 9, 2023
146d770
fix error added TextAlignArray
thebinij May 18, 2023
d247a8a
resolve deprecated
thebinij May 18, 2023
4d46274
replace deprecated
thebinij May 25, 2023
00e725b
fix lint error by removing textalign prop from textProps
thebinij May 25, 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
0 ...se/__snapshots__/button-base.test.js.snap → ...e/__snapshots__/button-base.test.tsx.snap
View file
Open in desktop
File renamed without changes.
7 changes: 0 additions & 7 deletions ui/components/component-library/button-base/button-base.constants.js
View file
Open in desktop

This file was deleted.

202 changes: 0 additions & 202 deletions ui/components/component-library/button-base/button-base.js
View file
Open in desktop

This file was deleted.

60 changes: 32 additions & 28 deletions ...ibrary/button-base/button-base.stories.js → ...brary/button-base/button-base.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import {
AlignItems,
Color,
DISPLAY,
FLEX_DIRECTION,
Size,
BackgroundColor,
Display,
FlexDirection,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { TextDirection, IconName } from '..';
import { TextDirection, IconName, ValidTag } from '..';

import { BUTTON_BASE_SIZES } from './button-base.constants';
import { ButtonBaseSize } from './button-base.types';
import { ButtonBase } from './button-base';
import README from './README.mdx';

Expand Down Expand Up @@ -70,7 +70,7 @@ export default {
},
size: {
control: 'select',
options: Object.values(BUTTON_BASE_SIZES),
options: Object.values(ButtonBaseSize),
},
marginTop: {
options: marginSizeControlOptions,
Expand All @@ -96,27 +96,29 @@ export default {
args: {
children: 'Button Base',
},
};
} as Meta<typeof ButtonBase>;

export const DefaultStory = (args) => <ButtonBase {...args} />;
export const DefaultStory: StoryFn<typeof ButtonBase> = (args) => (
<ButtonBase {...args} />
);

DefaultStory.storyName = 'Default';

export const SizeStory = (args) => (
export const SizeStory: StoryFn<typeof ButtonBase> = (args) => (
<>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.baseline}
gap={1}
marginBottom={2}
>
<ButtonBase {...args} size={Size.SM}>
<ButtonBase {...args} size={ButtonBaseSize.Sm}>
Button SM
</ButtonBase>
<ButtonBase {...args} size={Size.MD}>
<ButtonBase {...args} size={ButtonBaseSize.Md}>
Button MD
</ButtonBase>
<ButtonBase {...args} size={Size.LG}>
<ButtonBase {...args} size={ButtonBaseSize.Lg}>
Button LG
</ButtonBase>
</Box>
Expand All @@ -125,7 +127,7 @@ export const SizeStory = (args) => (

SizeStory.storyName = 'Size';

export const Block = (args) => (
export const Block: StoryFn<typeof ButtonBase> = (args) => (
<>
<ButtonBase {...args} marginBottom={2}>
Default Button
Expand All @@ -136,22 +138,24 @@ export const Block = (args) => (
</>
);

export const As = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
export const As: StoryFn<typeof ButtonBase> = (args) => (
<Box display={Display.Flex} flexDirection={FlexDirection.Row} gap={2}>
<ButtonBase {...args}>Button Element</ButtonBase>
<ButtonBase as="a" href="#" {...args}>
<ButtonBase as={ValidTag.A} href="#" {...args}>
Anchor Element
</ButtonBase>
</Box>
);

export const Href = (args) => <ButtonBase {...args}>Anchor Element</ButtonBase>;
export const Href: StoryFn<typeof ButtonBase> = (args) => (
<ButtonBase {...args}>Anchor Element</ButtonBase>
);

Href.args = {
href: '/metamask',
};

export const ExternalLink = (args) => (
export const ExternalLink: StoryFn<typeof ButtonBase> = (args) => (
<ButtonBase {...args}>Anchor element with external link</ButtonBase>
);

Expand All @@ -160,36 +164,36 @@ ExternalLink.args = {
externalLink: true,
};

export const Disabled = (args) => (
export const Disabled: StoryFn<typeof ButtonBase> = (args) => (
<ButtonBase {...args}>Disabled Button</ButtonBase>
);

Disabled.args = {
disabled: true,
};

export const Loading = (args) => (
export const Loading: StoryFn<typeof ButtonBase> = (args) => (
<ButtonBase {...args}>Loading Button</ButtonBase>
);

Loading.args = {
loading: true,
};

export const StartIconName = (args) => (
export const StartIconName: StoryFn<typeof ButtonBase> = (args) => (
<ButtonBase {...args} startIconName={IconName.AddSquare}>
Button
</ButtonBase>
);

export const EndIconName = (args) => (
export const EndIconName: StoryFn<typeof ButtonBase> = (args) => (
<ButtonBase {...args} endIconName={IconName.Arrow2Right}>
Button
</ButtonBase>
);

export const Rtl = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
export const Rtl: StoryFn<typeof ButtonBase> = (args) => (
<Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
<ButtonBase
{...args}
startIconName={IconName.AddSquare}
Expand All @@ -208,8 +212,8 @@ export const Rtl = (args) => (
</Box>
);

export const Ellipsis = (args) => (
<Box backgroundColor={Color.iconMuted} style={{ width: 150 }}>
export const Ellipsis: StoryFn<typeof ButtonBase> = (args) => (
<Box backgroundColor={BackgroundColor.primaryMuted} style={{ width: 150 }}>
<ButtonBase {...args}>Example without ellipsis</ButtonBase>
<ButtonBase {...args} ellipsis>
Example with ellipsis
Expand Down
Loading