chore: merge master

ammar-knowledge · Aug 28, 2023 · 16f8228 · 16f8228
2 parents 6f2bddd + a95662d
commit 16f8228
Show file tree

Hide file tree

Showing 36 changed files with 609 additions and 355 deletions.
diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx
@@ -23,62 +23,64 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ token, css }) => {
-  const textShadow = `0 0 3px ${token.colorBgContainer}`;
+const useStyle = () => {
   const { direction } = React.useContext(ConfigProvider.ConfigContext);
   const isRTL = direction === 'rtl';
 
-  return {
-    holder: css`
-      height: 520px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      overflow: hidden;
-      perspective: 800px;
-      row-gap: ${token.marginXL}px;
-    `,
-
-    typography: css`
-      text-align: center;
-      position: relative;
-      z-index: 1;
-      padding-inline: ${token.paddingXL}px;
-      text-shadow: ${new Array(5)
-        .fill(null)
-        .map(() => textShadow)
-        .join(', ')};
-
-      h1 {
-        font-family: AliPuHui, ${token.fontFamily} !important;
-        font-weight: 900 !important;
-        font-size: ${token.fontSizeHeading2 * 2}px !important;
-        line-height: ${token.lineHeightHeading2} !important;
-      }
-
-      p {
-        font-size: ${token.fontSizeLG}px !important;
-        font-weight: normal !important;
-        margin-bottom: 0;
-      }
-    `,
-
-    block: css`
-      position: absolute;
-      inset-inline-end: 0;
-      top: -38px;
-      transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'};
-    `,
-
-    child: css`
-      position: relative;
-      z-index: 1;
-    `,
-  };
-});
-
+  return createStyles(({ token, css }) => {
+    const textShadow = `0 0 3px ${token.colorBgContainer}`;
+
+    return {
+      holder: css`
+        height: 520px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        perspective: 800px;
+        row-gap: ${token.marginXL}px;
+      `,
+
+      typography: css`
+        text-align: center;
+        position: relative;
+        z-index: 1;
+        padding-inline: ${token.paddingXL}px;
+        text-shadow: ${new Array(5)
+          .fill(null)
+          .map(() => textShadow)
+          .join(', ')};
+
+        h1 {
+          font-family: AliPuHui, ${token.fontFamily} !important;
+          font-weight: 900 !important;
+          font-size: ${token.fontSizeHeading2 * 2}px !important;
+          line-height: ${token.lineHeightHeading2} !important;
+        }
+
+        p {
+          font-size: ${token.fontSizeLG}px !important;
+          font-weight: normal !important;
+          margin-bottom: 0;
+        }
+      `,
+
+      block: css`
+        position: absolute;
+        inset-inline-end: 0;
+        top: -38px;
+        transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'};
+      `,
+
+      child: css`
+        position: relative;
+        z-index: 1;
+      `,
+    };
+  })();
+};
 export interface PreviewBannerProps {
   children?: React.ReactNode;
 }

diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -43,6 +43,7 @@ const useStyle = createStyles(({ token, css }) => ({
         width: 0;
         height: 0;
         opacity: 0;
+        position: absolute;
       }
 
       img {

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -1,17 +1,21 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   CheckOutlined,
   LinkOutlined,
   SnippetsOutlined,
   ThunderboltOutlined,
+  UpOutlined,
 } from '@ant-design/icons';
 import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
+import { Alert, Badge, Space, Tooltip } from 'antd';
+import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
 import LZString from 'lz-string';
-import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Alert, Badge, Space, Tooltip } from 'antd';
+
 import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
@@ -63,6 +67,31 @@ function useShowRiddleButton() {
   return showRiddleButton;
 }
 
+const useStyle = createStyles(({ token }) => {
+  const { borderRadius } = token;
+  return {
+    codeHideBtn: css`
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
+      border-top: 1px solid ${token.colorSplit};
+      color: ${token.colorTextSecondary};
+      transition: all 0.2s ease-in-out;
+      background-color: ${token.colorBgElevated};
+      cursor: pointer;
+      &:hover {
+        color: ${token.colorPrimary};
+      }
+      span {
+        margin-right: ${token.marginXXS}px;
+      }
+    `,
+  };
+});
+
 const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const {
     asset,
@@ -86,6 +115,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const { pkg } = useSiteData();
   const location = useLocation();
 
+  const { styles } = useStyle();
+
   const entryCode = asset.dependencies['index.tsx'].value;
   const showRiddleButton = useShowRiddleButton();
 
@@ -509,8 +540,12 @@ createRoot(document.getElementById('container')).render(<Demo />);
             sourceCode={entryCode}
             jsxCode={jsx}
             styleCode={style}
-            onCodeTypeChange={(type) => setCodeType(type)}
+            onCodeTypeChange={setCodeType}
           />
+          <div tabIndex={0} className={styles.codeHideBtn} onClick={() => setCodeExpand(false)}>
+            <UpOutlined />
+            <FormattedMessage id="app.demo.code.hide.simplify" />
+          </div>
         </section>
       )}
     </section>

diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
-import Prism from 'prismjs';
+import { Tabs } from 'antd';
 import toReactElement from 'jsonml-to-react-element';
 import JsonML from 'jsonml.js/lib/utils';
-import { Tabs } from 'antd';
+import Prism from 'prismjs';
 
 const LANGS = {
   tsx: 'TypeScript',
@@ -17,22 +17,16 @@ interface CodePreviewProps {
   onCodeTypeChange?: (activeKey: string) => void;
 }
 
-function toReactComponent(jsonML: any) {
+function toReactComponent(jsonML: any[]) {
   return toReactElement(jsonML, [
     [
       (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
-      (node: any, index: any) => {
-        // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
+      (node: any, index: number) => {
         const attr = JsonML.getAttributes(node);
-        return React.createElement(
-          'pre',
-          {
-            key: index,
-            className: `language-${attr.lang}`,
-          },
-          React.createElement('code', {
-            dangerouslySetInnerHTML: { __html: attr.highlighted },
-          }),
+        return (
+          <pre key={index} className={`language-${attr.lang}`}>
+            <code dangerouslySetInnerHTML={{ __html: attr.highlighted }} />
+          </pre>
         );
       },
     ],

diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx
@@ -1,5 +1,5 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
 
 const GlobalDemoStyles: React.FC = () => {

diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json
@@ -31,6 +31,7 @@
   "app.demo.copied": "Copied!",
   "app.demo.code.show": "Show code",
   "app.demo.code.hide": "Hide code",
+  "app.demo.code.hide.simplify": "Hide",
   "app.demo.codepen": "Open in CodePen",
   "app.demo.codesandbox": "Open in CodeSandbox",
   "app.demo.stackblitz": "Open in Stackblitz",

diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json
@@ -31,6 +31,7 @@
   "app.demo.copied": "复制成功",
   "app.demo.code.show": "显示代码",
   "app.demo.code.hide": "收起代码",
+  "app.demo.code.hide.simplify": "收起",
   "app.demo.codepen": "在 CodePen 中打开",
   "app.demo.codesandbox": "在 CodeSandbox 中打开",
   "app.demo.stackblitz": "在 Stackblitz 中打开",

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,24 @@ tag: vVERSION
 
 ---
 
+## 5.8.5
+
+`2023-08-28`
+
+- 🛠 Refactor Badge style logic and take Ribbon style out to reduce SSR inline style size. [#44451](https://github.com/ant-design/ant-design/pull/44451)
+- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons`` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix the issue of vertical dragging malfunction in Carousel. [#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix Tour panel use wrong design token. [#44428](https://github.com/ant-design/ant-design/pull/44428)
+- 🐞 Fix Form `wrapperCol` with responsive `xs` config not working. [#44388](https://github.com/ant-design/ant-design/pull/44388)
+- 🐞 Fix ColorPicker duplicate `key` issue. [#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master)
+- 🐞 Fix Radio that not work in Tree title. [#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Table that would crash when `filterDropdown` does not support `ref`. [#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Form `inline` layout show extra bottom margin when validation failed. [#44360](https://github.com/ant-design/ant-design/pull/44360)
+- 🐞 Fix DatePicker `showTime` working error when `format` is Array. [#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502)
+- 🐞 Fix Watermark can not be fully shown when `content` is too long. [#44321](https://github.com/ant-design/ant-design/pull/44321)
+- TypeScript
+  - 🤖 Fix the type error with align property in Dropdown component. [#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh)
+
 ## 5.8.4
 
 `2023-08-18`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,24 @@ tag: vVERSION
 
 ---
 
+## 5.8.5
+
+`2023-08-28`
+
+- 🛠 重构 Badge 样式逻辑将 Ribbon 样式抽离以降低 SSR 内联样式尺寸。[#44451](https://github.com/ant-design/ant-design/pull/44451)
+- 🐞 修复 App 组件下使用 `@ant-design/icons` 的图标样式异常的问题。[#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Carousel 组件垂直方向拖动失效的问题。[#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Tour 面板使用的 design token 错误的问题。[#44428](https://github.com/ant-design/ant-design/pull/44428)
+- 🐞 修复 Form `wrapperCol` 配置响应式 `xs` 属性无效的问题。[#44388](https://github.com/ant-design/ant-design/pull/44388)
+- 🐞 修复 ColorPicker 中重复 `key` 的问题。[#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master)
+- 🐞 修复 Radio 组件组合 Tree 组件后失效的问题。[#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Table 组件 `filterDropdown` 不支持 `ref` 时报错的问题。[#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Form `inline` 布局在校验失败时出现额外空行的问题。[#44360](https://github.com/ant-design/ant-design/pull/44360)
+- 🐞 修复 DatePicker 中 `showTime` 为 true 且 `format` 为数组时，组件报错。[#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502)
+- 🐞 修复 Watermark 中 `content` 内容过长时无法完整显示的问题。[#44321](https://github.com/ant-design/ant-design/pull/44321)
+- TypeScript
+  - 🤖 修复 Dropdown 组件中 `align` 属性的类型错误。[#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh)
+
 ## 5.8.4
 
 `2023-08-18`

diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx
@@ -1,3 +1,4 @@
+import { SmileOutlined } from '@ant-design/icons';
 import React, { useEffect } from 'react';
 import type { NotificationConfig } from 'antd/es/notification/interface';
 import App from '..';
@@ -181,4 +182,30 @@ describe('App', () => {
     );
     expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle('color: blue;');
   });
+
+  // https://github.com/ant-design/ant-design/issues/41197#issuecomment-1465803061
+  describe('restIcon style', () => {
+    beforeEach(() => {
+      Array.from(document.querySelectorAll('style')).forEach((style) => {
+        style.parentNode?.removeChild(style);
+      });
+    });
+
+    it('should work by default', () => {
+      const { container } = render(
+        <App>
+          <SmileOutlined />
+        </App>,
+      );
+
+      expect(container.querySelector('.anticon')).toBeTruthy();
+      const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
+      expect(
+        dynamicStyles.some((style) => {
+          const { innerHTML } = style;
+          return innerHTML.startsWith('.anticon');
+        }),
+      ).toBeTruthy();
+    });
+  });
 });
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
@@ -1,10 +1,11 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
-import useStyle from './style';
+import useStyle from './style/ribbon';
 
 type RibbonPlacement = 'start' | 'end';
 

diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
@@ -49,13 +49,13 @@ Common props ref：[Common props](/docs/react/common-props)
 | offset | Set offset of the badge dot | \[number, number] | - |  |
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | false |  |
-| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
+| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | - |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
 | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - |  |
 | title | Text to show when hovering over the badge | string | - |  |
 
-### Badge.Ribbon (4.5.0+)
+### Badge.Ribbon
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |

diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
@@ -50,13 +50,13 @@ group: 数据展示
 | offset | 设置状态点的位置偏移 | \[number, number] | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
-| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
+| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | - |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | - |  |
 
-### Badge.Ribbon (4.5.0+)
+### Badge.Ribbon
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |