style: fix Typography copyable style and update demos (#46748)

* style: fix Typography copyable style and update demos

* chore: update jest snapshot

components/typography/Base/index.tsx

@@ -451,7 +451,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
 
   // Copy
   const renderCopy = () => {
-    if (!enableCopy) return;
+    if (!enableCopy) {
+      return null;
+    }
 
     const { tooltips, icon } = copyConfig;
 
@@ -467,7 +469,10 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     return (
       <Tooltip key="copy" title={copyTitle}>
         <TransButton
-          className={classNames(`${prefixCls}-copy`, copied && `${prefixCls}-copy-success`)}
+          className={classNames(`${prefixCls}-copy`, {
+            [`${prefixCls}-copy-success`]: copied,
+            [`${prefixCls}-copy-icon-only`]: children === null || children === undefined,
+          })}
           onClick={onCopyClick}
           aria-label={ariaLabel}
         >

components/typography/demo/copyable.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+提供可复制的交互能力。
+
+## en-US
+
+Make Typography copyable.

components/typography/demo/copyable.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SmileFilled, SmileOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+
+const { Paragraph, Text } = Typography;
+
+const App: React.FC = () => (
+  <>
+    <Paragraph copyable>This is a copyable text.</Paragraph>
+    <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
+    <Paragraph
+      copyable={{
+        icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />],
+        tooltips: ['click here', 'you clicked!!'],
+      }}
+    >
+      Custom Copy icon and replace tooltips text.
+    </Paragraph>
+    <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
+    <Text copyable />
+  </>
+);
+
+export default App;

components/typography/demo/editable.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+提供可编辑的交互能力。
+
+## en-US
+
+Make Typography editable.

components/typography/demo/editable.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
-import { CheckOutlined, HighlightOutlined, SmileFilled, SmileOutlined } from '@ant-design/icons';
-import { Divider, Radio, Typography } from 'antd';
+import { CheckOutlined, HighlightOutlined } from '@ant-design/icons';
+import { Radio, Typography } from 'antd';
 
 const { Paragraph } = Typography;
 
@@ -136,18 +136,6 @@ const App: React.FC = () => {
       <Typography.Title editable level={5} style={{ margin: 0 }}>
         h5. Ant Design
       </Typography.Title>
-      <Divider />
-      <Paragraph copyable>This is a copyable text.</Paragraph>
-      <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
-      <Paragraph
-        copyable={{
-          icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />],
-          tooltips: ['click here', 'you clicked!!'],
-        }}
-      >
-        Custom Copy icon and replace tooltips text.
-      </Paragraph>
-      <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
     </>
   );
 };

components/typography/demo/interactive.md

@@ -1,7 +0,0 @@
-## zh-CN
-
-提供可编辑和可复制等额外的交互能力。
-
-## en-US
-
-Provide additional interactive capacity of editable and copyable.

components/typography/index.en-US.md

@@ -20,7 +20,8 @@ Basic text writing, including headings, body text, lists, and more.
 <code src="./demo/title.tsx">Title Component</code>
 <code src="./demo/paragraph-debug.tsx" debug>Title and Paragraph</code>
 <code src="./demo/text.tsx">Text and Link Component</code>
-<code src="./demo/interactive.tsx">Interactive</code>
+<code src="./demo/editable.tsx">Editable</code>
+<code src="./demo/copyable.tsx">Copyable</code>
 <code src="./demo/ellipsis.tsx">Ellipsis</code>
 <code src="./demo/ellipsis-middle.tsx">Ellipsis from middle</code>
 <code src="./demo/ellipsis-debug.tsx" debug>Ellipsis Debug</code>

components/typography/index.zh-CN.md

@@ -21,7 +21,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 <code src="./demo/title.tsx">标题组件</code>
 <code src="./demo/paragraph-debug.tsx" debug>标题与段落</code>
 <code src="./demo/text.tsx">文本与超链接组件</code>
-<code src="./demo/interactive.tsx">可交互</code>
+<code src="./demo/editable.tsx">可编辑</code>
+<code src="./demo/copyable.tsx">可复制</code>
 <code src="./demo/ellipsis.tsx">省略号</code>
 <code src="./demo/ellipsis-middle.tsx">省略中间</code>
 <code src="./demo/ellipsis-debug.tsx" debug>省略号 Debug</code>

components/typography/style/mixins.ts

@@ -222,7 +222,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = (tok
 };
 
 export const getCopyableStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => ({
-  '&-copy-success': {
+  [`${token.componentCls}-copy-success`]: {
     [`
     &,
     &:hover,
@@ -230,6 +230,9 @@ export const getCopyableStyles: GenerateStyle<TypographyToken, CSSObject> = (tok
       color: token.colorSuccess,
     },
   },
+  [`${token.componentCls}-copy-icon-only`]: {
+    marginInlineStart: 0,
+  },
 });
 
 export const getEllipsisStyles = (): CSSObject => ({