@transferwise/components 0.0.0-experimental-94a980d → 0.0.0-experimental-afa5e5b

package/src/field/Field.spec.tsx

@@ -71,7 +71,7 @@ describe('Field', () => {
     expect(screen.getByLabelText(/Phone number/)).toHaveAttribute('aria-describedby');
   });
 
-  it("should allow for InlinePrompt's StatusIcon override via `messageIconLabel` prop", () => {
+  it("should allow for InlineAlert's StatusIcon override via `messageIconLabel` prop", () => {
     const customIconLabel = 'My custom icon label';
 
     render(
@@ -86,8 +86,8 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.queryByLabelText('Error:')).not.toBeInTheDocument();
-    expect(screen.getByLabelText(customIconLabel)).toBeInTheDocument();
+    expect(screen.queryByRole('graphics-symbol', { name: 'Error.' })).not.toBeInTheDocument();
+    expect(screen.getByRole('graphics-symbol', { name: customIconLabel })).toBeInTheDocument();
   });
 
   it('should show or hide (Optional) suffix depending on required prop', () => {
@@ -147,20 +147,4 @@ describe('Field', () => {
     const label = screen.getByText('Phone number');
     await userEvent.click(label);
   });
-
-  it('should show loading spinner when messageLoading is true', () => {
-    render(
-      <Field
-        label="Phone number"
-        message="Processing your request"
-        sentiment="neutral"
-        messageLoading
-      >
-        <Input />
-      </Field>,
-    );
-
-    expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
-    expect(screen.getByText('Processing your request')).toBeInTheDocument();
-  });
 });

package/src/field/Field.story.tsx

@@ -46,7 +46,6 @@ export const Basic = (args: FieldProps) => {
           sentiment={Sentiment.NEGATIVE}
           message="Validation error, please take a look"
           messageIconLabel={args.messageIconLabel}
-          messageLoading={args.messageLoading}
         >
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
@@ -82,7 +81,6 @@ export const Basic = (args: FieldProps) => {
           message={lorem10}
           sentiment="negative"
           messageIconLabel={args.messageIconLabel}
-          messageLoading={args.messageLoading}
         >
           <TextArea />
         </Field>
@@ -111,17 +109,6 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.POSITIVE}
         message="Positive message"
         messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-
-      <Field
-        label="Text Input with Proposition Message"
-        sentiment="proposition"
-        message="Proposition message"
-        messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -131,7 +118,6 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.WARNING}
         message="Warning message"
         messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -141,7 +127,6 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.NEGATIVE}
         message="This is a required field"
         messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -153,7 +138,6 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.NEGATIVE}
         message="Validation error, please take a look"
         messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -164,7 +148,6 @@ export const WithStatusMessages = (args: FieldProps) => {
         hint="This is a helpful message"
         error="Validation error, please take a look"
         messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -174,7 +157,6 @@ export const WithStatusMessages = (args: FieldProps) => {
         label="Text Input with Info under the field"
         message="This is a helpful message"
         messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>

package/src/field/Field.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { useId, useRef } from 'react';
 
 import { Sentiment } from '../common';
-import { InlinePrompt, type InlinePromptProps } from '../prompt';
+import InlineAlert from '../inlineAlert/InlineAlert';
 import {
   FieldLabelContextProvider,
   InputDescribedByProvider,
@@ -21,18 +21,14 @@ export type FieldProps = {
   hint?: React.ReactNode;
   message?: React.ReactNode;
   /**
-   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
    * announced by the screen readers
    * */
   messageIconLabel?: string;
-  /**
-   * If true, shows a loading spinner in place of the message icon of the InlinePrompt
-   */
-  messageLoading?: boolean;
   description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
-  sentiment?: InlinePromptProps['sentiment'];
+  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
   className?: string;
   children?: React.ReactNode;
 };
@@ -43,7 +39,6 @@ export const Field = ({
   required = true,
   message: propMessage,
   messageIconLabel,
-  messageLoading,
   hint,
   description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
@@ -109,16 +104,9 @@ export const Field = ({
               )}
 
               {message && (
-                <InlinePrompt
-                  sentiment={sentiment}
-                  id={messageId}
-                  mediaLabel={messageIconLabel}
-                  className="np-field__prompt"
-                  loading={messageLoading}
-                  width="full"
-                >
+                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>
                   {message}
-                </InlinePrompt>
+                </InlineAlert>
               )}
             </div>
           </InputInvalidProvider>

package/src/inlineAlert/InlineAlert.story.tsx

@@ -4,13 +4,9 @@ import InlineAlert, { InlineAlertProps } from './InlineAlert';
 import { lorem10, lorem40 } from '../test-utils';
 import Link from '../link';
 
-/**
- * > **DEPRECATED** Use [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) or [Field](?path=/docs/forms-field--docs) instead.
- */
 export default {
   component: InlineAlert,
   title: 'Prompts/InlineAlert',
-  tags: ['deprecated'],
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {

package/src/inlineAlert/InlineAlert.tsx

@@ -22,7 +22,13 @@ const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
 ]);
 
 /**
- * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.
+ * Avoid using `<InlineAlert>` component directly
+ * it's for edge cases when `<Field />` isn't suitable for some reasons.
+ *
+ * Example:
+ * ```
+ * <Field sentiment={..} message={..}>..</Field>
+ * ```
  */
 export default function InlineAlert({
   id,

package/src/main.css

@@ -3825,19 +3825,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
-.np-field-control,
-.np-field__prompt {
+.np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
-.np-field .form-group--typeahead[class],
-.np-field .np-checkbox-label[class] {
-  margin-bottom: 0;
-}
-.np-field:has(.wds-radio-group) .np-field__prompt {
-  margin-top: 12px;
-  margin-top: var(--size-12);
-}
 .np-input-group {
   display: inline-grid;
   width: 100%;
@@ -5406,9 +5397,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
-.wds-radio-group .np-radio:last-child label {
-  margin-bottom: 0;
-}
 .np-section {
   margin-top: 32px;
   margin-top: var(--size-32);
@@ -6935,10 +6923,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
   margin: 0;
 }
-.typeahead--prompt {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/src/main.less

@@ -61,7 +61,6 @@
 @import "./phoneNumberInput/PhoneNumberInput.less";
 @import "./popover/Popover.less";
 @import "./promoCard/PromoCard.less";
-@import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
 @import "./snackbar/Snackbar.less";

package/src/radioGroup/RadioGroup.story.tsx

@@ -66,8 +66,6 @@ export const WithinField = {
     const hasError = selectedValue === 'radio-2';
     return (
       <Field
-        label="Field label"
-        description="Field description"
         {...(hasError
           ? {
               message: 'Something went wrong',

package/src/radioGroup/RadioGroup.tsx

@@ -29,12 +29,7 @@ export default function RadioGroup<T extends string | number = never>({
   const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
 
   return radios.length > 0 ? (
-    <div
-      role="radiogroup"
-      {...inputAttributes}
-      {...UNSAFE_inputAttributes}
-      className="wds-radio-group"
-    >
+    <div role="radiogroup" {...inputAttributes} {...UNSAFE_inputAttributes}>
       {radios.map(({ value = '' as T, ...restProps }, index) => (
         <Radio
           // eslint-disable-next-line react/no-array-index-key

package/src/typeahead/Typeahead.css

@@ -103,10 +103,6 @@
   padding: 0;
   margin: 0;
 }
-.typeahead--prompt {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/src/typeahead/Typeahead.less

@@ -122,10 +122,6 @@
     }
   }
 
-  &--prompt {
-    margin-top: var(--size-4);
-  }
-
   // SIZES
   &-sm {
     &.typeahead--multiple {
@@ -211,7 +207,7 @@
   }
 
   .np-theme-personal & {
-    .input-group:not(.disabled, :disabled, .input-group--has-error):focus-within .tw-icon-search {
+    .input-group:not(.disabled,:disabled,.input-group--has-error):focus-within .tw-icon-search {
       color: var(--color-interactive-primary);
     }
     .tw-icon-search {

package/src/typeahead/Typeahead.spec.tsx

@@ -102,7 +102,7 @@ describe('Typeahead', () => {
     expect(onChange).toHaveBeenCalledWith([]);
   });
 
-  it('shows InlinePrompt when alert prop is provided', () => {
+  it('shows InlineAlert when alert prop is provided', () => {
     render(
       <Typeahead
         id="test"

package/src/typeahead/Typeahead.story.tsx

@@ -1,18 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search as SearchIcon } from '@transferwise/icons';
 import { userEvent, within, fn } from 'storybook/test';
-import { useState } from 'react';
 
-import { Sentiment, Size } from '../common';
+import Typeahead, { type TypeaheadOption } from './Typeahead';
+import { Size } from '../common';
+import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from '../field/Field';
 import Button from '../button';
 import Modal from '../modal';
-import { InlinePromptProps } from '../prompt';
-import Typeahead, { type TypeaheadOption } from './Typeahead';
 
-// needed for SB to display correct name in the docs
-(Typeahead as React.FC).displayName = 'Typeahead';
 type Story = StoryObj<typeof Typeahead>;
 
 /**
@@ -40,7 +37,6 @@ const meta: Meta<typeof Typeahead> = {
     searchDelay: 200,
     showSuggestions: true,
     showNewEntry: true,
-    alert: undefined,
     size: Size.MEDIUM,
     initialValue: [],
     id: 'myTypeahead',
@@ -58,17 +54,6 @@ const meta: Meta<typeof Typeahead> = {
       control: 'inline-radio',
       options: [Size.MEDIUM, Size.LARGE],
     },
-    alert: {
-      description:
-        'Displays an [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) below the input when provided. <blockquote class="m-0">**⚠️ DEPRECATED:** Please use [&lt;Field />](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead. `error`, `info` and `success` alert types are no longer supported and will be soon removed.</blockquote>',
-      control: 'object',
-      table: {
-        type: {
-          summary:
-            '{ message: ReactNode; type?: "negative" | "neutral" | "positive" | "warning" | "proposition" }',
-        },
-      },
-    },
   },
 };
 export default meta;
@@ -252,14 +237,6 @@ export const Search: Story = {
 };
 
 export const AutoFocusInModal: Story = {
-  parameters: {
-    docs: {
-      story: {
-        inline: false,
-        iframeHeight: 500,
-      },
-    },
-  },
   render: function Render() {
     const [open, setOpen] = useState<boolean>(true);
     return (
@@ -302,128 +279,3 @@ export const AutoFocusInModal: Story = {
     );
   },
 };
-
-export const WithField: Story = {
-  args: {
-    autoFillOnBlur: undefined,
-    chipSeparators: undefined,
-    clearable: undefined,
-    initialValue: undefined,
-    inputAutoComplete: undefined,
-    minQueryLength: undefined,
-    onBlur: undefined,
-    onFocus: undefined,
-    onInputChange: undefined,
-    onSearch: undefined,
-    placeholder: undefined,
-    searchDelay: undefined,
-    showSuggestions: undefined,
-    showNewEntry: undefined,
-    size: undefined,
-  },
-  render: function Render(args) {
-    const options = [{ label: 'Option 1' }];
-
-    const alertTypes: InlinePromptProps['sentiment'][] = [
-      Sentiment.NEGATIVE,
-      Sentiment.WARNING,
-      Sentiment.NEUTRAL,
-      Sentiment.POSITIVE,
-      'proposition',
-    ];
-
-    return (
-      <>
-        <Field
-          id="typeahead"
-          label="Field label"
-          description="Additional information about the field"
-          required
-        >
-          <Typeahead {...args} name="typeahead" options={options} />
-        </Field>
-        {alertTypes.map((sentiment) => (
-          <Field
-            key={sentiment}
-            label="Field label"
-            id={`typeahead-${sentiment}`}
-            message={`This is a ${sentiment} message`}
-            sentiment={sentiment}
-          >
-            <Typeahead {...args} name={`typeahead-${sentiment}`} options={options} />
-          </Field>
-        ))}
-      </>
-    );
-  },
-  decorators: (Story) => (
-    <div className="d-flex flex-column">
-      <Story />
-    </div>
-  ),
-};
-
-/**
- * > **⚠️ DEPRECATED:** Please use [&lt;Field />](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead. <br/>`error`, `info` and `success` alert types are no longer supported and will be soon removed.
- */
-export const WithAlert: Story = {
-  name: 'With Alert (deprecated)',
-  args: {
-    autoFillOnBlur: undefined,
-    chipSeparators: undefined,
-    clearable: undefined,
-    initialValue: undefined,
-    inputAutoComplete: undefined,
-    minQueryLength: undefined,
-    onBlur: undefined,
-    onFocus: undefined,
-    onInputChange: undefined,
-    onSearch: undefined,
-    placeholder: undefined,
-    searchDelay: undefined,
-    showSuggestions: undefined,
-    showNewEntry: undefined,
-    size: undefined,
-  },
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-  render: function Render(args) {
-    const options = [{ label: 'Option 1' }];
-
-    const alertTypes: InlinePromptProps['sentiment'][] = [
-      Sentiment.NEGATIVE,
-      Sentiment.WARNING,
-      Sentiment.NEUTRAL,
-      Sentiment.POSITIVE,
-      'proposition',
-    ];
-
-    return (
-      <>
-        {alertTypes.map((sentiment) => (
-          <Typeahead
-            key={sentiment}
-            {...args}
-            id={`typeahead-${sentiment}`}
-            name={`typeahead-${sentiment}`}
-            options={options}
-            alert={{
-              message: `This is a ${sentiment} message`,
-              type: sentiment,
-            }}
-          />
-        ))}
-      </>
-    );
-  },
-  decorators: (Story) => (
-    <div className="d-flex flex-column">
-      <Story />
-    </div>
-  ),
-};

package/src/typeahead/Typeahead.tsx

@@ -16,7 +16,8 @@ import {
   removeClickClassFromDocumentOnIos,
   stopPropagation,
 } from '../common';
-import { InlinePrompt, InlinePromptProps } from '../prompt';
+import InlineAlert from '../inlineAlert';
+import { InlineAlertProps } from '../inlineAlert/InlineAlert';
 import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
@@ -39,17 +40,9 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   id: string;
   name: string;
   addon?: ReactNode;
-  /**
-   * @deprecated Please use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
-   * @deprecated `error`, `info` and `success` are deprecated as alert types and will be soon removed.
-   */
   alert?: {
-    message: InlinePromptProps['children'];
-    type?:
-      | InlinePromptProps['sentiment']
-      | `${Sentiment.ERROR}`
-      | `${Sentiment.INFO}`
-      | `${Sentiment.SUCCESS}`;
+    message: InlineAlertProps['children'];
+    type?: InlineAlertProps['type'];
   };
   allowNew?: boolean;
   autoFillOnBlur?: boolean;
@@ -481,20 +474,9 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       dropdownOpen,
     });
 
-    const alertType = (() => {
-      if (!alert?.type || alert.type === Sentiment.INFO) {
-        return Sentiment.NEUTRAL;
-      }
-      if (alert.type === Sentiment.ERROR) {
-        return Sentiment.NEGATIVE;
-      }
-      if (alert.type === Sentiment.SUCCESS) {
-        return Sentiment.POSITIVE;
-      }
-      return alert.type;
-    })();
-    const hasError = errorState || (alert && alertType === Sentiment.NEGATIVE);
-    const displayAlert = (!errorState && alert) || (alert && alertType === Sentiment.NEGATIVE);
+    const alertType = alert?.type ?? Sentiment.NEUTRAL;
+    const hasError = errorState || (alert && alertType === Sentiment.ERROR);
+    const displayAlert = (!errorState && alert) || (alert && alertType === Sentiment.ERROR);
     const hasWarning = displayAlert && alertType === Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return (
@@ -512,7 +494,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         onClick={stopPropagation}
       >
         <div
-          className={clsx('form-group', 'form-group--typeahead', {
+          className={clsx('form-group', {
             'has-error': hasError,
             'has-warning': hasWarning,
             'has-info': hasInfo,
@@ -564,13 +546,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               </div>
             )}
           </div>
-          {displayAlert ? (
-            <InlinePrompt sentiment={alertType} className="typeahead--prompt" width="full">
-              {alert.message}
-            </InlinePrompt>
-          ) : (
-            menu
-          )}
+          {displayAlert ? <InlineAlert type={alert.type}>{alert.message}</InlineAlert> : menu}
         </div>
       </div>
     );

package/src/upload/Upload.story.tsx

@@ -71,7 +71,7 @@ const meta = {
     },
     errorIconLabel: {
       description:
-        "Override for the InlinePrompt icon's default, accessible name announced by the screen readers",
+        "Override for the InlineAlert icon's default, accessible name announced by the screen readers",
     },
     usHelpImage: {
       control: false,

package/src/upload/Upload.tests.story.tsx

@@ -1,5 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within, waitFor } from 'storybook/test';
+import type { Meta } from '@storybook/react-webpack5';
 
 import Upload from '.';
 import { Field } from '../field/Field';
@@ -74,40 +73,6 @@ export const MaxSizes = () => {
   );
 };
 
-export const WithError: StoryObj<typeof meta> = {
-  render: () => (
-    <Field label="Upload a file">
-      <Upload
-        usAccept="*"
-        usLabel="Upload a file"
-        usPlaceholder="Maximum filesize is 1B"
-        usDisabled={false}
-        maxSize={1}
-        errorIconLabel="File too large error"
-        httpOptions={{
-          url: 'https://httpbin.org/post',
-          method: 'POST',
-        }}
-      />
-    </Field>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const fileInput = canvasElement.querySelector<HTMLInputElement>('input[type="file"]');
-
-    if (!fileInput) {
-      throw new Error('File input not found');
-    }
-
-    const file = new File(['This file content is definitely more than 1 byte'], 'test-file.txt', {
-      type: 'text/plain',
-    });
-
-    await userEvent.upload(fileInput, file);
-    await waitFor(async () => canvas.findByText(/Maximum filesize is/i), { timeout: 3000 });
-  },
-};
-
 export const AllVariants = () => {
   return (
     <div style={{ display: 'flex', gap: '1rem' }}>

package/src/upload/Upload.tsx

@@ -55,7 +55,7 @@ export interface UploadProps extends WrappedComponentProps {
   usLabel?: string;
   usPlaceholder?: string;
   /**
-   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
    * announced by the screen readers
    * */
   errorIconLabel?: string;

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -2,7 +2,7 @@ import { Upload as UploadIcon } from '@transferwise/icons';
 import { createRef, PureComponent } from 'react';
 import StatusIcon from '../../../statusIcon';
 import { Sentiment, Size } from '../../../common';
-import { InlinePrompt } from '../../../prompt/InlinePrompt/InlinePrompt';
+import InlineAlert from '../../../inlineAlert';
 
 export interface UploadImageStepProps {
   fileDropped: (file: File) => void;
@@ -105,13 +105,9 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
           {errorMessage && (
             <div className="upload-error-message">
               <div className="m-t-3 has-error">
-                <InlinePrompt
-                  sentiment={Sentiment.NEGATIVE}
-                  mediaLabel={errorIconLabel}
-                  width="full"
-                >
+                <InlineAlert type={Sentiment.NEGATIVE} iconLabel={errorIconLabel}>
                   {errorMessage}
-                </InlinePrompt>
+                </InlineAlert>
               </div>
             </div>
           )}