improve(design): Alert style to follow design guide

oceanbase · Jun 25, 2024 · 392a9ea · 392a9ea
1 parent 97cf095
commit 392a9ea
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/packages/design/src/alert/demo/action.tsx b/packages/design/src/alert/demo/action.tsx
@@ -12,39 +12,31 @@ const App: React.FC = () => (
       description="Detailed description and advice about successful copywriting."
       type="success"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Informational Notes"
       description="Additional description and information about copywriting."
       type="info"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Warning"
       description="This is a warning notice about copywriting."
       type="warning"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Error"
       description="This is an error message about copywriting."
       type="error"
       showIcon
+      closable
       action={
         <Button size="small" danger>
           Detail

diff --git a/packages/design/src/alert/demo/over-length.tsx b/packages/design/src/alert/demo/over-length.tsx
@@ -18,33 +18,29 @@ const App: React.FC = () => (
       message="Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips."
       type="success"
       showIcon
-      closable
-      closeIcon={<span>Close</span>}
+      action={<a>Detail</a>}
     />
     <Alert
       message="Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips."
       type="success"
       showIcon
+      closable
       action={<a>Detail</a>}
     />
     <Alert
       message="Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips."
       description="Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting."
       type="success"
       showIcon
-      closable
-      onClose={onClose}
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips."
       description="Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting."
       type="success"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
   </Space>
 );

diff --git a/packages/design/src/alert/style/index.ts b/packages/design/src/alert/style/index.ts
@@ -69,6 +69,7 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
     [`${componentCls}`]: {
       // vertical align to flex-start
       alignItems: 'flex-start !important',
+      paddingRight: token.padding,
       [`${componentCls}-icon`]: {
         height,
       },
@@ -81,14 +82,25 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
         },
       },
     },
+    [`${componentCls}:not(${componentCls}-with-description)`]: {
+      paddingLeft: token.padding,
+    },
     [`${componentCls}${componentCls}-with-description`]: {
       paddingBlock: token.padding,
       [`${componentCls}-message`]: {
+        fontWeight: 500,
         marginBottom: token.marginXXS,
       },
+      [`${componentCls}-description`]: {
+        color: token.colorTextSecondary,
+      },
       [`${componentCls}-icon`]: {
         fontSize: token.fontSizeHeading4,
         height: token.fontSizeHeading3,
+        marginInlineEnd: token.margin,
+      },
+      [`${componentCls}-action`]: {
+        marginInlineStart: token.marginXS,
       },
     },
     [`${componentCls}:not(${componentCls}-banner):not(${componentCls}-ghost)`]: {