Replaced LegacyFieldSet and LegacytextField (#11376)

* Replaced LegacyFieldSet and LegacytextField

frontend/app-development/features/administration/components/MainContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, LegacyTextField, LegacyTextArea } from '@digdir/design-system-react';
+import { Button, LegacyTextArea, Textfield } from '@digdir/design-system-react';
 import { AltinnPopper } from 'app-shared/components/AltinnPopper';
 import classes from './MainContent.module.css';
 import { Trans, useTranslation } from 'react-i18next';
@@ -46,7 +46,7 @@ export const MainContent = (props: IMainContentProps): JSX.Element => {
       <h2 id={nameLabelId}>{t('general.service_name')}</h2>
       <p>{t('administration.service_name_administration_description')}</p>
       <div className={classes.sideBySide}>
-        <LegacyTextField
+        <Textfield
           aria-labelledby={nameLabelId}
           onChange={props.onAppNameChange}
           value={props.appName}
@@ -63,19 +63,15 @@ export const MainContent = (props: IMainContentProps): JSX.Element => {
       />
       <h2 id={appIdLabelId}>{t('administration.service_id')}</h2>
       <p>{t('administration.service_id_description')}</p>
-      <LegacyTextField
+      <Textfield
         aria-labelledby={appIdLabelId}
         onChange={props.onAppIdChange}
         value={props.appId}
         onBlur={props.onAppIdBlur}
       />
       <h2>{t('general.service_saved_name')}</h2>
       <p>{t('administration.service_saved_name_administration_description')}</p>
-      <LegacyTextField
-        id='administrationInputReponame'
-        value={props.repositoryName}
-        disabled={true}
-      />
+      <Textfield id='administrationInputReponame' value={props.repositoryName} disabled={true} />
       <h2 id={descriptionLabelId}>{t('administration.service_comment')}</h2>
       <p>{t('administration.service_comment_description')}</p>
       <LegacyTextArea

frontend/app-development/features/administration/components/ResetRepoModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import classes from './RepoModal.module.css';
 import { AltinnSpinner } from 'app-shared/components';
-import { Button, LegacyTextField } from '@digdir/design-system-react';
+import { Button, Textfield } from '@digdir/design-system-react';
 import { Popover } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useResetRepositoryMutation } from 'app-development/hooks/mutations/useResetRepositoryMutation';
@@ -84,7 +84,7 @@ export function ResetRepoModal(props: IResetRepoModalProps) {
           <label htmlFor='delete-repo-name'>
             <div>{t('administration.reset_repo_confirm_repo_name')}</div>
           </label>
-          <LegacyTextField
+          <Textfield
             id='delete-repo-name'
             onChange={onDeleteRepoNameChange}
             autoFocus

frontend/dashboard/components/MakeCopyModal/MakeCopyModal.test.tsx

@@ -17,7 +17,7 @@ const renderWithMockServices = (services?: Partial<ServicesContextProps>) => {
   render(
     <MockServicesContextWrapper customServices={services}>
       <MakeCopyModal anchorEl={anchor} handleClose={() => {}} serviceFullName={`${org}/${app}`} />
-    </MockServicesContextWrapper>
+    </MockServicesContextWrapper>,
   );
 };
 
@@ -35,51 +35,54 @@ describe('MakeCopyModal', () => {
     renderWithMockServices({ copyApp: copyAppMock });
 
     await act(() => user.type(screen.getByRole('textbox'), 'new-repo-name'));
-    await act(() => user.click(screen.getByRole('button', {
-      name: textMock('dashboard.make_copy'),
-    })));
+    await act(() =>
+      user.click(
+        screen.getByRole('button', {
+          name: textMock('dashboard.make_copy'),
+        }),
+      ),
+    );
 
     expect(screen.queryByText(textMock('dashboard.field_cannot_be_empty'))).not.toBeInTheDocument();
     expect(copyAppMock).toHaveBeenCalledTimes(1);
-    expect(copyAppMock).toHaveBeenCalledWith("org", "app", "new-repo-name");
+    expect(copyAppMock).toHaveBeenCalledWith('org', 'app', 'new-repo-name');
   });
 
   test('should show error message when clicking confirm without adding name', async () => {
     renderWithMockServices();
-
-    expect(screen.queryByText(textMock('dashboard.field_cannot_be_empty'))).not.toBeInTheDocument();
     const confirmButton = screen.getByRole('button', {
       name: /dashboard\.make_copy/i,
     });
     await act(() => user.click(confirmButton));
-    expect(screen.getByText(textMock('dashboard.field_cannot_be_empty'))).toBeInTheDocument();
+    const errorMessageElement = screen.getAllByText(textMock('dashboard.field_cannot_be_empty'));
+    expect(errorMessageElement.length).toBeGreaterThan(0);
   });
 
   test('should show error message when clicking confirm and name is too long', async () => {
     renderWithMockServices();
-
-    expect(screen.queryByText(textMock('dashboard.service_name_is_too_long'))).not.toBeInTheDocument();
     const confirmButton = screen.getByRole('button', {
       name: textMock('dashboard.make_copy'),
     });
     const inputField = screen.getByRole('textbox');
     await act(() => user.type(inputField, 'this-new-name-is-way-too-long-to-be-valid'));
     await act(() => user.click(confirmButton));
-    expect(screen.getByText(textMock('dashboard.service_name_is_too_long'))).toBeInTheDocument();
+    const errorMessageElements = screen.getAllByText(
+      textMock('dashboard.service_name_is_too_long'),
+    );
+    expect(errorMessageElements.length).toBeGreaterThan(0);
   });
 
   test('should show error message when clicking confirm and name contains invalid characters', async () => {
     renderWithMockServices();
-
-    expect(
-      screen.queryByText(/dashboard\.service_name_has_illegal_characters/i)
-    ).not.toBeInTheDocument();
     const confirmButton = screen.getByRole('button', {
       name: textMock('dashboard.make_copy'),
     });
     const inputField = screen.getByRole('textbox');
     await act(() => user.type(inputField, 'this name is invalid'));
     await act(() => user.click(confirmButton));
-    expect(screen.getByText(textMock('dashboard.service_name_has_illegal_characters'))).toBeInTheDocument();
+    const errorMessageElements = screen.getAllByText(
+      textMock('dashboard.service_name_has_illegal_characters'),
+    );
+    expect(errorMessageElements.length).toBeGreaterThan(0);
   });
 });

