v23.1.42 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 23.1.41 (2023-10-17)
+## 23.1.42 (2023-10-24)
 
 ### Common
 

controls/buttons/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ## [Unreleased]
 
+## 23.1.42 (2023-10-24)
+
+### Button
+
+#### Bug Fixes
+
+- `#I512179` - The issue with "Duplicate Icon Span while using the `onPropertyChange` of button" has been resolved.
+
+## 23.1.41 (2023-10-17)
+
+### Checkbox
+
+#### Bug Fixes
+
+- `#I509029` - The issue with "`HtmlAttributes` property not working properly in checkBox component" has been resolved.
+
 ## 23.1.39 (2023-10-04)
 
 ### Checkbox

controls/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "23.1.39",
+	"version": "23.1.41",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/buttons/src/button/button.ts

@@ -324,6 +324,7 @@ export class Button extends Component<HTMLButtonElement> implements INotifyPrope
                 this.controlStatus(newProp.disabled);
                 break;
             case 'iconCss': {
+                span = this.element.querySelector('span.e-btn-icon');
                 if (span) {
                     if (newProp.iconCss) {
                         span.className = 'e-btn-icon ' + newProp.iconCss;

controls/buttons/src/check-box/check-box.ts

@@ -631,8 +631,8 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
     protected updateHtmlAttributeToWrapper(): void {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
+                const wrapper: Element = this.getWrapper();
                 if (containerAttr.indexOf(key) > -1) {
-                    const wrapper: Element = this.getWrapper();
                     if (key === 'class') {
                         addClass([wrapper], this.htmlAttributes[`${key}`].split(' '));
                     } else if (key === 'title') {
@@ -650,6 +650,9 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
                         this.element.setAttribute(key, this.htmlAttributes[`${key}`]);
                     }
                 }
+                else {
+                    wrapper.setAttribute(key, this.htmlAttributes[`${key}`]);
+                }
             }
         }
     }

controls/buttons/styles/switch/_theme.scss

@@ -185,11 +185,15 @@
         }
 
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
 
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

controls/buttons/themestudio/styles/buttons/switch/_theme.scss

@@ -185,11 +185,15 @@
         }
 
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
 
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

controls/buttons/themestudio/styles/calendars/daterangepicker/_fluent-definition.scss

@@ -303,3 +303,20 @@ $modal-range-header-text-color: $content-bg-color !default;
 $modal-range-tablet-font-size: 18px !default;
 
 $range-header-font-size: 16px !default;
+
+.e-daterangepicker.e-popup .e-calendar .e-header .e-title {
+  width: 65%;
+}
+
+.e-daterangepicker.e-popup.e-small .e-calendar .e-header .e-title {
+  width: 61%;
+}
+
+.e-daterangepicker.e-popup.e-bigger .e-calendar .e-header .e-title,
+.e-daterangepicker.e-popup.e-device .e-calendar .e-header .e-title {
+  width: 72%;
+}
+
+.e-daterangepicker.e-popup.e-bigger.e-small .e-calendar .e-header .e-title {
+  width: 70%;
+}

controls/buttons/themestudio/styles/calendars/daterangepicker/_layout.scss

@@ -111,8 +111,8 @@
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -126,12 +126,13 @@
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -275,7 +276,9 @@
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

controls/buttons/themestudio/styles/dropdowns/drop-down-list/_bootstrap4-definition.scss

@@ -152,13 +152,24 @@ $ddl-bigger-small-list-font-size: 14px !default;
   }
 
   .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
-    font-size: 8px;
+    font-size: 12px;
   }
 
-  .e-bigger .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
+  .e-bigger .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon,
+  .e-bigger.e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
+    font-size: 14px;
+  }
+
+  .e-small .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon,
+  .e-small.e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
     font-size: 10px;
   }
 
+  .e-small.e-bigger .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon,
+  .e-small.e-bigger.e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
+    font-size: 12px;
+  }
+
   .e-bigger.e-small .e-ddl#{&}.e-popup {
     @at-root {
       #{if(&, '&', '*')} .e-list-item,

controls/buttons/themestudio/styles/dropdowns/list-box/_theme.scss

@@ -103,7 +103,7 @@
       }
 
       & .e-selectall-parent + .e-list-parent {
-        height: $listbox-select-height;
+        height: $listbox-select-height !important; /* stylelint-disable-line declaration-no-important */
       }
 
       & .e-icons {

controls/buttons/themestudio/styles/dropdowns/multi-select/_bootstrap4-definition.scss

@@ -196,6 +196,25 @@ $multiselect-dropicon-closer-bigger-width: 34px !default;
     border-right-width: 0;
   }
 
+  .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
+    font-size: 12px;
+  }
+
+  .e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
+  .e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
+    font-size: 14px;
+  }
+
+  .e-small .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
+  .e-small.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
+    font-size: 10px;
+  }
+
+  .e-small.e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
+  .e-small.e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
+    font-size: 12px;
+  }
+
   .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
     border-left-width: 0;
     border-radius: 4px 0 0 4px;