@webitel/ui-sdk 3.1.72 → 3.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.72",
+  "version": "3.1.74",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/molecules/wt-datepicker/wt-datepicker.vue

@@ -159,23 +159,33 @@ const isDateTime = props.mode === 'datetime';
     pointer-events: none;
   }
 
+  .dp__month_year_select,
+  .dp__cell_inner {
+    @extend %typo-body-2;
+  }
+
   // reset right/left arrow hover
   .dp__inner_nav:hover {
     background: inherit;
   }
 
   .dp__menu {
+    min-width: 196px;
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
   }
 
+  .dp__calendar_header_item {
+    @extend %typo-subtitle-2;
+  }
+
   .dp__calendar_header_separator {
     background: var(--secondary-color);
   }
 
   .dp__calendar_header,
   .dp__calendar_row {
-    gap: var(--spacing-xs);
+    gap: var(--spacing-3xs);
   }
 
   // switch to time view
@@ -204,9 +214,9 @@ const isDateTime = props.mode === 'datetime';
 }
 
 .datepicker__timepicker {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: var(--spacing-xs);
+  margin: 0 var(--spacing-xs);
 }
 </style>

package/src/components/molecules/wt-radio/wt-radio.vue

@@ -16,7 +16,7 @@
         :disabled="disabled"
         @input="inputHandler"
       >
-      <wt-icon :icon="radioIcon"></wt-icon>
+      <wt-icon class="wt-radio__icon" :icon="radioIcon"></wt-icon>
       <!-- @slot Custom input label -->
       <slot name="label" v-bind="{ label, isChecked, disabled }">
         <div v-if="label" class="wt-radio__label">{{ label }}</div>
@@ -109,6 +109,10 @@
     pointer-events: none;
   }
 
+  .wt-radio__icon {
+    flex: 0 0 var(--icon-md-size);
+  }
+
   .wt-radio:hover {
     .wt-radio__label {
       color: var(--form-label--hover-color);

package/src/css/components/molecules/wt-datepicker/_variables.scss

@@ -6,24 +6,24 @@
 
   /*Sizing*/
   --dp-button-heigh: 32px; /*Size for buttons in overlays*/
-  --dp-month-year-row-height: 32px; /*Height of the month-year select row*/
-  --dp-month-year-row-button-size: 32px; /*Specific height for the next/previous buttons*/
+  --dp-month-year-row-height: 24px; /*Height of the month-year select row*/
+  --dp-month-year-row-button-size: 24px; /*Specific height for the next/previous buttons*/
   --dp-button-icon-height: var(--icon-md-size); /*Icon sizing in buttons*/
-  --dp-cell-size: 32px; /*Width and height of calendar cell*/
+  --dp-cell-size: 24px; /*Width and height of calendar cell*/
   --dp-cell-padding: var(--spacing-2xs); /*Padding in the cell*/
   --dp-common-padding: var(--spacing-xs); /*Common padding used*/
   --dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding on the left side of the input if icon is present*/
   --dp-input-padding: calc(var(--spacing-xs) - 1px) calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding in the input*/
   //--dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
   --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
-  --dp-row-maring: var(--spacing-xs); /*Adjust the spacing between rows in the calendar*/
+  --dp-row-maring: var(--spacing-3xs); /*Adjust the spacing between rows in the calendar*/
   --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
   --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
   --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
-  --dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
+  --dp-time-inc-dec-button-size: 24px; /*Sizing for arrow buttons in the time picker*/
 
   /*Font sizes*/
-  --dp-font-size: 14px; /*Default font-size*/
+  --dp-font-size: 12px; /*Default font-size*/
   --dp-preview-font-size: 12px; /*Font size of the date preview in the action row*/
   --dp-time-font-size: 12px; /*Font size in the time picker*/