fix(input-group): remove invalid styles when in readonly state

SisIvanova · SisIvanova · commit b91802f82a13 · 2025-07-15T17:37:50.000+03:00
diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss
@@ -97,8 +97,8 @@ $input-theme: input-theme.$material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not(:disabled, [readonly])[invalid]) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss
@@ -3,7 +3,7 @@
 
 $theme: $material;
 
-:host(:not([invalid])[outlined][readonly]:hover) {
+:host([outlined][readonly]:hover) {
     igc-date-time-input::part(start),
     igc-date-time-input::part(end),
     igc-date-time-input::part(filler) {
@@ -15,7 +15,7 @@ $theme: $material;
     }
 }
 
-:host(:not([invalid])[outlined][readonly]) {
+:host([outlined][readonly]) {
     igc-date-time-input:focus-within {
         &::part(start),
         &::part(end),
@@ -35,7 +35,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]) {
+:host(:not([outlined])[readonly]) {
     igc-date-time-input:hover {
         &::part(container) {
             border-bottom-color: var-get($theme, 'idle-bottom-line-color');
@@ -56,16 +56,3 @@ $theme: $material;
         }
     }
 }
-
-:host(:not([outlined])[readonly][invalid]) {
-    igc-date-time-input:hover,
-    igc-date-time-input:focus-within {
-        &::part(container) {
-            border-color: var-get($theme, 'error-secondary-color');
-
-            &::after {
-                border-color: var-get($theme, 'error-secondary-color');
-            }
-        }
-    }
-}
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
@@ -33,6 +33,18 @@ $theme: $bootstrap;
     }
 }
 
+:host(:not([disabled], [readonly])[invalid]) {
+    igc-input::part(input) {
+        border-color: var-get($theme, 'error-secondary-color');
+    }
+}
+
+:host(:not([disabled], [readonly])[invalid]:focus-within) {
+    igc-input::part(input) {
+        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+    }
+}
+
 [part='separator'] {
     @include type-style('body-1');
 }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
@@ -91,8 +91,8 @@ $theme: $material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not(:disabled, [readonly])[invalid]) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
@@ -44,6 +44,22 @@ $theme: $fluent;
     }
 }
 
