Validation: new material and fluent validation message styles (#25537)

DevExpress · Sep 12, 2023 · e3276c9 · e3276c9
1 parent 7e012ae
commit e3276c9
Show file tree

Hide file tree

Showing 26 changed files with 86 additions and 88 deletions.
diff --git a/packages/devextreme/scss/widgets/base/_validation.scss b/packages/devextreme/scss/widgets/base/_validation.scss
@@ -1,11 +1,46 @@
-@mixin dx-base-validation($summary-color, $message-color, $message-bg-color) {
+
+@mixin dx-base-validation($summary-color, $message-color, $message-bg-color, $border-radius) {
   .dx-validationsummary-item {
     color: $summary-color;
   }
 
   .dx-invalid-message > .dx-overlay-content {
     color: $message-color;
     background-color: $message-bg-color;
+    border-radius: $border-radius;
+  }
+}
+
+@mixin dx-modern-styles-validation(
+  $validation-message-font-size, 
+  $validation-message-line-height,
+  $filled-texteditor-input-horizontal-padding,
+  $validation-message-padding,
+  $validationsummary-item-margin,
+  $validation-message-vertical-padding, 
+  $validation-message-horizontal-padding,
+) {
+  .dx-invalid-message > .dx-overlay-content {
+    padding: $validation-message-vertical-padding $validation-message-horizontal-padding;
+    line-height: $validation-message-line-height;
+    font-size: $validation-message-font-size;
+
+    .dx-invalid-message-top &,
+    .dx-invalid-message-bottom & {
+      .dx-editor-filled &,
+      .dx-editor-outlined {
+        padding-left: $filled-texteditor-input-horizontal-padding;
+        padding-right: $filled-texteditor-input-horizontal-padding;
+      }
+    }
+  }
+
+  .dx-validationsummary > .dx-validationsummary-item:not(:last-child) {
+    margin-bottom: $validationsummary-item-margin;
+  }
+
+  .dx-form-validation-summary {
+    margin-top: 20px;
   }
 }
 

diff --git a/packages/devextreme/scss/widgets/fluent/validation/_index.scss b/packages/devextreme/scss/widgets/fluent/validation/_index.scss
@@ -8,42 +8,18 @@
 
 // adduse
 @use "../overlay";
-@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color);
-
-.dx-invalid-message > .dx-overlay-content {
-  background-color: transparent;
-  color: $validation-message-background-color;
-
-  .dx-invalid-message-top &,
-  .dx-invalid-message-bottom & {
-    .dx-editor-filled &,
-    .dx-editor-outlined {
-      padding-left: $fluent-filled-texteditor-input-horizontal-padding;
-      padding-right: $fluent-filled-texteditor-input-horizontal-padding;
-    }
-  }
-
-  .dx-invalid-message-top & {
-    padding: 0 0 $fluent-validation-message-padding 0;
-  }
-
-  .dx-invalid-message-right & {
-    padding: 0 0 0 $fluent-validation-message-padding;
-  }
-
-  .dx-invalid-message-bottom & {
-    padding: $fluent-validation-message-padding 0 0 0;
-  }
-
-  .dx-invalid-message-left & {
-    padding: 0 $fluent-validation-message-padding 0 0;
-  }
-}
-
-.dx-validationsummary > .dx-validationsummary-item:not(:last-child) {
-  margin-bottom: $fluent-validationsummary-item-margin;
-}
-
-.dx-form-validation-summary {
-  margin-top: 20px;
-}
+@include dx-base-validation(
+  $validation-summary-color, 
+  $validation-message-color, 
+  $validation-message-background-color, 
+  $fluent-validation-overlay-border-radius
+);
+@include dx-modern-styles-validation(
+  $fluent-validation-message-font-size, 
+  $fluent-validation-message-line-height,
+  $fluent-filled-texteditor-input-horizontal-padding,
+  $fluent-validation-message-padding,
+  $fluent-validationsummary-item-margin,
+  $fluent-validation-message-vertical-padding, 
+  $fluent-validation-message-horizontal-padding,
+);
diff --git a/packages/devextreme/scss/widgets/fluent/validation/_sizes.scss b/packages/devextreme/scss/widgets/fluent/validation/_sizes.scss
@@ -4,13 +4,25 @@
 
 $fluent-validation-message-padding: null !default;
 $fluent-validationsummary-item-margin: null !default;
+$fluent-validation-message-line-height: null !default;
+$fluent-validation-message-horizontal-padding: null !default;
+
+$fluent-validation-overlay-border-radius: 4px !default;
+$fluent-validation-message-vertical-padding: 4px !default;
+$fluent-validation-message-font-size: 12px !default;
 
 @if $size == "default" {
   $fluent-validation-message-padding: 6px !default;
   $fluent-validationsummary-item-margin: 10px !default;
+
+  $fluent-validation-message-horizontal-padding: 8px !default;
+  $fluent-validation-message-line-height: 16px !default;
 }
 
 @else if $size == "compact" {
   $fluent-validation-message-padding: 4px !default;
   $fluent-validationsummary-item-margin: 6px !default;
+
+  $fluent-validation-message-horizontal-padding: 6px !default;
+  $fluent-validation-message-line-height: 12px !default;
 }
diff --git a/packages/devextreme/scss/widgets/generic/validation/_index.scss b/packages/devextreme/scss/widgets/generic/validation/_index.scss
@@ -7,12 +7,4 @@
 
 // adduse
 @use "../overlay";
-@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color);
-
-.dx-invalid-message > .dx-overlay-content {
-  border-radius: $validation-overlay-border-radius;
-
-  .dx-editor-underlined & {
-    border-radius: 0;
-  }
-}
+@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color, $validation-overlay-border-radius);
diff --git a/packages/devextreme/scss/widgets/material/validation/_index.scss b/packages/devextreme/scss/widgets/material/validation/_index.scss
@@ -8,42 +8,13 @@
 
 // adduse
 @use "../overlay";
