♻️ Switch, Textarea

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

Hide file tree

Showing 4 changed files with 47 additions and 27 deletions.
diff --git a/@navikt/core/react/src/form/select/Select.tsx b/@navikt/core/react/src/form/select/Select.tsx
@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -70,6 +70,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const readOnlyEventHandlers = {
       onMouseDown: (evt) => {
         // NOTE: does not prevent click
@@ -93,7 +95,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
@@ -108,7 +110,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cl("navds-form-field__label", {
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -117,7 +119,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         </Label>
         {!!description && (
           <BodyShort
-            className={cl("navds-form-field__description", {
+            className={cn("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -127,13 +129,13 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             {description}
           </BodyShort>
         )}
-        <div className="navds-select__container" style={style}>
+        <div className={cn("navds-select__container")} style={style}>
           <select
             {...omit(rest, ["error", "errorId", "size", "readOnly"])}
             {...inputProps}
             {...readOnlyEventHandlers}
             ref={ref}
-            className={cl(
+            className={cn(
               "navds-select__input",
               "navds-body-short",
               `navds-body-short--${size ?? "medium"}`,
@@ -142,10 +144,13 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           >
             {children}
           </select>
-          <ChevronDownIcon className="navds-select__chevron" aria-hidden />
+          <ChevronDownIcon
+            className={cn("navds-select__chevron")}
+            aria-hidden
+          />
         </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/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx
@@ -1,11 +1,11 @@
-import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
   useEffect,
   useState,
 } from "react";
 import { Loader } from "../../loader";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -64,6 +64,8 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const [_checked, setChecked] = useState(
       defaultChecked ?? checkedProp ?? false,
     );
@@ -76,7 +78,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           "navds-switch",
           props.className,
           `navds-switch--${size}`,
@@ -111,10 +113,10 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             }
             props.onClick?.(event);
           }}
-          className={cl(className, "navds-switch__input")}
+          className={cn(className, "navds-switch__input")}
         />
-        <span className="navds-switch__track">
-          <span className="navds-switch__thumb">
+        <span className={cn("navds-switch__track")}>
+          <span className={cn("navds-switch__thumb")}>
             {loading ? (
               <Loader
                 size="xsmall"
@@ -131,7 +133,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
                 focusable={false}
                 role="img"
                 aria-hidden
-                className="navds-switch__checkmark"
+                className={cn("navds-switch__checkmark")}
               >
                 <path
                   fillRule="evenodd"
@@ -143,22 +145,31 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             )}
           </span>
         </span>
-        <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+        <label
+          htmlFor={inputProps.id}
+          className={cn("navds-switch__label-wrapper")}
+        >
           <div
-            className={cl("navds-switch__content", {
+            className={cn("navds-switch__content", {
               "navds-sr-only": hideLabel,
               "navds-switch--with-description": description && !hideLabel,
             })}
           >
-            <BodyShort as="div" size={size} className="navds-switch__label">
+            <BodyShort
+              as="div"
+              size={size}
+              className={cn("navds-switch__label")}
+            >
               {readOnly && <ReadOnlyIconWithTitle />}
               {children}
             </BodyShort>
             {description && (
               <BodyShort
                 size={size}
                 as="div"
-                className="navds-form-field__subdescription navds-switch__description"
+                className={cn(
+                  "navds-form-field__subdescription navds-switch__description",
+                )}
               >
                 {description}
               </BodyShort>

diff --git a/@navikt/core/react/src/form/textarea/Textarea.tsx b/@navikt/core/react/src/form/textarea/Textarea.tsx
@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import TextareaAutosize from "../../util/TextareaAutoSize";
@@ -99,6 +100,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const maxLengthId = useId();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
@@ -120,7 +123,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
@@ -138,7 +141,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cl("navds-form-field__label", {
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -147,7 +150,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </Label>
         {!!description && (
           <BodyShort
-            className={cl("navds-form-field__description", {
+            className={cn("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -170,7 +173,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           autoScrollbar={UNSAFE_autoScrollbar}
           ref={ref}
           readOnly={readOnly}
-          className={cl(
+          className={cn(
             "navds-textarea__input",
             "navds-body-short",
             `navds-body-short--${size ?? "medium"}`,
@@ -187,7 +190,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           />
         )}
         <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/textarea/TextareaCounter.tsx b/@navikt/core/react/src/form/textarea/TextareaCounter.tsx
@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { useEffect, useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import debounce from "../../util/debounce";
 import { useI18n } from "../../util/i18n/i18n.hooks";
@@ -20,6 +20,7 @@ const TextareaCounter = ({
   size,
   i18n,
 }: Props) => {
+  const { cn } = useRenameCSS();
   const translate = useI18n("Textarea", {
     charsLeft: i18n?.counterLeft ? `{chars} ${i18n.counterLeft}` : undefined,
     charsTooMany: i18n?.counterTooMuch
@@ -43,21 +44,21 @@ const TextareaCounter = ({
 
   return (
     <>
-      <span id={maxLengthId} className="navds-sr-only">
+      <span id={maxLengthId} className={cn("navds-sr-only")}>
         {translate("maxLength", { maxLength })}
       </span>
 
       {difference < 20 && (
         <span
           role="status"
-          className="navds-textarea__sr-counter navds-sr-only"
+          className={cn("navds-textarea__sr-counter navds-sr-only")}
         >
           {getCounterText(debouncedDiff, translate)}
         </span>
       )}
 
       <BodyShort
-        className={cl("navds-textarea__counter", {
+        className={cn("navds-textarea__counter", {
           "navds-textarea__counter--error": difference < 0,
         })}
         size={size}