chore: auto merge branches (ant-design#44292)

chore: merge master into feature
ammar-knowledge · Aug 20, 2023 · 8ca7ab9 · 8ca7ab9
2 parents d375cbd + f91bc7b
commit 8ca7ab9
Show file tree

Hide file tree

Showing 60 changed files with 1,908 additions and 1,349 deletions.
diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx
@@ -44,11 +44,6 @@ const CustomTheme = () => {
     const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
     if (storedConfig) {
       const themeConfig = JSON.parse(storedConfig);
-      const originThemeConfig = {
-        json: themeConfig,
-        text: undefined,
-      };
-      setThemeConfigContent(originThemeConfig);
       setTheme(themeConfig);
     }
   }, []);

diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
-import { theme, Space } from 'antd';
+import { Space, theme } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 
 const useStyle = createStyles(({ token, css }) => {
@@ -29,7 +29,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       align-items: center;
       justify-content: center;
-
+      color: rgba(0,0,0,0.88);
       border-right: 1px solid rgba(0, 0, 0, 0.1);
     `,
 

diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx
@@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react';
 import { ColorPicker } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import ColorPatterns from './ColorPatterns';
+import useLocale from '../../../hooks/useLocale';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
+const locales = {
+  cn: {
+    saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`,
+    brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`,
+  },
+  en: {
+    saturation: (s: string) =>
+      `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`,
+    brightness: (b: string) =>
+      `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`,
+  },
+};
+
 const ColorPaletteTool: React.FC = () => {
   const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
   const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
+
+  const [locale] = useLocale(locales);
+
   const handleChangeColor = (color: Color, hex: string) => {
     setPrimaryColor(hex);
     setPrimaryColorInstance(color);
   };
+
   const colorValidation = useMemo<React.ReactNode>(() => {
     let text = '';
     if (primaryColorInstance) {
-      const { s, b } = primaryColorInstance.toHsb();
+      const { s, b } = primaryColorInstance.toHsb() || {};
       if (s * 100 < primaryMinSaturation) {
-        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`;
+        text += locale.saturation((s * 100).toFixed(2));
       }
       if (b * 100 < primaryMinBrightness) {
-        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`;
+        text += locale.brightness((s * 100).toFixed(2));
       }
     }
     return <span className="color-palette-picker-validation">{text.trim()}</span>;
@@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
       <div className="color-palette-pick">
         <FormattedMessage id="app.docs.color.pick-primary" />
       </div>
-      <div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
+      <div className="main-color">
+        <ColorPatterns color={primaryColor} />
+      </div>
       <div className="color-palette-picker">
         <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
           <ColorPicker value={primaryColor} onChange={handleChangeColor} />

diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi';
 import React, { useMemo, useState } from 'react';
 import { Col, ColorPicker, Row } from 'antd';
 import ColorPatterns from './ColorPatterns';
+import useLocale from '../../../hooks/useLocale';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
+const locales = {
+  cn: {
+    saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`,
+    brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`,
+  },
+  en: {
+    saturation: (s: string) =>
+      `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`,
+    brightness: (b: string) =>
+      `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`,
+  },
+};
+
 const ColorPaletteTool: React.FC = () => {
   const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
   const [backgroundColor, setBackgroundColor] = useState<string>('#141414');
-  const [primaryColorInstance, setPrimaryColorInstance] = useState(null);
+  const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
+
+  const [locale] = useLocale(locales);
 
   const handleChangeColor = (color: Color, hex: string) => {
     setPrimaryColor(hex);
@@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => {
   const colorValidation = useMemo<React.ReactNode>(() => {
     let text = '';
     if (primaryColorInstance) {
-      const { s, b } = primaryColorInstance.toHsb();
+      const { s, b } = primaryColorInstance.toHsb() || {};
       if (s * 100 < primaryMinSaturation) {
-        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`;
+        text += locale.saturation((s * 100).toFixed(2));
       }
       if (b * 100 < primaryMinBrightness) {
-        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`;
+        text += locale.brightness((s * 100).toFixed(2));
       }
     }
     return (
@@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => {
   return (
     <div className="color-palette-horizontal color-palette-horizontal-dark">
       <div className="main-color">
-        {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
+        <ColorPatterns color={primaryColor} backgroundColor={backgroundColor} dark />
       </div>
       <div className="color-palette-picker">
         <Row>

diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx
@@ -9,11 +9,15 @@ interface ColorPatternsProps {
   backgroundColor?: string;
 }
 
-const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => {
+const ColorPatterns: React.FC<ColorPatternsProps> = ({ color, dark, backgroundColor }) => {
   const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
-  return uniq(colors).map((colorString, i) => (
-    <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
-  ));
+  return (
+    <>
+      {uniq(colors).map((colorString, i) => (
+        <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
+      ))}
+    </>
+  );
 };
 
 export default ColorPatterns;
diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
@@ -102,7 +102,7 @@ const Footer: React.FC = () => {
       items: [
         {
           title: 'Ant Design Charts',
-          url: 'https://charts.ant.design',
+          url: isZhCN ? 'https://ant-design-charts.antgroup.com' : 'https://charts.ant.design',
           openExternal: true,
         },
         {
@@ -117,12 +117,12 @@ const Footer: React.FC = () => {
         },
         {
           title: 'Ant Design Mobile',
-          url: 'https://mobile.ant.design',
+          url: isZhCN ? 'https://ant-design-mobile.antgroup.com/zh' : 'https://mobile.ant.design',
           openExternal: true,
         },
         {
           title: 'Ant Design Mini',
-          url: 'https://mini.ant.design',
+          url: isZhCN ? 'https://ant-design-mini.antgroup.com/' : 'https://mini.ant.design',
           openExternal: true,
         },
         {
@@ -338,7 +338,7 @@ const Footer: React.FC = () => {
             />
           ),
           title: 'AntV',
-          url: 'https://antv.vision',
+          url: 'https://antv.antgroup.com',
           description: <FormattedMessage id="app.footer.antv.slogan" />,
           openExternal: true,
         },

diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx
@@ -30,7 +30,8 @@ const locales = {
 
 // ============================= Style =============================
 const useStyle = createStyles(({ token }) => {
-  const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary } = token;
+  const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } =
+    token;
 
   return {
     nav: css`
@@ -56,6 +57,17 @@ const useStyle = createStyles(({ token }) => {
             left: 12px;
             border-width: ${menuItemBorder}px;
           }
+
+          a {
+            color: ${colorText};
+          }
+
+          a:before {
+            position: absolute;
+            inset: 0;
+            background-color: transparent;
+            content: "";
+          }
         }
 
         & ${antCls}-menu-submenu-title ${iconCls} {
@@ -97,7 +109,6 @@ const useStyle = createStyles(({ token }) => {
 
 export interface NavigationProps extends SharedProps {
   isMobile: boolean;
-  isClient: boolean;
   responsive: null | 'narrow' | 'crowded';
   directionText: string;
   onLangChange: () => void;
@@ -106,7 +117,6 @@ export interface NavigationProps extends SharedProps {
 
 export default ({
   isZhCN,
-  isClient,
   isMobile,
   responsive,
   directionText,
@@ -224,16 +234,21 @@ export default ({
       ),
       key: 'docs/resources',
     },
-    isZhCN &&
-    isClient &&
-    window.location.host !== 'ant-design.antgroup.com' &&
-    window.location.host !== 'ant-design.gitee.io'
+    isZhCN
       ? {
-          label: '国内镜像',
+          label: (
+            <a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
+              国内镜像
+            </a>
+          ),
           key: 'mirror',
           children: [
             {
-              label: <a href="https://ant-design.antgroup.com">官方镜像</a>,
+              label: (
+                <a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
+                  官方镜像
+                </a>
+              ),
               icon: (
                 <img
                   alt="logo"
@@ -245,7 +260,11 @@ export default ({
               key: 'antgroup',
             },
             {
-              label: <a href="https://ant-design.gitee.io">Gitee 镜像</a>,
+              label: (
+                <a href="https://ant-design.gitee.io" target="_blank" rel="noreferrer">
+                  Gitee 镜像
+                </a>
+              ),
               icon: (
                 <img
                   alt="gitee"

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
@@ -127,7 +127,6 @@ interface HeaderState {
 
 // ================================= Header =================================
 const Header: React.FC = () => {
-  const [isClient, setIsClient] = React.useState(false);
   const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
@@ -166,7 +165,6 @@ const Header: React.FC = () => {
   }, [location]);
 
   useEffect(() => {
-    setIsClient(typeof window !== 'undefined');
     onWindowResize();
     window.addEventListener('resize', onWindowResize);
     pingTimer.current = ping((status) => {
@@ -184,7 +182,7 @@ const Header: React.FC = () => {
             closable: true,
             zIndex: 99999,
             onOk() {
-              window.open('https://ant-design.antgroup.com', '_self');
+              window.location.host = 'ant-design.antgroup.com';
               disableAntdMirrorModal();
             },
             onCancel() {
@@ -273,7 +271,6 @@ const Header: React.FC = () => {
   const sharedProps: SharedProps = {
     isZhCN,
     isRTL,
-    isClient,
   };
 
   const navigationNode = (

diff --git a/.dumi/theme/slots/Header/interface.ts b/.dumi/theme/slots/Header/interface.ts
@@ -1,5 +1,4 @@
 export interface SharedProps {
   isZhCN: boolean;
   isRTL: boolean;
-  isClient: boolean;
 }
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,23 @@ tag: vVERSION
 
 ---
 
+## 5.8.4
+
+`2023-08-18`
+
+- ColorPicker
+  - 🐞 Fix the cursor jumps when entering lowercase English letters in the ColorPicker color value input box. [#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666)
+  - 🐞 Fix the ColorPicker style is deformed under different sizes. [#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao)
+- 🐞 Fix Descriptions throwing `key is not a prop` error message. [#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix the node is still rendered when Pagination `itemRender` is customized to `null`. [#44226](https://github.com/ant-design/ant-design/pull/44226)
+- 🐞 Fix Modal in Dropdown `menu.items`, rapid mouse movement when expanding Modal will make Dropdown reopen. [#44204](https://github.com/ant-design/ant-design/pull/44204)
+- DatePicker
+  - 💄 Fix DatePicker content is not centered. [#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502)
+  - 💄 Optimize DatePicker selection range style. [#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Fix clicking on the Tabs area on the mobile terminal triggers a color change. [#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi)
+- RTL
+  - 💄 Fix the numbers in the Badge are also RTL when the text direction of the page is RTL. [#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko)
+
 ## 5.8.3
 
 `2023-08-11`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,23 @@ tag: vVERSION
 
 ---
 
+## 5.8.4
+
+`2023-08-18`
+
+- ColorPicker
+  - 🐞 修复 ColorPicker 色值输入框输入小写英文字母时光标跳动的问题。[#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666)
+  - 🐞 修复 ColorPicker 在不同尺寸下样式变形的问题。[#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao)
+- 🐞 修复 Descriptions 抛出 `key is not a prop` 的错误提示。[#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Pagination `itemRender` 自定义为 `null` 时，仍然渲染节点的问题。[#44226](https://github.com/ant-design/ant-design/pull/44226)
+- 🐞 修复 Modal 在 Dropdown `menu.items` 中，展开 Modal 时快速移动鼠标会使 Dropdown 重新打开的问题。[#44204](https://github.com/ant-design/ant-design/pull/44204)
+- DatePicker
+  - 💄 修复 DatePicker 内容不居中问题。[#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502)
+  - 💄 优化 DatePicker 中范围选择区域样式。[#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修复移动端点击 Tabs 区域触发颜色改变的问题。[#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi)
+- RTL
+  - 💄 修复了当页面的文字方向为 RTL 时 Badge 里面的数字也是 RTL 的问题。[#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko)
+
 ## 5.8.3
 
 `2023-08-11`