refactor(Combobox2): rename classname to combo-box

.storybook/preview.tsx

@@ -10,8 +10,8 @@ import "../@navikt/core/css/src/data-token-filter.css";
 import dataTokenFilterStyles from "../@navikt/core/css/src/data-token-filter.css?inline";
 import "../@navikt/core/css/src/data-toolbar.css";
 import dataToolbarStyles from "../@navikt/core/css/src/data-toolbar.css?inline";
-import "../@navikt/core/css/src/form/combobox2.css";
-import combobox2Styles from "../@navikt/core/css/src/form/combobox2.css?inline";
+import "../@navikt/core/css/src/form/combo-box.css";
+import combobox2Styles from "../@navikt/core/css/src/form/combo-box.css?inline";
 import "../@navikt/core/css/src/index.css";
 import dsStyles from "../@navikt/core/css/src/index.css?inline";
 import "../@navikt/core/css/src/listbox.css";

@navikt/core/css/src/form/combo-box.css

@@ -1,4 +1,4 @@
-.aksel-combobox2[data-disabled="true"] {
+.aksel-combo-box[data-disabled="true"] {
   opacity: var(--ax-opacity-disabled);
   pointer-events: none;
 }
@@ -7,16 +7,16 @@
  * Label & description & error                  *
  ************************************************/
 
-.aksel-combobox2__label {
+.aksel-combo-box__label {
   display: flex;
   margin-bottom: var(--ax-space-8);
 }
 
-.aksel-combobox2__description {
+.aksel-combo-box__description {
   margin-bottom: var(--ax-space-8);
 }
 
-.aksel-combobox2__error {
+.aksel-combo-box__error {
   margin-top: var(--ax-space-8);
 }
 
@@ -24,11 +24,11 @@
  * Field                                        *
  ************************************************/
 
-.aksel-combobox2__field-container {
+.aksel-combo-box__field-container {
   position: relative;
 }
 
-.aksel-combobox2__field-btn {
+.aksel-combo-box__field-btn {
   background-color: var(--ax-bg-input);
   border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-neutral);
@@ -62,7 +62,7 @@
     color: ButtonText;
   }
 
-  .aksel-combobox2[data-size="small"] & {
+  .aksel-combo-box[data-size="small"] & {
     min-height: 2rem;
     padding-block: 0;
   }
@@ -79,7 +79,7 @@
   }
 }
 
-.aksel-combobox2__field-chevron {
+.aksel-combo-box__field-chevron {
   position: absolute;
   right: var(--ax-space-8);
   top: 0;
@@ -92,7 +92,7 @@
     color: ButtonText;
   }
 
-  .aksel-combobox2[data-size="small"] & {
+  .aksel-combo-box[data-size="small"] & {
     margin-top: 0.25rem;
   }
 }
@@ -101,7 +101,7 @@
  * Overlay                                      *
  ************************************************/
 
-.aksel-combobox2__modal {
+.aksel-combo-box__modal {
   /**
    * We set the height of the content to the visible viewport, but the virtual
    * keyboard will still compensate for it's precence by adding some empty space
@@ -119,7 +119,7 @@
   touch-action: pinch-zoom pan-x;
 }
 
-.aksel-combobox2__modal-inner {
+.aksel-combo-box__modal-inner {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -129,7 +129,7 @@
  * Popup                                        *
  ************************************************/
 
-.aksel-combobox2__popup {
+.aksel-combo-box__popup {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   min-width: var(--__axc-floating-anchor-width);
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
@@ -142,7 +142,7 @@
   flex-direction: column;
   overflow: hidden;
 
-  .aksel-combobox2:not(:has(.aksel-combobox2__modal)) & {
+  .aksel-combo-box:not(:has(.aksel-combo-box__modal)) & {
     outline: 1px solid var(--ax-border-neutral-subtleA);
     outline-offset: -1px;
     border-radius: var(--ax-radius-8);
@@ -154,11 +154,11 @@
  * Filter input                                 *
  ************************************************/
 
-.aksel-combobox2__filter {
+.aksel-combo-box__filter {
   margin: -1px;
 }
 
-.aksel-combobox2__filter .aksel-search__wrapper:has(.aksel-search__input:focus-visible) {
+.aksel-combo-box__filter .aksel-search__wrapper:has(.aksel-search__input:focus-visible) {
   outline: none;
   position: relative;
 
@@ -170,13 +170,13 @@
     border: 2px solid var(--ax-border-focus);
   }
 
-  .aksel-combobox2:not(:has(.aksel-combobox2__modal)) &::after {
+  .aksel-combo-box:not(:has(.aksel-combo-box__modal)) &::after {
     border-top-left-radius: var(--ax-radius-8);
     border-top-right-radius: var(--ax-radius-8);
   }
 }
 
-.aksel-combobox2__filter .aksel-search__input {
+.aksel-combo-box__filter .aksel-search__input {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 
@@ -184,11 +184,11 @@
     border-color: var(--ax-border-neutral-subtleA);
   }
 
-  .aksel-combobox2__popup[data-size="medium"] & {
+  .aksel-combo-box__popup[data-size="medium"] & {
     min-height: 0;
   }
 
-  .aksel-combobox2__modal & {
+  .aksel-combo-box__modal & {
     border-radius: 0;
   }
 }
@@ -197,10 +197,10 @@
  * List                                         *
  ************************************************/
 
-.aksel-combobox2__list {
+.aksel-combo-box__list {
   padding-block: var(--ax-space-12);
 
-  .aksel-combobox2__modal & {
+  .aksel-combo-box__modal & {
     padding-inline: var(--ax-space-16);
 
     /* Prevents scrolling to area taken up by virtual keyboard.
@@ -211,7 +211,7 @@
   }
 }
 
-.aksel-combobox2__no-results {
+.aksel-combo-box__no-results {
   padding: var(--ax-space-12) var(--ax-space-8);
   text-align: center;
 }
@@ -220,7 +220,7 @@
  * Option                                       *
  ************************************************/
 
-.aksel-combobox2__option:is([aria-selected="true"], [aria-selected="true"][data-virtual-focus="true"])
+.aksel-combo-box__option:is([aria-selected="true"], [aria-selected="true"][data-virtual-focus="true"])
   .aksel-listbox__option-inner {
   background-color: var(--ax-bg-moderate-pressedA);
 
@@ -231,30 +231,23 @@
   }
 }
 
-.aksel-combobox2__option-checkmark {
-  --__axc-combobox2-option-checkmark-size: 1.25rem;
+.aksel-combo-box__option-checkmark {
+  --__axc-combo-box-option-checkmark-size: 1.25rem;
 
-  width: var(--__axc-combobox2-option-checkmark-size);
-  height: var(--__axc-combobox2-option-checkmark-size);
+  width: var(--__axc-combo-box-option-checkmark-size);
+  height: var(--__axc-combo-box-option-checkmark-size);
   margin-top: var(--ax-space-2);
   float: left;
 
-  .aksel-combobox2__popup[data-size="small"] & {
-    --__axc-combobox2-option-checkmark-size: 1rem;
+  .aksel-combo-box__popup[data-size="small"] & {
+    --__axc-combo-box-option-checkmark-size: 1rem;
   }
 
   & svg {
-    font-size: var(--__axc-combobox2-option-checkmark-size);
+    font-size: var(--__axc-combo-box-option-checkmark-size);
   }
 }
 
-.aksel-combobox2__option-label {
+.aksel-combo-box__option-label {
   padding-left: var(--ax-space-24);
-
-  /* &[data-nowrap="true"] {
-    padding-left: var(--ax-space-2);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  } */
 }

@navikt/core/react/src/form/combobox2/Combobox.tsx

@@ -99,7 +99,7 @@ const Combobox = forwardRef(
         {!!description && (
           <BodyShort
             className={cl(
-              "aksel-form-field__description aksel-combobox2__description",
+              "aksel-form-field__description aksel-combo-box__description",
               { "aksel-sr-only": hideLabel },
             )}
             id={inputDescriptionId}
@@ -113,7 +113,7 @@ const Combobox = forwardRef(
           <ComboboxField ref={ref} hasError={hasError} />
         </ComboboxTrigger>
         <div
-          className="aksel-form-field__error aksel-combobox2__error"
+          className="aksel-form-field__error aksel-combo-box__error"
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

@navikt/core/react/src/form/combobox2/field/ComboboxField.tsx

@@ -35,13 +35,13 @@ const ComboboxField = forwardRef<HTMLButtonElement, ComboboxFieldProps>(
     }, [label]);
 
     return (
-      <div className="aksel-combobox2__field-container">
+      <div className="aksel-combo-box__field-container">
         <button
           type="button"
           ref={ref}
           data-error={hasError}
           className={cl(
-            "aksel-combobox2__field-btn",
+            "aksel-combo-box__field-btn",
             "aksel-body-short",
             `aksel-body-short--${size ?? "medium"}`,
           )}
@@ -51,7 +51,7 @@ const ComboboxField = forwardRef<HTMLButtonElement, ComboboxFieldProps>(
           {label}
         </button>
         <ChevronDownIcon
-          className="aksel-combobox2__field-chevron"
+          className="aksel-combo-box__field-chevron"
           aria-hidden
         />
       </div>

@navikt/core/react/src/form/combobox2/filter/ComboboxFilter.tsx

@@ -21,7 +21,7 @@ export const ComboboxFilter = (props: ComboboxFilterProps) => {
   } = useComboboxPopupContext();
 
   return (
-    <div className="aksel-combobox2__filter">
+    <div className="aksel-combo-box__filter">
       <Listbox.InputSlot virtuallyFocusedOptionId={virtuallyFocusedOptionValue}>
         <Search
           value={filterString}

@navikt/core/react/src/form/combobox2/label/ComboboxLabel.tsx

@@ -23,7 +23,7 @@ const ComboboxLabel = ({
   return (
     <Label
       className={cl(
-        "aksel-form-field__label aksel-combobox2__label",
+        "aksel-form-field__label aksel-combo-box__label",
         className,
         { "aksel-sr-only": hide },
       )}

@navikt/core/react/src/form/combobox2/list/ComboboxList.tsx

@@ -38,9 +38,9 @@ function ComboboxList<
 
   return (
     <>
-      <Listbox.Options className="aksel-combobox2__list">
+      <Listbox.Options className="aksel-combo-box__list">
         {/*isPending && (
-        <div className="aksel-combobox2__loading" role="status">
+        <div className="aksel-combo-box__loading" role="status">
           Laster...
         </div>
       )*/}
@@ -89,7 +89,7 @@ function ComboboxListContent<
   if (filteredOptions.length === 0) {
     // TODO: Consider moving outside of role=listbox
     return (
-      <div className="aksel-combobox2__no-results">{translate("noHits")}</div>
+      <div className="aksel-combo-box__no-results">{translate("noHits")}</div>
     );
   }
 

@navikt/core/react/src/form/combobox2/option/ComboboxOption.tsx

@@ -26,19 +26,16 @@ function ComboboxOptionComponent<T extends ComboboxOptionData>({
 
   return (
     <Listbox.Option
-      className="aksel-combobox2__option"
+      className="aksel-combo-box__option"
       id={option.value}
       onClick={() => onToggleOption(option, !isSelected)}
       aria-selected={isSelected}
       hasVirtualFocus={hasVirtualFocus}
     >
-      <div className="aksel-combobox2__option-checkmark" aria-hidden>
+      <div className="aksel-combo-box__option-checkmark" aria-hidden>
         {isSelected && <CheckmarkHeavyIcon aria-hidden />}
       </div>
-      <div
-        className="aksel-combobox2__option-label"
-        //data-nowrap={!children || typeof children === "string"}
-      >
+      <div className="aksel-combo-box__option-label">
         {typeof children === "function"
           ? children(option)
           : (children ??

@navikt/core/react/src/form/combobox2/overlay/ComboboxOverlay.tsx

@@ -125,10 +125,10 @@ function ComboboxModal({ children, open, onOpenChange }: ComboboxModalProps) {
 
   return (
     <Dialog size="small" open={open} onOpenChange={onOpenChange}>
-      <Dialog.Popup className="aksel-combobox2__modal" position="fullscreen">
+      <Dialog.Popup className="aksel-combo-box__modal" position="fullscreen">
         <div
           ref={ref}
-          className="aksel-combobox2__modal-inner"
+          className="aksel-combo-box__modal-inner"
           // The reported height is sometimes a bit too small,
           // so we let the dialog fill the entire normal viewport,
           // and only limit the inner content's height.

@navikt/core/react/src/form/combobox2/popup/ComboboxPopup.tsx

@@ -76,7 +76,7 @@ export const ComboboxPopup = ({ children }: ComboboxPopupProps) => {
   return (
     <Listbox
       ref={ref}
-      className="aksel-combobox2__popup"
+      className="aksel-combo-box__popup"
       setVirtuallyFocusedOptionId={setVirtuallyFocusedOptionValue}
       size={rootContext.size}
     >

@navikt/core/react/src/form/combobox2/root/ComboboxRoot.tsx

@@ -121,7 +121,7 @@ export function ComboboxRoot<
   return (
     <div
       {...rest}
-      className={cl("aksel-combobox2", className)}
+      className={cl("aksel-combo-box", className)}
       data-size={size}
       data-disabled={disabled}
     >