@policystudio/policy-studio-ui-vue 1.1.90-beta.69 → 1.1.90-beta.71

package/dist/css/psui_styles_output.css

@@ -541,111 +541,6 @@ video {
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
-.psui-el-chips label {
-  display: flex;
-}
-.psui-el-chips label {
-  cursor: pointer;
-}
-.psui-el-chips label {
-  align-items: center;
-}
-.psui-el-chips label {
-  justify-content: center;
-}
-.psui-el-chips label {
-  border-radius: 0.25rem;
-}
-.psui-el-chips label {
-  border-width: 1px;
-}
-.psui-el-chips label {
-  --tw-border-opacity: 1;
-  border-color: rgb(162, 172, 183, var(--tw-border-opacity, 1));
-}
-.psui-el-chips label {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips label {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-.psui-el-chips label {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.psui-el-chips label {
-  font-size: 14px;
-  line-height: 130%;
-}
-.psui-el-chips label {
-  --tw-text-opacity: 1;
-  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
-}
-.psui-el-chips label {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.psui-el-chips label {
-  padding: 5px 6px 5px 8px;
-}
-.psui-el-chips label:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(49, 143, 172, var(--tw-border-opacity, 1));
-}
-.psui-el-chips label:hover {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
-.psui-el-chips label:focus, .psui-el-chips label:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips label:focus, .psui-el-chips label:active {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
-.psui-el-chips label.checked {
-  --tw-border-opacity: 1;
-  border-color: rgb(49, 143, 172, var(--tw-border-opacity, 1));
-}
-.psui-el-chips label.checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips label.checked {
-  --tw-text-opacity: 1;
-  color: rgb(0, 70, 95, var(--tw-text-opacity, 1));
-}
-.psui-el-chips label.icon-position-right {
-  flex-direction: row-reverse;
-}
-.psui-el-chips label.icon-position-right .psui-el-chips-icon {
-  margin-left: 0.25rem;
-}
-.psui-el-chips .psui-el-chips-icon {
-  font-family: "Material Icons Round";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
-.psui-el-chips .psui-el-chips-icon {
-  font-size: 16px;
-}
-.psui-el-chips .psui-el-chips-icon.is-rotated {
-  transform: rotate(180deg);
-}
 .psui-el-chips.type-checkbox, .psui-el-chips.type-radio {
   font-size: 14px;
 }
@@ -664,10 +559,6 @@ video {
 .psui-el-chips.type-checkbox input, .psui-el-chips.type-radio input {
   clip: rect(0, 0, 0, 0);
 }
-.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
-  --tw-border-opacity: 1;
-  border-color: rgb(49, 143, 172, var(--tw-border-opacity, 1));
-}
 .psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
   --tw-bg-opacity: 1;
   background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
@@ -698,6 +589,37 @@ video {
   --tw-text-opacity: 1;
   color: rgb(100, 181, 206, var(--tw-text-opacity, 1));
 }
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  display: flex;
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  cursor: pointer;
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  align-items: center;
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  justify-content: center;
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  border-radius: 0.25rem;
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243, 246, 249, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  --tw-text-opacity: 1;
+  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+  padding: 4px 8px 4px 6px;
+}
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   display: inline-block;
 }
@@ -743,6 +665,69 @@ video {
 .psui-el-chips.type-radio label:before {
   content: "radio_button_unchecked";
 }
+.psui-el-chips.type-button label {
+  display: flex;
+}
+.psui-el-chips.type-button label {
+  cursor: pointer;
+}
+.psui-el-chips.type-button label {
+  align-items: center;
+}
+.psui-el-chips.type-button label {
+  justify-content: center;
+}
+.psui-el-chips.type-button label {
+  border-radius: 0.25rem;
+}
+.psui-el-chips.type-button label {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.psui-el-chips.type-button label {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.psui-el-chips.type-button label {
+  font-size: 14px;
+  line-height: 130%;
+}
+.psui-el-chips.type-button label {
+  --tw-text-opacity: 1;
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
+}
+.psui-el-chips.type-button label {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.psui-el-chips.type-button label {
+  background-color: #F6F7F8;
+}
+.psui-el-chips.type-button label:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips.type-button label:hover {
+  --tw-text-opacity: 1;
+  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
+}
+.psui-el-chips.type-button label:focus, .psui-el-chips.type-button label:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips.type-button label:focus, .psui-el-chips.type-button label:active {
+  --tw-text-opacity: 1;
+  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
+}
+.psui-el-chips.type-button label.checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips.type-button label.checked {
+  --tw-text-opacity: 1;
+  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
+}
 .psui-el-chips.type-button.layout-with-icon label {
   display: flex;
 }
@@ -843,7 +828,10 @@ video {
   background-color: rgb(49, 143, 172, var(--tw-bg-opacity, 1));
 }
 .psui-el-chips.type-button.layout-rich .psui-el-chips-icon {
-  font-size: 16px;
+  font-size: 18px;
+}
+.psui-el-chips.type-button.layout-rich .psui-el-chips-icon-prepend {
+  margin-right: 0.5rem;
 }
 .psui-el-chips.type-button.layout-rich .psui-el-chips-icon-prepend {
   display: flex;
@@ -871,6 +859,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
+.psui-el-chips.type-button.layout-rich .psui-el-chips-close {
+  margin-left: 0.5rem;
+}
 .psui-el-chips.type-button.layout-rich .psui-el-chips-close {
   display: flex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.69",
+  "version": "1.1.90-beta.71",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/PsChips.scss

@@ -7,42 +7,6 @@
       @apply psui-icon;
     }
 
-    label {
-      @apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small psui-border psui-border-gray-40;
-      padding: 5px 6px 5px 8px;
-
-      &:hover {
-        @apply psui-text-blue-60  psui-border-blue-60;
-      }
-
-      &:focus,
-      &:active {
-        @apply psui-text-blue-60 psui-bg-blue-20;
-      }
-
-      &.checked {
-        @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60;
-      }
-
-      &.icon-position-right {
-        @apply psui-flex-row-reverse;
-
-        .psui-el-chips-icon {
-          @apply psui-ml-1;
-        }
-      }
-      
-    }
-
-    .psui-el-chips-icon {
-      @apply psui-icon;
-      font-size: 16px;
-
-      &.is-rotated {
-        transform: rotate(180deg);
-      }
-    }
-
     &.type-checkbox,
     &.type-radio {
       font-size: 14px;
@@ -54,7 +18,7 @@
 
         &:checked {
           + label {
-            @apply psui-text-blue-60 psui-bg-blue-20 psui-border-blue-60;
+            @apply psui-text-blue-60 psui-bg-blue-20;
 
             &.layout-disabled {
               @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
@@ -72,6 +36,8 @@
       }
 
       label {
+        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
+        padding: 4px 8px 4px 6px;
   
         &:before {
           @apply psui-inline-block psui-text-gray-30 psui-cursor-pointer psui-transition-all;
@@ -124,6 +90,22 @@
     }
 
     &.type-button {
+      label {
+        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
+        background-color: #F6F7F8;
+        &:hover {
+          @apply psui-text-blue-60 psui-bg-white;
+        }
+
+        &:focus,
+        &:active {
+          @apply psui-text-blue-60 psui-bg-blue-20;
+        }
+
+        &.checked {
+          @apply psui-text-blue-60 psui-bg-blue-20;
+        }
+      }
 
       &.layout-with-icon {
         label {
@@ -173,15 +155,15 @@
         }
 
         .psui-el-chips-icon {
-          font-size: 16px;
+          font-size: 18px;
 
           &-prepend {
-            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
+            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-mr-2 psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
           }
         }
 
         .psui-el-chips-close {
-          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center;
+          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center psui-ml-2;
         }
       }
     }

package/src/components/chips/PsChips.vue

@@ -23,15 +23,11 @@
     <label
       :disabled="disabled"
       :for="getInputId"
-      :class="[
-        {'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'},
-        `icon-position-${iconPosition}`
-      ]"
+      :class="{'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'}"
     >
       <i
         v-if="icon"
         class="psui-el-chips-icon psui-el-chips-icon-prepend"
-        :class="{ 'is-rotated': rotableIcon }"
       >{{ icon }}</i>
       {{ label }}
       <button
@@ -86,15 +82,6 @@ const props = defineProps({
   /**
    * It sets if the button was checked or not checked.
    */
-  iconPosition: {
-    type: String,
-    default: 'left',
-    validator: (value) => ['left', 'right'].includes(value)
-  },
-  rotableIcon:{
-    type: Boolean,
-    defaul: false
-  },
   checked: {
     type: Boolean,
     default: false,

package/src/components/notifications/PsDialog.vue

@@ -40,7 +40,7 @@ const props = defineProps({
   theme: {
     type: String,
     default: 'informative',
-    validator: (value) => ['informative', 'success', 'alert', 'disabled'].includes(value),
+    validator: (value) => ['informative', 'success', 'alert', 'gray', 'disabled'].includes(value),
   },
   /**
    * It set the which will be displayed when component is rendered.