RadioGroup: The radio button's dot should be centered when the browse…

…r window is zoomed out and the compact Material theme is used [T1165339] (#24867)

scss/widgets/generic/list/_index.scss

@@ -141,14 +141,14 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
       .dx-list-item,
       .dx-list-select-all {
         &.dx-state-hover {
-          .dx-radiobutton-icon::before,
+          .dx-radiobutton-icon,
           .dx-checkbox-icon {
             border-color: $checkbox-hover-border-color;
           }
         }
 
         &.dx-state-focused {
-          .dx-radiobutton-icon::before,
+          .dx-radiobutton-icon,
           .dx-checkbox-icon {
             border: 1px solid $checkbox-focused-borderd-color;
           }

scss/widgets/generic/radioButton/_index.scss

@@ -10,62 +10,61 @@
 // adduse
 
 $generic-radiobutton-border-width: 1px;
-$generic-radiobutton-inner-size: $generic-radiobutton-size - $generic-radiobutton-border-width * 2;
+$dot-icon-border-width: math.div($generic-radiobutton-size - $generic-radiobutton-border-width * 2 - $generic-radiobutton-dot-size, 2);
 
 .dx-radiobutton-icon {
   width: $generic-radiobutton-size;
   height: $generic-radiobutton-size;
-}
-
-.dx-radiobutton-icon::before {
-  display: block;
-  width: $generic-radiobutton-inner-size;
-  height: $generic-radiobutton-inner-size;
   border: $generic-radiobutton-border-width solid $radiogroup-border-color;
   background-color: $radiogroup-bg;
-  content: "";
   border-radius: math.div($generic-radiobutton-size, 2);
-  box-sizing: content-box;
 }
 
-.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
-  display: block;
-  margin-top: math.div(-$generic-radiobutton-size, 2) - math.div($generic-radiobutton-dot-size, 2);
-  margin-left: math.div($generic-radiobutton-size, 2) - math.div($generic-radiobutton-dot-size, 2);
-  width: $generic-radiobutton-dot-size;
-  height: $generic-radiobutton-dot-size;
-  background: $radiogroup-checked-bg;
-  content: "";
-  border-radius: math.div($generic-radiobutton-dot-size, 2);
+.dx-radiobutton-icon-dot {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border-width: 0;
+  border-color: $radiogroup-bg;
+  border-style: solid;
+}
+
+.dx-radiobutton-icon-checked {
+  .dx-radiobutton-icon-dot {
+    background-color: $radiogroup-checked-bg;
+    border-width: $dot-icon-border-width;
+  }
 }
 
 .dx-radiobutton {
   line-height: $generic-radiobutton-size;
 
   &.dx-state-readonly {
-    .dx-radiobutton-icon::before {
+    .dx-radiobutton-icon {
       border-color: $radiogroup-readonly-border-color;
       background-color: $radiogroup-readonly-bg;
     }
   }
 
   &.dx-state-hover {
-    .dx-radiobutton-icon::before {
+    .dx-radiobutton-icon {
       border-color: $radiogroup-hover-border-color;
     }
   }
 
   &.dx-state-active {
-    .dx-radiobutton-icon::before {
+    .dx-radiobutton-icon {
       background-color: $radiobutton-active-bg;
     }
+
+    .dx-radiobutton-icon-dot {
+      border-color: $radiogroup-border-color;
+    }
   }
 
   &.dx-state-focused {
-    &:not(.dx-state-active) {
-      .dx-radiobutton-icon::before {
-        border: $generic-radiobutton-border-width solid $radiobutton-focused-border-color;
-      }
+    .dx-radiobutton-icon {
+      border-color: $radiobutton-focused-border-color;
     }
   }
 
@@ -75,19 +74,19 @@ $generic-radiobutton-inner-size: $generic-radiobutton-size - $generic-radiobutto
 }
 
 .dx-invalid {
-  .dx-radiobutton-icon::before {
+  .dx-radiobutton-icon {
     border-color: $radiobutton-invalid-faded-border-color;
   }
 
   .dx-state-hover {
-    &.dx-radiobutton .dx-radiobutton-icon::before {
+    &.dx-radiobutton .dx-radiobutton-icon {
       border-color: $radiobutton-invalid-hover-border-color;
     }
   }
 
   .dx-state-focused {
     &.dx-radiobutton {
-      .dx-radiobutton-icon::before {
+      .dx-radiobutton-icon {
         border-color: $radiobutton-invalid-focused-border-color;
       }
     }
@@ -101,11 +100,3 @@ $generic-radiobutton-inner-size: $generic-radiobutton-size - $generic-radiobutto
     }
   }
 }
-
-.dx-rtl .dx-radiobutton,
-.dx-rtl.dx-radiobutton {
-  &.dx-radiobutton-checked .dx-radiobutton-icon-dot {
-    margin-right: math.div($generic-radiobutton-inner-size, 4) + $generic-radiobutton-border-width;
-    margin-left: 0;
-  }
-}

scss/widgets/generic/radioGroup/_index.scss

@@ -20,7 +20,7 @@
   }
 
   &.dx-state-readonly {
-    .dx-radiobutton-icon::before {
+    .dx-radiobutton-icon {
       border-color: $radiogroup-readonly-border-color;
       background-color: $radiogroup-readonly-bg;
     }

scss/widgets/material/list/_index.scss

@@ -125,7 +125,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
       .dx-list-select-all,
       .dx-list-item {
         &.dx-state-hover {
-          .dx-radiobutton-icon::before {
+          .dx-radiobutton-icon {
             border-color: $checkbox-hover-border-color;
           }
         }

scss/widgets/material/radioButton/_index.scss

@@ -10,8 +10,8 @@
 // adduse
 
 $material-radiobutton-border-width: 2px;
-$material-radiobutton-inner-size: $material-radiobutton-size - $material-radiobutton-border-width * 2;
 $material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+$dot-icon-border-width: math.div($material-radiobutton-size - $material-radiobutton-border-width * 2 - $material-radiobutton-dot-size, 2);
 
 .dx-radiobutton-icon {
   width: $material-radiobutton-size;
@@ -34,32 +34,29 @@ $material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1)
     transition: $material-radiobutton-ripple-transition;
   }
 
-  &::before {
-    display: block;
-    width: $material-radiobutton-inner-size;
-    height: $material-radiobutton-inner-size;
-    border: $material-radiobutton-border-width solid $radiogroup-border-color;
-    background-color: $radiogroup-bg;
-    content: "";
-    border-radius: math.div($material-radiobutton-size, 2);
-    box-sizing: content-box;
-  }
+  border: $material-radiobutton-border-width solid $radiogroup-border-color;
+  background-color: $radiogroup-bg;
+  border-radius: math.div($material-radiobutton-size, 2);
+}
+
+.dx-radiobutton-icon-dot {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border-width: 0;
+  border-color: $radiogroup-bg;
+  background-color: $radiogroup-bg;
+  border-style: solid;
+  transform: scale(0);
 }
 
 .dx-radiobutton-icon-checked {
-  &::before {
-    border-color: $radiogroup-checked-bg;
-  }
+  border-color: $radiogroup-checked-bg;
 
   .dx-radiobutton-icon-dot {
-    display: block;
-    margin-top: math.div(-$material-radiobutton-size, 2) - math.div($material-radiobutton-dot-size, 2);
-    margin-left: math.div($material-radiobutton-size, 2) - math.div($material-radiobutton-dot-size, 2);
-    width: $material-radiobutton-dot-size;
-    height: $material-radiobutton-dot-size;
-    background: $radiogroup-checked-bg;
-    content: "";
-    border-radius: math.div($material-radiobutton-dot-size, 2);
+    background-color: $radiogroup-checked-bg;
+    border-width: $dot-icon-border-width;
+    transform: scale(1);
   }
 }
 
@@ -95,13 +92,13 @@ $material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1)
     background-color: $radiogroup-border-color;
   }
 
-  .dx-radiobutton-icon::before {
+  .dx-radiobutton-icon {
     border-color: $radiogroup-border-color;
   }
 }
 
 .dx-invalid {
-  .dx-radiobutton-icon::before {
+  .dx-radiobutton-icon {
     border-color: $radiobutton-invalid-faded-border-color;
   }
 
@@ -112,7 +109,7 @@ $material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1)
   .dx-state-active,
   .dx-state-focused {
     &.dx-radiobutton {
-      .dx-radiobutton-icon::before {
+      .dx-radiobutton-icon {
         border-color: $radiobutton-invalid-focused-border-color;
       }
 
@@ -135,11 +132,3 @@ $material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1)
     }
   }
 }
-
-.dx-rtl .dx-radiobutton,
-.dx-rtl.dx-radiobutton {
-  &.dx-radiobutton-checked .dx-radiobutton-icon-dot {
-    margin-right: math.div($material-radiobutton-size, 2) - math.div($material-radiobutton-dot-size, 2);
-    margin-left: 0;
-  }
-}

testing/testcafe/tests/editors/radioGroup/common.ts

@@ -1,6 +1,10 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { Selector } from 'testcafe';
+import { testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import RadioGroup from '../../../model/radioGroup';
 import createWidget from '../../../helpers/createWidget';
+import { setStyleAttribute } from '../../../helpers/domUtils';
 
 fixture.disablePageReloads`Radio Group`
   .page(url(__dirname, '../../container.html'));
@@ -71,3 +75,20 @@ test('Radio buttons placed into the template should not be selected after clicki
     layout: 'horizontal',
   }),
 }));
+
+test('Dot of Radio button placed in scaled container should have valid centering(T1165339)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'RadioGroup in scaled container.png', { element: '#container', shouldTestInCompact: true });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await setStyleAttribute(Selector('#container'), 'transform: scale(0.7);');
+
+  await createWidget('dxRadioGroup', {
+    items: ['One', 'Two', 'Three'],
+    value: 'Two',
+  }, '#container');
+});