@douyinfe/semi-ui 2.4.1 → 2.5.1

package/tooltip/_story/tooltip.stories.js

@@ -1,7 +1,20 @@
 import React, { useState, useMemo } from 'react';
 import Tooltip from '../index';
 import './story.scss';
-import { Tag, Icon, IconButton, Switch, Checkbox, Radio, Button, Select, InputNumber } from '@douyinfe/semi-ui';
+import {
+  Tag,
+  Icon,
+  IconButton,
+  Switch,
+  Checkbox,
+  Radio,
+  Button,
+  Select,
+  InputNumber,
+  Space,
+  Popover,
+  Input,
+} from '@douyinfe/semi-ui';
 
 import InTableDemo from './InTable';
 import EdgeDemo from './Edge';
@@ -13,185 +26,185 @@ import ContainerPosition from './ContainerPosition';
 import { IconList, IconSidebar, IconEdit } from '@douyinfe/semi-icons';
 
 export default {
-    title: 'Tooltip',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
+  title: 'Tooltip',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 function test(visible) {
-    console.log('visible Change:' + visible);
+  console.log('visible Change:' + visible);
 }
 
 const ScrollDemo = function ScrollDemo(props = {}) {
-    const tops = [
-        ['topLeft', 'TL'],
-        ['top', 'Top'],
-        ['topRight', 'TR'],
-    ];
-    const lefts = [
-        ['leftTop', 'LT'],
-        ['left', 'Left'],
-        ['leftBottom', 'LB'],
-    ];
-    const rights = [
-        ['rightTop', 'RT'],
-        ['right', 'Right'],
-        ['rightBottom', 'RB'],
-    ];
-    const bottoms = [
-        ['bottomLeft', 'BL'],
-        ['bottom', 'Bottom'],
-        ['bottomRight', 'BR'],
-    ];
-    const { tagStyle, ...restProps } = props;
-    return (
-        <div
-            style={{
-                paddingLeft: 40,
-            }}
-        >
-            <div
-                style={{
-                    marginLeft: 40,
-                    whiteSpace: 'nowrap',
-                }}
-            >
-                {tops.map((pos, index) => (
-                    <Tooltip
-                        content={
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div
-                style={{
-                    width: 40,
-                    float: 'left',
-                }}
-            >
-                {lefts.map((pos, index) => (
-                    <Tooltip
-                        content={
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div
-                style={{
-                    width: 40,
-                    marginLeft: 180,
-                }}
-            >
-                {rights.map((pos, index) => (
-                    <Tooltip
-                        content={
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-            <div
-                style={{
-                    marginLeft: 40,
-                    clear: 'both',
-                    whiteSpace: 'nowrap',
-                }}
-            >
-                {bottoms.map((pos, index) => (
-                    <Tooltip
-                        content={
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Tooltip>
-                ))}
-            </div>
-        </div>
-    );
+  const tops = [
+    ['topLeft', 'TL'],
+    ['top', 'Top'],
+    ['topRight', 'TR'],
+  ];
+  const lefts = [
+    ['leftTop', 'LT'],
+    ['left', 'Left'],
+    ['leftBottom', 'LB'],
+  ];
+  const rights = [
+    ['rightTop', 'RT'],
+    ['right', 'Right'],
+    ['rightBottom', 'RB'],
+  ];
+  const bottoms = [
+    ['bottomLeft', 'BL'],
+    ['bottom', 'Bottom'],
+    ['bottomRight', 'BR'],
+  ];
+  const { tagStyle, ...restProps } = props;
+  return (
+    <div
+      style={{
+        paddingLeft: 40,
+      }}
+    >
+      <div
+        style={{
+          marginLeft: 40,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {tops.map((pos, index) => (
+          <Tooltip
+            content={
+              <article>
+                <p>hi bytedance</p>
+                <p>hi bytedance</p>
+              </article>
+            }
+            position={Array.isArray(pos) ? pos[0] : pos}
+            key={index}
+            trigger={'click'}
+            {...restProps}
+          >
+            <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+          </Tooltip>
+        ))}
+      </div>
+      <div
+        style={{
+          width: 40,
+          float: 'left',
+        }}
+      >
+        {lefts.map((pos, index) => (
+          <Tooltip
+            content={
+              <article>
+                <p>hi bytedance</p>
+                <p>hi bytedance</p>
+              </article>
+            }
+            position={Array.isArray(pos) ? pos[0] : pos}
+            key={index}
+            trigger={'click'}
+            {...restProps}
+          >
+            <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+          </Tooltip>
+        ))}
+      </div>
+      <div
+        style={{
+          width: 40,
+          marginLeft: 180,
+        }}
+      >
+        {rights.map((pos, index) => (
+          <Tooltip
+            content={
+              <article>
+                <p>hi bytedance</p>
+                <p>hi bytedance</p>
+              </article>
+            }
+            position={Array.isArray(pos) ? pos[0] : pos}
+            key={index}
+            trigger={'click'}
+            {...restProps}
+          >
+            <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+          </Tooltip>
+        ))}
+      </div>
+      <div
+        style={{
+          marginLeft: 40,
+          clear: 'both',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {bottoms.map((pos, index) => (
+          <Tooltip
+            content={
+              <article>
+                <p>hi bytedance</p>
+                <p>hi bytedance</p>
+              </article>
+            }
+            position={Array.isArray(pos) ? pos[0] : pos}
+            key={index}
+            trigger={'click'}
+            {...restProps}
+          >
+            <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
+          </Tooltip>
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export const TooltipOnVisibleChange = () => {
-    const [visible, setVisible] = useState(true);
-    return (
-        <div className="demo">
-            <div>
-                <label>受控</label>
-                <Tooltip
-                    content={
-                        <article>
-                            <p>hi bytedance</p>
-                            <p>hi bytedance</p>
-                        </article>
-                    }
-                    position="top"
-                    onVisibleChange={setVisible}
-                    trigger="click"
-                    visible={visible}
-                >
-                    <Tag>demo</Tag>
-                </Tooltip>
-            </div>
-
-            <br />
-            <br />
-            <div>
-                <label>非受控</label>
-                <Tooltip
-                    content={
-                        <article>
-                            <p>hi bytedance</p>
-                            <p>hi bytedance</p>
-                        </article>
-                    }
-                    position="leftTop"
-                    onVisibleChange={test}
-                    trigger="click"
-                >
-                    <Tag>demo</Tag>
-                </Tooltip>
-            </div>
-            <br />
-            <br />
-
-            {/* <Tooltip
+  const [visible, setVisible] = useState(true);
+  return (
+    <div className="demo">
+      <div>
+        <label>受控</label>
+        <Tooltip
+          content={
+            <article>
+              <p>hi bytedance</p>
+              <p>hi bytedance</p>
+            </article>
+          }
+          position="top"
+          onVisibleChange={setVisible}
+          trigger="click"
+          visible={visible}
+        >
+          <Tag>demo</Tag>
+        </Tooltip>
+      </div>
+
+      <br />
+      <br />
+      <div>
+        <label>非受控</label>
+        <Tooltip
+          content={
+            <article>
+              <p>hi bytedance</p>
+              <p>hi bytedance</p>
+            </article>
+          }
+          position="leftTop"
+          onVisibleChange={test}
+          trigger="click"
+        >
+          <Tag>demo</Tag>
+        </Tooltip>
+      </div>
+      <br />
+      <br />
+
+      {/* <Tooltip
        content={
            <article>
                <p>hi bytedance</p>
@@ -235,504 +248,650 @@ export const TooltipOnVisibleChange = () => {
     >
        <Tag>click</Tag>
     </Tooltip> */}
-        </div>
-    );
+    </div>
+  );
 };
 
 TooltipOnVisibleChange.story = {
-    name: 'tooltip onVisibleChange',
+  name: 'tooltip onVisibleChange',
 };
 
 export const GetPopupContainerDemo = () => (
-    <div className="demo">
-        <div className="content-layer" />
-        <Tooltip
-            content={
-                <article>
-                    <p>hi bytedance</p> <p>hi bytedance</p>
-                </article>
-            }
-            position="bottom"
-            visible
-            trigger="custom"
-            getPopupContainer={() => document.querySelector('.content-layer')}
-        >
-            <Tag>指定弹出层的容器</Tag>
-            {/* <div className='content'></div> */}
-        </Tooltip>
-        <div>
-            <label>给定容器为window，看是否报错</label>
-            <Tooltip content={'单选'} position="top" getPopupContainer={() => window}>
-                <Radio style={{ display: 'inline-flex' }}>单选</Radio>
-            </Tooltip>
-        </div>
+  <div className="demo">
+    <div className="content-layer" />
+    <Tooltip
+      content={
+        <article>
+          <p>hi bytedance</p> <p>hi bytedance</p>
+        </article>
+      }
+      position="bottom"
+      visible
+      trigger="custom"
+      getPopupContainer={() => document.querySelector('.content-layer')}
+    >
+      <Tag>指定弹出层的容器</Tag>
+      {/* <div className='content'></div> */}
+    </Tooltip>
+    <div>
+      <label>给定容器为window，看是否报错</label>
+      <Tooltip content={'单选'} position="top" getPopupContainer={() => window}>
+        <Radio style={{ display: 'inline-flex' }}>单选</Radio>
+      </Tooltip>
     </div>
+  </div>
 );
 
 GetPopupContainerDemo.story = {
-    name: 'tooltip指定弹出层的容器',
+  name: 'tooltip指定弹出层的容器',
 };
 
 export const TooltipAll = () => (
-    <div className="demo">
-        <ScrollDemo />
-        <div
-            style={{
-                padding: 120,
-            }}
-        >
-            <ScrollDemo
-                showArrow
-                tagStyle={{
-                    height: 80,
-                }}
-            />
-        </div>
+  <div className="demo">
+    <ScrollDemo />
+    <div
+      style={{
+        padding: 120,
+      }}
+    >
+      <ScrollDemo
+        showArrow
+        tagStyle={{
+          height: 80,
+        }}
+      />
     </div>
+  </div>
 );
 
 TooltipAll.story = {
-    name: 'tooltip All',
+  name: 'tooltip All',
 };
 
 export const NoContent = () => (
-    <div className="demo">
-        <div
-            style={{
-                padding: 120,
-            }}
-        >
-            <ScrollDemo showArrow content={''} />
-        </div>
-        <div
-            style={{
-                padding: 120,
-            }}
-        >
-            <ScrollDemo
-                showArrow
-                tagStyle={{
-                    minHeight: 80,
-                    minWidth: 120,
-                }}
-                content={''}
-            />
-        </div>
+  <div className="demo">
+    <div
+      style={{
+        padding: 120,
+      }}
+    >
+      <ScrollDemo showArrow content={''} />
     </div>
+    <div
+      style={{
+        padding: 120,
+      }}
+    >
+      <ScrollDemo
+        showArrow
+        tagStyle={{
+          minHeight: 80,
+          minWidth: 120,
+        }}
+        content={''}
+      />
+    </div>
+  </div>
 );
 
 NoContent.story = {
-    name: 'no content',
+  name: 'no content',
 };
 
 export const AdjustPosition = () => (
-    <>
-        <div className="adjust">
-            <div className="wrapper">
-                第一个滚动区域
-                <Tooltip
-                    content={
-                        <article>
-                            <p>hi bytedance</p>
-                            <p>hi bytedance</p>
-                        </article>
-                    }
-                    position="rightBottom"
-                    trigger="click"
-                >
-                    {/* <Tag className='topLeft'>topleft</Tag> */}
-                    <div>test</div>
-                </Tooltip>
-                <Tooltip
-                    content={
-                        <article>
-                            <p>hi bytedance</p>
-                            <p>hi bytedance</p>
-                        </article>
-                    }
-                    position="topRight"
-                    trigger="click"
-                >
-                    <Tag className="topRight">topRight</Tag>
-                </Tooltip>
-                <Tooltip
-                    content={
-                        <article>
-                            <p>hi bytedance</p>
-                            <p>hi bytedance</p>
-                        </article>
-                    }
-                    position="bottomLeft"
-                    trigger="click"
-                >
-                    <Tag className="bottomLeft">bottomLeft</Tag>
-                </Tooltip>
-                <Tooltip
-                    content={
-                        <article>
-                            <p>hi bytedance</p>
-                            <p>hi bytedance</p>
-                        </article>
-                    }
-                    position="bottomRight"
-                    trigger="click"
-                >
-                    <Tag className="bottomRight">bottomRight</Tag>
-                </Tooltip>
-            </div>
-        </div>
-        <div className="adjust2">
-            <div className="wrapper2">第二个滚动区域</div>
-        </div>
-    </>
+  <>
+    <div className="adjust">
+      <div className="wrapper">
+        第一个滚动区域
+        <Tooltip
+          content={
+            <article>
+              <p>hi bytedance</p>
+              <p>hi bytedance</p>
+            </article>
+          }
+          position="rightBottom"
+          trigger="click"
+        >
+          {/* <Tag className='topLeft'>topleft</Tag> */}
+          <div>test</div>
+        </Tooltip>
+        <Tooltip
+          content={
+            <article>
+              <p>hi bytedance</p>
+              <p>hi bytedance</p>
+            </article>
+          }
+          position="topRight"
+          trigger="click"
+        >
+          <Tag className="topRight">topRight</Tag>
+        </Tooltip>
+        <Tooltip
+          content={
+            <article>
+              <p>hi bytedance</p>
+              <p>hi bytedance</p>
+            </article>
+          }
+          position="bottomLeft"
+          trigger="click"
+        >
+          <Tag className="bottomLeft">bottomLeft</Tag>
+        </Tooltip>
+        <Tooltip
+          content={
+            <article>
+              <p>hi bytedance</p>
+              <p>hi bytedance</p>
+            </article>
+          }
+          position="bottomRight"
+          trigger="click"
+        >
+          <Tag className="bottomRight">bottomRight</Tag>
+        </Tooltip>
+      </div>
+    </div>
+    <div className="adjust2">
+      <div className="wrapper2">第二个滚动区域</div>
+    </div>
+  </>
 );
 
 AdjustPosition.story = {
-    name: '自适应',
+  name: '自适应',
 };
 
 export const CompositeComponent = () => (
-    <div
+  <div
+    style={{
+      padding: 50,
+    }}
+  >
+    <Tooltip
+      content={
+        <article>
+          <p>hi bytedance</p> <p>hi bytedance</p>
+        </article>
+      }
+      position="top"
+    >
+      <IconList />
+    </Tooltip>
+    <Tooltip content={'收起'} position="top">
+      <IconButton icon={<IconSidebar />} />
+    </Tooltip>
+    <Tooltip content={'开关'} position="top">
+      <Switch />
+    </Tooltip>
+    <Tooltip content={'选择框'} position="top">
+      <Checkbox
         style={{
-            padding: 50,
+          display: 'inline-flex',
         }}
-    >
-        <Tooltip
-            content={
-                <article>
-                    <p>hi bytedance</p> <p>hi bytedance</p>
-                </article>
-            }
-            position="top"
-        >
-            <IconList />
-        </Tooltip>
-        <Tooltip content={'收起'} position="top">
-            <IconButton icon={<IconSidebar />} />
-        </Tooltip>
-        <Tooltip content={'开关'} position="top">
-            <Switch />
-        </Tooltip>
-        <Tooltip content={'选择框'} position="top">
-            <Checkbox
-                style={{
-                    display: 'inline-flex',
-                }}
-            >
-                选择框
-            </Checkbox>
-        </Tooltip>
-        <Tooltip content={'单选'} position="top">
-            <Radio
-                style={{
-                    display: 'inline-flex',
-                }}
-            >
-                单选
-            </Radio>
-        </Tooltip>
-    </div>
+      >
+        选择框
+      </Checkbox>
+    </Tooltip>
+    <Tooltip content={'单选'} position="top">
+      <Radio
+        style={{
+          display: 'inline-flex',
+        }}
+      >
+        单选
+      </Radio>
+    </Tooltip>
+  </div>
 );
 
 CompositeComponent.story = {
-    name: '复合组件',
+  name: '复合组件',
 };
 
 export const WrapDisabledElems = () => (
-    <div
+  <div
+    style={{
+      padding: 50,
+    }}
+  >
+    <Tooltip content="disabled">
+      <IconButton disabled icon={<IconEdit />} />
+    </Tooltip>
+    <Tooltip content="disabled">
+      <IconButton disabled icon={<IconEdit />} block />
+    </Tooltip>
+    <Tooltip content="disabled">
+      <Button disabled block>
+        编辑
+      </Button>
+    </Tooltip>
+    <Tooltip content="disabled">
+      <Button
+        disabled
         style={{
-            padding: 50,
+          display: 'block',
         }}
-    >
-        <Tooltip content="disabled">
-            <IconButton disabled icon={<IconEdit />} />
-        </Tooltip>
-        <Tooltip content="disabled">
-            <IconButton disabled icon={<IconEdit />} block />
-        </Tooltip>
-        <Tooltip content="disabled">
-            <Button disabled block>
-                编辑
-            </Button>
-        </Tooltip>
-        <Tooltip content="disabled">
-            <Button
-                disabled
-                style={{
-                    display: 'block',
-                }}
-            >
-                编辑
-            </Button>
-        </Tooltip>
-    </div>
+      >
+        编辑
+      </Button>
+    </Tooltip>
+  </div>
 );
 
 WrapDisabledElems.story = {
-    name: 'wrap disabled elems',
+  name: 'wrap disabled elems',
 };
 
 export const InTable = () => (
-    <div
-        style={{
-            marginTop: 50,
-        }}
-    >
-        <InTableDemo />
-    </div>
+  <div
+    style={{
+      marginTop: 50,
+    }}
+  >
+    <InTableDemo />
+  </div>
 );
 
 InTable.story = {
-    name: 'in table',
+  name: 'in table',
 };
 
 export const _EdgeDemo = () => <EdgeDemo />;
 
 _EdgeDemo.story = {
-    name: 'edge demo',
+  name: 'edge demo',
 };
 
 export const ScrollTooltipDemo = () => <ScrollTooltip />;
 ScrollTooltipDemo.story = {
-    name: 'scroll demo and set popup container',
+  name: 'scroll demo and set popup container',
 };
 export const DangerousHtmlDemo = () => <DangerousHtml />;
 DangerousHtmlDemo.story = {
-    name: 'in dangerous html',
+  name: 'in dangerous html',
 };
 export const ArrowPointAtCenterDemo = () => <ArrowPointAtCenter />;
 ArrowPointAtCenterDemo.story = {
-    name: 'arrow point at center',
+  name: 'arrow point at center',
 };
 export const CustomContainerDemo = () => <CustomContainer />;
 CustomContainerDemo.story = {
-    name: 'custom container',
+  name: 'custom container',
 };
 export const ContainerPositionDemo = () => <ContainerPosition />;
 ContainerPositionDemo.story = {
-    name: 'container observer',
+  name: 'container observer',
 };
 
 export const QuickMoveMouse = () => {
-    /**
-     * mouseEnterDelay, mouseLeaveDelay 默认都为 50
-     * mouseEnterDelay, mouseLeaveDelay 都为 0，快速滑动可能出现两个 tooltip 出现
-     */
-    const Demo = () => {
-        const props = {
-            mouseEnterDelay: 50,
-            mouseLeaveDelay: 0,
-        };
-        return (
-            <div className="demo">
-                <div>
-                    <Tooltip content={'1'} {...props}>
-                        aaaaaaaaaaa
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'2'} {...props}>
-                        bbbbbbbbbbb
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'3'} {...props}>
-                        ccccccccccc
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'4'} {...props}>
-                        aaaaaaaaaaa
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'5'} {...props}>
-                        bbbbbbbbbbb
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'6'} {...props}>
-                        ccccccccccc
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'7'} {...props}>
-                        aaaaaaaaaaa
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'8'} {...props}>
-                        bbbbbbbbbbb
-                    </Tooltip>
-                </div>
-                <div>
-                    <Tooltip content={'9'} {...props}>
-                        ccccccccccc
-                    </Tooltip>
-                </div>
-            </div>
-        );
+  /**
+   * mouseEnterDelay, mouseLeaveDelay 默认都为 50
+   * mouseEnterDelay, mouseLeaveDelay 都为 0，快速滑动可能出现两个 tooltip 出现
+   */
+  const Demo = () => {
+    const props = {
+      mouseEnterDelay: 50,
+      mouseLeaveDelay: 0,
     };
+    return (
+      <div className="demo">
+        <div>
+          <Tooltip content={'1'} {...props}>
+            aaaaaaaaaaa
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'2'} {...props}>
+            bbbbbbbbbbb
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'3'} {...props}>
+            ccccccccccc
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'4'} {...props}>
+            aaaaaaaaaaa
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'5'} {...props}>
+            bbbbbbbbbbb
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'6'} {...props}>
+            ccccccccccc
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'7'} {...props}>
+            aaaaaaaaaaa
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'8'} {...props}>
+            bbbbbbbbbbb
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip content={'9'} {...props}>
+            ccccccccccc
+          </Tooltip>
+        </div>
+      </div>
+    );
+  };
 
-    return <Demo />;
+  return <Demo />;
 };
 
 QuickMoveMouse.story = {
-    name: '快速移动鼠标可见性',
+  name: '快速移动鼠标可见性',
 };
 
 export const MotionFalseFix1402 = () => {
-    function Demo() {
-        const Test = React.forwardRef((props, ref) => (
-            <span {...props} ref={ref}>
-                Test
-            </span>
-        ));
-        return (
-            <div>
-                <Tooltip content={'hi bytedance'} motion={false}>
-                    <Test />
-                </Tooltip>
-                <br />
-                <br />
-                <Tooltip content={'hi bytedance'}>
-                    <Test />
-                </Tooltip>
-            </div>
-        );
-    }
-
-    return <Demo />;
+  function Demo() {
+    const Test = React.forwardRef((props, ref) => (
+      <span {...props} ref={ref}>
+        Test
+      </span>
+    ));
+    return (
+      <div>
+        <Tooltip content={'hi bytedance'} motion={false}>
+          <Test />
+        </Tooltip>
+        <br />
+        <br />
+        <Tooltip content={'hi bytedance'}>
+          <Test />
+        </Tooltip>
+      </div>
+    );
+  }
+
+  return <Demo />;
 };
 
 MotionFalseFix1402.story = {
-    name: 'motion=false fix #1402',
+  name: 'motion=false fix #1402',
 };
 
 export const DisabledWrapperCls = () => (
-    <>
-        <Tooltip wrapperClassName="test" content={'hi bytedance'}>
-            <Button>按钮</Button>
-        </Tooltip>
-        <br />
-        <br />
-        <Tooltip wrapperClassName="test" content={'hi bytedance'}>
-            <Button disabled>禁用的单个按钮</Button>
-        </Tooltip>
-        <br />
-        <br />
-        <Tooltip wrapperClassName="test" content={'hi bytedance'}>
-            <Button>正常的多个按钮</Button>
-            <Button>正常的多个按钮</Button>
-        </Tooltip>
-        <br />
-        <br />
-        <Tooltip wrapperClassName="test" content={'hi bytedance'}>
-            <Select disabled placeholder="请选择业务线" style={{ width: 120 }}>
-                <Select.Option value="abc">抖音</Select.Option>
-                <Select.Option value="hotsoon">火山</Select.Option>
-                <Select.Option value="jianying" disabled>
-                    剪映
-                </Select.Option>
-                <Select.Option value="xigua">西瓜视频</Select.Option>
-            </Select>
-        </Tooltip>
-        <br />
-        <br />
-    </>
+  <>
+    <Tooltip wrapperClassName="test" content={'hi bytedance'}>
+      <Button>按钮</Button>
+    </Tooltip>
+    <br />
+    <br />
+    <Tooltip wrapperClassName="test" content={'hi bytedance'}>
+      <Button disabled>禁用的单个按钮</Button>
+    </Tooltip>
+    <br />
+    <br />
+    <Tooltip wrapperClassName="test" content={'hi bytedance'}>
+      <Button>正常的多个按钮</Button>
+      <Button>正常的多个按钮</Button>
+    </Tooltip>
+    <br />
+    <br />
+    <Tooltip wrapperClassName="test" content={'hi bytedance'}>
+      <Select disabled placeholder="请选择业务线" style={{ width: 120 }}>
+        <Select.Option value="abc">抖音</Select.Option>
+        <Select.Option value="hotsoon">火山</Select.Option>
+        <Select.Option value="jianying" disabled>
+          剪映
+        </Select.Option>
+        <Select.Option value="xigua">西瓜视频</Select.Option>
+      </Select>
+    </Tooltip>
+    <br />
+    <br />
+  </>
 );
 
 DisabledWrapperCls.story = {
-    name: 'disabledWrapperCls',
+  name: 'disabledWrapperCls',
 };
 
 export const ShowArrow = () => {
-    function Demo() {
-        const Test = React.forwardRef((props, ref) => (
-            <Tag {...props} ref={ref}>
-                Test
-            </Tag>
-        ));
-        return (
-            <div>
-                <h4>should show content and arrow when click</h4>
-                <Tooltip showArrow trigger="click" content={'hi bytedance'}>
-                    <Test />
-                </Tooltip>
-            </div>
-        );
-    }
-
-    return <Demo />;
+  function Demo() {
+    const Test = React.forwardRef((props, ref) => (
+      <Tag {...props} ref={ref}>
+        Test
+      </Tag>
+    ));
+    return (
+      <div>
+        <h4>should show content and arrow when click</h4>
+        <Tooltip showArrow trigger="click" content={'hi bytedance'}>
+          <Test />
+        </Tooltip>
+      </div>
+    );
+  }
+
+  return <Demo />;
 };
 
 ShowArrow.story = {
-    name: 'showArrow',
+  name: 'showArrow',
 };
 
 export const OnClickOutSideDemo = () => {
-    let [v, setV] = useState(false);
-    let clickOutSide = () => {
-        console.log('clickOutSide');
-        setV(false);
-    };
-    return (
-        <>
-            <Tooltip onClickOutSide={() => clickOutSide()} content={'hi bytedance'} visible={v} trigger="custom">
-                <Button onClick={() => setV(true)}>按钮</Button>
-            </Tooltip>
-            <br />
-            <br />
-            <Tooltip onClickOutSide={() => console.log('clickOutSide')} content={'hi bytedance'} trigger="click">
-                <Button>单个按钮</Button>
-            </Tooltip>
-        </>
-    );
+  let [v, setV] = useState(false);
+  let clickOutSide = () => {
+    console.log('clickOutSide');
+    setV(false);
+  };
+  return (
+    <>
+      <Tooltip onClickOutSide={() => clickOutSide()} content={'hi bytedance'} visible={v} trigger="custom">
+        <Button onClick={() => setV(true)}>按钮</Button>
+      </Tooltip>
+      <br />
+      <br />
+      <Tooltip onClickOutSide={() => console.log('clickOutSide')} content={'hi bytedance'} trigger="click">
+        <Button>单个按钮</Button>
+      </Tooltip>
+    </>
+  );
 };
 OnClickOutSideDemo.story = {
   name: 'OnClickOutSide',
 };
 
 export const AutoAdjustWithSpacing = () => {
-    const [height, setHeight] = useState(84);
-    const [key, setKey] = useState(1);
-    const initSpacing = 8;
-    const [spacing, setSpacing] = useState(initSpacing);
-
-    const change = (height, hasSpace) => {
-        setHeight(height);
-        hasSpace ? setSpacing(initSpacing) : setSpacing(0);
-        setKey(Math.random());
-    };
-
-    return (
-        <div className="demo1">
-            <div>
-                <Tooltip
-                    motion={false}
-                    rePosKey={key}
-                    // spacing={spacing}
-                    content={
-                        <article style={{ boxSizing: 'border-box', height: height }}>
-                            <p>hi bytedance, + padding 20</p>
-                            <p>hi bytedance</p>
-                        </article>
-                    }
-                    position="top"
-                    trigger="custom"
-                    visible={true}
-                >
-                    <Tag>demo</Tag>
-                </Tooltip>
-            </div>
-            <div style={{ marginTop: 200 }}>
-                <Switch onChange={hasSpace => change(height, hasSpace)} checked={spacing === initSpacing ? true : false}></Switch>
-                <InputNumber onChange={height => change(Number(height))} value={height} style={{ width: 200 }} />
-            </div>
-        </div>
-    )
+  const [height, setHeight] = useState(84);
+  const [key, setKey] = useState(1);
+  const initSpacing = 8;
+  const [spacing, setSpacing] = useState(initSpacing);
+
+  const change = (height, hasSpace) => {
+    setHeight(height);
+    hasSpace ? setSpacing(initSpacing) : setSpacing(0);
+    setKey(Math.random());
+  };
+
+  return (
+    <div className="demo1">
+      <div>
+        <Tooltip
+          motion={false}
+          rePosKey={key}
+          // spacing={spacing}
+          content={
+            <article style={{ boxSizing: 'border-box', height: height }}>
+              <p>hi bytedance, + padding 20</p>
+              <p>hi bytedance</p>
+            </article>
+          }
+          position="top"
+          trigger="custom"
+          visible={true}
+        >
+          <Tag>demo</Tag>
+        </Tooltip>
+      </div>
+      <div style={{ marginTop: 200 }}>
+        <Switch
+          onChange={hasSpace => change(height, hasSpace)}
+          checked={spacing === initSpacing ? true : false}
+        ></Switch>
+        <InputNumber onChange={height => change(Number(height))} value={height} style={{ width: 200 }} />
+      </div>
+    </div>
+  );
 };
 
 AutoAdjustWithSpacing.story = {
   name: 'AutoAdjustWithSpacing',
 };
+
+/**
+ * Chromatic UI test
+ */
+export const leftTopOverDemo = () => {
+  const [visible, setVisible] = useState(true);
+  const content = <div style={{ height: 200, width: 200 }}>Semi Design</div>;
+
+  const commonProps = {
+    content,
+    trigger: 'click',
+    showArrow: false,
+    visible,
+    trigger: 'custom',
+    motion: false,
+  };
+  const buttonStyle = {
+    width: 200,
+  };
+
+  return (
+    <div data-cy="wrapper">
+      <Button onClick={() => setVisible(!visible)}>toggle visible</Button>
+      <div style={{ paddingTop: 200 }}>
+        <Space spacing={80}>
+          <Tooltip {...commonProps} position="leftTopOver">
+            <Button data-cy="leftTopOver" style={buttonStyle}>
+              leftTopOver
+            </Button>
+          </Tooltip>
+          <Tooltip {...commonProps} position="leftBottomOver">
+            <Button data-cy="leftBottomOver" style={buttonStyle}>
+              leftBottomOver
+            </Button>
+          </Tooltip>
+          <Tooltip {...commonProps} position="rightTopOver">
+            <Button data-cy="rightTopOver" style={buttonStyle}>
+              rightTopOver
+            </Button>
+          </Tooltip>
+          <Tooltip {...commonProps} position="rightBottomOver">
+            <Button data-cy="rightBottomOver" style={buttonStyle}>
+              rightBottomOver
+            </Button>
+          </Tooltip>
+        </Space>
+      </div>
+    </div>
+  );
+};
+leftTopOverDemo.storyName = `leftTopOver visible`;
+leftTopOverDemo.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    delay: 3000,
+    viewports: [1200],
+  },
+};
+
+/**
+ * Cypress test
+ */
+export const leftTopOverAutoAdjustOverflow = () => {
+  const content = <div style={{ height: 200, width: 200 }}>Semi Design</div>;
+
+  const commonProps = {
+    content,
+    trigger: 'click',
+    showArrow: false,
+  };
+
+  return (
+    <div
+      data-cy="wrapper"
+      style={{ width: '200vw', height: '200vw', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <div>
+        <Tooltip {...commonProps} position="leftTopOver">
+          <Button data-cy="leftTopOver" style={{ width: 200 }}>
+            leftTopOver
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+leftTopOverAutoAdjustOverflow.storyName = `leftTopOver autoAdjustOverflow`;
+
+export const autoFocusContentDemo = () => {
+  const [controlMotionVisible, setControlMotionVisible] = React.useState(false);
+  const [controlNoMotionVisible, setControlNoMotionVisible] = React.useState(false);
+
+  const onMotionVisibleChange = React.useCallback(() => {
+    setControlMotionVisible(!controlMotionVisible);
+  }, [setControlMotionVisible, controlMotionVisible]);
+
+  const onNoMotionVisibleChange = React.useCallback(() => {
+    setControlNoMotionVisible(!controlNoMotionVisible);
+  }, [setControlNoMotionVisible, controlNoMotionVisible]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <div style={{ display: 'flex', gap: 18, flex: 1, alignItems: 'center' }}>
+        <span>Hover触发</span>
+        <Popover position="bottomLeft" content={<Input autofocus data-cy="hoverInput"/>}>
+          <Button data-cy="hover">motion</Button>
+        </Popover>
+
+        <Popover motion={false} position="bottomLeft" content={<Input autofocus data-cy="hoverNoMotionInput"/>}>
+          <Button data-cy="hoverNoMotion">no motion</Button>
+        </Popover>
+      </div>
+      <div style={{ display: 'flex', gap: 18, flex: 1, alignItems: 'center' }}>
+        <span>Click触发</span>
+        <Popover position="bottomLeft" content={<Input autofocus data-cy="clickInput"/>} trigger="click">
+          <Button data-cy="click">motion</Button>
+        </Popover>
+
+        <Popover motion={false} position="bottomLeft" content={<Input autofocus data-cy="clickNoMotionInput"/>} trigger="click">
+          <Button data-cy="clickNoMotion">no motion</Button>
+        </Popover>
+      </div>
+      <div style={{ display: 'flex', gap: 18, flex: 1, alignItems: 'center' }}>
+        <span>受控</span>
+        <Button onClick={onMotionVisibleChange} data-cy="controlled">motion状态切换</Button>
+        <Popover visible={controlMotionVisible} trigger="custom" position="bottomLeft" content={<Input autofocus data-cy="controlledInput"/>}>
+          <Button disabled data-cy="controlledDisableBtn">motion</Button>
+        </Popover>
+
+        <Button onClick={onNoMotionVisibleChange } data-cy="controlledNoMotion">no motion状态切换</Button>
+        <Popover
+          visible={controlNoMotionVisible}
+          trigger="custom"
+          motion={false}
+          position="bottomLeft"
+          content={<Input autofocus data-cy="controlledNoMotionInput"/>}
+        >
+          <Button disabled data-cy="controlledNoMotionDisableBtn">no motion</Button>
+        </Popover>
+      </div>
+    </div>
+  );
+};