Fjerne required prop

navikt · Dec 12, 2024 · 9d54c6b · 9d54c6b
1 parent a1f9b93
commit 9d54c6b
Show file tree

Hide file tree

Showing 17 changed files with 43 additions and 1 deletion.
diff --git a/packages/sif-common-formik-ds/src/components/formik-checkbox-group/FormikCheckboxGroup.tsx b/packages/sif-common-formik-ds/src/components/formik-checkbox-group/FormikCheckboxGroup.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 export type FormikCheckboxGroupCheckboxProp = Omit<CheckboxProps, 'children' | 'name' | 'checked'> & {
     label: React.ReactNode;
@@ -48,6 +49,7 @@ function FormikCheckboxGroup<FieldName, ErrorType>({
                 return (
                     <CheckboxGroup
                         {...restProps}
+                        {...inputPropsToRemove}
                         value={getFieldValueArray(field.value)}
                         legend={legend}
                         className="focusableFieldset"

diff --git a/packages/sif-common-formik-ds/src/components/formik-checkbox/FormikCheckbox.tsx b/packages/sif-common-formik-ds/src/components/formik-checkbox/FormikCheckbox.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { FormError, TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<CheckboxProps, 'name' | 'error' | 'children'> {
     name: FieldName;
@@ -36,6 +37,7 @@ function FormikCheckbox<FieldName, ErrorType>({
                     <Checkbox
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         error={hasError !== undefined}
                         checked={field.value === true}
                         autoComplete="off"

diff --git a/...mmon-formik-ds/src/components/formik-confirmation-checkbox/FormikConfirmationCheckbox.tsx b/...mmon-formik-ds/src/components/formik-confirmation-checkbox/FormikConfirmationCheckbox.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<ConfirmationPanelProps, 'name' | 'onChange' | 'checked'> {
     name: FieldName;
@@ -28,6 +29,7 @@ function FormikConfirmationCheckbox<FieldName, ErrorType>({
                     <ConfirmationPanel
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         checked={field.value === true}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         onChange={(evt) => {

diff --git a/packages/sif-common-formik-ds/src/components/formik-country-select/CountrySelect.tsx b/packages/sif-common-formik-ds/src/components/formik-country-select/CountrySelect.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { getCountries } from '../../utils/countryUtils';
 import { TestProps } from '../../types';
 import { Select, SelectProps } from '@navikt/ds-react';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface Props extends TestProps, Omit<SelectProps, 'onChange' | 'children'> {
     label: React.ReactNode;
@@ -56,7 +57,12 @@ class CountrySelect extends React.Component<Props> {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { onChange, name, showOnlyEuAndEftaCountries, locale, ...restProps } = this.props;
         return (
-            <Select name={name} {...restProps} onChange={(e) => onChange(e.target.value)} autoComplete="off">
+            <Select
+                name={name}
+                {...restProps}
+                {...inputPropsToRemove}
+                onChange={(e) => onChange(e.target.value)}
+                autoComplete="off">
                 <option value="" />
                 {this.getCountryOptions(locale || 'nb')}
             </Select>

diff --git a/packages/sif-common-formik-ds/src/components/formik-country-select/FormikCountrySelect.tsx b/packages/sif-common-formik-ds/src/components/formik-country-select/FormikCountrySelect.tsx
@@ -5,6 +5,7 @@ import { TestProps, TypedFormInputValidationProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import CountrySelect from './CountrySelect';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<SelectProps, 'name' | 'children'> {
     name: FieldName;
@@ -31,6 +32,7 @@ function FormikCountrySelect<FieldName, ErrorType>({
                     <CountrySelect
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         data-testid={testKey}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         onChange={(value) => {

diff --git a/packages/sif-common-formik-ds/src/components/formik-datepicker/FormikDatepicker.tsx b/packages/sif-common-formik-ds/src/components/formik-datepicker/FormikDatepicker.tsx
@@ -7,6 +7,7 @@ import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import DateInputAndPicker from './date-input-and-picker/DateInputAndPicker';
 import { ISODateString } from './dateFormatUtils';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 export type DatepickerLimitations = {
     minDate?: Date;
@@ -72,6 +73,7 @@ function FormikDatepicker<FieldName, ErrorType>({
                         value={field.value}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         {...restProps}
+                        {...inputPropsToRemove}
                     />
                 );
             }}

diff --git a/packages/sif-common-formik-ds/src/components/formik-input-group/FormikInputGroup.tsx b/packages/sif-common-formik-ds/src/components/formik-input-group/FormikInputGroup.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<FieldsetProps, 'name'> {
     name: FieldName;
@@ -29,6 +30,7 @@ function FormikInputGroup<ErrorType, FieldName>({
                 return (
                     <Fieldset
                         {...restProps}
+                        {...inputPropsToRemove}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         id={id}
                         tabIndex={id ? -1 : undefined}

diff --git a/packages/sif-common-formik-ds/src/components/formik-number-input/FormikNumberInput.tsx b/packages/sif-common-formik-ds/src/components/formik-number-input/FormikNumberInput.tsx
@@ -8,6 +8,7 @@ import FormikTextField from '../formik-text-field/FormikTextField';
 import { TextFieldWidths } from '../formik-text-field/FormikTextFieldUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import { useIntl } from 'react-intl';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<TextFieldProps, 'name' | 'children' | 'width'> {
     name: FieldName;
@@ -41,6 +42,7 @@ function FormikNumberInput<FieldName, ErrorType>({
                     <FormikTextField
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         type="text"
                         width={width}
                         autoComplete={autoComplete || 'off'}

diff --git a/packages/sif-common-formik-ds/src/components/formik-radio-group/FormikRadioGroup.tsx b/packages/sif-common-formik-ds/src/components/formik-radio-group/FormikRadioGroup.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext, TypedFormikFormContextType } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 export type FormikRadioProp = Omit<RadioProps, 'children' | 'name'> & {
     label: React.ReactNode;
@@ -69,6 +70,7 @@ function FormikRadioGroup<FieldName, ErrorType>({
                 return (
                     <RadioGroup
                         {...restProps}
+                        {...inputPropsToRemove}
                         description={
                             restProps.description ? <BodyShort as="div">{restProps.description}</BodyShort> : undefined
                         }

diff --git a/packages/sif-common-formik-ds/src/components/formik-select/FormikSelect.tsx b/packages/sif-common-formik-ds/src/components/formik-select/FormikSelect.tsx
@@ -4,6 +4,7 @@ import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import { Select, SelectProps } from '@navikt/ds-react';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<SelectProps, 'name'> {
     name: FieldName;
@@ -31,6 +32,7 @@ function FormikSelect<FieldName, ErrorType>({
                     <Select
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         autoComplete="off"
                         value={field.value === undefined ? '' : field.value}>

diff --git a/packages/sif-common-formik-ds/src/components/formik-text-field/FormikTextField.tsx b/packages/sif-common-formik-ds/src/components/formik-text-field/FormikTextField.tsx
@@ -2,6 +2,7 @@ import { TextField, TextFieldProps } from '@navikt/ds-react';
 import React, { useState } from 'react';
 import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import { getTextFieldWidthClassName, TextFieldWidths } from './FormikTextFieldUtils';
@@ -46,6 +47,7 @@ function FormikTextField<FieldName, ErrorType>({
                     <TextField
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         label={<div>{label}</div>}
                         autoComplete={autoComplete}
                         className={getTextFieldWidthClassName(width, className)}

diff --git a/packages/sif-common-formik-ds/src/components/formik-textarea/FormikTextarea.tsx b/packages/sif-common-formik-ds/src/components/formik-textarea/FormikTextarea.tsx
@@ -4,6 +4,7 @@ import { FastField, Field, FieldProps } from 'formik';
 import { TestProps, TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
 import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<TextareaProps, 'name' | 'defaultValue'> {
     name: FieldName;
@@ -30,6 +31,7 @@ function FormikTextarea<FieldName, ErrorType>({
                     <Textarea
                         {...restProps}
                         {...field}
+                        {...inputPropsToRemove}
                         error={getErrorPropForFormikInput({ field, form, context, error })}
                         onChange={(evt) => {
                             form.setFieldValue(field.name, evt.target.value);

diff --git a/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx b/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx
@@ -9,6 +9,7 @@ import { getErrorPropForFormikInput } from '../../utils/typedFormErrorUtils';
 import SkjemagruppeQuestion from '../helpers/skjemagruppe-question/SkjemagruppeQuestion';
 import { TypedFormikFormContext } from '../typed-formik-form/TypedFormikForm';
 import TimeInput, { TimeInputLabels, TimeInputLayoutProps, TimeInputRefProps } from './TimeInput';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 
 interface OwnProps<FieldName> extends Omit<TextFieldProps, 'name' | 'onChange'> {
     name: FieldName;
@@ -82,6 +83,7 @@ function FormikTimeInput<FieldName, ErrorType>({
                             {...restProps}
                             {...field}
                             {...timeInputLayout}
+                            {...inputPropsToRemove}
                             justifyContent="left"
                             time={field.value || undefined}
                             onChange={(time: Partial<InputTime> | undefined) => {

diff --git a/...s/sif-common-formik-ds/src/components/formik-yes-or-no-question/FormikYesOrNoQuestion.tsx b/...s/sif-common-formik-ds/src/components/formik-yes-or-no-question/FormikYesOrNoQuestion.tsx
@@ -1,4 +1,5 @@
 import { TestProps, TypedFormInputValidationProps, YesOrNo } from '../../types';
+import { inputPropsToRemove } from '../../utils/inputPropsToRemove';
 import FormikRadioGroup, { FormikRadioGroupProps } from '../formik-radio-group/FormikRadioGroup';
 
 export interface FormikYesOrNoQuestionProps<FieldName, ErrorType>
@@ -24,6 +25,7 @@ function FormikYesOrNoQuestion<FieldName, ErrorType>({
         <FormikRadioGroup<FieldName, ErrorType>
             data-testid={testKey}
             {...restProps}
+            {...inputPropsToRemove}
             renderHorizontal={renderHorizontal}
             radios={[
                 { label: yesLabel, value: YesOrNo.YES, ['data-testid']: testKey ? `${testKey}_yes` : undefined },

diff --git a/packages/sif-common-formik-ds/src/utils/inputPropsToRemove.ts b/packages/sif-common-formik-ds/src/utils/inputPropsToRemove.ts
@@ -0,0 +1,8 @@
+/** Føringer fra Aksel om å ikke bruke noen props på inputs
+ *
+ * https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471
+ *
+ */
+export const inputPropsToRemove = {
+    // required: undefined,
+};
diff --git a/packages/sif-common-formik-ds/storybook/stories/components/FormikRadioGroup.stories.tsx b/packages/sif-common-formik-ds/storybook/stories/components/FormikRadioGroup.stories.tsx
@@ -20,6 +20,7 @@ const defaultArgs: FormikRadioGroupProps<any, any> = {
     description: 'Choose any animal except the catty one',
     name: 'animals',
     radios: mockAnimalOptions,
+    required: true,
 };
 
 Default.args = {

diff --git a/packages/sif-common-formik-ds/storybook/stories/components/FormikTextField.stories.tsx b/packages/sif-common-formik-ds/storybook/stories/components/FormikTextField.stories.tsx
@@ -18,6 +18,7 @@ Default.args = {
     label: 'FormikTextField',
     name: 'FormikTextField',
     description: 'Some description i appropriate',
+    required: true,
 };
 Default.parameters = {
     formik: {