chore: Refactor button styles (#2259)

This commit is contained in:
Nithin David Thomas 2021-05-20 13:51:46 +05:30 committed by GitHub
parent af8e681f2a
commit c681e8a01b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 490 additions and 260 deletions

View file

@ -1,13 +1,7 @@
<template>
<button
class="button"
:class="[
variant,
size,
colorScheme,
classNames,
isDisabled ? 'disabled' : '',
]"
:class="buttonClasses"
:disabled="isDisabled || isLoading"
@click="handleClick"
>
@ -51,6 +45,28 @@ export default {
type: Boolean,
default: false,
},
isExpanded: {
type: Boolean,
default: false,
},
},
computed: {
variantClasses() {
if (this.variant.includes('link')) {
return `clear ${this.variant}`;
}
return this.variant;
},
buttonClasses() {
return [
this.variantClasses,
this.size,
this.colorScheme,
this.classNames,
this.isDisabled ? 'disabled' : '',
this.isExpanded ? 'expanded' : '',
];
},
},
methods: {
handleClick(evt) {
@ -59,20 +75,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.button {
display: flex;
align-items: center;
&.link {
padding: 0;
margin: 0;
}
}
.spinner {
padding: 0 var(--space-small);
}
.icon + .button__content {
padding-left: var(--space-small);
}
</style>