Merge pull request #844 from oceanbase/dengfuping-dev

improve(style): Empty description max-width => 600px and steps max-width => 1000px for over length style
oceanbase · Nov 19, 2024 · 5c527cf · 5c527cf
2 parents 4606a1e + 11be27b
commit 5c527cf
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 43 deletions.
diff --git a/packages/design/src/empty/demo/over-length.tsx 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
@@ -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
@@ -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`]: {