+:host(:not([disabled], [readonly])[invalid]) {
+    igc-input::part(container) {
+        &::before {
+            box-shadow: inset 0 0 0 var(--input-border-size) var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
+:host(:not([disabled], [readonly])[invalid]:focus-within) {
+    igc-input::part(container) {
+        &::before {
+            box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     ::part(label)::after {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
@@ -53,6 +53,17 @@ $theme: $indigo;
     }
 }
 
+:host(:not([disabled], [readonly])[invalid]) {
+    igc-input::part(container) {
+        caret-color: initial;
+        border-color: var-get($theme, 'error-secondary-color');
+
+        &::after {
+            background: var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
 :host(:not([disabled])[invalid]),
 :host(:not(:disabled)[invalid]) {
     ::part(helper-text) {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
@@ -3,7 +3,7 @@
 
 $theme: $material;
 
-:host(:not([invalid])[outlined][readonly]:hover) {
+:host([outlined][readonly]:hover) {
     igc-input::part(start),
     igc-input::part(end),
     igc-input::part(filler),
@@ -19,7 +19,7 @@ $theme: $material;
     }
 }
 
-:host(:not([invalid])[outlined][readonly]:focus-within) {
+:host([outlined][readonly]:focus-within) {
     igc-input::part(start),
     igc-input::part(end),
     igc-input::part(filler) {
@@ -31,7 +31,7 @@ $theme: $material;
     }
 }
 
-:host(:not([invalid])[outlined][readonly]) {
+:host([outlined][readonly]) {
     igc-date-time-input:focus-within {
         &::part(start),
         &::part(end),
@@ -45,14 +45,26 @@ $theme: $material;
     }
 }
 
+:host(:not([disabled],[readonly])[outlined][invalid]) {
+    igc-input::part(start),
+    igc-input::part(end),
+    igc-input::part(filler) {
+        border-color: var-get($theme, 'error-secondary-color');
+    }
+
+    &::part(notch) {
+        border-bottom-color: var-get($theme, 'error-secondary-color');
+    }
+}
+
 :host(:not([outlined],[disabled])[readonly]) {
     igc-input::part(container),
     igc-date-time-input::part(container) {
         background: var-get($theme, 'box-background-focus');
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]:hover) {
+:host(:not([outlined])[readonly]:hover) {
     igc-input::part(container) {
         border-bottom-color: var-get($theme, 'idle-bottom-line-color');
 
@@ -62,7 +74,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]:focus-within) {
+:host(:not([outlined])[readonly]:focus-within) {
     igc-input::part(container) {
         border-bottom-color: var-get($theme, 'focused-bottom-line-color');
 
@@ -72,7 +84,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]) {
+:host(:not([outlined])[readonly]) {
     igc-date-time-input:hover {
         &::part(container) {
             border-bottom-color: var-get($theme, 'idle-bottom-line-color');
@@ -94,26 +106,18 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined])[invalid][readonly]:hover),
-:host(:not([outlined])[invalid][readonly]:focus-within) {
+:host(:not([disabled],[readonly])[invalid]) {
+    igc-input::part(label) {
+        color: var-get($theme, 'error-secondary-color');
+    }
+}
+
+:host(:not([disabled],[readonly],[outlined])[invalid]) {
     igc-input::part(container) {
         border-color: var-get($theme, 'error-secondary-color');
 
         &::after {
-            border-color: var-get($theme, 'error-secondary-color');
+            background: var-get($theme, 'error-secondary-color');
         }
     }
 }
-
-:host(:not([outlined])[readonly][invalid]) {
-    igc-date-time-input:hover,
-    igc-date-time-input:focus-within {
-        &::part(container) {
-            border-color: var-get($theme, 'error-secondary-color');
-
-            &::after {
-                border-color: var-get($theme, 'error-secondary-color');
-            }
-        }
-    }
-}
diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss
@@ -170,13 +170,17 @@ $theme: $bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     [part~='input'] {
         border-color: var-get($theme, 'error-secondary-color');
     }
 }
 
-:host(:not([disabled])[invalid]:focus-within) {
+:host(:not([disabled], [readonly])[invalid]:focus-within),
+:host(:not([disabled])[role='combobox'][invalid]:focus-within),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]:focus-within) {
     [part~='input'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
     }
diff --git a/src/components/input/themes/shared/input.common.scss b/src/components/input/themes/shared/input.common.scss
@@ -64,7 +64,7 @@ $theme: $base;
     }
 }
 
-:host([invalid]) {
+:host([invalid]:not([disabled], [readonly])) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss
@@ -189,10 +189,10 @@ $theme: $fluent;
     }
 }
 
-:host([invalid]),
-:host([invalid]:hover),
-:host([readonly][invalid]:hover),
-:host([readonly][invalid]:focus-within) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not([disabled], [readonly])[invalid]:hover),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
@@ -204,8 +204,9 @@ $theme: $fluent;
     }
 }
 
-:host([invalid]:focus-within),
-:host([readonly][invalid]:focus-within) {
+:host(:not([disabled], [readonly])[invalid]:focus-within),
+:host(:not([disabled])[role='combobox'][invalid]:focus-within),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]:focus-within) {
     [part~='container'] {
         &::before {
             box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss
@@ -173,9 +173,10 @@ $transition-duration: .25s;
     }
 }
 
-:host([invalid]),
-:host([invalid]:hover),
-:host([invalid][readonly]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not([disabled], [readonly])[invalid]:hover),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     [part^='container'] {
         caret-color: initial;
         border-color: var-get($theme, 'error-secondary-color');
diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss
@@ -262,9 +262,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([outlined])[invalid]),
-:host(:not([outlined])[invalid]:focus-within),
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[invalid][readonly]:hover) {
+:host(:not([outlined], [readonly])[invalid]),
+:host(:not([outlined], [readonly])[invalid]:focus-within),
+:host(:not([disabled], [outlined])[role='combobox'][invalid]),
+:host(:not([disabled], [outlined])[role='combobox'][invalid]:focus-within) {
     [part~='container'] {
         border-color: var-get($theme, 'error-secondary-color');
 
@@ -457,14 +458,17 @@ input:placeholder-shown + [part='notch'] [part='label'],
         }
 
         input:not(:placeholder-shown) + [part='notch'] {
-            border: {
-                width: $active-border-width;
-                color: var-get($theme, 'focused-border-color');
-            }
+            border-width: $active-border-width;
         }
     }
 }
 
+:host(:not([type='search'],[invalid])[readonly][outlined]:focus-within) {
+    input:not(:placeholder-shown) + [part='notch'] {
+        border-color: var-get($theme, 'focused-border-color');
+    }
+}
+
 :host(:not([type='search'])[outlined]:hover) {
     [part='notch'],
     [part='start'],
@@ -540,9 +544,11 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'])[outlined][invalid]),
-:host(:not([type='search'])[outlined][invalid]:focus-within),
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly][invalid]:hover) {
+:host(:not([type='search'], [readonly])[outlined][invalid]),
+:host(:not([type='search'], [readonly])[outlined][invalid]:focus-within),
+:host(:not([type='search'], [disabled])[role='combobox'][outlined][invalid]),
+:host(:not([disabled])[role='combobox'][readonly][outlined][invalid]:focus-within),
+:host(:not([type='search'], [readonly], [disabled])[aria-haspopup='dialog'][outlined][invalid]) {
     [part='start'],
     [part='notch'],
     [part='filler'],
@@ -556,28 +562,17 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'])[outlined][invalid]:focus-within) {
+:host(:not([type='search'], [readonly])[outlined][invalid]:focus-within),
+:host(:not([type='search'])[role='combobox'][outlined][invalid]:focus-within),
+:host(:not([type='search'], [readonly])[aria-haspopup='dialog'][outlined][invalid]:focus-within) {
     [part='notch'] {
         border-top: $idle-border-width solid transparent;
     }
 }
 
-:host(:not([type='search'])[readonly][outlined][invalid]:focus-within) {
-    input:not(:placeholder-shown) + [part='notch'] {
-        border: {
-            width: $active-border-width;
-            color: var-get($theme, 'error-secondary-color');
-            top: $active-border-width solid
-                var-get($theme, 'error-secondary-color');
-        }
-    }
-
-    [part~='filled'] + [part='notch'] {
-        border-top: $idle-border-width solid transparent !important;
-    }
-}
-
-:host([invalid]) {
+:host(:not([readonly], [disabled])[invalid]),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     [part='label'] {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss
diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss
diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss
diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss
diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss

Original file line number	Diff line number	Diff line change
`@@ -97,8 +97,8 @@ $input-theme: input-theme.$material;`
`97`	`97`	`}`
`98`	`98`	`}`
`99`	`99`
`100`		`-:host(:not([disabled])[invalid]),`
`101`		`-:host(:not(:disabled)[invalid]) {`
	`100`	`+:host(:not([disabled], [readonly])[invalid]),`
	`101`	`+:host(:not(:disabled, [readonly])[invalid]) {`
`102`	`102`	`::part(helper-text) {`
`103`	`103`	`color: var-get($theme, 'error-secondary-color');`
`104`	`104`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`
`4`	`4`	`$theme: $material;`
`5`	`5`
`6`		`-:host(:not([invalid])[outlined][readonly]:hover) {`
	`6`	`+:host([outlined][readonly]:hover) {`
`7`	`7`	`igc-date-time-input::part(start),`
`8`	`8`	`igc-date-time-input::part(end),`
`9`	`9`	`igc-date-time-input::part(filler) {`
`@@ -15,7 +15,7 @@ $theme: $material;`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`18`		`-:host(:not([invalid])[outlined][readonly]) {`
	`18`	`+:host([outlined][readonly]) {`
`19`	`19`	`igc-date-time-input:focus-within {`
`20`	`20`	`&::part(start),`
`21`	`21`	`&::part(end),`
`@@ -35,7 +35,7 @@ $theme: $material;`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
`38`		`-:host(:not([outlined],[invalid])[readonly]) {`
	`38`	`+:host(:not([outlined])[readonly]) {`
`39`	`39`	`igc-date-time-input:hover {`
`40`	`40`	`&::part(container) {`
`41`	`41`	`border-bottom-color: var-get($theme, 'idle-bottom-line-color');`
`@@ -56,16 +56,3 @@ $theme: $material;`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`	`}`
`59`		`-`
`60`		`-:host(:not([outlined])[readonly][invalid]) {`
`61`		`- igc-date-time-input:hover,`
`62`		`- igc-date-time-input:focus-within {`
`63`		`- &::part(container) {`
`64`		`- border-color: var-get($theme, 'error-secondary-color');`
`65`		`-`
`66`		`- &::after {`
`67`		`- border-color: var-get($theme, 'error-secondary-color');`
`68`		`- }`
`69`		`- }`
`70`		`- }`
`71`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,18 @@ $theme: $bootstrap;`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
	`36`	`+:host(:not([disabled], [readonly])[invalid]) {`
	`37`	`+ igc-input::part(input) {`
	`38`	`+ border-color: var-get($theme, 'error-secondary-color');`
	`39`	`+ }`
	`40`	`+}`
	`41`	`+`
	`42`	`+:host(:not([disabled], [readonly])[invalid]:focus-within) {`
	`43`	`+ igc-input::part(input) {`
	`44`	`+ box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');`
	`45`	`+ }`
	`46`	`+}`
	`47`	`+`
`36`	`48`	`[part='separator'] {`
`37`	`49`	`@include type-style('body-1');`
`38`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -91,8 +91,8 @@ $theme: $material;`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`
`94`		`-:host(:not([disabled])[invalid]),`
`95`		`-:host(:not(:disabled)[invalid]) {`
	`94`	`+:host(:not([disabled], [readonly])[invalid]),`
	`95`	`+:host(:not(:disabled, [readonly])[invalid]) {`
`96`	`96`	`::part(helper-text) {`
`97`	`97`	`color: var-get($theme, 'error-secondary-color');`
`98`	`98`	`}`
Original file line number	Diff line number	Diff line change
`@@ -170,13 +170,17 @@ $theme: $bootstrap;`
`170`	`170`	`}`
`171`	`171`	`}`
`172`	`172`
`173`		`-:host(:not([disabled])[invalid]) {`
	`173`	`+:host(:not([disabled], [readonly])[invalid]),`
	`174`	`+:host(:not([disabled])[role='combobox'][invalid]),`
	`175`	`+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {`
`174`	`176`	`[part~='input'] {`
`175`	`177`	`border-color: var-get($theme, 'error-secondary-color');`
`176`	`178`	`}`
`177`	`179`	`}`
`178`	`180`
`179`		`-:host(:not([disabled])[invalid]:focus-within) {`
	`181`	`+:host(:not([disabled], [readonly])[invalid]:focus-within),`
	`182`	`+:host(:not([disabled])[role='combobox'][invalid]:focus-within),`
	`183`	`+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]:focus-within) {`
`180`	`184`	`[part~='input'] {`
`181`	`185`	`box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');`
`182`	`186`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ $theme: $base;`
`64`	`64`	`}`
`65`	`65`	`}`
`66`	`66`
`67`		`-:host([invalid]) {`
	`67`	`+:host([invalid]:not([disabled], [readonly])) {`
`68`	`68`	`::part(helper-text) {`
`69`	`69`	`color: var-get($theme, 'error-secondary-color');`
`70`	`70`	`}`
Original file line number	Diff line number	Diff line change
`@@ -189,10 +189,10 @@ $theme: $fluent;`
`189`	`189`	`}`
`190`	`190`	`}`
`191`	`191`
`192`		`-:host([invalid]),`
`193`		`-:host([invalid]:hover),`
`194`		`-:host([readonly][invalid]:hover),`
`195`		`-:host([readonly][invalid]:focus-within) {`
	`192`	`+:host(:not([disabled], [readonly])[invalid]),`
	`193`	`+:host(:not([disabled], [readonly])[invalid]:hover),`
	`194`	`+:host(:not([disabled])[role='combobox'][invalid]),`
	`195`	`+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {`
`196`	`196`	`::part(helper-text) {`
`197`	`197`	`color: var-get($theme, 'error-secondary-color');`
`198`	`198`	`}`
`@@ -204,8 +204,9 @@ $theme: $fluent;`
`204`	`204`	`}`
`205`	`205`	`}`
`206`	`206`
`207`		`-:host([invalid]:focus-within),`
`208`		`-:host([readonly][invalid]:focus-within) {`
	`207`	`+:host(:not([disabled], [readonly])[invalid]:focus-within),`
	`208`	`+:host(:not([disabled])[role='combobox'][invalid]:focus-within),`
	`209`	`+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]:focus-within) {`
`209`	`210`	`[part~='container'] {`
`210`	`211`	`&::before {`
`211`	`212`	`box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');`