Bugfix/missing red border on combobox with error (#2184)

Co-authored-by: Ken <ken.aleksander@gmail.com>
navikt · Aug 17, 2023 · 5cda39c · 5cda39c
1 parent 6cb25e4
commit 5cda39c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/.changeset/fifty-spoons-tap.md b/.changeset/fifty-spoons-tap.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Added red border to Combobox in error state
diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
@@ -32,6 +32,16 @@
   cursor: text;
 }
 
+.navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
+  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+}
+
+.navds-combobox--error
+  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+
 .navds-combobox__selected-options {
   gap: var(--a-spacing-2);
   align-items: center;

diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
@@ -388,7 +388,8 @@
     "--ac-combobox-list-item-selected-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-combobox-list-item-loading-bg": "--a-surface-default",
     "--ac-combobox-list-item-hover-border-left": "--a-border-strong",
-    "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus"
+    "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus",
+    "--ac-combobox-error-border": "--a-border-danger"
   },
   "select": {
     "--ac-select-bg": "--a-surface-default",

diff --git a/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx b/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx
@@ -49,10 +49,9 @@ const ComboboxWrapper = ({
         className,
         "navds-form-field",
         `navds-form-field--${inputSize}`,
-        "navds-search",
         {
-          "navds-search--error": hasError,
-          "navds-search--disabled": !!inputProps.disabled,
+          "navds-combobox--error": hasError,
+          "navds-combobox--disabled": !!inputProps.disabled,
           "navds-combobox--focused": hasFocusWithin,
         }
       )}