Merge pull request #45015 from huyenltnguyen/chore/alert

refactor(tools): Alert component

tools/ui-components/.storybook/preview.js

@@ -1,5 +1,4 @@
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,

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

@@ -14,25 +14,42 @@ const story = {
 
 const Template: Story<AlertProps> = args => <Alert {...args} />;
 
-export const Basic = Template.bind({});
+export const Success = Template.bind({});
-Basic.args = {
+Success.args = {
   children: 'Hello, Alert!',
-  className: '',
+  variant: 'success'
-  variant: 'success',
-  dismissLabel: 'Close alert',
-  onDismiss: () => console.log('Close alert!')
 };
 
-export const LongText = (): JSX.Element => (
+export const Info = Template.bind({});
-  <Alert variant='success'>
+Info.args = {
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi commodi
+  children: 'Hello, Alert!',
-    cumque dicta ducimus eum iure, maiores mollitia, odit porro quas quod rerum
+  variant: 'info'
-    soluta sunt tempora unde, vel voluptas voluptates.
+};
-  </Alert>
-);
 
-export const WithHeadingAndParagraphs = (): JSX.Element => (
+export const Warning = Template.bind({});
-  <Alert variant='info'>
+Warning.args = {
+  children: 'Hello, Alert!',
+  variant: 'warning'
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: 'Hello, Alert!',
+  variant: 'danger'
+};
+
+export const LongText = Template.bind({});
+LongText.args = {
+  variant: 'success',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi commodi cumque dicta ducimus eum iure, maiores mollitia, odit porro quas quod rerum soluta sunt tempora unde, vel voluptas voluptates.'
+};
+
+export const WithHeadingAndParagraphs = Template.bind({});
+WithHeadingAndParagraphs.args = {
+  variant: 'info',
+  children: (
+    <>
       <h4>
         <strong>Some Heading Text</strong>
       </h4>
@@ -46,17 +63,16 @@ export const WithHeadingAndParagraphs = (): JSX.Element => (
         commodi cumque dicta ducimus eum iure, maiores mollitia, odit porro quas
         quod rerum soluta sunt tempora unde, vel voluptas voluptates.
       </p>
-  </Alert>
+    </>
-);
+  )
+};
 
-export const WithCloseButton = (): JSX.Element => (
+export const Dismissable = Template.bind({});
-  <Alert onDismiss={() => console.log('Alert closed')} variant='success'>
+Dismissable.args = {
-    Hello, Alert!
+  children: 'Hello, Alert!',
-  </Alert>
+  variant: 'success',
-);
+  dismissLabel: 'Close alert',
-
+  onDismiss: () => console.log('Close alert!')
-export const WithoutCloseButton = (): JSX.Element => (
+};
-  <Alert variant='success'>Hello, Alert without close button!</Alert>
-);
 
 export default story;

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

@@ -32,22 +32,17 @@ export function Alert({
   const variantClass = variantClasses[variant];
 
   const classes = [
-    'relative p-4 mb-6 border border-transparent break-words',
+    'flex items-start p-4 mb-6 border border-transparent break-words',
     variantClass,
-    isDismissable ? 'pr-10' : '',
     className
   ].join(' ');
 
   return (
     <div className={classes} role='alert'>
+      <div className='grow'>{children}</div>
       {isDismissable && (
-        <CloseButton
+        <CloseButton label={dismissLabel} onClick={onDismiss} />
-          className='absolute right-4'
-          label={dismissLabel}
-          onClick={onDismiss}
-        />
       )}
-      {children}
     </div>
   );
 }