♻️ Radio, Search

navikt · Feb 13, 2025 · 0451776 · 0451776
1 parent 2bd4e24
commit 0451776
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 23 deletions.
diff --git a/@navikt/core/react/src/form/radio/Radio.tsx b/@navikt/core/react/src/form/radio/Radio.tsx
@@ -1,20 +1,22 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const { cn } = useRenameCSS();
   const { inputProps, size, hasError, readOnly } = useRadio(props);
 
   const labelId = useId();
   const descriptionId = useId();
 
   return (
     <div
-      className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
+      className={cn(props.className, "navds-radio", `navds-radio--${size}`, {
         "navds-radio--error": hasError,
         "navds-radio--disabled": inputProps.disabled,
         "navds-radio--readonly": readOnly,
@@ -30,11 +32,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             [descriptionId]: props.description,
           },
         )}
-        className="navds-radio__input"
+        className={cn("navds-radio__input")}
         ref={ref}
       />
-      <label htmlFor={inputProps.id} className="navds-radio__label">
-        <span className="navds-radio__content">
+      <label htmlFor={inputProps.id} className={cn("navds-radio__label")}>
+        <span className={cn("navds-radio__content")}>
           <BodyShort as="span" id={labelId} size={size} aria-hidden>
             {props.children}
           </BodyShort>
@@ -43,7 +45,9 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
               as="span"
               id={descriptionId}
               size={size}
-              className="navds-form-field__subdescription navds-radio__description"
+              className={cn(
+                "navds-form-field__subdescription navds-radio__description",
+              )}
               aria-hidden
             >
               {props.description}

diff --git a/@navikt/core/react/src/form/radio/RadioGroup.tsx b/@navikt/core/react/src/form/radio/RadioGroup.tsx
@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { useId } from "../../util/hooks";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
@@ -71,6 +71,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const nameId = useId();
@@ -80,7 +81,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         {...rest}
         readOnly={readOnly}
         ref={ref}
-        className={cl(
+        className={cn(
           className,
           "navds-radio-group",
           `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
@@ -96,7 +97,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
             required,
           }}
         >
-          <div className="navds-radio-buttons">{children}</div>
+          <div className={cn("navds-radio-buttons")}>{children}</div>
         </RadioGroupContext.Provider>
       </Fieldset>
     );

diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
@@ -1,4 +1,3 @@
-import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
@@ -7,7 +6,7 @@ import React, {
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -125,6 +124,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const themeContext = useThemeInternal(false);
 
     const searchRef = useRef<HTMLInputElement | null>(null);
@@ -153,7 +154,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     const ClearButton = () =>
       themeContext ? (
         <Button
-          className="navds-search__button-clear"
+          className={cn("navds-search__button-clear")}
           variant="tertiary-neutral"
           size={size === "medium" ? "small" : "xsmall"}
           icon={<XMarkIcon aria-hidden />}
@@ -165,10 +166,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <button
           type="button"
           onClick={(event) => handleClear({ trigger: "Click", event })}
-          className="navds-search__button-clear"
+          className={cn("navds-search__button-clear")}
           hidden={!showClearButton}
         >
-          <span className="navds-sr-only">
+          <span className={cn("navds-sr-only")}>
             {clearButtonLabel || translate("clear")}
           </span>
           <XMarkIcon aria-hidden />
@@ -185,7 +186,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           searchRef.current?.value && event.preventDefault();
           handleClear({ trigger: "Escape", event });
         }}
-        className={cl(
+        className={cn(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
@@ -200,15 +201,15 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cl("navds-form-field__label", {
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
           <BodyShort
-            className={cl("navds-form-field__description", {
+            className={cn("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -218,12 +219,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {description}
           </BodyShort>
         )}
-        <div className="navds-search__wrapper">
-          <div className="navds-search__wrapper-inner">
+        <div className={cn("navds-search__wrapper")}>
+          <div className={cn("navds-search__wrapper-inner")}>
             {variant === "simple" && (
               <MagnifyingGlassIcon
                 aria-hidden
-                className="navds-search__search-icon"
+                className={cn("navds-search__search-icon")}
               />
             )}
             <input
@@ -233,7 +234,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              className={cl(
+              className={cn(
                 className,
                 "navds-search__input",
                 `navds-search__input--${variant}`,
@@ -257,7 +258,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           </SearchContext.Provider>
         </div>
         <div
-          className="navds-form-field__error"
+          className={cn("navds-form-field__error")}
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

diff --git a/@navikt/core/react/src/form/search/SearchButton.tsx b/@navikt/core/react/src/form/search/SearchButton.tsx
@@ -1,7 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
+import { useRenameCSS } from "../../theme/Theme";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { SearchContext } from "./context";
@@ -20,6 +20,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 
 const SearchButton: SearchButtonType = forwardRef(
   ({ className, children, disabled, onClick, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const translate = useI18n("Search");
     const context = useContext(SearchContext);
 
@@ -37,7 +38,7 @@ const SearchButton: SearchButtonType = forwardRef(
         ref={ref}
         size={size}
         variant={variant === "secondary" ? "secondary" : "primary"}
-        className={cl("navds-search__button-search", className)}
+        className={cn("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
         onClick={composeEventHandlers(onClick, handleClick)}
         icon={