Remove clear button

navikt · Dec 6, 2024 · a66c37a · a66c37a
1 parent f1a0efd
commit a66c37a
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 88 deletions.
diff --git a/.changeset/quick-seas-press.md b/.changeset/quick-seas-press.md
@@ -0,0 +1,7 @@
+---
+"@navikt/aksel-stylelint": minor
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Combobox: Removed clear button, removed tokens `--ac-combobox-clear-icon*`, deprecated props `clearButton`/`clearButtonLabel`.
diff --git a/.changeset/strong-carpets-fly.md b/.changeset/strong-carpets-fly.md
@@ -2,4 +2,4 @@
 "@navikt/ds-react": minor
 ---
 
-Combobox: Deprecated props `clearButton` and `clearButtonLabel`, and changed `maxSelected` to number.
+Combobox: Changed prop `maxSelected` to number
diff --git a/@navikt/aksel-stylelint/src/deprecations.ts b/@navikt/aksel-stylelint/src/deprecations.ts
@@ -72,4 +72,8 @@ export const deprecations: DeprecatedList = [
     classes: ["navds-list--nested", "navds-list__item-content"],
     message: "Removed in v7.1.1",
   },
+  {
+    classes: ["navds-combobox__button-clear"],
+    message: "Removed in v7.8.0",
+  },
 ];
diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css
@@ -69,7 +69,6 @@
   }
 }
 
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
   width: var(--__axc-combobox-icon-size);
@@ -203,19 +202,6 @@
   }
 }
 
-.navds-combobox__button-clear {
-  border-radius: var(--ax-border-radius-medium);
-  color: var(--ax-text-subtle);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -231,10 +217,7 @@
   border: none;
   font-size: 1rem;
   padding: 0;
-}
 
-.navds-combobox__button-clear,
-.navds-combobox__button-toggle-list {
   &:hover {
     color: var(--ax-text-accent);
 
@@ -405,10 +388,6 @@
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
     outline-color: highlight;
   }

diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
@@ -50,7 +50,6 @@
   border-color: var(--a-border-subtle);
 }
 
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
   width: var(--__ac-combobox-icon-size);
@@ -195,19 +194,6 @@
   }
 }
 
-.navds-combobox__button-clear {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -225,14 +211,12 @@
   padding: 0;
 }
 
-.navds-combobox__button-clear:active:hover,
 .navds-combobox__button-toggle-list:active:hover {
-  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+  color: var(--a-text-action);
 }
 
-.navds-combobox__button-clear:hover,
 .navds-combobox__button-toggle-list:hover {
-  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+  color: var(--a-text-action-selected);
 }
 
 .navds-combobox__button-toggle-list:focus-visible {
@@ -406,10 +390,6 @@
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
     outline-color: highlight;
   }

diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
@@ -387,9 +387,6 @@
     "--ac-search-error-border": "--a-border-danger"
   },
   "combobox": {
-    "--ac-combobox-clear-icon": "--a-text-subtle",
-    "--ac-combobox-clear-icon-hover": "--a-text-action-selected",
-    "--ac-combobox-clear-icon-active": "--a-text-action",
     "--ac-combobox-list-bg": "--a-surface-default",
     "--ac-combobox-list-text": "--a-text-default",
     "--ac-combobox-list-border-color": "--a-border-divider",

diff --git a/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx b/@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx
@@ -27,21 +27,21 @@ const ComboboxWrapper = ({
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
-  function onFocusInsideWrapper(e) {
+  function onFocusInsideWrapper(event: React.FocusEvent<HTMLDivElement>) {
     if (
-      !wrapperRef.current?.contains(e.relatedTarget) &&
-      toggleOpenButtonRef?.current !== e.target
+      !wrapperRef.current?.contains(event.relatedTarget) &&
+      toggleOpenButtonRef?.current !== event.target
     ) {
       toggleIsListOpen(true);
       setHasFocusWithin(true);
     }
   }
 
-  function onBlurWrapper(e) {
-    if (!wrapperRef.current?.contains(e.relatedTarget)) {
+  function onBlurWrapper(event: React.FocusEvent<HTMLDivElement>) {
+    if (!wrapperRef.current?.contains(event.relatedTarget)) {
       toggleIsListOpen(false);
       setHasFocusWithin(false);
-      clearInput(e);
+      clearInput(event);
     }
   }
 

diff --git a/@navikt/core/react/src/form/combobox/Input/Input.context.tsx b/@navikt/core/react/src/form/combobox/Input/Input.context.tsx
@@ -93,7 +93,7 @@ const InputProvider = ({ children, value: props }: Props) => {
   );
 
   const clearInput = useCallback(
-    (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
+    (event: React.PointerEvent | React.KeyboardEvent | React.FocusEvent) => {
       onClear?.(event);
       externalOnChange?.("");
       setInternalValue("");

diff --git a/@navikt/core/react/src/form/combobox/Input/InputController.tsx b/@navikt/core/react/src/form/combobox/Input/InputController.tsx
@@ -1,9 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { XMarkIcon } from "@navikt/aksel-icons";
 import { useMergeRefs } from "../../../util/hooks";
-import { useI18n } from "../../../util/i18n/i18n.context";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -28,7 +26,9 @@ export const InputController = forwardRef<
   >
 >((props, ref) => {
   const {
-    clearButton = true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
+    clearButton,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
     clearButtonLabel,
     toggleListButton = true,
     inputClassName,
@@ -37,10 +37,8 @@ export const InputController = forwardRef<
   } = props;
 
   const {
-    clearInput,
     focusInput,
     inputProps,
-    value,
     size = "medium",
     inputRef,
     toggleOpenButtonRef,
@@ -52,11 +50,6 @@ export const InputController = forwardRef<
 
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
-  const translate = useI18n(
-    "Combobox",
-    clearButtonLabel ? { clear: clearButtonLabel } : undefined,
-  );
-
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
@@ -86,19 +79,7 @@ export const InputController = forwardRef<
           />
         </SelectedOptions>
       )}
-      <div>
-        {value && clearButton && (
-          <div
-            onClick={clearInput}
-            className="navds-combobox__button-clear"
-            aria-hidden
-            title={translate("clear")}
-          >
-            <XMarkIcon />
-          </div>
-        )}
-        {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
-      </div>
+      {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
     </div>
   );
 });
diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx
@@ -74,8 +74,8 @@ Default.argTypes = {
     defaultValue: "medium",
     control: { type: "radio" },
   },
-  clearButtonLabel: {
-    control: { type: "text" },
+  toggleListButton: {
+    control: { type: "boolean" },
   },
 };
 

diff --git a/@navikt/core/react/src/form/combobox/types.ts b/@navikt/core/react/src/form/combobox/types.ts
@@ -45,17 +45,11 @@ export interface ComboboxProps
    */
   allowNewValues?: boolean;
   /**
-   * Adds a button to clear the input value when not empty.
-   * NB: Will not clear selected values.
-   * @default true
-   * @deprecated The clear button will be removed in a future release.
+   * @deprecated The clear button has been removed. This prop has no effect.
    */
   clearButton?: boolean;
   /**
-   * Custom name for the clear button. Requires `clearButton` to be `true`.
-   *
-   * @default "Tøm"
-   * @deprecated The clear button will be removed in a future release.
+   * @deprecated The clear button has been removed. This prop has no effect.
    */
   clearButtonLabel?: string;
   /**
@@ -104,7 +98,7 @@ export interface ComboboxProps
    * @param event
    */
   onClear?: (
-    event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent,
+    event: React.PointerEvent | React.KeyboardEvent | React.FocusEvent,
   ) => void;
   /**
    * Callback function triggered whenever an option is selected or de-selected.