From c1566bead4337608de1ee8db9e61f7fd93f34141 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 21 May 2024 20:46:04 +0800 Subject: [PATCH 01/11] chore: add clarity script (#48993) * chore: add clarity script * chore: add clarity script --- .dumi/scripts/clarity.js | 14 ++++++++++++++ .dumi/{ => scripts}/mirror-modal.js | 0 .dumirc.ts | 8 +++++++- 3 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 .dumi/scripts/clarity.js rename .dumi/{ => scripts}/mirror-modal.js (100%) diff --git a/.dumi/scripts/clarity.js b/.dumi/scripts/clarity.js new file mode 100644 index 0000000000..b36cab890a --- /dev/null +++ b/.dumi/scripts/clarity.js @@ -0,0 +1,14 @@ +/* eslint-disable */ +// https://clarity.microsoft.com +(function (c, l, a, r, i, t, y) { + c[a] = + c[a] || + function () { + (c[a].q = c[a].q || []).push(arguments); + }; + t = l.createElement(r); + t.async = 1; + t.src = 'https://www.clarity.ms/tag/' + i; + y = l.getElementsByTagName(r)[0]; + y.parentNode.insertBefore(t, y); +})(window, document, 'clarity', 'script', 'lyia7jfwui'); diff --git a/.dumi/mirror-modal.js b/.dumi/scripts/mirror-modal.js similarity index 100% rename from .dumi/mirror-modal.js rename to .dumi/scripts/mirror-modal.js diff --git a/.dumirc.ts b/.dumirc.ts index e96945a97c..a19b41b59c 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -171,7 +171,13 @@ export default defineConfig({ scripts: [ { async: true, - content: fs.readFileSync(path.join(__dirname, '.dumi', 'mirror-modal.js')).toString(), + content: fs + .readFileSync(path.join(__dirname, '.dumi', 'scripts', 'mirror-modal.js')) + .toString(), + }, + { + async: true, + content: fs.readFileSync(path.join(__dirname, '.dumi', 'scripts', 'clarity.js')).toString(), }, ], }); From fe0f6920a76516c46dbba24249d9fb635e030a2d Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Wed, 22 May 2024 13:10:22 +0800 Subject: [PATCH 02/11] docs: icon custom use vite (#48937) * docs: icon custom use vite * fix --- components/icon/index.en-US.md | 12 ++++++++++++ components/icon/index.zh-CN.md | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index e5c7cf3f5a..8bfa2e550a 100644 --- a/components/icon/index.en-US.md +++ b/components/icon/index.en-US.md @@ -155,10 +155,22 @@ module.exports = { }; ``` +You can import SVG icon as a react component by using `vite` and [`vite-plugin-svgr`](https://www.npmjs.com/package/vite-plugin-svgr). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options). + +```js +// vite.config.js +export default defineConfig(() => ({ + // ... other config + plugins: [svgr({ svgrOptions: { icon: true } })], +})); +``` + ```jsx import React from 'react'; import Icon from '@ant-design/icons'; import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file. + +// import MessageSvg from 'path/to/message.svg?react'; // use vite path to your '*.svg?react' file. import ReactDOM from 'react-dom/client'; // in create-react-app: diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index 9e994b37ae..28bf3e1a38 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -150,10 +150,22 @@ module.exports = { }; ``` +如果使用 `vite`，可以通过配置 [vite-plugin-svgr](https://www.npmjs.com/package/vite-plugin-svgr) 来将 `svg` 图标作为 `React` 组件导入。`vite-plugin-svgr` 的 `options` 选项请参阅 [svgr 文档](https://github.com/smooth-code/svgr#options)。 + +```js +// vite.config.js +export default defineConfig(() => ({ + // ... other config + plugins: [svgr({ svgrOptions: { icon: true } })], +})); +``` + ```jsx import React from 'react'; import Icon from '@ant-design/icons'; import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径 + +// import MessageSvg from 'path/to/message.svg?react'; // 使用vite 你的 '*.svg?react' 文件路径. import ReactDOM from 'react-dom/client'; // in create-react-app: From 4ef3992c0d900377cf2df57864eb1a04d7c08aac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E7=BA=A2=E5=87=AF?= <875672364@qq.com> Date: Wed, 22 May 2024 19:26:47 +0800 Subject: [PATCH 03/11] style: widen component meta label to fix safari ui world wrap (#49023) Co-authored-by: songhongkai --- .dumi/theme/builtins/ComponentMeta/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx index f1d9759997..7b891497b0 100644 --- a/.dumi/theme/builtins/ComponentMeta/index.tsx +++ b/.dumi/theme/builtins/ComponentMeta/index.tsx @@ -139,7 +139,7 @@ const ComponentMeta: React.FC = (props) => { colon={false} column={1} style={{ marginTop: token.margin }} - labelStyle={{ paddingInlineEnd: token.padding, width: 54 }} + labelStyle={{ paddingInlineEnd: token.padding, width: 56 }} items={ [ { From 425f4d0397a535453bc9ff3b82442381273e27f2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 22 May 2024 19:30:07 +0800 Subject: [PATCH 04/11] refactor: refactor Input code (#49019) --- components/input/Input.tsx | 30 +++++++++++----------------- components/input/style/index.ts | 35 +++++++++------------------------ 2 files changed, 20 insertions(+), 45 deletions(-) diff --git a/components/input/Input.tsx b/components/input/Input.tsx index fe4d3d91ab..5011696ffd 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -51,7 +51,6 @@ export function triggerFocus( break; default: element.setSelectionRange(0, len); - break; } } } @@ -172,6 +171,15 @@ const Input = forwardRef((props, ref) => { ); + const getAddon = (addon: React.ReactNode) => + addon && ( + + + {addon} + + + ); + const mergedAllowClear = getAllowClear(allowClear ?? input?.allowClear); const [variant, enableVariantCls] = useVariant(customVariant, bordered); @@ -198,24 +206,8 @@ const Input = forwardRef((props, ref) => { input?.className, )} onChange={handleChange} - addonAfter={ - addonAfter && ( - - - {addonAfter} - - - ) - } - addonBefore={ - addonBefore && ( - - - {addonBefore} - - - ) - } + addonBefore={getAddon(addonBefore)} + addonAfter={getAddon(addonAfter)} classNames={{ ...classes, ...input?.classNames, diff --git a/components/input/style/index.ts b/components/input/style/index.ts index cf0ab255c8..7ce64b5d08 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -89,11 +89,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({ }, // RTL - '&-rtl': { - direction: 'rtl', - }, - - '&-textarea-rtl': { + '&-rtl, &-textarea-rtl': { direction: 'rtl', }, }); @@ -284,11 +280,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { '&:not(:first-child):not(:last-child)': { borderInlineEndWidth: token.lineWidth, - '&:hover': { - zIndex: 1, - }, - - '&:focus': { + '&:hover, &:focus': { zIndex: 1, }, }, @@ -327,11 +319,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { borderInlineEndWidth: token.lineWidth, borderRadius: 0, - '&:hover': { - zIndex: 1, - }, - - '&:focus': { + '&:hover, &:focus': { zIndex: 1, }, }, @@ -753,7 +741,7 @@ const genSearchInputStyle: GenerateStyle = (token: InputToken) => { [`> ${componentCls}-group-addon ${componentCls}-search-button, > ${componentCls}, ${componentCls}-affix-wrapper`]: { - '&:hover,&:focus,&:active': { + '&:hover, &:focus, &:active': { zIndex: 2, }, }, @@ -790,16 +778,11 @@ const genTextAreaStyle: GenerateStyle = (token) => { }, }, - '&-allow-clear': { - [`> ${componentCls}`]: { - paddingInlineEnd: paddingLG, - }, - }, - - [`&-affix-wrapper${textareaPrefixCls}-has-feedback`]: { - [`${componentCls}`]: { - paddingInlineEnd: paddingLG, - }, + [` + &-allow-clear > ${componentCls}, + &-affix-wrapper${textareaPrefixCls}-has-feedback ${componentCls} + `]: { + paddingInlineEnd: paddingLG, }, [`&-affix-wrapper${componentCls}-affix-wrapper`]: { From 3dca74a5395fb84b67b85b8ed798fa40106561df Mon Sep 17 00:00:00 2001 From: Amumu Date: Thu, 23 May 2024 10:24:14 +0800 Subject: [PATCH 05/11] fix: fix react dom recognize warning (#49031) --- .../__snapshots__/demo-extend.test.ts.snap | 14 +------------- .../__tests__/__snapshots__/demo.test.ts.snap | 8 -------- components/carousel/__tests__/index.test.tsx | 14 ++++++++++++++ components/carousel/index.tsx | 13 +++++++++++-- 4 files changed, 26 insertions(+), 23 deletions(-) diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap index ebe3c3c045..7986e72923 100644 --- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -12,9 +12,7 @@ Array [