fjern readonly ikon fra checkbox (#3907)

* fjern readonly ikon fra checkbox

* gjør noen småendringer i props på Rhf komponentene

* fiks fler props

Author: sirimykland

packages/form-hooks/src/RhfCheckbox/RhfCheckbox.tsx

@@ -2,13 +2,15 @@ import { type ReactNode, useMemo } from 'react';
 import { type FieldValues, useController, type UseControllerProps, useFormContext } from 'react-hook-form';
 
 import { Checkbox, type CheckboxProps, ErrorMessage } from '@navikt/ds-react';
+import classnames from 'classnames';
 
 import { getError, getValidationRules, type ValidationReturnType } from '../formUtils';
 
+import styles from '../readOnlyIcon.module.css';
+
 type Props<T extends FieldValues> = {
   label: ReactNode;
   validate?: Array<(value: string) => ValidationReturnType>;
-  readOnly?: boolean;
   onChange?: (isChecked: boolean) => void;
   onClick?: () => void;
   control: UseControllerProps<T>['control'];
@@ -19,13 +21,12 @@ type Props<T extends FieldValues> = {
 export const RhfCheckbox = <T extends FieldValues>({
   label,
   validate = [],
-  readOnly = false,
   onChange,
   onClick,
   size = 'small',
   name,
   control,
-  disabled,
+  className,
   ...rest
 }: Props<T>) => {
   const {
@@ -46,7 +47,6 @@ export const RhfCheckbox = <T extends FieldValues>({
     <>
       <Checkbox
         size={size}
-        disabled={disabled || readOnly}
         checked={field.value === true}
         error={!!error}
         {...field}
@@ -61,6 +61,7 @@ export const RhfCheckbox = <T extends FieldValues>({
             onClick();
           }
         }}
+        className={classnames(className, styles.noReadOnlyIcon)}
         {...rest}
       >
         {label}

packages/form-hooks/src/RhfCheckboxGroup/RhfCheckboxGroup.tsx

@@ -2,11 +2,14 @@ import { type ReactElement, type ReactNode, useMemo } from 'react';
 import { type FieldValues, useController, type UseControllerProps, useFormContext } from 'react-hook-form';
 
 import { Checkbox, CheckboxGroup, type CheckboxGroupProps, HStack } from '@navikt/ds-react';
+import classnames from 'classnames';
 
 import { EditedIcon } from '@navikt/ft-ui-komponenter';
 
 import { getError, getValidationRules, type ValidationReturnType } from '../formUtils';
 
+import styles from '../readOnlyIcon.module.css';
+
 export interface CheckboxProps {
   value: string;
   label: string | ReactNode;
@@ -29,13 +32,13 @@ export const RhfCheckboxGroup = <T extends FieldValues>({
   legend,
   validate = [],
   onChange,
-  readOnly = false,
-  hideLegend = false,
-  isEdited = false,
+  readOnly,
+  isEdited,
   size = 'small',
   children,
   name,
   control,
+  className,
   ...rest
 }: Props<T>) => {
   const {
@@ -67,8 +70,9 @@ export const RhfCheckboxGroup = <T extends FieldValues>({
           {readOnly && isEdited && <EditedIcon />}
         </HStack>
       }
+      readOnly={readOnly}
       error={getError(errors, name)}
-      hideLegend={hideLegend}
+      className={classnames(className, styles.noReadOnlyIcon)}
       {...rest}
     >
       {children}

packages/form-hooks/src/RhfDatepicker/RhfDatepicker.tsx

@@ -32,8 +32,8 @@ export const RhfDatepicker = <T extends FieldValues>({
   label,
   description,
   validate = [],
-  hideLabel = false,
-  readOnly = false,
+  hideLabel,
+  readOnly,
   size = 'small',
   onChange,
   disabledDays,

packages/form-hooks/src/RhfNumericField/RhfNumericField.tsx

@@ -24,7 +24,7 @@ export const RhfNumericField = <T extends FieldValues>({
   label,
   hideLabel,
   validate = [],
-  readOnly = false,
+  readOnly,
   description,
   isEdited,
   forceTwoDecimalDigits = false,
@@ -51,7 +51,7 @@ export const RhfNumericField = <T extends FieldValues>({
   });
 
   if (readOnly) {
-    return <ReadOnlyField label={label} value={field.value} isEdited={isEdited} hideLabel={hideLabel} />;
+    return <ReadOnlyField label={label} value={field.value} isEdited={isEdited} hideLabel={hideLabel} size={size} />;
   }
 
   const regex = forceTwoDecimalDigits ? TWO_DECIMALS_REGEXP : DECIMAL_REGEXP;

packages/form-hooks/src/RhfRadioGroup/RhfRadioGroup.stories.tsx

@@ -8,8 +8,6 @@ const meta = {
   component: RhfRadioGroup,
   tags: ['autodocs'],
   args: {
-    readOnly: false,
-    isEdited: false,
     control: undefined, // This will be provided by the decorator
   },
   decorators: rhfDecorator({ radiopre: 'no' }),

packages/form-hooks/src/RhfRadioGroup/RhfRadioGroup.tsx

@@ -8,7 +8,7 @@ import { EditedIcon } from '@navikt/ft-ui-komponenter';
 
 import { getError, getValidationRules, type ValidationReturnType } from '../formUtils';
 
-import styles from './rhfRadioGroup.module.css';
+import styles from '../readOnlyIcon.module.css';
 
 type Props<T extends FieldValues> = {
   isEdited?: boolean;
@@ -26,9 +26,9 @@ export const RhfRadioGroup = <T extends FieldValues>({
   onChange,
   children,
   className,
-  readOnly = false,
+  readOnly,
   size = 'small',
-  isEdited = false,
+  isEdited,
   name,
   control,
   ...rest

packages/form-hooks/src/RhfRadioGroup/rhfRadioGroup.module.css

@@ -38,6 +38,7 @@ export const RhfRangepicker = ({
   fromDate,
   toDate,
   isEdited,
+  size = 'small',
 }: Props) => {
   const {
     formState: { errors },
@@ -115,7 +116,7 @@ export const RhfRangepicker = ({
   if (isReadOnly) {
     const fom = fomField.value ? dayjs(fomField.value, ISO_DATE_FORMAT, true).format(DDMMYYYY_DATE_FORMAT) : undefined;
     const tom = tomField.value ? dayjs(tomField.value, ISO_DATE_FORMAT, true).format(DDMMYYYY_DATE_FORMAT) : undefined;
-    return <ReadOnlyField label={label} value={`${fom} - ${tom || ''}`} isEdited={isEdited} />;
+    return <ReadOnlyField label={label} value={`${fom} - ${tom || ''}`} isEdited={isEdited} size={size} />;
   }
 
   const dpProps = {
@@ -133,7 +134,7 @@ export const RhfRangepicker = ({
             {...fromInputProps}
             onChange={onChangeInputFom}
             value={fieldValueFom}
-            size="small"
+            size={size}
             hideLabel
             label=""
             aria-label="Fra dato"
@@ -144,7 +145,7 @@ export const RhfRangepicker = ({
             {...toInputProps}
             onChange={onChangeInputTom}
             value={fieldValueTom}
-            size="small"
+            size={size}
             label=""
             aria-label="Til dato"
             hideLabel

packages/form-hooks/src/RhfRangepicker/RhfRangepicker.tsx

@@ -27,8 +27,9 @@ export const RhfTextField = <T extends FieldValues>({
   name,
   control,
   label,
+  hideLabel,
   validate = [],
-  readOnly = false,
+  readOnly,
   type,
   shouldValidateOnBlur = false,
   onBlur,
@@ -38,7 +39,6 @@ export const RhfTextField = <T extends FieldValues>({
   normalizeOnBlur,
   isEdited,
   autoComplete = 'off',
-  hideLabel,
   size = 'small',
   ...props
 }: Props<T>) => {

packages/form-hooks/src/RhfTextField/RhfTextField.tsx

@@ -28,11 +28,13 @@ export const RhfTextarea = <T extends FieldValues>({
   name,
   control,
   label,
+  hideLabel,
   readOnly,
   badges,
   validate = [],
   parse = value => value,
   isEdited,
+  autoComplete = 'off',
   size = 'small',
   ...props
 }: Props<T>) => {
@@ -56,7 +58,7 @@ export const RhfTextarea = <T extends FieldValues>({
         value={field.value}
         type="textarea"
         isEdited={isEdited}
-        hideLabel={props.hideLabel}
+        hideLabel={hideLabel}
       />
     );
   }
@@ -75,7 +77,8 @@ export const RhfTextarea = <T extends FieldValues>({
       <Textarea
         size={size}
         label={label}
-        autoComplete="off"
+        hideLabel={hideLabel}
+        autoComplete={autoComplete}
         {...field}
         onChange={event => field.onChange(event.currentTarget.value !== '' ? parse(event.currentTarget.value) : null)}
         value={field.value ? field.value : ''}