From c78519c73b52d570c864d2348bf9be60ec9a72a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Fri, 17 Jan 2025 15:59:34 +0500
Subject: [PATCH] refactor: component 'Button' (add 'padding' prop)
---
src/stories/components/Button/Button.stories.ts | 1 +
src/stories/components/Button/Button.vue | 11 ++++++-----
2 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index eaefe1f..666b620 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -15,6 +15,7 @@ const meta: Meta = {
},
argTypes: {
label: { control: 'text' },
+ padding: { control: 'text' },
size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
textStyle: { control: 'select', options: ['bold', 'italic'] },
iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
index 81fe6a3..41d7e61 100644
--- a/src/stories/components/Button/Button.vue
+++ b/src/stories/components/Button/Button.vue
@@ -18,7 +18,7 @@ const color = computed(() =>
: convertThemeToTextColor(props.theme, props.darknessTheme),
);
const borderColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
-const width = computed(() => (props.width ? `${props.width}px` : 'max-content'));
+const width = computed(() => (props.width ? props.width : 'max-content'));
const textSize = computed(() => {
switch (props.size) {
case 'small':
@@ -31,15 +31,16 @@ const textSize = computed(() => {
return '16px';
});
const buttonPadding = computed(() => {
+ if (props.padding) return props.padding;
switch (props.size) {
case 'small':
- return '0.5rem 0.375rem';
+ return '0.5rem';
case 'large':
- return '1.2rem 0.8rem';
+ return '1.2rem';
case 'huge':
- return '1.8rem 1.2rem';
+ return '1.8rem';
}
- return '0.75rem 0.5rem';
+ return '0.75rem';
});
</script>
--
GitLab