@policystudio/policy-studio-ui-vue 1.0.55 → 1.0.58

package/dist/css/psui_styles.css

@@ -17689,6 +17689,7 @@ html {
       transition-property: opacity;
       transition-duration: 300ms;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 10;
       transition-delay: 0.4s;
     }
 
@@ -19835,7 +19836,7 @@ html {
   }
 
 .psui-el-tab-header button.status-disabled {
-      cursor: not-allowed
+      cursor: not-allowed;
     }
 
 .psui-el-tab-header button:focus {
@@ -19857,6 +19858,10 @@ html {
     border-radius: 0.375rem;
   }
 
+.psui-el-tab-header.layout-standard .psui-el-tooltip:not(:last-child) {
+        margin-right: 20px;
+      }
+
 .psui-el-tab-header.layout-standard button {
       --bg-opacity: 1;
       background-color: #F3F6F9;
@@ -19912,6 +19917,10 @@ html {
     border-color: rgba(230, 236, 242, var(--border-opacity));
   }
 
+.psui-el-tab-header.layout-underline .psui-el-tooltip:not(:last-child) {
+        margin-right: 20px;
+      }
+
 .psui-el-tab-header.layout-underline button {
       --text-opacity: 1;
       color: #798490;
@@ -19948,6 +19957,10 @@ html {
 
 /* ----------------------------------------- */
 
+.psui-el-tab-header.layout-folder .psui-el-tooltip:not(:last-child) {
+        margin-right: 20px;
+      }
+
 .psui-el-tab-header.layout-folder button {
       --bg-opacity: 1;
       background-color: #F3F6F9;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.55",
+  "version": "1.0.58",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/components/PsTabHeader.scss

@@ -6,7 +6,7 @@
     button {
       @apply transition-default psui-text-small;
       &.status-disabled {
-        @apply cursor-not-allowed
+        @apply cursor-not-allowed;
       }
 
       &:focus {
@@ -24,6 +24,12 @@
     /* ----------------------------------------- */
       &.layout-standard {
         @apply psui-rounded-md;
+
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
         
         button {
           @apply psui-bg-gray-10 psui-text-gray-60;
@@ -63,6 +69,12 @@
       &.layout-underline {
         @apply psui-border-b psui-border-gray-20;
 
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
+
         button {
           @apply psui-text-gray-50 psui-font-bold;
           border-bottom: 3px solid transparent;
@@ -91,6 +103,13 @@
     /* Layout Folder */
     /* ----------------------------------------- */
       &.layout-folder {
+
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
+
         button {
           @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
           padding: 9px 12px;

package/src/assets/scss/components/PsTooltip.scss

@@ -5,7 +5,7 @@
             @apply psui-relative;
 
             .psui-el-tooltip-dialog {
-                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
+                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out psui-z-10;
                 transition-delay: 0.4s;
 
                 .psui-el-tooltip-content {

package/src/components/controls/PsRadioButton.vue

@@ -1,23 +1,27 @@
 <template>
   <div class='psui-el-radio' :class="[getComponentClass, {'disabled':disabled}]" >
-    <input 
-      :id="label" 
-      type="radio" 
+    <input
+      :id="inputId"
+      type="radio"
       :value="inputValue"
       v-model="model"
       :disabled='disabled'      
     />
-    <label :for="label" class="psui-el-checkmark"><span>{{ label }}</span></label>    
+    <label :for="inputId" class="psui-el-checkmark"><span>{{ label }}</span></label>    
   </div>
-
+ 
 </template>
-
+ 
 <script>
 //FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
-
+ 
 export default {
   name: 'PsRadioButton',
   props: {
+    inputId: {
+      type: String,
+      default: ''
+    },
     /**
     * It sets the label of the radio button.
      */
@@ -64,5 +68,4 @@ export default {
   }  
   },
 }
-</script>
-
+</script>