feat: add custom expand style for typography.paragraph (#24385)

* feat: add custom expand style for typography.paragraph

* feat: delete filed-form

* fix: lint error

* feat: add test case

* fix: typo

components/typography/Base.tsx

@@ -39,6 +39,7 @@ interface EllipsisConfig {
   rows?: number;
   expandable?: boolean;
   suffix?: string;
+  symbol?: React.ReactNode;
   onExpand?: React.MouseEventHandler<HTMLElement>;
   onEllipsis?: (ellipsis: boolean) => void;
 }
@@ -325,7 +326,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
   }
 
   renderExpand(forceRender?: boolean) {
-    const { expandable } = this.getEllipsis();
+    const { expandable, symbol } = this.getEllipsis();
     const { expanded, isEllipsis } = this.state;
 
     if (!expandable) return null;
@@ -333,6 +334,13 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
     // force render expand icon for measure usage or it will cause dead loop
     if (!forceRender && (expanded || !isEllipsis)) return null;
 
+    let expandContent: React.ReactNode;
+    if (symbol) {
+      expandContent = symbol;
+    } else {
+      expandContent = this.expandStr;
+    }
+
     return (
       <a
         key="expand"
@@ -340,7 +348,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
         onClick={this.onExpandClick}
         aria-label={this.expandStr}
       >
-        {this.expandStr}
+        {expandContent}
       </a>
     );
   }

components/typography/__tests__/index.test.js

@@ -182,6 +182,20 @@ describe('Typography', () => {
         expect(wrapper.find('p').text()).toEqual(fullStr);
       });
 
+      it('should have custom expand style', async () => {
+        const symbol = 'more';
+        const wrapper = mount(
+          <Base ellipsis={{ expandable: true, symbol }} component="p">
+            {fullStr}
+          </Base>,
+        );
+
+        await sleep(20);
+        wrapper.update();
+
+        expect(wrapper.find('.ant-typography-expand').text()).toEqual('more');
+      });
+
       it('can use css ellipsis', () => {
         const wrapper = mount(<Base ellipsis component="p" />);
         expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy();

components/typography/demo/ellipsis.md

@@ -29,7 +29,7 @@ ReactDOM.render(
       language for background applications, is refined by Ant UED Team.
     </Paragraph>
 
-    <Paragraph ellipsis={{ rows: 3, expandable: true }}>
+    <Paragraph ellipsis={{ rows: 3, expandable: true, symbol: 'more' }}>
       Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
       Design, a design language for background applications, is refined by Ant UED Team. Ant Design,
       a design language for background applications, is refined by Ant UED Team. Ant Design, a

components/typography/index.en-US.md

@@ -56,7 +56,7 @@ Basic text writing, including headings, body text, lists, and more.
 | delete | Deleted line style | boolean | false |  |
 | disabled | Disabled content | boolean | false |  |
 | editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false |  |
-| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean suffix: string, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
+| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
 | mark | Marked style | boolean | false |  |
 | underline | Underlined style | boolean | false |  |
 | onChange | Trigger when user edits the content | Function(string) | - |  |

components/typography/index.zh-CN.md

@@ -54,7 +54,7 @@ cols: 1
 | delete | 添加删除线样式 | boolean | false |  |
 | disabled | 禁用文本 | boolean | false |  |
 | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false |  |
-| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
+| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
 | mark | 添加标记样式 | boolean | false |  |
 | underline | 添加下划线样式 | boolean | false |  |
 | onChange | 当用户提交编辑内容时触发 | Function(string) | - |  |