-@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color);
-
-.dx-invalid-message > .dx-overlay-content {
-  background-color: transparent;
-  color: $validation-message-background-color;
-
-  .dx-invalid-message-top &,
-  .dx-invalid-message-bottom & {
-    .dx-editor-filled &,
-    .dx-editor-outlined {
-      padding-left: $material-filled-texteditor-input-horizontal-padding;
-      padding-right: $material-filled-texteditor-input-horizontal-padding;
-    }
-  }
-
-  .dx-invalid-message-top & {
-    padding: 0 0 $material-validation-message-padding 0;
-  }
-
-  .dx-invalid-message-right & {
-    padding: 0 0 0 $material-validation-message-padding;
-  }
-
-  .dx-invalid-message-bottom & {
-    padding: $material-validation-message-padding 0 0 0;
-  }
-
-  .dx-invalid-message-left & {
-    padding: 0 $material-validation-message-padding 0 0;
-  }
-}
-
-.dx-validationsummary > .dx-validationsummary-item:not(:last-child) {
-  margin-bottom: $material-validationsummary-item-margin;
-}
-
-.dx-form-validation-summary {
-  margin-top: 20px;
-}
+@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color, $material-validation-overlay-border-radius);
+@include dx-modern-styles-validation(
+  $material-validation-message-font-size, 
+  $material-validation-message-line-height,
+  $material-filled-texteditor-input-horizontal-padding,
+  $material-validation-message-padding,
+  $material-validationsummary-item-margin,
+  $material-validation-message-vertical-padding, 
+  $material-validation-message-horizontal-padding,
+);
diff --git a/packages/devextreme/scss/widgets/material/validation/_sizes.scss b/packages/devextreme/scss/widgets/material/validation/_sizes.scss
@@ -4,13 +4,25 @@
 
 $material-validation-message-padding: null !default;
 $material-validationsummary-item-margin: null !default;
