chore: remove deprecated ErrorMessage component (#36872)

## **Description**

This PR removes the deprecated `ErrorMessage` component from the
codebase and replaces its usage with the modern `BannerAlert` component
from the component-library. This continues the effort to modernize
MetaMask's UI components and remove deprecated code.

**Key Changes:**
- Completely removed the deprecated `ErrorMessage` component and all
related files
- Replaced `ErrorMessage` usage in `EditGasFeePopover` with
`BannerAlert`
- Cleaned up SCSS imports and styles
- Added comprehensive Storybook stories for `EditGasFeePopover`

**Component Migration:**
- `ErrorMessage` → `BannerAlert` with
`severity={BannerAlertSeverity.Danger}`
- Maintains the same visual appearance and functionality
- Uses the modern component-library API

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/36872?quickstart=1)

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: #20394

## **Manual testing steps**

1. Build the application to ensure no broken imports
2. Navigate to any transaction confirmation flow that shows gas editing
3. Verify that insufficient funds errors still display correctly with
red styling
4. Check Storybook to ensure EditGasFeePopover stories render correctly:
   - Run `yarn storybook`
   - Navigate to Pages/Confirmations/Components/EditGasFeePopover
   - Test different scenarios including error states
5. Run tests to ensure no regressions: `yarn test`

## **Screenshots/Recordings**

N/A - This is a component refactor with no visual changes to end users

### **Before**

- Deprecated ErrorMessage component used in edit gas modal

<img width="354" height="609" alt="Screenshot 2025-10-14 at 2 46 12 PM"
src="https://github.com/user-attachments/assets/70ac19bf-5bbd-43ce-a1b6-725583c27c1c"
/>

### **After**

- Replaced with BannerAlert component 

<img width="366" height="600" alt="Screenshot 2025-10-14 at 2 44 59 PM"
src="https://github.com/user-attachments/assets/540cb9b1-558d-46c8-ac6a-cb7aa8de729d"
/>

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Removes `ErrorMessage` and replaces its usage in `EditGasFeePopover`
with `BannerAlert`, deletes related files, updates styles, and adds a
Storybook story.
> 
> - **UI Migration**
> - Replace `ErrorMessage` with `BannerAlert` (`Danger`) in
`ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js`
(uses `t(INSUFFICIENT_FUNDS_ERROR_KEY)` for description).
>   - Adjust imports to use component-library `BannerAlert` and `Text`.
> - **Cleanup/Removals**
> - Delete deprecated `ui/components/ui/error-message/*` (component,
tests, stories, styles, snapshots).
> - Remove `@import 'error-message/index';` from
`ui/components/ui/ui-components.scss`.
> - Drop `.error-message` margin overrides from
`ui/pages/confirmations/components/edit-gas-fee-popover/index.scss`.
> - **Storybook**
> - Add `EditGasFeePopover` story `edit-gas-fee-popover.stories.tsx`
with mocked providers and args.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c4da056. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgewrmarshall

ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap

@@ -13,7 +13,6 @@
 @import 'confusable/index';
 @import 'definition-list/definition-list';
 @import 'dropdown/dropdown';
-@import 'error-message/index';
 @import 'icon-border/icon-border';
 @import 'icon-button/icon-button';
 @import 'icon-with-fallback/icon-with-fallback';

ui/components/ui/error-message/error-message.component.js

@@ -7,7 +7,6 @@ import {
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useTransactionModalContext } from '../../../../contexts/transaction-modal';
 import Box from '../../../../components/ui/box';
-import ErrorMessage from '../../../../components/ui/error-message';
 import Popover from '../../../../components/ui/popover';
 
 import {
@@ -18,7 +17,11 @@ import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/erro
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import AppLoadingSpinner from '../../../../components/app/app-loading-spinner';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
-import { Text } from '../../../../components/component-library';
+import {
+  BannerAlert,
+  BannerAlertSeverity,
+  Text,
+} from '../../../../components/component-library';
 import EditGasItem from './edit-gas-item';
 import NetworkStatistics from './network-statistics';
 
@@ -55,7 +58,11 @@ const EditGasFeePopover = () => {
           <div className="edit-gas-fee-popover__content">
             <Box>
               {balanceError && (
-                <ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
+                <BannerAlert
+                  severity={BannerAlertSeverity.Danger}
+                  description={t(INSUFFICIENT_FUNDS_ERROR_KEY)}
+                  marginBottom={1}
+                />
               )}
               <div className="edit-gas-fee-popover__content__header">
                 <span className="edit-gas-fee-popover__content__header-option">

ui/components/ui/error-message/error-message.component.test.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Meta, StoryObj } from '@storybook/react';
+import mockState from '../../../../../test/data/mock-state.json';
+import configureStore from '../../../../store/store';
+import { GasFeeContextProvider } from '../../../../contexts/gasFee';
+import { TransactionModalContext } from '../../../../contexts/transaction-modal';
+import {
+  EditGasModes,
+  PriorityLevels,
+} from '../../../../../shared/constants/gas';
+import { decGWEIToHexWEI } from '../../../../../shared/modules/conversion.utils';
+import EditGasFeePopover from './edit-gas-fee-popover';
+
+const store = configureStore({
+  ...mockState,
+  metamask: {
+    ...mockState.metamask,
+    featureFlags: {
+      ...mockState.metamask.featureFlags,
+      advancedInlineGas: true,
+    },
+  },
+});
+
+type MockTransactionModalProviderProps = {
+  children: React.ReactNode;
+};
+
+const MockTransactionModalProvider: React.FC<
+  MockTransactionModalProviderProps
+> = ({ children }) => {
+  return (
+    <TransactionModalContext.Provider
+      value={{
+        closeModal: () => undefined,
+        closeAllModals: () => undefined,
+        currentModal: 'editGasFee',
+        openModal: () => undefined,
+        openModalCount: 1,
+      }}
+    >
+      {children}
+    </TransactionModalContext.Provider>
+  );
+};
+
+const createTransaction = (editGasMode = EditGasModes.modifyInPlace) => ({
+  userFeeLevel: PriorityLevels.medium,
+  txParams: {
+    maxFeePerGas: decGWEIToHexWEI('70'),
+    maxPriorityFeePerGas: decGWEIToHexWEI('7'),
+    gas: '0x5208',
+    gasPrice: decGWEIToHexWEI('50'),
+    type: '0x2',
+    from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+    to: '0xc42edfcc21ed14dda456aa0756c153f7985d8813',
+  },
+  chainId: '0x5', // Use Goerli from mock state
+  editGasMode,
+});
+
+interface StoryArgs {
+  editGasMode: EditGasModes;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Pages/Confirmations/Components/EditGasFeePopover',
+  component: EditGasFeePopover,
+  decorators: [
+    (Story, context) => (
+      <Provider store={store}>
+        <MockTransactionModalProvider>
+          <GasFeeContextProvider
+            transaction={createTransaction(context.args.editGasMode)}
+            editGasMode={context.args.editGasMode}
+          >
+            <Story />
+          </GasFeeContextProvider>
+        </MockTransactionModalProvider>
+      </Provider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<StoryArgs>;
+
+export const Default: Story = {
+  args: {
+    editGasMode: EditGasModes.modifyInPlace,
+  },
+};

ui/components/ui/error-message/error-message.stories.js

@@ -13,11 +13,6 @@
     justify-content: space-between;
     padding: 16px 12px;
 
-    & .error-message {
-      margin-top: 0;
-      margin-bottom: 12px;
-    }
-
     &__header {
       color: var(--color-text-alternative);
       font-size: 10px;