Fix issues

components/alert/demo/icon.md

@@ -15,6 +15,7 @@ ReactDOM.render(
   <div>
     <Alert style={{ marginBottom: 20 }} message="Success Text" type="success" showIcon closable />
     <Alert style={{ marginBottom: 20, width: '200px' }} message="Informational Notes" type="info" showIcon closable />
+    <Alert style={{ marginBottom: 20 }} message="提示文案" description="副文本内容副文本内容副文本内容副文本内容副文本内容副文本内容副文本内容副文本内容副文本内容副文本内容副文本内容副文本内容" type="info" showIcon closable />
     <Alert style={{ marginBottom: 20 }} message="Warning Text" type="warning" showIcon closable />
     <Alert style={{ marginBottom: 20 }} message="Error Text" type="error" showIcon closable />
     <Alert style={{ marginBottom: 20 }} message="Error Text" type="error" description="Error Description Error Description Error Description Error Description Error Description Error Description" showIcon closable />

components/button/demo/basic.md

@@ -18,7 +18,8 @@ ReactDOM.render(
     <Button type="primary">一级按钮</Button>
     <Button>二级按钮</Button>
     <Button type="link">文字按钮</Button>
-    <Button icon={<SearchOutlined />}  className="dt-btn-highlight"></Button>
+    <Button icon={<SearchOutlined />} className="dt-btn-highlight"></Button>
+    <Button size="small" icon={<SearchOutlined />}></Button>
   </div>,
   mountNode,
 );

components/button/demo/icon.md

@@ -11,7 +11,7 @@ title:
 图标按钮可添加 `dt-btn-highlight` 类名使用自定义 Icon 按钮和添加图标。
 ```jsx
 import { Button } from 'antd';
-import { ReloadOutlined } from '@ant-design/icons';
+import { PlusSquareOutlined, ReloadOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div className="demo-button-type">
@@ -21,20 +21,39 @@ ReactDOM.render(
         </span>
         一级按钮
     </Button>
-    <Button type="primary" icon={<ReloadOutlined />} className="dt-btn-custom-icon">一级按钮</Button>
     <Button ghost className="dt-btn-custom-icon">
         <span className="anticon">
             <i className="iconfont iconAPItiaoyong"></i>
         </span>
-        按钮
+        ghost 按钮
     </Button>
     <Button className="dt-btn-highlight">
         <span className="anticon">
             <i className="iconfont iconAPItiaoyong"></i>
         </span>
         图标按钮
     </Button>
-    <Button icon={<ReloadOutlined />} className="dt-btn-highlight"></Button>
+
+    <br/>
+
+    <Button size="large" type="primary" icon={<ReloadOutlined />}></Button>
+    <Button size="middle" type="primary" icon={<ReloadOutlined />}></Button>
+    <Button size="small" type="primary" icon={<ReloadOutlined />}></Button>
+    <Button size="large" icon={<ReloadOutlined />}></Button>
+    <Button size="middle" icon={<ReloadOutlined />}></Button>
+    <Button size="small" icon={<ReloadOutlined />}></Button>
+
+    <br/>
+
+    <Button className="dt-btn-custom-icon" style={{ color: "#1D78FF" }} size="large" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" size="middle" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" size="small" icon={<PlusSquareOutlined />}>一级按钮</Button>
+
+    <br/>
+
+    <Button className="dt-btn-custom-icon" type="link" size="large" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" type="link" size="middle" icon={<PlusSquareOutlined />}>一级按钮</Button>
+    <Button className="dt-btn-custom-icon" type="link" size="small" icon={<PlusSquareOutlined />}>一级按钮</Button>
   </div>,
   mountNode,
 );

components/icon/demo/basic.md

@@ -23,7 +23,9 @@ import {
   CheckOutlined,
   ClockCircleOutlined,
   CloseCircleFilled,
+  CloseCircleOutlined,
   CloseOutlined,
+  CopyOutlined,
   DeleteOutlined,
   DoubleLeftOutlined,
   DoubleRightOutlined,
@@ -73,7 +75,8 @@ import {
   ZoomOutOutlined,
 } from '@ant-design/icons';
 import * as Icon from '@ant-design/icons';
-import { message } from 'antd';
+import { Input, message } from 'antd';
+import React, { useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 const fileNameToClassName = {
@@ -87,7 +90,9 @@ const fileNameToClassName = {
   CheckOutlined: 'anticon-check',
   ClockCircleOutlined: 'anticon-clock-circle',
   CloseCircleFilled: 'anticon-close-circle',
+  CloseCircleOutlined: 'dt-anticon-close-circle-outline',
   CloseOutlined: 'anticon-close',
+  CopyOutlined: 'anticon-copy',
   DeleteOutlined: 'anticon-delete',
   DoubleLeftOutlined: 'anticon-double-left',
   DoubleRightOutlined: 'anticon-double-right',
@@ -137,43 +142,53 @@ const fileNameToClassName = {
   ZoomOutOutlined: 'anticon-zoom-out',
 }
 
-const getCopyContent = (name) => {
-  if (fileNameToClassName[name].includes('dt-')) {
-    return `<${name} className="${fileNameToClassName[name]}" />`
+const App: React.FC = () => {
+  const [searchStr, setSearchStr] = useState(undefined)
+
+  const getCopyContent = (name) => {
+    if (fileNameToClassName[name].includes('dt-')) {
+      return `<${name} className="${fileNameToClassName[name]}" />`
+    }
+    return name
+  }
+
+  const getCustomIconItem = (name) => {
+    const copyContent = getCopyContent(name)
+    return (
+      <div className="icon-item" key={name}>
+        <CopyToClipboard
+          text={copyContent}
+          onCopy={() => {
+            message.success(`${copyContent} 复制成功`)
+          }}
+        >
+          <div className="icon-name">
+            {
+              React.createElement(Icon[name], { className: fileNameToClassName[name] })
+            }
+            <p>{name}</p>
+          </div>
+        </CopyToClipboard>
+      </div>
+    )
   }
-  return name
-}
 
-const getCustomIconItem = (name) => {
-  const copyContent = getCopyContent(name)
   return (
-    <div className="icon-item" key={name}>
-      <CopyToClipboard
-        text={copyContent}
-        onCopy={() => {
-          message.success(`${copyContent} 复制成功`)
-        }}
-      >
-        <div className="icon-name">
-          {
-            React.createElement(Icon[name], { className: fileNameToClassName[name] })
-          }
-          <p>{name}</p>
-        </div>
-      </CopyToClipboard>
+    <div className="icon-demo-content">
+      <div className="title-input">
+        <h3>替换后的图标</h3>
+        <Input value={searchStr} onChange={(e) => setSearchStr(e?.target?.value)} placeholder="在此搜索图标，点击图标可复制代码" />
+      </div>
+      <div className="icon-box">
+        {
+          Object.keys(fileNameToClassName)
+            ?.filter(item => searchStr ? item?.toLowerCase()?.includes(searchStr?.toLowerCase()) : true)
+            ?.map(item => getCustomIconItem(item))
+        }
+      </div>
     </div>
-  )
-}
+  );
+};
 
-ReactDOM.render(
-  <div className="icon-demo-content">
-    <h3>替换后的图标</h3>
-    <div className="icon-box">
-      {
-        Object.keys(fileNameToClassName).map(item => getCustomIconItem(item))
-      }
-    </div>
-  </div>,
-  mountNode,
-);
+ReactDOM.render(<App />, mountNode);
 ```

components/icon/index.zh-CN.md

@@ -15,7 +15,7 @@ subtitle: 图标
 ## 何时使用
 
 - 使用设计提供的图标替换 antd 的图标，子产品不需要主动做什么，theme 作了统一处理；
-- 大部分实底图标需要添加 theme 的自定义 className 配合使用，具体请查看下方 `自定义类名`。
+- 部分图标需要添加 theme 的自定义 className 配合使用，具体请查看下方 `自定义类名`。
 
 ## 自定义类名
 
@@ -27,3 +27,4 @@ subtitle: 图标
 |MinusCircleFilled  |`dt-anticon-minus-circle-fill`    |
 |PlusCircleFilled  |`dt-anticon-plus-circle-fill`    |
 |QuestionCircleFilled  |`dt-anticon-question-circle-fill`    |
+|CloseCircleOutlined  |`dt-anticon-close-circle-outline`    |

components/input/demo/unit-input.md

@@ -15,6 +15,7 @@ unit input example.
 
 ```jsx
 import { Input } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
@@ -24,6 +25,12 @@ ReactDOM.render(
     <div style={{ marginTop: '16px'}}>
         <Input addonBefore="¥" placeholder="小数保留后两位"/>
     </div>
+    <div style={{ marginTop: '16px'}}>
+        <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
+    </div>
+    <div style={{ marginTop: '16px'}}>
+        <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
+    </div>
   </div>,
   mountNode
 );

components/tab/demo/basic.md

@@ -43,71 +43,37 @@ class App extends React.Component {
                     <span className="demo-switch-desc">设置dt-tabs-nav-padding-16</span>
                 </div>
                 <h3 style={{ margin: '12px 0' }}>Size Large</h3>
-                <Tabs
-                    defaultActiveKey="1"
-                    size="large"
-                    onChange={this.callback}
-                    className={classname}
-                >
-                    <TabPane
-                        tab={
-                            <span>
-                                <AppleOutlined />
-                                Tab 1
-                            </span>
-                        }
-                        key="1"
-                    >
-                        Tab 1
-                    </TabPane>
-                    <TabPane
-                        tab={
-                            <span>
-                                <AndroidOutlined />
-                                Tab 2
-                            </span>
-                        }
-                        key="2"
-                    >
-                        Tab 2
-                    </TabPane>
+                <Tabs defaultActiveKey="1" size="large" onChange={this.callback} className={classname}>
+                    <TabPane tab={<span><AppleOutlined />Tab 1</span>} key="1">Tab 1</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 2</span>} key="2">Tab 2</TabPane>
                 </Tabs>
-                <h3 style={{ margin: '12px 0' }}>Size Defalt</h3>
+
+                <h3 style={{ margin: '12px 0' }}>Size Default</h3>
                 <Tabs defaultActiveKey="1" onChange={this.callback} className={classname}>
-                    <TabPane
-                        tab={
-                            <span>
-                                <AppleOutlined />
-                                Tab 1
-                            </span>
-                        }
-                        key="1"
-                    >
-                        Tab 1
-                    </TabPane>
-                    <TabPane
-                        tab={
-                            <span>
-                                <AndroidOutlined />
-                                Tab 2
-                            </span>
-                        }
-                        key="2"
-                    >
-                        Tab 2
-                    </TabPane>
+                    <TabPane tab={<span><AppleOutlined />Tab 1</span>} key="1">Tab 1</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 2</span>} key="2">Tab 2</TabPane>
+                </Tabs>
+
+                <h3 style={{ margin: '12px 0' }}>Size Small</h3>
+                <Tabs defaultActiveKey="1" size="small" onChange={this.callback} className={classname}>
+                    <TabPane tab={<span><AppleOutlined />Tab 1</span>} key="1">Tab 1</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 2</span>} key="2">Tab 2</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 3</span>} key="3">Tab 3</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 4</span>} key="4">Tab 4</TabPane>
                 </Tabs>
+
+                <Tabs defaultActiveKey="1" size="small" tabPosition="left" onChange={this.callback} className={classname}>
+                    <TabPane tab={<span><AppleOutlined />Tab 1</span>} key="1">Tab 1</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 2</span>} key="2">Tab 2</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 3</span>} key="3">Tab 3</TabPane>
+                    <TabPane tab={<span><AndroidOutlined />Tab 4</span>} key="4">Tab 4</TabPane>
+                </Tabs>
+
                 <h3 style={{ margin: '12px 0' }}>无 Icon</h3>
                 <Tabs defaultActiveKey="1" onChange={this.callback} className={classname}>
-                    <TabPane tab="Tab 1" key="1">
-                        Content of Tab Pane 1
-                    </TabPane>
-                    <TabPane tab="Tab 2" key="2">
-                        Content of Tab Pane 2
-                    </TabPane>
-                    <TabPane tab="Tab 3" key="3">
-                        Content of Tab Pane 3
-                    </TabPane>
+                    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
+                    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
+                    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
                 </Tabs>
             </div>
         );

custom-icons/generate/fileNameToClassName.js

@@ -13,7 +13,9 @@ module.exports = {
     CheckOutlined: 'anticon-check',
     ClockCircleOutlined: 'anticon-clock-circle',
     CloseCircleFilled: 'anticon-close-circle',
+    CloseCircleOutlined: 'dt-anticon-close-circle-outline',
     CloseOutlined: 'anticon-close',
+    CopyOutlined: 'anticon-copy',
     DeleteOutlined: 'anticon-delete',
     DoubleLeftOutlined: 'anticon-double-left',
     DoubleRightOutlined: 'anticon-double-right',

package.json

@@ -12,7 +12,7 @@
         "clean": "rimraf dist/*",
         "changelog": "./scripts/changelog.sh",
         "release": "node ./scripts/release.js",
-        "deploy": "gh-pages -d dist",
+        "deploy": "npm run build && gh-pages -d dist -r [email protected]:DTStack/ant-design-dtinsight-theme.git",
         "prettier": "npx prettier --check '**/*.{js,jsx,json,ts,tsx}'",
         "prettier:fix": "npx prettier --write '**/*.{js,jsx,json,ts,tsx}'",
         "eslint": "npx eslint . --no-error-on-unmatched-pattern",
@@ -47,6 +47,7 @@
         "cz-conventional-changelog": "^3.3.0",
         "eslint": "8.22.0",
         "eslint-plugin-prettier": "4.2.1",
+        "eslint-plugin-unicorn": "^46.0.0",
         "file-loader": "^6.0.0",
         "gh-pages": "^3.2.0",
         "inquirer": "^8.2.2",

theme/dt-theme/default/alert.less

@@ -1,7 +1,15 @@
 @import "../const.less";
 
+.ant-alert {
+    >.ant-alert-close-icon {
+        >.anticon-close {
+            font-size: 16px;
+        }
+    }
+}
+
 .ant-alert.ant-alert-no-icon {
-    padding: 12px 16px;
+    padding: 10px 16px;
 }
 
 .ant-alert-icon {