fix(ui-components): make Alert not dismissable (#45291)

tools/ui-components/src/alert/alert.stories.tsx

@@ -7,8 +7,7 @@ const story = {
   component: Alert,
   argTypes: {
     children: { control: { type: 'text' } },
-    className: { control: { type: 'text' } },
-    dismissLabel: { control: { type: 'text' } }
+    className: { control: { type: 'text' } }
   }
 };
 
@@ -67,12 +66,4 @@ WithHeadingAndParagraphs.args = {
   )
 };
 
-export const Dismissable = Template.bind({});
-Dismissable.args = {
-  children: 'Hello, Alert!',
-  variant: 'success',
-  dismissLabel: 'Close alert',
-  onDismiss: () => console.log('Close alert!')
-};
-
 export default story;

tools/ui-components/src/alert/alert.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Alert } from './alert';
 
@@ -31,41 +30,4 @@ describe('<Alert>', () => {
 
     expect(screen.getByRole('alert')).toHaveClass(expectedClass);
   });
-
-  it(`renders a button when "onDismiss" prop is present, and calls "onDismiss" when the button is clicked`, () => {
-    const onDismiss = jest.fn();
-    render(
-      <Alert onDismiss={onDismiss} variant='info'>
-        Hello
-      </Alert>
-    );
-    const closeButton = screen.getByRole('button');
-
-    expect(screen.getByRole('alert')).toBeInTheDocument();
-    expect(closeButton).toBeInTheDocument();
-
-    userEvent.click(closeButton);
-
-    expect(onDismiss).toHaveBeenCalledTimes(1);
-  });
-
-  it('does NOT render a close button, when "onDismiss" prop is NOT used', () => {
-    render(<Alert variant='info'>Hello</Alert>);
-
-    expect(screen.getByRole('alert')).toBeInTheDocument();
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-  });
-
-  it('sets "aria-label" of close button to "dismissText" prop', () => {
-    const expectedLabel = 'custom dismiss alert message';
-    render(
-      <Alert dismissLabel={expectedLabel} onDismiss={jest.fn()} variant='info'>
-        Hello
-      </Alert>
-    );
-
-    expect(
-      screen.getByRole('button', { name: expectedLabel })
-    ).toBeInTheDocument();
-  });
 });

tools/ui-components/src/alert/alert.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { CloseButton } from '../close-button';
 
 type AlertVariant = 'success' | 'info' | 'warning' | 'danger';
 
@@ -7,8 +6,6 @@ export interface AlertProps {
   children: React.ReactNode;
   className?: string;
   variant: AlertVariant;
-  dismissLabel?: string;
-  onDismiss?: () => void;
 }
 
 const variantClasses: Record<AlertVariant, string> = {
@@ -19,30 +16,26 @@ const variantClasses: Record<AlertVariant, string> = {
 };
 
 /**
- * Basic UI component that provides contextual feedback
+ * `Alert` is used to display a short, important message that does not interrupt the user's workflow.
+ *
+ * `Alert` is not dismissable.
  */
 export function Alert({
   children,
   className,
-  variant,
-  dismissLabel = 'Close',
-  onDismiss
+  variant
 }: AlertProps): JSX.Element {
-  const isDismissable = !!onDismiss;
   const variantClass = variantClasses[variant];
 
   const classes = [
-    'flex items-start p-4 mb-6 border border-transparent break-words',
+    'p-4 mb-6 border border-transparent break-words',
     variantClass,
     className
   ].join(' ');
 
   return (
     <div className={classes} role='alert'>
-      <div className='grow'>{children}</div>
-      {isDismissable && (
-        <CloseButton label={dismissLabel} onClick={onDismiss} />
-      )}
+      {children}
     </div>
   );
 }