v20.3.56 is released

Author: pipeline

controls/base/src/component.ts

@@ -373,7 +373,9 @@ export abstract class Component<ElementType extends HTMLElement> extends Base<El
 
     //tslint:disable-next-line
     protected renderReactTemplates(callback?: any): void {
-        //No Code
+        if (!isNullOrUndefined(callback)) {
+            callback();
+        }
     }
 
     // eslint-disable-next-line

controls/base/themestudio/styles/buttons/check-box/_theme.scss

@@ -102,6 +102,9 @@
 
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
 
             &:not(.e-check),

controls/base/themestudio/styles/buttons/floating-action-button/_tailwind-definition.scss

@@ -25,3 +25,4 @@ $fab-bigger-small-padding: 0 17px !default;
 $fab-bigger-small-icon-font-size: 14px !default;
 
 $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
+$fab-focus-box-shadow: $fab-box-shadow, $shadow-focus-ring2 !default;

controls/base/themestudio/styles/buttons/floating-action-button/_theme.scss

@@ -4,11 +4,19 @@
     box-shadow: $fab-box-shadow;
 
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

controls/base/themestudio/styles/buttons/speed-dial/_bootstrap-dark-definition.scss

@@ -5,8 +5,8 @@ $sd-li-text-padding: 0 5px !default;
 //Distance between vertical menu and button => Ul bottom padding + li bottom margin
 //Distance between vertical menu item =>  li bottom margin + li top margin
 //Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
-$sd-horz-ul-padding: 5px 4px !default;
-$sd-vert-ul-padding: 4px 5px !default;
+$sd-horz-ul-padding: 3px 4px !default;
+$sd-vert-ul-padding: 4px 3px !default;
 $sd-horz-li-margin: 0 4px !default;
 $sd-vert-li-margin: 4px 0 !default;
 $sd-li-text-margin: 0 8px !default;

controls/base/themestudio/styles/buttons/speed-dial/_bootstrap-definition.scss

@@ -5,8 +5,8 @@ $sd-li-text-padding: 0 5px !default;
 //Distance between vertical menu and button => Ul bottom padding + li bottom margin
 //Distance between vertical menu item =>  li bottom margin + li top margin
 //Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
-$sd-horz-ul-padding: 5px 4px !default;
-$sd-vert-ul-padding: 4px 5px !default;
+$sd-horz-ul-padding: 3px 4px !default;
+$sd-vert-ul-padding: 4px 3px !default;
 $sd-horz-li-margin: 0 4px !default;
 $sd-vert-li-margin: 4px 0 !default;
 $sd-li-text-margin: 0 8px !default;

controls/base/themestudio/styles/buttons/speed-dial/_bootstrap5-definition.scss

@@ -55,11 +55,12 @@ $sd-disabled-font-color: $content-text-color-disabled !default;
 $sd-focus-li-bg: $content-bg-color-focus !default;
 $sd-focus-li-border-color: $border-focus !default;
 $sd-focus-font-color: $content-text-color-focus !default;
+$sd-focus-box-shadow: $secondary-shadow-focus !default;
 
 $sd-hover-li-bg: $content-bg-color-hover !default;
 $sd-hover-li-border-color: $border-hover !default;
 $sd-hover-font-color: $content-text-color-hover !default;
 
-$sd-active-li-bg: $content-text-color-pressed !default;
+$sd-active-li-bg: $content-bg-color-pressed !default;
 $sd-active-li-border-color: $content-bg-color-pressed !default;
 $sd-active-font-color: $content-text-color-focus !default;

controls/base/themestudio/styles/buttons/speed-dial/_fluent-definition.scss

@@ -55,7 +55,7 @@ $sd-disabled-font-color: $secondary-text-color-disabled !default;
 $sd-focus-li-bg: $secondary-bg-color-focus !default;
 $sd-focus-li-border-color: $secondary-border-color-focus !default;
 $sd-focus-font-color: $secondary-text-color-focus !default;
-$sd-focus-box-shadow: $sd-focus-li-bg $shadow-lg !default;
+$sd-focus-box-shadow: $sd-li-shadow, $shadow-focus-ring1 !default;
 
 $sd-hover-li-bg: $secondary-bg-color-hover !default;
 $sd-hover-li-border-color: $secondary-border-color-hover !default;

controls/base/themestudio/styles/buttons/speed-dial/_tailwind-definition.scss

@@ -55,7 +55,7 @@ $sd-disabled-font-color: $secondary-text-color-disabled !default;
 $sd-focus-li-bg: $secondary-bg-color-focus !default;
 $sd-focus-li-border-color: $secondary-border-color-focus !default;
 $sd-focus-font-color: $secondary-text-color-focus !default;
-$sd-focus-box-shadow: $sd-li-shadow $shadow-focus-ring2 !default;
+$sd-focus-box-shadow: $sd-li-shadow, $shadow-focus-ring2 !default;
 
 $sd-hover-li-bg: $secondary-bg-color-hover !default;
 $sd-hover-li-border-color: $secondary-border-color-hover !default;

controls/base/themestudio/styles/buttons/speed-dial/_theme.scss

@@ -7,12 +7,7 @@
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -21,11 +16,7 @@
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -35,27 +26,19 @@
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -64,11 +47,7 @@
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;