From dce1e25e6f021804228689e317bb2f79485760da Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Tue, 19 Nov 2024 20:22:53 +0800
Subject: [PATCH] improve(style): Empty description max-width => 600px and
 steps max-width => 1000px for over length style

---
 .../design/src/empty/demo/over-length.tsx     | 35 ++++++++
 packages/design/src/empty/index.md            |  2 +
 packages/design/src/empty/style/index.ts      | 82 +++++++++----------
 3 files changed, 76 insertions(+), 43 deletions(-)
 create mode 100644 packages/design/src/empty/demo/over-length.tsx

diff --git a/packages/design/src/empty/demo/over-length.tsx b/packages/design/src/empty/demo/over-length.tsx
new file mode 100644
index 000000000..e8e468bee
--- /dev/null
+++ b/packages/design/src/empty/demo/over-length.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Empty, Button } from '@oceanbase/design';
+
+export default () => {
+  const description = 'This is a long long long long long long description.';
+  const steps = [
+    {
+      title: 'First',
+      description,
+    },
+    {
+      title: 'Second',
+      description,
+    },
+    {
+      title: 'Third',
+      description,
+    },
+    {
+      title: 'Fourth',
+      description,
+    },
+  ];
+
+  return (
+    <Empty
+      image={Empty.PRESENTED_IMAGE_COLORED}
+      title="Create Your Cluster"
+      description="There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one!"
+      steps={steps}
+    >
+      <Button type="primary">Create Cluster</Button>
+    </Empty>
+  );
+};
diff --git a/packages/design/src/empty/index.md b/packages/design/src/empty/index.md
index 93131c5d1..be273d9ce 100644
--- a/packages/design/src/empty/index.md
+++ b/packages/design/src/empty/index.md
@@ -29,6 +29,8 @@ nav:
 
 <code src="./demo/steps.tsx" title="步骤提示"></code>
 
+<code src="./demo/over-length.tsx" title="超长内容" description="为了避免无限拉伸，限制描述区的最大宽度为 600px、步骤区的最大宽度为 1000px。"></code>
+
 <code src="./demo/horizontal.tsx" title="横向布局" description="图片为 PRESENTED_IMAGE_GUIDE，常用于功能开通等引导类场景"></code>
 
 <code src="./demo/with-page-container.tsx" title="和页容器搭配使用"></code>
diff --git a/packages/design/src/empty/style/index.ts b/packages/design/src/empty/style/index.ts
index 4d6b62391..7123e84e2 100644
--- a/packages/design/src/empty/style/index.ts
+++ b/packages/design/src/empty/style/index.ts
@@ -6,15 +6,7 @@ import { genLargeStyle } from '../../_util/genStyle';
 export type EmptyToken = FullToken<'Badge'>;
 
 export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSSObject => {
-  const {
-    antCls,
-    componentCls,
-    colorTextTertiary,
-    colorBgLayout,
-    colorFill,
-    colorText,
-    colorTextSecondary,
-  } = token;
+  const { antCls, componentCls, colorTextTertiary, colorText, colorTextSecondary } = token;
 
   return {
     [`${componentCls}`]: {
@@ -34,49 +26,53 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
         },
         [`${componentCls}-description-content`]: {
           color: colorTextTertiary,
+          maxWidth: 600,
           marginTop: token.marginXS,
+          margin: '0px auto',
         },
-      },
-      [`${componentCls}-footer`]: {
-        marginTop: token.marginLG,
-        ...genLargeStyle(token),
-      },
-      [`${antCls}-steps`]: {
-        marginTop: token.margin,
-        padding: token.paddingLG,
-        backgroundColor: token.colorFillQuaternary,
-        borderRadius: token.borderRadiusLG,
-        [`${antCls}-steps-item-container`]: {
-          [`${antCls}-steps-item-icon`]: {
-            height: token.controlHeightSM,
-            width: token.controlHeightSM,
-            lineHeight: `${token.controlHeightSM}px`,
-            backgroundColor: token.colorFillSecondary,
-            // override default border color
-            borderColor: token.colorFillSecondary,
-            [`${antCls}-steps-icon`]: {
-              color: colorTextSecondary,
-              fontSize: token.fontSize,
-            },
-          },
-          [`${antCls}-steps-item-content`]: {
-            [`${antCls}-steps-item-title`]: {
-              color: colorText,
-              fontSize: token.fontSize,
-              fontWeight: token.fontWeightStrong,
+        [`${antCls}-steps`]: {
+          maxWidth: 1000,
+          margin: '0px auto',
+          marginTop: token.margin,
+          padding: token.paddingLG,
+          backgroundColor: token.colorFillQuaternary,
+          borderRadius: token.borderRadiusLG,
+          [`${antCls}-steps-item-container`]: {
+            [`${antCls}-steps-item-icon`]: {
+              height: token.controlHeightSM,
+              width: token.controlHeightSM,
               lineHeight: `${token.controlHeightSM}px`,
-              '&::after': {
-                top: token.controlHeightSM / 2,
+              backgroundColor: token.colorFillSecondary,
+              // override default border color
+              borderColor: token.colorFillSecondary,
+              [`${antCls}-steps-icon`]: {
+                color: colorTextSecondary,
+                fontSize: token.fontSize,
               },
             },
-            [`${antCls}-steps-item-description`]: {
-              color: colorTextTertiary,
-              fontSize: token.fontSizeSM,
-              marginTop: token.marginXS,
+            [`${antCls}-steps-item-content`]: {
+              [`${antCls}-steps-item-title`]: {
+                color: colorText,
+                fontSize: token.fontSize,
+                fontWeight: token.fontWeightStrong,
+                lineHeight: `${token.controlHeightSM}px`,
+                '&::after': {
+                  top: token.controlHeightSM / 2,
+                },
+              },
+              [`${antCls}-steps-item-description`]: {
+                color: colorTextTertiary,
+                fontSize: token.fontSizeSM,
+                marginTop: token.marginXS,
+              },
             },
           },
         },
       },
+      [`${componentCls}-footer`]: {
+        marginTop: token.marginLG,
+        ...genLargeStyle(token),
+      },
     },
 
     [`${componentCls}-horizontal`]: {