1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Create "inline" type for Button component (#13304)

This commit is contained in:
6201 2022-01-20 01:14:32 +08:00 committed by GitHub
parent f7849a0b7c
commit af848dec9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 1 deletions

View File

@ -10,6 +10,7 @@ const CLASSNAME_RAISED = 'btn-raised';
const CLASSNAME_LARGE = 'btn--large';
const CLASSNAME_ROUNDED = 'btn--rounded';
const CLASSNAME_FIRST_TIME = 'btn--first-time';
const CLASSNAME_INLINE = 'btn--inline';
const typeHash = {
default: CLASSNAME_DEFAULT,
@ -19,6 +20,7 @@ const typeHash = {
danger: 'btn-danger',
'danger-primary': 'btn-danger-primary',
link: 'btn-link',
inline: CLASSNAME_INLINE,
// TODO: Legacy button type to be deprecated
confirm: CLASSNAME_CONFIRM,
raised: CLASSNAME_RAISED,
@ -35,7 +37,7 @@ const Button = ({
rounded = true,
...buttonProps
}) => {
const doRounding = rounded && type !== 'link';
const doRounding = rounded && type !== 'link' && type !== 'inline';
// To support using the Button component to render styled links that are semantic html
// we swap the html tag we use to render this component and delete any buttonProps that
// we know to be erroneous attributes for a link. We will likely want to extract Link

View File

@ -28,6 +28,7 @@ export default {
'danger',
'danger-primary',
'link',
'inline',
],
},
large: { control: 'boolean' },
@ -87,6 +88,9 @@ export const Type = (args) => (
<Button {...args} type="link">
{args.children || 'Link'}
</Button>
<Button {...args} type="inline">
{args.children || 'Inline'}
</Button>
</>
);
@ -104,6 +108,18 @@ TypeLink.args = {
children: 'Click me',
};
export const TypeInline = (args) => (
<div>
this is a inline button
<Button type={args.type}>{args.children}</Button>
</div>
);
TypeInline.args = {
type: 'inline',
children: 'Click me',
};
export const Icon = (args) => <Button {...args}>{args.children}</Button>;
Icon.args = {

View File

@ -318,3 +318,29 @@ input[type="submit"][disabled] {
}
}
}
.btn--inline {
display: inline;
padding: 0 4px;
font-size: inherit;
width: auto;
color: var(--Blue-500);
cursor: pointer;
background-color: transparent;
&:hover {
color: var(--Blue-400);
}
&:active {
color: var(--Blue-600);
}
&--disabled,
&[disabled] {
cursor: auto;
opacity: 1;
pointer-events: none;
color: var(--hover-secondary);
}
}