fix(styles): add back chevron on valid and invalid select (#3075)

swisspost · May 13, 2024 · a48c83d · a48c83d
1 parent b5a7941
commit a48c83d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/.changeset/angry-tools-hide.md b/.changeset/angry-tools-hide.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed missing chevron in valid and invalid select entries.
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -40,8 +40,6 @@
   &:not(:disabled) {
     &:hover,
     &:focus {
-      border-color: var(--post-contrast-color);
-
       @include utilities.high-contrast-mode {
         border-color: FieldText;
       }

diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
@@ -104,18 +104,6 @@
     &:focus {
       border-color: form-validation.$form-feedback-invalid-color;
     }
-
-    &:not(&[type='file']) {
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
-
-      @include utilities-mx.high-contrast-mode() {
-        background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
-
-        @media (prefers-color-scheme: light) {
-          background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
-        }
-      }
-    }
   }
 
   &.is-valid {
@@ -124,18 +112,6 @@
     &:focus {
       border-color: form-validation.$form-feedback-valid-color;
     }
-
-    &:not(&[type='file']) {
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
-
-      @include utilities-mx.high-contrast-mode() {
-        background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
-
-        @media (prefers-color-scheme: light) {
-          background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
-        }
-      }
-    }
   }
 
   &.is-invalid,
@@ -159,6 +135,32 @@
   }
 }
 
+.form-control:not([type='file']) {
+  &.is-invalid {
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
+
+    @include utilities-mx.high-contrast-mode() {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
+
+      @media (prefers-color-scheme: light) {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
+      }
+    }
+  }
+
+  &.is-valid {
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+
+    @include utilities-mx.high-contrast-mode() {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
+
+      @media (prefers-color-scheme: light) {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
+      }
+    }
+  }
+}
+
 .form-check-input {
   @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;