@appscode/design-system 2.6.15 → 2.6.16-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.6.15",
+  "version": "2.6.16-alpha2",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/base/utilities/_global.scss

@@ -473,7 +473,7 @@ button {
   }
 
   &.is-danger {
-    background-color: $danger;
+    background-color: $danger !important;
   }
 }
 

package/vue-components/styles/components/_accordion.scss

@@ -56,7 +56,7 @@
     // overflow: hidden;
     // transition: max-height 0.3s ease-in-out;
 
-    p {
+    p:not(.is-danger) {
       font-size: 1rem;
       color: $color-text;
       line-height: 1.6;

package/vue-components/v3/form-fields/AcSelect.vue

@@ -26,6 +26,7 @@ interface Props {
   openDirection?: "top" | "bottom";
   groupLabel?: string;
   groupValues?: string;
+  htmlErrorMsg?: boolean;
   groupSelect?: boolean;
   onTagAdd?: Function;
 }
@@ -51,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   groupLabel: "",
   groupValues: "",
   groupSelect: false,
+  htmlErrorMsg: false,
   taggable: false,
   tagPlaceholder: "",
   onTagAdd: () => "",
@@ -170,7 +172,8 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
         <slot name="option" v-bind="props" />
       </template>
     </multiselect>
-    <p v-show="errorMsg" class="is-danger">
+    <div v-if="htmlErrorMsg" class="invalid-error is-danger" v-html="errorMsg" />
+    <p v-else v-show="errorMsg" class="is-danger">
       {{ errorMsg }}
     </p>
   </div>