Update FormFile component button style

Default file upload button will be secondary, with the ability to
optionally pass 'primary' variant as a prop.
Added correct disabled button styles to the SFC scoped styles.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Idacb84a9298db0d5bce727f20842d2a1a15b7448

1 files changed, 23 insertions, 1 deletions

diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 4457a312..cf713acf 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -11,7 +11,14 @@
         @input="$emit('input', file)"
       >
       </b-form-file>
-      <span class="add-file-btn btn btn-primary" :class="{ disabled }">
+      <span
+        class="add-file-btn btn"
+        :class="{
+          disabled,
+          'btn-secondary': isSecondary,
+          'btn-primary': !isSecondary,
+        }"
+      >
         {{ $t('global.fileUpload.browseText') }}
       </span>
       <slot name="invalid"></slot>
@@ -56,12 +63,21 @@ export default {
       type: Boolean,
       default: true,
     },
+    variant: {
+      type: String,
+      default: 'secondary',
+    },
   },
   data() {
     return {
       file: null,
     };
   },
+  computed: {
+    isSecondary() {
+      return this.variant === 'secondary';
+    },
+  },
 };
 </script>
 
@@ -77,6 +93,12 @@ export default {
 // Get mouse pointer on complete element
 .add-file-btn {
   position: relative;
+  &.disabled {
+    border-color: gray('400');
+    background-color: gray('400');
+    color: gray('600');
+    box-shadow: none !important;
+  }
 }
 
 .clear-selected-file {