TextBox: Fix readonly input border state (T1217197)

DevExpress · Feb 27, 2024 · a867800 · a867800
1 parent f62799d
commit a867800
Show file tree

Hide file tree

Showing 15 changed files with 18 additions and 3 deletions.
diff --git a/packages/devextreme/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme/scss/widgets/base/textEditor/_mixins.scss
@@ -144,6 +144,7 @@
   $texteditor-border-color,
   $texteditor-border-bottom-color,
   $texteditor-disabled-color,
+  $texteditor-readonly-color,
   $texteditor-hover-border-color,
   $texteditor-hover-border-bottom-color,
   $texteditor-focused-border-color,
@@ -256,7 +257,7 @@
 
       &.dx-state-readonly {
         @include dx-state-border-style($label-readonly-border-style);
-        @include dx-state-border-color($texteditor-disabled-color, $texteditor-disabled-color);
+        @include dx-state-border-color($texteditor-readonly-color, $texteditor-readonly-color);
       }
 
       &.dx-state-disabled {

diff --git a/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss b/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss
@@ -513,6 +513,7 @@ $fluent-editor-border-width: 1px;
   $texteditor-border-color,
   $texteditor-border-bottom-color,
   $texteditor-border-color-disabled,
+  $texteditor-border-color-disabled,
   $texteditor-border-color-hover,
   $texteditor-border-bottom-color-hover,
   $texteditor-border-color-focused,

diff --git a/packages/devextreme/scss/widgets/generic/textEditor/_colors.scss b/packages/devextreme/scss/widgets/generic/textEditor/_colors.scss
@@ -52,6 +52,8 @@ $texteditor-invalid-faded-border-color: $base-invalid-faded-border-color !defaul
 $texteditor-filled-invalid-background: null !default;
 $texteditor-border-radius: $base-border-radius !default;
 $texteditor-input-border-radius: $base-border-radius !default;
+$texteditor-disabled-border-color: color.change($texteditor-color, $alpha: 0.5) !default;
+$texteditor-readonly-border-color: $base-border-color !default;
 $texteditor-label-transition:
   font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
   transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,

diff --git a/packages/devextreme/scss/widgets/generic/textEditor/_index.scss b/packages/devextreme/scss/widgets/generic/textEditor/_index.scss
@@ -255,7 +255,8 @@ $generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $gener
   none,
   $texteditor-border-color,
   $texteditor-border-color,
-  color.change($texteditor-color, $alpha: 0.5),
+  $texteditor-disabled-border-color,
+  $texteditor-readonly-border-color,
   $texteditor-hover-border-color,
   $texteditor-hover-border-color,
   $texteditor-focused-border-color,

diff --git a/packages/devextreme/scss/widgets/material/textEditor/_index.scss b/packages/devextreme/scss/widgets/material/textEditor/_index.scss
@@ -375,6 +375,7 @@ $material-editor-custom-button-margin: 5px;
   $texteditor-border-color,
   $texteditor-border-color,
   $texteditor-disabled-color,
+  $texteditor-disabled-color,
   $texteditor-hover-border-color,
   $texteditor-hover-border-color,
   $texteditor-focused-border-color,

diff --git a/...tBox/etalons/Textbox render readonly,stylingMode=filled (fluent-blue-light).png b/...tBox/etalons/Textbox render readonly,stylingMode=filled (fluent-blue-light).png
diff --git a/.../textBox/etalons/Textbox render readonly,stylingMode=filled (generic-light).png b/.../textBox/etalons/Textbox render readonly,stylingMode=filled (generic-light).png
diff --git a/...ox/etalons/Textbox render readonly,stylingMode=filled (material-blue-light).png b/...ox/etalons/Textbox render readonly,stylingMode=filled (material-blue-light).png
diff --git a/...ox/etalons/Textbox render readonly,stylingMode=outlined (fluent-blue-light).png b/...ox/etalons/Textbox render readonly,stylingMode=outlined (fluent-blue-light).png
diff --git a/...extBox/etalons/Textbox render readonly,stylingMode=outlined (generic-light).png b/...extBox/etalons/Textbox render readonly,stylingMode=outlined (generic-light).png
diff --git a/.../etalons/Textbox render readonly,stylingMode=outlined (material-blue-light).png b/.../etalons/Textbox render readonly,stylingMode=outlined (material-blue-light).png
diff --git a/.../etalons/Textbox render readonly,stylingMode=underlined (fluent-blue-light).png b/.../etalons/Textbox render readonly,stylingMode=underlined (fluent-blue-light).png
diff --git a/...tBox/etalons/Textbox render readonly,stylingMode=underlined (generic-light).png b/...tBox/etalons/Textbox render readonly,stylingMode=underlined (generic-light).png
diff --git a/...talons/Textbox render readonly,stylingMode=underlined (material-blue-light).png b/...talons/Textbox render readonly,stylingMode=underlined (material-blue-light).png
diff --git a/packages/devextreme/testing/testcafe/tests/editors/textBox/label.ts b/packages/devextreme/testing/testcafe/tests/editors/textBox/label.ts
@@ -24,6 +24,7 @@ const stylingModes = ['outlined', 'underlined', 'filled'];
 const TEXTBOX_CLASS = 'dx-textbox';
 const HOVER_STATE_CLASS = 'dx-state-hover';
 const FOCUSED_STATE_CLASS = 'dx-state-focused';
+const READONLY_STATE_CLASS = 'dx-state-readonly';
 const INVALID_STATE_CLASS = 'dx-invalid';
 
 [
@@ -73,7 +74,15 @@ stylingModes.forEach((stylingMode) => {
 
     await testScreenshot(t, takeScreenshot, `Textbox render stylingMode=${stylingMode}.png`);
 
-    for (const state of [HOVER_STATE_CLASS, FOCUSED_STATE_CLASS, INVALID_STATE_CLASS, `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`] as any[]) {
+    const states = [
+      HOVER_STATE_CLASS,
+      FOCUSED_STATE_CLASS,
+      READONLY_STATE_CLASS,
+      INVALID_STATE_CLASS,
+      `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`,
+    ];
+
+    for (const state of states as any[]) {
       for (const id of t.ctx.ids) {
         await setClassAttribute(Selector(`#${id}`), state);
       }