Remove space from combobox single select (#3384)

* When single select on combobox, remove the gap between the input and the selected value.

* ♻️ Updated spacing between options and input in Combobox

* 📝 Changeset

* Revert darkside update

* ♻️ Update darkside combobox

* :refactor: Make gap something we add, not remove for chips based on type

* Update .changeset/yellow-days-rhyme.md

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

* :refactor: Only add margin-left when only-child

---------

Co-authored-by: Ken <ken.aleksander@gmail.com>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

.changeset/yellow-days-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Combobox: Single-select now shows cursor closer to selected item.

@navikt/core/css/darkside/form/combobox.darkside.css

@@ -128,7 +128,7 @@
 }
 
 .navds-combobox__selected-options {
-  gap: var(--__axc-combobox-wrapper-inner-padding);
+  gap: 0;
   align-items: center;
 
   & > li {
@@ -140,6 +140,10 @@
     display: flex;
     flex: 1;
   }
+
+  &[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
 }
 
 .navds-combobox__selected-options--no-bg {
@@ -161,7 +165,6 @@
   border: none;
   padding: 0;
   margin: 0;
-  margin-left: var(--ax-spacing-1);
   min-width: 10ch;
   width: 100%;
   height: var(--__axc-combobox-input-height);
@@ -171,6 +174,10 @@
     outline: 0;
     border: none;
   }
+
+  .navds-combobox__selected-options > li:only-child > & {
+    margin-left: var(--ax-spacing-1);
+  }
 }
 
 .navds-combobox__input--hide-caret {

@navikt/core/css/form/combobox.css

@@ -96,7 +96,7 @@
 }
 
 .navds-combobox__selected-options {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
+  gap: 0;
   align-items: center;
 }
 
@@ -120,6 +120,14 @@
   padding-left: 0.25rem;
 }
 
+.navds-combobox__selected-options[data-type="multiple"] {
+  gap: var(--__ac-combobox-wrapper-inner-padding);
+}
+
+.navds-combobox__selected-options > li:only-child > .navds-combobox__input {
+  margin-left: var(--a-spacing-1);
+}
+
 .navds-combobox__input-wrapper {
   width: 100%;
 }
@@ -129,7 +137,6 @@
   border: none;
   padding: 0;
   margin: 0;
-  margin-left: var(--a-spacing-1);
   min-width: 10ch;
   width: 100%;
   height: var(--__ac-combobox-input-height);

@navikt/core/react/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -45,7 +45,11 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
   const { value } = useInputContext();
   const { isMultiSelect } = useSelectedOptionsContext();
   return (
-    <Chips className="navds-combobox__selected-options" size={size}>
+    <Chips
+      className="navds-combobox__selected-options"
+      size={size}
+      data-type={isMultiSelect ? "multiple" : "single"}
+    >
       {value.length === 0 || (isMultiSelect && selectedOptions.length)
         ? selectedOptions.map((option, i) => (
             <Option key={option.label + i} option={option} />