From 2d09c64e248d6460a86ec566bade10429f17d7bb Mon Sep 17 00:00:00 2001
From: Diego Jara Palomino <saintplay96@gmail.com>
Date: Thu, 7 May 2020 16:02:06 -0500
Subject: [PATCH] hide fallback on inline mode

---
 package.json                   |  2 +-
 src/VSwatches.vue              |  5 +++++
 tests/unit/specs/props.spec.js | 20 +++++++++++++++-----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index ad16c71..90e83a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-swatches",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Help the user picking beautiful colors!",
   "author": "Diego Jara <saintplay96@gmail.com>",
   "private": false,
diff --git a/src/VSwatches.vue b/src/VSwatches.vue
index b64c5bd..2e902d5 100644
--- a/src/VSwatches.vue
+++ b/src/VSwatches.vue
@@ -107,6 +107,7 @@
             />
           </span>
           <button
+            v-if="showFallbackOk"
             class="vue-swatches__fallback__button"
             :class="fallbackOkClass"
             @click.prevent="onFallbackButtonClick"
@@ -335,6 +336,10 @@ export default {
       return DEFAULT_SHOW_BORDER;
     },
 
+    showFallbackOk() {
+      return !this.inline;
+    },
+
     /** DUMB COMPUTEDS (these only mutate props) **/
 
     borderRadius() {
diff --git a/tests/unit/specs/props.spec.js b/tests/unit/specs/props.spec.js
index 28f0919..1d1d7f6 100644
--- a/tests/unit/specs/props.spec.js
+++ b/tests/unit/specs/props.spec.js
@@ -448,7 +448,8 @@ describe("Props", () => {
       const componentWrapper = mount(VSwatches, {
         propsData: {
           fallbackOkClass: "class-example",
-          showFallback: true
+          showFallback: true,
+          inline: false
         }
       });
       const button = componentWrapper.find(".vue-swatches__fallback__button");
@@ -524,6 +525,16 @@ describe("Props", () => {
           expect(container.isVisible()).toBe(true);
         });
       });
+      test("should not render the fallback ok button", () => {
+        const componentWrapper = mount(VSwatches, {
+          propsData: {
+            inline: true,
+            showFallback: true
+          }
+        });
+        const button = componentWrapper.find(".vue-swatches__fallback__button");
+        expect(button.exists()).not.toBeTruthy();
+      });
     });
     describe("When inline prop is false (Popover)", () => {
       test("should render the trigger", () => {
@@ -987,7 +998,7 @@ describe("Props", () => {
         expect(fallbackWrapper.exists()).not.toBeTruthy();
       });
     });
-    test("should close the popover when click to ok button", () => {
+    test("should close the popover when click to ok button", async () => {
       const componentWrapper = mount(VSwatches, {
         propsData: {
           showFallback: true,
@@ -999,9 +1010,8 @@ describe("Props", () => {
       const button = componentWrapper.find(".vue-swatches__fallback__button");
       button.trigger("click");
 
-      return Vue.nextTick().then(() => {
-        expect(container.isVisible()).not.toBeTruthy();
-      });
+      await Vue.nextTick();
+      return expect(container.isVisible()).not.toBeTruthy();
     });
   });