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,49 +14,65 @@ const story = {
 
 const Template: Story<AlertProps> = args => <Alert {...args} />;
 
-export const Basic = Template.bind({});
-Basic.args = {
+export const Success = Template.bind({});
+Success.args = {
+  children: 'Hello, Alert!',
+  variant: 'success'
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  children: 'Hello, Alert!',
+  variant: 'info'
+};
+
+export const Warning = Template.bind({});
+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>
+      <p>
+        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.
+      </p>
+      <p>
+        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.
+      </p>
+    </>
+  )
+};
+
+export const Dismissable = Template.bind({});
+Dismissable.args = {
   children: 'Hello, Alert!',
-  className: '',
   variant: 'success',
   dismissLabel: 'Close alert',
   onDismiss: () => console.log('Close alert!')
 };
 
-export const LongText = (): JSX.Element => (
-  <Alert variant='success'>
-    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.
-  </Alert>
-);
-
-export const WithHeadingAndParagraphs = (): JSX.Element => (
-  <Alert variant='info'>
-    <h4>
-      <strong>Some Heading Text</strong>
-    </h4>
-    <p>
-      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.
-    </p>
-    <p>
-      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.
-    </p>
-  </Alert>
-);
-
-export const WithCloseButton = (): JSX.Element => (
-  <Alert onDismiss={() => console.log('Alert closed')} variant='success'>
-    Hello, Alert!
-  </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
-          className='absolute right-4'
-          label={dismissLabel}
-          onClick={onDismiss}
-        />
+        <CloseButton label={dismissLabel} onClick={onDismiss} />
       )}
-      {children}
     </div>
   );
 }