Merge pull request #352 from weni-ai/fix/integrate-button-width

[FLOWS-281] - Fix: Integrate button width on app details page
weni-ai · Dec 1, 2023 · aba107e · aba107e
2 parents c60f020 + b67448b
commit aba107e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/src/components/IntegrateButton.vue b/src/components/IntegrateButton.vue
@@ -3,9 +3,10 @@
     <LoadingButton
       ref="button"
       type="secondary"
-      loadingPosition="center"
+      :loadingPosition="loadingPosition"
       :size="size"
-      :iconCenter="icon"
+      :iconCenter="loadingPosition == 'center' ? icon : null"
+      :iconLeft="loadingPosition == 'left' ? icon : null"
       :isLoading="loadingCreateApp"
       :disabled="disabled"
       :text="text"
@@ -49,6 +50,13 @@
         type: String,
         default: 'small',
       },
+      loadingPosition: {
+        type: String,
+        default: 'center',
+        validator(value) {
+          return ['left', 'center'].indexOf(value) !== -1;
+        },
+      },
     },
     data() {
       return {

diff --git a/src/components/LoadingButton.vue b/src/components/LoadingButton.vue
@@ -17,7 +17,7 @@
     props: {
       type: {
         type: String,
-        default: 'terciary',
+        default: 'tertiary',
       },
       size: {
         type: String,

diff --git a/src/components/app/AppDetailsHeader.vue b/src/components/app/AppDetailsHeader.vue
@@ -16,6 +16,7 @@
       :app="app"
       :disabled="!app.can_add"
       :text="$t('apps.details.header.add')"
+      loadingPosition="left"
     />
 
     <add-modal ref="addModal" />

diff --git a/tests/unit/specs/components/app/__snapshots__/AppDetailsHeader.spec.js.snap b/tests/unit/specs/components/app/__snapshots__/AppDetailsHeader.spec.js.snap
@@ -8,7 +8,7 @@ exports[`AppDetailsHeader.vue should be rendered properly 1`] = `
     <div class="app-details-header__content__description">some specific text</div>
   </div>
   <div type="add" class="app-details-header__button">
-    <unnnicbutton-stub size="large" text="some specific text" type="secondary" iconcenter="add-1" disabled="true" class="loading-button"></unnnicbutton-stub>
+    <unnnicbutton-stub size="large" text="some specific text" type="secondary" iconleft="add-1" disabled="true" class="loading-button"></unnnicbutton-stub>
     <!---->
     <!---->
   </div>