@appscode/design-system 1.1.0-beta.90 → 1.1.0-beta.92

package/package.json

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

package/vue-components/v3/header/Header.vue

@@ -41,7 +41,7 @@ withDefaults(defineProps<Props>(), {
 <style lang="scss" scoped>
 .inner-header {
   padding: 6px 20px;
-  border-bottom: 1px solid $primary-93;
+  border-bottom: 1px solid $primary-95;
   position: sticky;
   background: $white-100;
   z-index: 99;

package/vue-components/v3/modal/Modal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
 
 interface Props {
   open?: boolean;
@@ -35,6 +36,7 @@ const modalCloseIcon = import.meta.glob("../../../icons/close-icon.svg", {
   eager: true,
 });
 
+const modal = ref();
 const showModal = ref(false);
 const crossIcon = ref(
   (modalCloseIcon["../../../icons/close-icon.svg"] as Record<string, unknown>)
@@ -58,6 +60,8 @@ const onModalOutsideClick = () => {
   destroyModal();
 };
 
+onClickOutside(modal, onModalOutsideClick);
+
 const destroyModal = () => {
   if (props.isCloseOptionDisabled) return;
   showModal.value = false;
@@ -87,9 +91,8 @@ watch(
       v-if="showModal"
       class="ac-modal is-middle-alignment"
       :class="modifierClasses"
-      @click.self="onModalOutsideClick"
     >
-      <div class="ac-modal-inner">
+      <div ref="modal" class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
           <h5>{{ title }}</h5>

package/vue-components/v3/sidebar/SidebarFooter.vue

@@ -2,10 +2,12 @@
 import { defineAsyncComponent } from "vue";
 interface Props {
   isColorpickerEnabled?: boolean;
+  hideBorder?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   isColorpickerEnabled: false,
+  hideBorder: false,
 });
 defineEmits(["toggleSidebar"]);
 const AccentColorPicker = defineAsyncComponent(
@@ -14,9 +16,13 @@ const AccentColorPicker = defineAsyncComponent(
 </script>
 
 <template>
-  <div class="sidebar-footer">
+  <div class="sidebar-footer" :class="{ 'b-t-n': hideBorder }">
     <!-- back button  -->
-    <button class="back-button is-transparent" data-testid = "sidebar-footer-back-button" @click="$emit('toggleSidebar')">
+    <button
+      class="back-button is-transparent"
+      data-testid="sidebar-footer-back-button"
+      @click="$emit('toggleSidebar')"
+    >
       <svg
         width="18"
         height="18"

package/vue-components/v3/sidebar/SidebarHeader.vue

@@ -6,6 +6,7 @@ interface Props {
   brandLogoAlt?: string;
   url?: string;
   modifierClasses?: string;
+  hideCollapseButton?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -13,12 +14,14 @@ withDefaults(defineProps<Props>(), {
   brandLogoAlt: "",
   url: "/",
   modifierClasses: "",
+  hideCollapseButton: false,
 });
 </script>
 <template>
   <div class="sidebar-header">
     <!-- hamburger icon  -->
     <div
+      v-if="!hideCollapseButton"
       class="icon hamburger-icon mr-16"
       data-testid="sidebar-menu-button"
       @click="$emit('toggleSidebar')"

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue

@@ -8,7 +8,7 @@
 <style lang="scss">
 .sidebar-tabs {
   width: 220px;
-  border-right: 1px solid $primary-90;
+  border-right: 1px solid $primary-95;
   padding: 8px;
   height: calc(100vh - 50px);
   ul {

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue

@@ -37,5 +37,8 @@ withDefaults(defineProps<Props>(), {
 .content-wrapper {
   padding-bottom: 40px;
   width: 100%;
+  &:has(.form-footer) {
+    padding-bottom: 0;
+  }
 }
 </style>

package/vue-components/v3/table/InfoTable.vue

@@ -91,7 +91,7 @@ const isFullTableLoaderActive = computed(() => {
 // INFO TABLE START
 .table.ac-info-table {
   background-color: transparent;
-  border-top: 1px solid $primary-93;
+  border-top: 1px solid $primary-95;
 
   &.is-fullwidth {
     tbody {

package/vue-components/v3/table/Table.vue

@@ -488,9 +488,9 @@ onUpdated(() => {
     thead {
       tr {
         th {
-          border-top: 1px solid $primary-93;
-          border-bottom: 1px solid $primary-93;
-          border-right: 1px solid $primary-93;
+          border-top: 1px solid $primary-95;
+          border-bottom: 1px solid $primary-95;
+          border-right: 1px solid $primary-95;
           background-color: $primary-97;
 
           &:first-child {
@@ -513,8 +513,8 @@ onUpdated(() => {
           font-size: 13px;
           color: $primary-20;
           background-color: transparent;
-          border-bottom: 1px solid $primary-93;
-          border-right: 1px solid $primary-93;
+          border-bottom: 1px solid $primary-95;
+          border-right: 1px solid $primary-95;
           &:last-child {
             border-right: 1px solid transparent;
           }