Replacing LegacyTextArea in resourceadm (#11400)

* Replacing LegacyTextArea in resourceadm

* Fixing modal z index and SetupTab

* Fixing feedback from PR

frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.module.css

@@ -32,3 +32,7 @@
 .inputParagraph {
   margin-bottom: 5px;
 }
+
+.descriptionInput {
+  margin-top: 30px;
+}

frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.tsx

@@ -5,7 +5,7 @@ import {
   ErrorMessage,
   Select,
   Paragraph,
-  LegacyTextArea,
+  Textarea,
 } from '@digdir/design-system-react';
 import { PlusIcon } from '@navikt/aksel-icons';
 import classes from './ExpandablePolicyCard.module.css';
@@ -29,56 +29,17 @@ import {
 import { useTranslation } from 'react-i18next';
 
 export type ExpandablePolicyCardProps = {
-  /**
-   * The rule to display in the card
-   */
   policyRule: PolicyRuleCard;
-  /**
-   * The possible actions to select from
-   */
   actions: PolicyAction[];
-  /**
-   * The possible subjects to select from
-   */
   subjects: PolicySubject[];
-  /**
-   * The list of all the rules
-   */
   rules: PolicyRuleCard[];
-  /**
-   * useState function to update the list of rules
-   */
   setPolicyRules: React.Dispatch<React.SetStateAction<PolicyRuleCard[]>>;
-  /**
-   * The ID of the resource
-   */
   resourceId: string;
-  /**
-   * The type of the resource
-   */
   resourceType: string;
-  /**
-   * Function to be executed when clicking duplicate rule
-   * @returns void
-   */
   handleCloneRule: () => void;
-  /**
-   * Function to be executed when clicking delete rule
-   * @returns void
-   */
   handleDeleteRule: () => void;
-  /**
-   * Flag to decide if errors should be shown or not
-   */
   showErrors: boolean;
-  /**
-   * Function to save the policy
-   * @returns
-   */
   savePolicy: (rules: PolicyRuleCard[]) => void;
-  /**
-   * The usage type of the policy editor
-   */
   usageType: PolicyEditorUsage;
 };
 
@@ -518,17 +479,16 @@ export const ExpandablePolicyCard = ({
         {showErrors &&
           hasSubjectsError &&
           displayWarningCard(t('policy_editor.rule_card_subjects_error'))}
-        <Label className={classes.label} size='small' htmlFor={`description-${uniqueId}`}>
-          {t('policy_editor.rule_card_description_title')}
-        </Label>
         <div className={classes.textAreaWrapper}>
-          <LegacyTextArea
-            resize='vertical'
+          <Textarea
+            label={t('policy_editor.rule_card_description_title')}
+            size='small'
             value={policyRule.description}
             onChange={(e) => handleChangeDescription(e.currentTarget.value)}
             rows={5}
             onBlur={() => savePolicy(rules)}
             id={`description-${uniqueId}`}
+            className={classes.descriptionInput}
           />
         </div>
       </ExpandablePolicyElement>

frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextArea.tsx

@@ -1,56 +1,19 @@
 import React, { forwardRef } from 'react';
 import classes from './ResourcePageInputs.module.css';
-import { Paragraph, Label, LegacyTextArea } from '@digdir/design-system-react';
+import { Textarea } from '@digdir/design-system-react';
 import { InputFieldErrorMessage } from './InputFieldErrorMessage';
 
 type ResourceLanguageTextAreaProps = {
-  /**
-   * The label of the text field
-   */
   label: string;
-  /**
-   * The description of the text field
-   */
   description: string;
-  /**
-   * The value in the field
-   */
   value: string;
-  /**
-   * Function that updates the value in the field
-   * @param value the new value
-   * @returns void
-   */
   onChangeValue: (value: string) => void;
-  /**
-   * Function to be executed when the field is focused
-   * @returns void
-   */
   onFocus: () => void;
-  /**
-   * The id of the field
-   */
   id: string;
-  /**
-   * Flag for if the value is valid
-   */
   isValid: boolean;
-  /**
-   * Function to be executed on key down
-   */
   onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
-  /**
-   * Function to be executed on blur
-   * @returns void
-   */
   onBlur: () => void;
-  /**
-   * Flag for if the error message should be shown
-   */
   showErrorMessage?: boolean;
-  /**
-   * The text to be shown
-   */
   errorText?: string;
 };
 
@@ -95,21 +58,17 @@ export const ResourceLanguageTextArea = forwardRef<
     return (
       <>
         <div className={classes.divider} />
-        <Label size='small' htmlFor={id}>
-          {label}
-        </Label>
         <div className={classes.inputWrapper}>
-          <Paragraph size='small' spacing className={classes.description}>
-            {description}
-          </Paragraph>
-          <LegacyTextArea
+          <Textarea
+            label={label}
+            description={description}
+            size='small'
             value={value}
-            resize='vertical'
             onChange={(e) => onChangeValue(e.currentTarget.value)}
             onFocus={onFocus}
             rows={5}
             id={id}
-            isValid={isValid}
+            error={!isValid}
             ref={ref}
             onKeyDown={onKeyDown}
             onBlur={onBlur}

frontend/resourceadm/components/RightTranslationBar/RightTranslationBar.tsx

@@ -1,44 +1,18 @@
 import React, { forwardRef } from 'react';
 import classes from './RightTranslationBar.module.css';
 import { GlobeIcon } from '@navikt/aksel-icons';
-import { Textfield, Alert, Paragraph, Heading, LegacyTextArea } from '@digdir/design-system-react';
+import { Textfield, Alert, Paragraph, Heading, Textarea } from '@digdir/design-system-react';
 import type { SupportedLanguage } from 'resourceadm/types/global';
 import type { SupportedLanguageKey } from 'app-shared/types/ResourceAdm';
 import { useTranslation } from 'react-i18next';
 
 export type RightTranslationBarProps = {
-  /**
-   * The title of the selected inputfield
-   */
   title: string;
-  /**
-   * Optional Boolean flag to decide if a text area should be used instead of a text field
-   */
   usesTextArea?: boolean;
-  /**
-   * The value to display in the input field
-   */
   value: SupportedLanguageKey<string>;
-  /**
-   * Function that updates the value when changes are made in the input field.
-   * @param value The language object
-   */
   onLanguageChange: (value: SupportedLanguage) => void;
-  /**
-   * Flag to handle when to show the errors
-   */
   showErrors: boolean;
-  /**
-   * Function to be executed when leaving the last field in the translation bar
-   *
-   * @param e the keyboard event
-   * @returns void
-   */
   onLeaveLastField: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  /**
-   * Function to be executed on blur
-   * @returns
-   */
   onBlur: () => void;
 };
 
@@ -96,16 +70,16 @@ export const RightTranslationBar = forwardRef<
 
       if (usesTextArea) {
         return (
-          <LegacyTextArea
+          <Textarea
             value={value[lang]}
-            resize='vertical'
             onChange={(e) => handleChange(lang, e.currentTarget.value)}
             rows={5}
             label={label}
-            isValid={!(showErrors && value[lang] === '')}
+            error={showErrors && value[lang] === ''}
             ref={!isLast ? (ref as React.Ref<HTMLTextAreaElement>) : undefined}
             onKeyDown={(e) => (isLast ? handleTabOutOfTranslationBar(e) : undefined)}
             onBlur={onBlur}
+            size='small'
           />
         );
       }