@appscode/design-system 2.6.0 → 2.6.2

package/package.json

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

package/vue-components/styles/components/alert/_alert.scss

@@ -1,13 +1,13 @@
 .ac-notification {
-  background-color: $primary-95;
+  background-color: #f1f1f1;
   font-size: 1rem;
-  color: $ac-primary;
+  color: $color-text;
   min-height: 36px;
   display: flex;
   align-items: center;
   padding: 8px 16px;
   overflow: hidden;
-  border: 1px solid $ac-primary;
+  border: 1px solid $slate-50;
   border-radius: 4px;
   justify-content: flex-start;
   position: relative;
@@ -15,7 +15,7 @@
   min-width: 280px;
 
   p {
-    color: $ac-primary;
+    color: $color-text;
     margin-bottom: 0 !important;
 
     .close-icon {
@@ -115,3 +115,11 @@
     color: $yellow-5 !important;
   }
 }
+
+// is-warning
+.ac-notification.is-neutral {
+  @include acNotification($gray-60);
+  p {
+    color: $gray-5 !important;
+  }
+}

package/vue-components/styles/components/cards/_cluster.scss

@@ -13,6 +13,12 @@
   .card-details-inner {
     width: 100%;
   }
+  .top-right {
+    top: 12px;
+    right: 12px;
+    position: absolute;
+    z-index: 1;
+  }
 
   .ac-options {
     position: absolute;

package/vue-components/v3/alert/Alert.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 interface Props {
   modifierClasses?: string;
+  isCustom?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
+  isCustom: false,
 });
 </script>
 
 <template>
   <div :class="modifierClasses" class="ac-notification">
-    <p>
+    <slot v-if="isCustom" name="custom" />
+    <p v-else>
       <slot />
     </p>
   </div>

package/vue-components/v3/cards/Cluster.vue

@@ -31,6 +31,8 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
     <option-dots v-if="showOptions" :position="'is-right'">
       <slot name="options" />
     </option-dots>
+
+    <div v-else class="top-right"><slot name="custom-option" /></div>
     <div class="card-details-inner" :class="modifierClasses">
       <div class="c-header">
         <div class="c-logo">

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

@@ -12,6 +12,7 @@ import AcButton from "../button/Button.vue";
 
 interface Props {
   isButtonsDisabled?: boolean;
+  isButtonLoaderActive?: boolean;
   disabled?: boolean;
   isCreateDisabled?: boolean;
   label: string;
@@ -51,6 +52,7 @@ const prop = withDefaults(defineProps<Props>(), {
   showCustomMessage: false,
   buttonLabel: "Add New",
   formLabel: "",
+  isButtonLoaderActive: false,
 });
 
 const Accordion = defineAsyncComponent(() => import("./Accordion.vue"));
@@ -126,6 +128,7 @@ function collapseForm() {
             :disabled="disabled ? true : false"
             data-testid="single-step-form-array-item-save-button"
             @click.prevent="onSaveItem()"
+            :is-loader-active="isButtonLoaderActive"
             title="Save"
             icon-class="unplugin"
           >
@@ -136,6 +139,7 @@ function collapseForm() {
           <ac-button
             modifier-classes="is-small is-light is-danger"
             data-testid="single-step-form-array-item-close-button"
+            :disabled="isButtonLoaderActive"
             @click.prevent="resetAllData()"
           >
             <span class="icon"><HeroiconsXMark20Solid /></span>
@@ -213,6 +217,7 @@ function collapseForm() {
                         v-if="!isButtonsDisabled && isEditable"
                         modifier-classes="is-small is-light is-primary"
                         data-testid="single-step-form-array-item-edit-button"
+                        :disabled="isButtonLoaderActive"
                         @click.prevent="onEditClick(idxRow)"
                       >
                         <span class="icon"> <HeroiconsPencilSquare /> </span>
@@ -222,6 +227,7 @@ function collapseForm() {
                         v-if="!isButtonsDisabled"
                         modifier-classes="is-small is-light is-danger"
                         data-testid="single-step-form-array-item-delete-button"
+                        :disabled="isButtonLoaderActive"
                         @click.prevent="onDeleteItem(idxRow)"
                       >
                         <span class="icon"> <HeroiconsTrash /> </span>
@@ -231,6 +237,7 @@ function collapseForm() {
                         v-if="isExpandable"
                         modifier-classes="is-small is-light"
                         data-testid="single-step-form-array-item-show-details-button"
+                        :disabled="isButtonLoaderActive"
                         @click.prevent="onDetailsClick(idxRow)"
                       >
                         <span v-if="expandableFieldIndex === idxRow" class="icon"><HeroiconsChevronUpSolid /></span>
@@ -254,6 +261,7 @@ function collapseForm() {
                           :disabled="disabled ? true : false"
                           data-testid="single-step-form-array-item-save-button"
                           @click.prevent="onSaveEditedItem(idxRow)"
+                          :is-loader-active="isButtonLoaderActive"
                           icon-class="unplugin"
                           title="Save"
                         >
@@ -263,6 +271,7 @@ function collapseForm() {
                         <!-- close button start -->
                         <ac-button
                           modifier-classes="is-small is-danger is-light"
+                          :disabled="isButtonLoaderActive"
                           data-testid="single-step-form-array-item-close-button"
                           @click.prevent="resetAllData()"
                         >

package/vue-components/v3/notification/AlertBox.vue

@@ -37,6 +37,7 @@ const backgroundColor = computed(() => {
   else if (notificationType.value === "error") return "is-danger";
   else if (notificationType.value === "warning") return "is-warning";
   else if (notificationType.value === "info") return "is-info";
+  else if (notificationType.value === "neutral") return "is-neutral is-border-none";
   else return "";
 });