Add info icon for informational alert
-Add new style carbon icon for informational alert
-Change alert icon position from center to top
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: If32d712db16472ce9a78e04e5871d0b799bb5895
diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 1d28f2a..741eb69 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -17,7 +17,7 @@
.alert-icon {
display: inline-flex;
- align-items: center;
+ align-items: flex-start;
margin-right: $spacer;
margin-bottom: $spacer;
@@ -50,6 +50,12 @@
fill: theme-color("info");
}
+ &.alert-success {
+ border-left-color: theme-color("success");
+ background-color: $success-light;
+ fill: theme-color("success");
+ }
+
&.alert-danger {
border-left-color: theme-color("danger");
background-color: $danger-light;
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
index 2008536..a049a08 100644
--- a/src/components/Global/Alert.vue
+++ b/src/components/Global/Alert.vue
@@ -1,12 +1,22 @@
<template>
<b-alert :show="show" :variant="variant" :class="{ small }">
- <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon">
+ <div
+ v-if="
+ variant == 'info' ||
+ variant == 'success' ||
+ variant == 'warning' ||
+ variant == 'danger'
+ "
+ class="alert-icon"
+ >
<status-icon :status="variant" />
</div>
- <div class="alert-content d-inline-flex align-items-center">
- <div class="alert-msg"><slot /></div>
+ <div class="alert-content">
+ <div class="alert-msg">
+ <slot />
+ </div>
</div>
- <div class="alert-action d-inline-flex align-items-center">
+ <div class="alert-action">
<slot name="action"></slot>
</div>
</b-alert>
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 6de6d31..bf58722 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -1,6 +1,7 @@
<template>
<span :class="['status-icon', status]">
- <icon-success v-if="status === 'success'" />
+ <icon-info v-if="status === 'info'" />
+ <icon-success v-else-if="status === 'success'" />
<icon-warning v-else-if="status === 'warning'" />
<icon-danger v-else-if="status === 'danger'" />
<icon-secondary v-else />
@@ -8,6 +9,7 @@
</template>
<script>
+import IconInfo from '@carbon/icons-vue/es/information--filled/20';
import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
import IconError from '@carbon/icons-vue/es/error--filled/20';
@@ -16,6 +18,7 @@
export default {
name: 'StatusIcon',
components: {
+ IconInfo: IconInfo,
iconSuccess: IconCheckmark,
iconDanger: IconMisuse,
iconSecondary: IconError,
@@ -33,6 +36,9 @@
<style lang="scss" scoped>
.status-icon {
vertical-align: text-bottom;
+ &.info {
+ fill: theme-color('info');
+ }
&.success {
fill: theme-color('success');
}