Fix invalid input styles (#2199)

sumup-oss · Jul 23, 2023 · 451dbdc · 451dbdc
1 parent 08fa046
commit 451dbdc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/.changeset/clean-cars-nail.md b/.changeset/clean-cars-nail.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the invalid styles for the Input and Select components.
diff --git a/packages/circuit-ui/components/Input/Input.module.css b/packages/circuit-ui/components/Input/Input.module.css
@@ -47,23 +47,23 @@
 
 /* Validations */
 
-.base[aria-invalid] {
+.base[aria-invalid="true"] {
   box-shadow: 0 0 0 1px var(--cui-border-danger);
 }
 
-.base[aria-invalid]:hover {
+.base[aria-invalid="true"]:hover {
   box-shadow: 0 0 0 1px var(--cui-border-danger-hovered);
 }
 
-.base[aria-invalid]:focus {
+.base[aria-invalid="true"]:focus {
   box-shadow: 0 0 0 2px var(--cui-border-danger);
 }
 
-.base[aria-invalid]:active {
+.base[aria-invalid="true"]:active {
   box-shadow: 0 0 0 1px var(--cui-border-danger-pressed);
 }
 
-.base[aria-invalid]:not(:focus):not([disabled])::placeholder {
+.base[aria-invalid="true"]:not(:focus):not([disabled])::placeholder {
   color: var(--cui-fg-danger);
 }
 

diff --git a/packages/circuit-ui/components/Select/Select.module.css b/packages/circuit-ui/components/Select/Select.module.css
@@ -54,19 +54,19 @@
 
 /* Validations */
 
-.base[aria-invalid] {
+.base[aria-invalid="true"] {
   box-shadow: 0 0 0 1px var(--cui-border-danger);
 }
 
-.base[aria-invalid]:hover {
+.base[aria-invalid="true"]:hover {
   box-shadow: 0 0 0 1px var(--cui-border-danger-hovered);
 }
 
-.base[aria-invalid]:focus {
+.base[aria-invalid="true"]:focus {
   box-shadow: 0 0 0 2px var(--cui-border-danger);
 }
 
-.base[aria-invalid]:active {
+.base[aria-invalid="true"]:active {
   box-shadow: 0 0 0 1px var(--cui-border-danger-pressed);
 }