mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
Create "inline" type for Button component (#13304)
This commit is contained in:
parent
f7849a0b7c
commit
af848dec9b
@ -10,6 +10,7 @@ const CLASSNAME_RAISED = 'btn-raised';
|
|||||||
const CLASSNAME_LARGE = 'btn--large';
|
const CLASSNAME_LARGE = 'btn--large';
|
||||||
const CLASSNAME_ROUNDED = 'btn--rounded';
|
const CLASSNAME_ROUNDED = 'btn--rounded';
|
||||||
const CLASSNAME_FIRST_TIME = 'btn--first-time';
|
const CLASSNAME_FIRST_TIME = 'btn--first-time';
|
||||||
|
const CLASSNAME_INLINE = 'btn--inline';
|
||||||
|
|
||||||
const typeHash = {
|
const typeHash = {
|
||||||
default: CLASSNAME_DEFAULT,
|
default: CLASSNAME_DEFAULT,
|
||||||
@ -19,6 +20,7 @@ const typeHash = {
|
|||||||
danger: 'btn-danger',
|
danger: 'btn-danger',
|
||||||
'danger-primary': 'btn-danger-primary',
|
'danger-primary': 'btn-danger-primary',
|
||||||
link: 'btn-link',
|
link: 'btn-link',
|
||||||
|
inline: CLASSNAME_INLINE,
|
||||||
// TODO: Legacy button type to be deprecated
|
// TODO: Legacy button type to be deprecated
|
||||||
confirm: CLASSNAME_CONFIRM,
|
confirm: CLASSNAME_CONFIRM,
|
||||||
raised: CLASSNAME_RAISED,
|
raised: CLASSNAME_RAISED,
|
||||||
@ -35,7 +37,7 @@ const Button = ({
|
|||||||
rounded = true,
|
rounded = true,
|
||||||
...buttonProps
|
...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
|
// 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 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
|
// we know to be erroneous attributes for a link. We will likely want to extract Link
|
||||||
|
@ -28,6 +28,7 @@ export default {
|
|||||||
'danger',
|
'danger',
|
||||||
'danger-primary',
|
'danger-primary',
|
||||||
'link',
|
'link',
|
||||||
|
'inline',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
large: { control: 'boolean' },
|
large: { control: 'boolean' },
|
||||||
@ -87,6 +88,9 @@ export const Type = (args) => (
|
|||||||
<Button {...args} type="link">
|
<Button {...args} type="link">
|
||||||
{args.children || 'Link'}
|
{args.children || 'Link'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button {...args} type="inline">
|
||||||
|
{args.children || 'Inline'}
|
||||||
|
</Button>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -104,6 +108,18 @@ TypeLink.args = {
|
|||||||
children: 'Click me',
|
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>;
|
export const Icon = (args) => <Button {...args}>{args.children}</Button>;
|
||||||
|
|
||||||
Icon.args = {
|
Icon.args = {
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user