Combobox: 💄 group review fixes

navikt · Nov 11, 2024 · 096f11f · 096f11f
1 parent 702bf27
commit 096f11f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/@navikt/core/css/darkside/chips.darkside.css b/@navikt/core/css/darkside/chips.darkside.css
@@ -33,6 +33,12 @@
   }
 }
 
+.navds-chips--readonly {
+  .navds-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
+  }
+}
+
 .navds-chips--small {
   .navds-chips__chip {
     min-height: 1.5rem;

diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css
@@ -48,6 +48,13 @@
 .navds-combobox--readonly {
   pointer-events: none;
 
+  & .navds-combobox__selected-options {
+    & .navds-chips__chip {
+      /* TODO: remove !important and add readonly prop to Chips as well? == code changes */
+      background-color: var(--ax-bg-neutral-moderateA) !important;
+    }
+  }
+
   & .navds-combobox__button-toggle-list {
     color: var(--ax-bg-neutral-moderate);
   }
@@ -298,7 +305,7 @@
   justify-content: space-between;
   padding-block: var(--__axc-combobox-list-item-padding-block);
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
-  border-radius: calc(var(--ax-border-radius-medium) - 2px);
+  border-radius: var(--ax-border-radius-medium);
   border: 0;
   margin-inline: var(--ax-spacing-2);
   margin-block: var(--ax-spacing-1);
@@ -314,9 +321,10 @@
 }
 
 .navds-combobox__list-item--max-selected {
-  background-color: var(--ax-bg-accent-moderate);
+  background-color: var(--ax-bg-neutral-moderateA);
   margin: 0;
   border-radius: 0;
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
 }
 
 /* ul-list and selectable li-items */
@@ -384,11 +392,6 @@
   }
 }
 
-.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
-  border-bottom: 1px solid var(--ax-border-accent-subtleA);
-  background: var(--ax-bg-accent-moderate-hoverA);
-}
-
 .navds-combobox__list-item--new-option--focus {
   border-radius: calc(var(--ax-border-radius-medium) - 1px);