demo: update Watermark demo (ant-design#46899)

* feat: CP support Table expandIcon

* revert

* demo: update demo

components/config-provider/__tests__/style.test.tsx

@@ -958,7 +958,10 @@ describe('ConfigProvider support style and className props', () => {
   it('Should Table className & style works', () => {
     const { container } = render(
       <ConfigProvider table={{ className: 'cp-table', style: { backgroundColor: 'blue' } }}>
-        <Table dataSource={[]} />
+        <Table
+          columns={[{ title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true }]}
+          dataSource={[{ key: '1', name: 'Jim Green', age: 40, address: 'test', tags: ['loser'] }]}
+        />
       </ConfigProvider>,
     );
     const element = container.querySelector<HTMLDivElement>('.ant-table-wrapper');

components/watermark/demo/custom.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from 'react';
-import { ColorPicker, Form, Input, InputNumber, Slider, Space, Typography, Watermark } from 'antd';
-import type { ColorPickerProps, GetProp } from 'antd';
+import React, { useState } from 'react';
+import { ColorPicker, Flex, Form, Input, InputNumber, Slider, Typography, Watermark } from 'antd';
+import type { ColorPickerProps, GetProp, WatermarkProps } from 'antd';
 
 type Color = GetProp<ColorPickerProps, 'color'>;
 
@@ -29,23 +29,17 @@ const App: React.FC = () => {
   });
   const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
 
-  const watermarkProps = useMemo(
-    () => ({
-      content,
-      font: {
-        color: typeof color === 'string' ? color : color.toRgbString(),
-        fontSize,
-      },
-      zIndex,
-      rotate,
-      gap,
-      offset,
-    }),
-    [config],
-  );
+  const watermarkProps: WatermarkProps = {
+    content,
+    zIndex,
+    rotate,
+    gap,
+    offset,
+    font: { color: typeof color === 'string' ? color : color.toRgbString(), fontSize },
+  };
 
   return (
-    <div style={{ display: 'flex' }}>
+    <Flex gap="middle">
       <Watermark {...watermarkProps}>
         <Typography>
           <Paragraph>
@@ -73,24 +67,13 @@ const App: React.FC = () => {
           </Paragraph>
         </Typography>
         <img
-          style={{
-            zIndex: 10,
-            width: '100%',
-            maxWidth: 800,
-            position: 'relative',
-          }}
+          style={{ zIndex: 10, width: '100%', maxWidth: 800, position: 'relative' }}
           src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
-          alt="示例图片"
+          alt="img"
         />
       </Watermark>
       <Form
-        style={{
-          width: 280,
-          flexShrink: 0,
-          borderLeft: '1px solid #eee',
-          paddingLeft: 20,
-          marginLeft: 20,
-        }}
+        style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
         form={form}
         layout="vertical"
         initialValues={config}
@@ -114,27 +97,27 @@ const App: React.FC = () => {
           <Slider step={1} min={-180} max={180} />
         </Form.Item>
         <Form.Item label="Gap" style={{ marginBottom: 0 }}>
-          <Space style={{ display: 'flex' }} align="baseline">
+          <Flex gap="small">
             <Form.Item name={['gap', 0]}>
               <InputNumber placeholder="gapX" style={{ width: '100%' }} />
             </Form.Item>
             <Form.Item name={['gap', 1]}>
               <InputNumber placeholder="gapY" style={{ width: '100%' }} />
             </Form.Item>
-          </Space>
+          </Flex>
         </Form.Item>
         <Form.Item label="Offset" style={{ marginBottom: 0 }}>
-          <Space style={{ display: 'flex' }} align="baseline">
+          <Flex gap="small">
             <Form.Item name={['offset', 0]}>
               <InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
             </Form.Item>
             <Form.Item name={['offset', 1]}>
               <InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
             </Form.Item>
-          </Space>
+          </Flex>
         </Form.Item>
       </Form>
-    </div>
+    </Flex>
   );
 };
 

components/watermark/demo/image.md

@@ -4,4 +4,4 @@
 
 ## en-US
 
-Specify the image address via 'image'. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
+Specify the image address via `image`. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.

components/watermark/demo/multi-line.md

@@ -4,4 +4,4 @@
 
 ## en-US
 
-Use 'content' to set a string array to specify multi-line text watermark content.
+Use `content` to set a string array to specify multi-line text watermark content.

components/watermark/demo/portal.tsx

@@ -1,19 +1,15 @@
 import React from 'react';
-import { Button, Drawer, Modal, Space, Watermark } from 'antd';
+import { Button, Drawer, Flex, Modal, Watermark } from 'antd';
 
-const placeholder = (
-  <div
-    style={{
-      height: 300,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      background: 'rgba(150, 150, 150, 0.2)',
-    }}
-  >
-    A mock height
-  </div>
-);
+const style: React.CSSProperties = {
+  height: 300,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: 'rgba(150, 150, 150, 0.2)',
+};
+
+const placeholder = <div style={style}>A mock height</div>;
 
 const App: React.FC = () => {
   const [showModal, setShowModal] = React.useState(false);
@@ -26,12 +22,17 @@ const App: React.FC = () => {
 
   return (
     <>
-      <Space>
-        <Button onClick={() => setShowModal(true)}>Show in Modal</Button>
-        <Button onClick={() => setShowDrawer(true)}>Show in Drawer</Button>
-        <Button onClick={() => setShowDrawer2(true)}>Not Show in Drawer</Button>
-      </Space>
-
+      <Flex gap="middle">
+        <Button type="primary" onClick={() => setShowModal(true)}>
+          Show in Modal
+        </Button>
+        <Button type="primary" onClick={() => setShowDrawer(true)}>
+          Show in Drawer
+        </Button>
+        <Button type="primary" onClick={() => setShowDrawer2(true)}>
+          Not Show in Drawer
+        </Button>
+      </Flex>
       <Watermark content="Ant Design">
         <Modal
           destroyOnClose

components/watermark/index.en-US.md

@@ -8,7 +8,7 @@ demo:
   cols: 1
 ---
 
-Add specific text or patterns to the page.
+Add specific text or patterns to the page. Available since `5.0.0`.
 
 ## When To Use
 
@@ -28,6 +28,8 @@ Add specific text or patterns to the page.
 
 Common props ref：[Common props](/docs/react/common-props)
 
+> This component is available since `[email protected]`.
+
 ### Watermark
 
 | Property | Description | Type | Default | Version |

components/watermark/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
 tag: New
 ---
 
-给页面的某个区域加上水印。
+给页面的某个区域加上水印。自 `5.0.0` 版本开始提供该组件。
 
 ## 何时使用
 
@@ -30,6 +30,8 @@ tag: New
 
 通用属性参考：[通用属性](/docs/react/common-props)
 
+> 自 `[email protected]` 版本开始提供该组件。
+
 ### Watermark
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |