fix(trading): re-use input errors instead of notification component (#2924)

libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx

@@ -1,4 +1,4 @@
-import { FormGroup, Input, NotificationError } from '@vegaprotocol/ui-toolkit';
+import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { t, toDecimal, validateAmount } from '@vegaprotocol/react-helpers';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
 
@@ -20,17 +20,17 @@ export const DealTicketLimitAmount = ({
   const renderError = () => {
     if (sizeError) {
       return (
-        <NotificationError testId="dealticket-error-message-size-limit">
+        <InputError testId="dealticket-error-message-size-limit">
           {sizeError}
-        </NotificationError>
+        </InputError>
       );
     }
 
     if (priceError) {
       return (
-        <NotificationError testId="dealticket-error-message-price-limit">
+        <InputError testId="dealticket-error-message-price-limit">
           {priceError}
-        </NotificationError>
+        </InputError>
       );
     }
 

libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx

@@ -4,7 +4,7 @@ import {
   toDecimal,
   validateAmount,
 } from '@vegaprotocol/react-helpers';
-import { Input, NotificationError, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { isMarketInAuction } from '../../utils';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
 import { getMarketPrice } from '../../utils/get-price';
@@ -77,12 +77,12 @@ export const DealTicketMarketAmount = ({
         </div>
       </div>
       {sizeError && (
-        <NotificationError
+        <InputError
           intent="danger"
           testId="dealticket-error-message-size-market"
         >
           {sizeError}
-        </NotificationError>
+        </InputError>
       )}
     </div>
   );

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -15,7 +15,7 @@ import { normalizeOrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import {
   ExternalLink,
-  NotificationError,
+  InputError,
   Intent,
   Notification,
 } from '@vegaprotocol/ui-toolkit';
@@ -308,11 +308,11 @@ const SummaryMessage = memo(
     if (isReadOnly) {
       return (
         <div className="mb-4">
-          <NotificationError testId="dealticket-error-message-summary">
+          <InputError testId="dealticket-error-message-summary">
             {
               'You need to connect your own wallet to start trading on this market'
             }
-          </NotificationError>
+          </InputError>
         </div>
       );
     }
@@ -353,9 +353,9 @@ const SummaryMessage = memo(
     if (errorMessage) {
       return (
         <div className="mb-4">
-          <NotificationError testId="dealticket-error-message-summary">
+          <InputError testId="dealticket-error-message-summary">
             {errorMessage}
-          </NotificationError>
+          </InputError>
         </div>
       );
     }

libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx

@@ -1,4 +1,4 @@
-import { FormGroup, Input, NotificationError } from '@vegaprotocol/ui-toolkit';
+import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { formatForInput } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/react-helpers';
 import type { UseFormRegister } from 'react-hook-form';
@@ -35,9 +35,9 @@ export const ExpirySelector = ({
         })}
       />
       {errorMessage && (
-        <NotificationError testId="dealticket-error-message-expiry">
+        <InputError testId="dealticket-error-message-expiry">
           {errorMessage}
-        </NotificationError>
+        </InputError>
       )}
     </FormGroup>
   );

libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import {
   FormGroup,
-  NotificationError,
+  InputError,
   Select,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
@@ -139,9 +139,9 @@ export const TimeInForceSelector = ({
         ))}
       </Select>
       {errorMessage && (
-        <NotificationError testId="dealticket-error-message-tif">
+        <InputError testId="dealticket-error-message-tif">
           {renderError(errorMessage)}
-        </NotificationError>
+        </InputError>
       )}
     </FormGroup>
   );

libs/deal-ticket/src/components/deal-ticket/type-selector.tsx

@@ -1,8 +1,4 @@
-import {
+import { FormGroup, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
-  FormGroup,
-  NotificationError,
-  Tooltip,
-} from '@vegaprotocol/ui-toolkit';
 import { DataGrid, t } from '@vegaprotocol/react-helpers';
 import * as Schema from '@vegaprotocol/types';
 import { Toggle } from '@vegaprotocol/ui-toolkit';
@@ -82,9 +78,9 @@ export const TypeSelector = ({
         onChange={(e) => onSelect(e.target.value as Schema.OrderType)}
       />
       {errorMessage && (
-        <NotificationError testId="dealticket-error-message-type">
+        <InputError testId="dealticket-error-message-type">
           {renderError(errorMessage as MarketModeValidationType)}
-        </NotificationError>
+        </InputError>
       )}
     </FormGroup>
   );

libs/ui-toolkit/src/components/input-error/input-error.tsx

@@ -1,52 +1,18 @@
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import { Intent } from '../../utils/intent';
-import { Notification } from '../notification';
 
 interface InputErrorProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   intent?: 'danger' | 'warning';
   forInput?: string;
-}
-
-interface NotificationErrorProps extends HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  intent?: Intent | 'danger' | 'warning';
-  forInput?: string;
   testId?: string;
 }
 
-const getIntent = (intent: Intent | 'danger' | 'warning') => {
-  switch (intent) {
-    case 'danger':
-      return Intent.Danger;
-    case 'warning':
-      return Intent.Warning;
-    default:
-      return intent;
-  }
-};
-
-export const NotificationError = ({
-  intent = Intent.Danger,
-  children,
-  forInput,
-  testId,
-}: NotificationErrorProps) => {
-  return (
-    <Notification
-      intent={getIntent(intent)}
-      testId={testId || 'input-error-text'}
-      message={<div className="role">{children}</div>}
-      aria-describedby={forInput}
-    />
-  );
-};
-
 export const InputError = ({
   intent = 'danger',
   children,
   forInput,
+  testId,
   ...props
 }: InputErrorProps) => {
   const effectiveClassName = classNames(
@@ -63,7 +29,7 @@ export const InputError = ({
   );
   return (
     <div
-      data-testid="input-error-text"
+      data-testid={testId || 'input-error-text'}
       aria-describedby={forInput}
       className={effectiveClassName}
       {...props}