@appscode/design-system 2.2.60 → 2.2.62

package/package.json

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

package/vue-components/styles/components/form-fields/_input.scss

@@ -16,6 +16,7 @@
     border-right: 1px solid $color-border-dark;
     background-color: $white-100;
   }
+
   &.is-disable {
     opacity: 0.5;
 
@@ -41,9 +42,11 @@
   }
 
   &.is-success {
+
     input,
     .ac-card,
-    textarea {
+    textarea,
+    select {
       border: 1px solid $ac-primary !important;
     }
 
@@ -53,9 +56,11 @@
   }
 
   &.is-danger {
+
     input,
     .ac-card,
-    textarea {
+    textarea,
+    select {
       border: 1px solid $danger;
     }
 
@@ -65,6 +70,7 @@
   }
 
   &.is-loading {
+
     input,
     .ac-card,
     textarea {
@@ -106,7 +112,9 @@
   }
 
   &.is-normal {
-    input {
+
+    input,
+    select {
       height: 45px;
       font-size: 15px;
       font-weight: 400;
@@ -153,7 +161,9 @@
   }
 
   &.is-small {
-    input {
+
+    input,
+    select {
       height: 36px;
       font-size: 13px;
       font-weight: 400;
@@ -210,7 +220,9 @@
   }
 
   &.is-extra-small {
-    input {
+
+    input,
+    select {
       height: 32px;
       font-size: 13px;
       font-weight: 400;
@@ -242,7 +254,7 @@
     }
 
     label {
-      top: 8px;
+      top: 6px;
       font-size: 13px;
 
       &.switch-label {
@@ -398,7 +410,8 @@
 
   input,
   .ac-card,
-  textarea {
+  textarea,
+  select {
     background-color: $white-100;
     color: $color-heading;
     height: 45px;
@@ -492,7 +505,7 @@
 // check radio
 
 .ac-single-radio {
-  .is-checkradio[type="radio"] + label {
+  .is-checkradio[type="radio"]+label {
     padding-left: 25px;
 
     &:before {
@@ -550,6 +563,7 @@
     display: flex;
     align-items: center;
   }
+
   .file-label {
     width: 100%;
   }
@@ -559,7 +573,9 @@
     height: 100%;
     background-color: $secondary-light-gray;
   }
+
   &:hover {
+
     .file-cta,
     .file-name {
       border-color: $ac-primary;
@@ -571,6 +587,7 @@
 .file-upload {
   border: 1px dashed $color-border-dark;
   border-radius: 4px;
+
   &:hover {
     background-color: $secondary-light-gray;
     border-color: $ac-primary;
@@ -578,16 +595,19 @@
     label {
       .upload-icon {
         border: 1px solid $color-border-dark;
+
         svg {
           color: $color-heading;
         }
       }
     }
   }
+
   label {
     cursor: pointer;
     padding: 32px;
     display: block;
+
     .upload-icon {
       border: 1px solid $color-border;
       display: inline-flex;
@@ -603,11 +623,13 @@
         color: $primary-30;
       }
     }
+
     p {
       color: $color-heading;
+
       strong {
         font-weight: 600;
       }
     }
   }
-}
+}

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

@@ -96,7 +96,7 @@ watch(
       </span>
     </template>
     <div class="is-flex is-flex-direction-column">
-      <div v-if="htmlErrorMsg" class="invalid-error" v-html="errorMsg" />
+      <div v-if="htmlErrorMsg" class="invalid-error is-danger" v-html="errorMsg" />
       <p v-else-if="errorMsg" class="is-danger">{{ errorMsg }}</p>
       <slot name="message" />
     </div>

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

@@ -4,12 +4,14 @@ interface Props {
   name: string;
   label?: string;
   errorMsg?: string;
+  dataTestId?: string;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
   label: "Switch Label",
   errorMsg: "",
+  dataTestId: "ac-switch",
 });
 
 const model = defineModel({ type: Boolean });
@@ -17,7 +19,15 @@ const model = defineModel({ type: Boolean });
 
 <template>
   <div class="field">
-    <input v-model="model" :id="name" type="checkbox" :name="name" class="switch is-rounded" :class="modifierClasses" />
+    <input
+      v-model="model"
+      :id="name"
+      type="checkbox"
+      :name="name"
+      class="switch is-rounded is-primary"
+      :class="modifierClasses"
+      :data-testid="dataTestId"
+    />
     <label :for="name">{{ label }}</label>
     <p v-show="errorMsg" class="is-danger">
       {{ errorMsg }}