frontend/dashboard/components/MakeCopyModal/MakeCopyModal.tsx

@@ -5,7 +5,7 @@ import { AltinnPopoverSimple } from 'app-shared/components/molecules/AltinnPopov
 import type { PopoverOrigin } from '@mui/material';
 import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
 import { validateRepoName } from '../../utils/repoUtils';
-import { LegacyTextField } from '@digdir/design-system-react';
+import { Textfield } from '@digdir/design-system-react';
 import classes from './MakeCopyModal.module.css';
 import { SimpleContainer } from 'app-shared/primitives';
 import { useTranslation } from 'react-i18next';
@@ -102,12 +102,12 @@ export const MakeCopyModal = ({ anchorEl, handleClose, serviceFullName }: IMakeC
         <h2>{t('dashboard.copy_application')}</h2>
         <p>{t('dashboard.copy_application_description')}</p>
         <div>
-          <LegacyTextField
+          <Textfield
             id='new-clone-name-input'
             label={t('dashboard.new_service_copy')}
             value={repoName}
             onChange={handleRepoNameUpdated}
-            isValid={errorMessage === null}
+            error={errorMessage}
           />
           {errorMessage && <div className={classes.errorMessage}>{errorMessage}</div>}
         </div>

frontend/language/src/nb.json

@@ -1133,6 +1133,7 @@
   "ux_editor.add_option_label": "Tekst",
   "ux_editor.add_option_label_add": "Legg til tekst",
   "ux_editor.add_option_label_placeholder": "Tekst mangler",
+  "ux_editor.add_option_new_valid_value_error": "Verdien er ugyldig",
   "ux_editor.add_option_value": "Verdi",
   "ux_editor.add_option_value_error_duplicate": "Verdien må være unik.",
   "ux_editor.add_option_value_error_empty": "Du må angi en verdi.",

frontend/packages/schema-editor/src/components/SchemaInspector/CustomProperties.test.tsx

@@ -82,7 +82,7 @@ describe('CustomProperties', () => {
   it('Renders an "unsupported property" message for unsupported properties', () => {
     render();
     expect(screen.getAllByText(textMock('schema_editor.custom_props_unknown_format'))).toHaveLength(
-      1
+      1,
     );
   });
 
@@ -95,7 +95,7 @@ describe('CustomProperties', () => {
   it('Saves model without deleted property when the delete button is clicked', async () => {
     render();
     await act(() =>
-      user.click(screen.getAllByRole('button', { name: textMock('general.delete') })[0])
+      user.click(screen.getAllByRole('button', { name: textMock('general.delete') })[0]),
     );
     expect(saveDatamodel).toHaveBeenCalledTimes(1);
     const updatedModel = getSavedModel(saveDatamodel);

frontend/packages/schema-editor/src/components/SchemaInspector/CustomProperties.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  LegacyFieldSet,
-  HelpText,
-  LegacyTextField,
-  Switch,
-} from '@digdir/design-system-react';
+import { Button, Fieldset, HelpText, LegacyTextField, Switch } from '@digdir/design-system-react';
 import { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
 import {
   CustomPropertyType,
@@ -85,7 +79,7 @@ export const CustomProperties = ({ path }: CustomPropertiesProps) => {
   }
 
   return (
-    <LegacyFieldSet
+    <Fieldset
       className={classes.root}
       description={t('schema_editor.custom_props_help')}
       legend={t('schema_editor.custom_props')}
@@ -105,7 +99,7 @@ export const CustomProperties = ({ path }: CustomPropertiesProps) => {
           />
         </div>
       ))}
-    </LegacyFieldSet>
+    </Fieldset>
   );
 };
 

frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx

@@ -8,13 +8,7 @@ import {
 } from '../../features/editor/schemaEditorSlice';
 import { ReferenceSelectionComponent } from './ReferenceSelectionComponent';
 import { getCombinationOptions, getTypeOptions } from './helpers/options';
-import {
-  LegacyFieldSet,
-  Select,
-  LegacyTextArea,
-  LegacyTextField,
-  Switch,
-} from '@digdir/design-system-react';
+import { Fieldset, Select, LegacyTextArea, Textfield, Switch } from '@digdir/design-system-react';
 import classes from './ItemDataComponent.module.css';
 import { ItemRestrictions } from './ItemRestrictions';
 import {
@@ -200,9 +194,9 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) {
         </>
       )}
       <Divider marginless />
-      <LegacyFieldSet legend={t('schema_editor.descriptive_fields')} className={classes.fieldSet}>
+      <Fieldset legend={t('schema_editor.descriptive_fields')} className={classes.fieldSet}>
         <div>
-          <LegacyTextField
+          <Textfield
             id={titleId}
             label={t('schema_editor.title')}
             aria-label={t('schema_editor.title')}
@@ -224,7 +218,7 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) {
             value={itemDescription}
           />
         </div>
-      </LegacyFieldSet>
+      </Fieldset>
     </div>
   );
 }

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions.tsx

@@ -15,7 +15,7 @@ import { NumberRestrictions } from './restrictions/NumberRestrictions';
 import { ObjectRestrictions } from './restrictions/ObjectRestrictions';
 import { StringRestrictions } from './restrictions/StringRestrictions';
 import classes from './ItemRestrictions.module.css';
-import { Button, LegacyFieldSet, ErrorMessage, Switch } from '@digdir/design-system-react';
+import { Button, Fieldset, ErrorMessage, Switch } from '@digdir/design-system-react';
 import { Divider } from 'app-shared/primitives';
 import { PlusIcon } from '@navikt/aksel-icons';
 import { useTranslation } from 'react-i18next';
@@ -113,7 +113,7 @@ export const ItemRestrictions = ({ schemaNode }: ItemRestrictionsProps) => {
       {[FieldType.String, FieldType.Integer, FieldType.Number].includes(fieldType as FieldType) && (
         <>
           <Divider marginless />
-          <LegacyFieldSet legend={t('schema_editor.enum_legend')}>
+          <Fieldset legend={t('schema_editor.enum_legend')}>
             {!enums?.length && (
               <p className={classes.emptyEnumMessage}>{t('schema_editor.enum_empty')}</p>
             )}
@@ -148,7 +148,7 @@ export const ItemRestrictions = ({ schemaNode }: ItemRestrictionsProps) => {
                 {t('schema_editor.add_enum')}
               </Button>
             </div>
-          </LegacyFieldSet>
+          </Fieldset>
         </>
       )}
     </>

frontend/packages/schema-editor/src/components/SchemaInspector/RestrictionField.tsx

@@ -1,6 +1,6 @@
 import type { BaseSyntheticEvent, ChangeEvent } from 'react';
 import React from 'react';
-import { LegacyTextField } from '@digdir/design-system-react';
+import { Textfield } from '@digdir/design-system-react';
 import { getDomFriendlyID } from '../../utils/ui-schema-utils';
 
 export interface IRestrictionFieldProps {
@@ -32,7 +32,7 @@ export const RestrictionField = ({
   };
   return (
     <div className={className}>
-      <LegacyTextField
+      <Textfield
         aria-label={label}
         id={fieldId}
         label={label}

frontend/packages/schema-editor/src/components/SchemaInspector/restrictions/ArrayRestrictions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { RestrictionItemProps } from '../ItemRestrictions';
 import { ArrRestrictionKey } from '@altinn/schema-model';
-import { LegacyTextField, Switch } from '@digdir/design-system-react';
+import { Switch, LegacyTextField } from '@digdir/design-system-react';
 import { Divider } from 'app-shared/primitives';
 import { useTranslation } from 'react-i18next';
 import classes from './ArrayRestrictions.module.css';

frontend/packages/schema-editor/src/components/SchemaInspector/restrictions/StringRestrictions.tsx

@@ -3,7 +3,7 @@ import React, { useReducer, useState } from 'react';
 import type { RestrictionItemProps } from '../ItemRestrictions';
 import { RestrictionField } from '../RestrictionField';
 import classes from './StringRestrictions.module.css';
-import { LegacyFieldSet, Select, LegacyTextField, Switch } from '@digdir/design-system-react';
+import { Fieldset, Select, LegacyTextField, Switch } from '@digdir/design-system-react';
 import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
 import { StringFormat, StrRestrictionKey } from '@altinn/schema-model';
 import { Divider } from 'app-shared/primitives';
@@ -152,7 +152,7 @@ export function StringRestrictions({
         </div>
       </div>
       <Divider marginless />
-      <LegacyFieldSet className={classes.fieldSet} legend={t('regex')}>
+      <Fieldset className={classes.fieldSet} legend={t('regex')}>
         <RestrictionField
           keyName={StrRestrictionKey.pattern}
           label={t(StrRestrictionKey.pattern)}
@@ -186,7 +186,7 @@ export function StringRestrictions({
             <LegacyTextField id={fieldId} onChange={handleValueChange} value={regexTestValue} />
           </div>
         </div>
-      </LegacyFieldSet>
+      </Fieldset>
     </>
   );
 }

frontend/packages/ux-editor/src/components/AddOption.module.css

@@ -25,6 +25,14 @@
 }
 
 .addButton {
-  margin-left: calc(var(--component-button-space-padding-x-small) * -2 / 3); /* Align button icon with the checkboxes or radio buttons above */
-  margin-top: calc((var(--component-button-size-icon-small) - var(--component-button-size-height-small)) / 2); /* Compensate for the additional spacing caused by the button padding, so that the spacing between the icon and the options becomes equal to the spacing between the options themselves */
+  margin-left: calc(
+    var(--component-button-space-padding-x-small) * -2 / 3
+  ); /* Align button icon with the checkboxes or radio buttons above */
+  margin-top: calc(
+    (var(--component-button-size-icon-small) - var(--component-button-size-height-small)) / 2
+  ); /* Compensate for the additional spacing caused by the button padding, so that the spacing between the icon and the options becomes equal to the spacing between the options themselves */
+}
+
+.errorMessage {
+  color: #d5203b;
 }

frontend/packages/ux-editor/src/components/AddOption.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import classes from './AddOption.module.css';
 import { TextResource } from './TextResource';
-import { Button, LegacyFieldSet, LegacyTextField } from '@digdir/design-system-react';
+import { Button, Fieldset, Textfield } from '@digdir/design-system-react';
 import { IGenericEditComponent } from './config/componentConfig';
 import { IOption } from '../types/global';
 import { PlusIcon } from '@navikt/aksel-icons';
@@ -49,7 +49,7 @@ export const AddOption = <T extends FormCheckboxesComponent | FormRadioButtonsCo
 
   return isAddMode ? (
     <div className={classes.addSection}>
-      <LegacyFieldSet
+      <Fieldset
         className={classes.fieldSetContent}
         error={errorMessage}
         legend={t('ux_editor.add_option')}
@@ -62,12 +62,17 @@ export const AddOption = <T extends FormCheckboxesComponent | FormRadioButtonsCo
             placeholder={t('ux_editor.add_option_label_add')}
           />
           <div>
-            <LegacyTextField
-              isValid={isNewValueValid}
+            <Textfield
+              error={!isNewValueValid}
               label={t('ux_editor.add_option_value')}
               onChange={(e) => setNewOption({ ...newOption, value: e.target.value })}
               value={newOption.value}
             />
+            {!isNewValueValid && (
+              <div className={classes.errorMessage}>
+                {t('ux_editor.add_option_new_valid_value_error')}
+              </div>
+            )}
           </div>
         </div>
         <div className={classes.addButtons}>
@@ -83,7 +88,7 @@ export const AddOption = <T extends FormCheckboxesComponent | FormRadioButtonsCo
             {t('general.cancel')}
           </Button>
         </div>
-      </LegacyFieldSet>
+      </Fieldset>
     </div>
   ) : (
     <div>