+$material-validation-message-line-height: null !default;
+
+$material-validation-message-horizontal-padding: null !default;
+$material-validation-message-vertical-padding: 4px !default;
+$material-validation-overlay-border-radius: 4px !default;
+$material-validation-message-font-size: 12px !default;
 
 @if $size == "default" {
   $material-validation-message-padding: 6px !default;
   $material-validationsummary-item-margin: 10px !default;
+
+  $material-validation-message-horizontal-padding: 8px !default;
+  $material-validation-message-line-height: 16px !default;
 }
 
 @else if $size == "compact" {
   $material-validation-message-padding: 4px !default;
   $material-validationsummary-item-margin: 6px !default;
+
+  $material-validation-message-horizontal-padding: 6px !default;
+  $material-validation-message-line-height: 12px !default;
 }
diff --git a/...lons/Checkbox validation message with bottom position (material-blue-light).png b/...lons/Checkbox validation message with bottom position (material-blue-light).png
diff --git a/...ckbox validation message with bottom position (material-blue-light-compact).png b/...ckbox validation message with bottom position (material-blue-light-compact).png
diff --git a/...talons/Checkbox validation message with left position (material-blue-light).png b/...talons/Checkbox validation message with left position (material-blue-light).png
diff --git a/...heckbox validation message with left position (material-blue-light-compact).png b/...heckbox validation message with left position (material-blue-light-compact).png
diff --git a/...alons/Checkbox validation message with right position (material-blue-light).png b/...alons/Checkbox validation message with right position (material-blue-light).png
diff --git a/...eckbox validation message with right position (material-blue-light-compact).png b/...eckbox validation message with right position (material-blue-light-compact).png
diff --git a/...etalons/Checkbox validation message with top position (material-blue-light).png b/...etalons/Checkbox validation message with top position (material-blue-light).png
diff --git a/...Checkbox validation message with top position (material-blue-light-compact).png b/...Checkbox validation message with top position (material-blue-light-compact).png
diff --git a/...alons/Datebox validation message with position=bottom (material-blue-light).png b/...alons/Datebox validation message with position=bottom (material-blue-light).png
diff --git a/...tebox validation message with position=bottom (material-blue-light-compact).png b/...tebox validation message with position=bottom (material-blue-light-compact).png
diff --git a/...Datebox validation message with position=left (material-blue-light-compact).png b/...Datebox validation message with position=left (material-blue-light-compact).png
diff --git a/...talons/Datebox validation message with position=right (material-blue-light).png b/...talons/Datebox validation message with position=right (material-blue-light).png
diff --git a/...atebox validation message with position=right (material-blue-light-compact).png b/...atebox validation message with position=right (material-blue-light-compact).png
diff --git a/.../etalons/Datebox validation message with position=top (material-blue-light).png b/.../etalons/Datebox validation message with position=top (material-blue-light).png
diff --git a/.../Datebox validation message with position=top (material-blue-light-compact).png b/.../Datebox validation message with position=top (material-blue-light-compact).png
diff --git a/...okup label with labelMode=floating-styleMode=outlined (material-blue-light).png b/...okup label with labelMode=floating-styleMode=outlined (material-blue-light).png
diff --git a/...Lookup label with labelMode=static-styleMode=outlined (material-blue-light).png b/...Lookup label with labelMode=static-styleMode=outlined (material-blue-light).png
diff --git a/...okup label with labelMode=static-styleMode=underlined (material-blue-light).png b/...okup label with labelMode=static-styleMode=underlined (material-blue-light).png
diff --git a/...s/radioGroup/etalons/RadioGroup horizontal validation (material-blue-light).png b/...s/radioGroup/etalons/RadioGroup horizontal validation (material-blue-light).png
diff --git a/...ts/editors/textBox/etalons/Textbox validation message (material-blue-light).png b/...ts/editors/textBox/etalons/Textbox validation message (material-blue-light).png