From 2fabb1c8cf48a7e53dfb25efc2d898d384b46a15 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Thu, 22 Oct 2020 11:23:17 -0500
Subject: Fix icon color in documentation

- Add StatusIcon to ehnaceApp and use the component imported into the
the documentation's component/app-imports directory to resolve fill
rendering bug in the Alert component
- Remove the scoped attribute to make the changes work for alerts in
documentation
- Update StatusIcon component to match changes to application component

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4090d58f78a1d10d9745ee592424ca0c0c91c610
---
 docs/.vuepress/components/app-imports/StatusIcon.vue | 16 ++++++++++------
 docs/.vuepress/enhanceApp.js                         |  2 ++
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue
index 954e4775..ef2afb72 100644
--- a/docs/.vuepress/components/app-imports/StatusIcon.vue
+++ b/docs/.vuepress/components/app-imports/StatusIcon.vue
@@ -33,29 +33,33 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "src/assets/styles/bmc/helpers";
 @import "src/assets/styles/bootstrap/helpers";
 .status-icon {
   vertical-align: text-bottom;
   &.info {
-    fill: theme-color('info');
+    color: theme-color('info');
   }
   &.success {
-    fill: theme-color('success');
+    color: theme-color('success');
   }
   &.danger {
-    fill: theme-color('danger');
+    color: theme-color('danger');
   }
   &.secondary {
-    fill: gray('600');
+    color: gray('600');
 
     svg {
       transform: rotate(-45deg);
     }
   }
   &.warning {
-    fill: theme-color('warning');
+    color: theme-color('warning');
+  }
+
+  svg {
+    fill: currentColor;
   }
 }
 </style>
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index c0f3dfba..5c218373 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -1,6 +1,7 @@
 
 import "./styles/_index.scss";
 import Alert from "../../src/components/Global/Alert";
+import StatusIcon from "./components/app-imports/StatusIcon";
 
 // Bootstrap-vue Plugin imports
 import {
@@ -17,4 +18,5 @@ export default ({ Vue }) => {
 
       // BMC Components and Mixins
       Vue.component('Alert', Alert);
+      Vue.component('StatusIcon', StatusIcon);
 }
\ No newline at end of file
-- 
cgit v1.2.3