chore: auto merge branches (#46244)

chore: feature merge master
2024-12-11 23:00:20 +08:00 · 2023-12-04 12:45:47 +00:00 · 2023-12-04 12:45:47 +00:00 · 734bc885e1
commit 734bc885e1
parent f97cbff06d e191962226
16 changed files with 143 additions and 41 deletions
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@ -115,7 +115,7 @@ export const BannerRecommendsFallback: FC = () => {
  return isMobile ? (
    <Carousel className={styles.carousel}>
      {list.map((_, index) => (
-        <div key={index}>
+        <div key={index} className={styles.itemBase}>
          <Skeleton active style={{ padding: '0 24px' }} />
        </div>
      ))}
@ -123,7 +123,9 @@ export const BannerRecommendsFallback: FC = () => {
  ) : (
    <div className={styles.container}>
      {list.map((_, index) => (
-        <Skeleton key={index} active />
+        <div key={index} className={styles.itemBase}>
+          <Skeleton active />
+        </div>
      ))}
    </div>
  );
@ -138,6 +140,10 @@ const BannerRecommends: React.FC = () => {
  const icons = data?.icons || [];
  const first3 = !extras || extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);

+  if (!data) {
+    return <BannerRecommendsFallback />;
+  }
+
  return (
    <div>
      {isMobile ? (
--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@ -94,6 +94,7 @@ const useStyle = () => {

      child: css`
        position: relative;
+        width: 100%;
        z-index: 1;
      `,
    };
--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@ -407,8 +407,8 @@ export default function Theme() {
        components: {
          Layout: isLight
            ? {
-                colorBgHeader: 'transparent',
-                colorBgBody: 'transparent',
+                headerBg: 'transparent',
+                bodyBg: 'transparent',
              }
            : {
                // colorBgBody: 'transparent',
--- a/.dumi/pages/index/components/util.ts
+++ b/.dumi/pages/index/components/util.ts
@ -1,5 +1,6 @@
 import { css } from 'antd-style';
-import useFetch from '../../../hooks/useFetch';
+import { useEffect, useState } from 'react';
+import fetch from 'cross-fetch';

 export interface Author {
  avatar: string;
@ -80,8 +81,18 @@ export function preLoad(list: string[]) {
  }
 }

-export function useSiteData(): Partial<SiteData> {
-  return useFetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json');
+export function useSiteData(): Partial<SiteData> | undefined {
+  const [data, setData] = useState<SiteData | undefined>(undefined);
+
+  useEffect(() => {
+    fetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json').then(
+      async (res) => {
+        setData(await res.json());
+      },
+    );
+  }, []);
+
+  return data;
 }

 export const getCarouselStyle = () => ({
--- a/.dumi/pages/index/index.tsx
+++ b/.dumi/pages/index/index.tsx
@ -4,7 +4,7 @@ import { createStyles, css } from 'antd-style';

 import useDark from '../../hooks/useDark';
 import useLocale from '../../hooks/useLocale';
-import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
+import BannerRecommends from './components/BannerRecommends';
 import PreviewBanner from './components/PreviewBanner';
 import Group from './components/Group';

@ -46,9 +46,7 @@ const Homepage: React.FC = () => {
  return (
    <section>
      <PreviewBanner>
-        <Suspense fallback={<BannerRecommendsFallback />}>
        <BannerRecommends />
-        </Suspense>
      </PreviewBanner>

      <div>
--- a/.dumi/theme/builtins/ResourceArticles/index.tsx
+++ b/.dumi/theme/builtins/ResourceArticles/index.tsx
@ -1,11 +1,10 @@
 /* eslint-disable react/no-array-index-key */
 import * as React from 'react';
-import { Suspense } from 'react';
 import dayjs from 'dayjs';
 import { FormattedMessage } from 'dumi';
 import { createStyles } from 'antd-style';
 import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
-import type { Article, Authors } from '../../../pages/index/components/util';
+import type { Article, Authors, SiteData } from '../../../pages/index/components/util';
 import { useSiteData } from '../../../pages/index/components/util';
 import useLocale from '../../../hooks/useLocale';

@ -97,10 +96,11 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
  );
 };

-const Articles: React.FC = () => {
+const Articles: React.FC<{ data: Partial<SiteData> }> = ({ data }) => {
  const [, lang] = useLocale();
  const isZhCN = lang === 'cn';
-  const { articles = { cn: [], en: [] }, authors = [] } = useSiteData();
+
+  const { articles = { cn: [], en: [] }, authors = [] } = data;

  // ========================== Data ==========================
  const mergedData = React.useMemo(() => {
@ -149,11 +149,13 @@ const Articles: React.FC = () => {

 export default () => {
  const { styles } = useStyle();
+  const data = useSiteData();
+
+  const articles = data ? <Articles data={data} /> : <Skeleton active />;
+
  return (
    <div id="articles" className={styles.articles}>
-      <Suspense fallback={<Skeleton active />}>
-        <Articles />
-      </Suspense>
+      {articles}
    </div>
  );
 };
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -16,6 +16,33 @@ tag: vVERSION

 ---

+## 5.12.1
+
+`2023-12-04`
+
+- 🐞 MISC: Fix missing color less variables converted from token. [#46250](https://github.com/ant-design/ant-design/pull/46250)
+- 🐞 Fix Notification title overlaps with the close icon when it is too long。 [#46211](https://github.com/ant-design/ant-design/pull/46211) [@zh-lx](https://github.com/zh-lx)
+
+## 5.12.0
+
+`2023-12-04`
+
+- 🔥 Component Token support CSS variables mode. For more detail, see [CSS Variables](/docs/react/css-variables). Special thank for contributors of this feature: [@li-jia-nan](https://github.com/li-jia-nan) [@RedJue](https://github.com/RedJue) [@c0dedance](https://github.com/c0dedance) [@kiner-tang](https://github.com/kiner-tang) [@JarvisArt](https://github.com/JarvisArt) [@cc-hearts](https://github.com/cc-hearts)
+- 🛠 Refactor rc-pagination from class component to FC. [#46204](https://github.com/ant-design/ant-design/pull/46204) [@Wxh16144](https://github.com/Wxh16144)
+- 🆕 Alert could support linear-gradient background by `colorInfoBg` token. [#46188](https://github.com/ant-design/ant-design/pull/46188)
+- 🆕 `Form.useWatch` support selector function param. [#46180](https://github.com/ant-design/ant-design/pull/46180) [@crazyair](https://github.com/crazyair)
+- 🆕 Slider support `onChangeComplete` and deprecate `onAfterChange`. [#46182](https://github.com/ant-design/ant-design/pull/46182) [@MadCcc](https://github.com/MadCcc)
+- 🆕 Tabs `items` support `icon` prop. [#46096](https://github.com/ant-design/ant-design/pull/46096) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Tour supports `getPopupContainer` property. [#45751](https://github.com/ant-design/ant-design/pull/45751) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Switch support for `value` and `defaultValue` props. [#45747](https://github.com/ant-design/ant-design/pull/45747) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix that clicking Form `tooltip` icon should not trigger Switch. [#46155](https://github.com/ant-design/ant-design/pull/46155)
+- 🐞 Fix Notification that icon should have line-height. [#46148](https://github.com/ant-design/ant-design/pull/46148) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Progress that gradient in line should follow percent. [#46209](https://github.com/ant-design/ant-design/pull/46209) [@MadCcc](https://github.com/MadCcc)
+- 💄 Button could be customized to gradient style. [#46192](https://github.com/ant-design/ant-design/pull/46192)
+- 💄 Fix style of InputNumber with `addon` inside Space.Compact. [#46130](https://github.com/ant-design/ant-design/pull/46130) [@MadCcc](https://github.com/MadCcc)
+- TypeScript
+  - 🤖 Update `FloatButtonProps` type with `React.DOMAttributes` in FloatButton. [#46175](https://github.com/ant-design/ant-design/pull/46175) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 5.11.5

 `2023-11-27`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -16,6 +16,33 @@ tag: vVERSION

 ---

+## 5.12.1
+
+`2023-12-04`
+
+- 🐞 MISC: 修复 token 转换 less 变量丢失的问题。[#46250](https://github.com/ant-design/ant-design/pull/46250)
+- 🐞 修复 Notification 标题太长时会与关闭图标重叠的问题。[#46211](https://github.com/ant-design/ant-design/pull/46211) [@zh-lx](https://github.com/zh-lx)
+
+## 5.12.0
+
+`2023-12-04`
+
+- 🔥 Component Token 支持 CSS 变量模式，详情见 [使用 CSS 变量](/docs/react/css-variables-cn)。感谢以下同学对此的贡献：[@li-jia-nan](https://github.com/li-jia-nan) [@RedJue](https://github.com/RedJue) [@c0dedance](https://github.com/c0dedance) [@kiner-tang](https://github.com/kiner-tang) [@JarvisArt](https://github.com/JarvisArt) [@cc-hearts](https://github.com/cc-hearts)
+- 🛠 rc-pagination 重构为 FC。[#46204](https://github.com/ant-design/ant-design/pull/46204) [@Wxh16144](https://github.com/Wxh16144)
+- 🆕 `Form.useWatch` 支持 selector 函数参数调用。[#46180](https://github.com/ant-design/ant-design/pull/46180) [@crazyair](https://github.com/crazyair)
+- 🆕 Slider 组件支持 `onChangeComplete` 事件，并废弃 `onAfterChange`。[#46182](https://github.com/ant-design/ant-design/pull/46182) [@MadCcc](https://github.com/MadCcc)
+- 🆕 Tabs 配置项 `items` 支持 `icon` 属性。[#46096](https://github.com/ant-design/ant-design/pull/46096) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Tour 支持 `getPopupContainer` 属性。[#45751](https://github.com/ant-design/ant-design/pull/45751) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Switch 支持 `value` and `defaultValue` 属性。[#45747](https://github.com/ant-design/ant-design/pull/45747) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Progress 进度条视觉效果，渐变效果应该随着百分比改变。[#46209](https://github.com/ant-design/ant-design/pull/46209) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复点击 Form `tooltip` 图标会触发 Switch 切换的问题。[#46155](https://github.com/ant-design/ant-design/pull/46155)
+- 🐞 修复 Notification 图标行高为 0 的问题。[#46148](https://github.com/ant-design/ant-design/pull/46148) [@MadCcc](https://github.com/MadCcc)
+- 💄 Button 按钮支持自定义为渐变色风格。[#46192](https://github.com/ant-design/ant-design/pull/46192)
+- 💄 Alert 背景色现在可以通过 `colorInfoBg` token 定义为渐变色。[#46188](https://github.com/ant-design/ant-design/pull/46188)
+- 💄 修复 InputNumber 带有 `addon` 时在 Space.Compact 下使用的样式问题。[#46130](https://github.com/ant-design/ant-design/pull/46130) [@MadCcc](https://github.com/MadCcc)
+- TypeScript
+  - 🤖 更新 FloatButton 的类型定义，透出原生事件处理函数类型。[#46175](https://github.com/ant-design/ant-design/pull/46175) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 5.11.5

 `2023-11-27`
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@ -97,7 +97,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
      color: colorText,
    },

-    [`&${noticeCls}-closable ${noticeCls}-message`]: {
+    [`${noticeCls}-closable ${noticeCls}-message`]: {
      paddingInlineEnd: token.paddingLG,
    },

--- a/components/theme/tests/token.test.tsx
+++ b/components/theme/tests/token.test.tsx
@ -37,6 +37,7 @@ describe('Theme', () => {
    expect(result.current!.token).toEqual(
      expect.objectContaining({
        colorPrimary: '#1677ff',
+        'blue-6': '#1677ff',
      }),
    );
  });
--- a/components/theme/interface/index.ts
+++ b/components/theme/interface/index.ts
@ -27,6 +27,7 @@ export type {
 } from './maps';
 export { PresetColors } from './presetColors';
 export type {
+  LegacyColorPalettes,
  ColorPalettes,
  PresetColorKey,
  PresetColorType,
--- a/components/theme/interface/maps/index.ts
+++ b/components/theme/interface/maps/index.ts
@ -1,4 +1,4 @@
-import type { ColorPalettes } from '../presetColors';
+import type { ColorPalettes, LegacyColorPalettes } from '../presetColors';
 import type { SeedToken } from '../seeds';
 import type { ColorMapToken } from './colors';
 import type { FontMapToken } from './font';
@ -37,6 +37,7 @@ export interface CommonMapToken extends StyleMapToken {
 export interface MapToken
  extends SeedToken,
    ColorPalettes,
+    LegacyColorPalettes,
    ColorMapToken,
    SizeMapToken,
    HeightMapToken,
--- a/components/theme/interface/presetColors.ts
+++ b/components/theme/interface/presetColors.ts
@ -14,12 +14,19 @@ export const PresetColors = [
  'gold',
 ] as const;

-export type PresetColorKey = typeof PresetColors[number];
+export type PresetColorKey = (typeof PresetColors)[number];

 export type PresetColorType = Record<PresetColorKey, string>;

 type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;

+export type LegacyColorPalettes = {
+  /**
+   * @deprecated
+   */
+  [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
+};
+
 export type ColorPalettes = {
  [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
 };
--- a/components/theme/themes/dark/index.ts
+++ b/components/theme/themes/dark/index.ts
@ -1,6 +1,12 @@
 import { generate } from '@ant-design/colors';
 import type { DerivativeFunc } from '@ant-design/cssinjs';
-import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
+import type {
+  ColorPalettes,
+  LegacyColorPalettes,
+  MapToken,
+  PresetColorType,
+  SeedToken,
+} from '../../interface';
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
@ -12,17 +18,21 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
      const colors = generate(token[colorKey], { theme: 'dark' });

      return new Array(10).fill(1).reduce((prev, _, i) => {
+        prev[`${colorKey}-${i + 1}`] = colors[i];
        prev[`${colorKey}${i + 1}`] = colors[i];
        return prev;
-      }, {}) as ColorPalettes;
+      }, {}) as ColorPalettes & LegacyColorPalettes;
    })
-    .reduce((prev, cur) => {
+    .reduce(
+      (prev, cur) => {
        prev = {
          ...prev,
          ...cur,
        };
        return prev;
-    }, {} as ColorPalettes);
+      },
+      {} as ColorPalettes & LegacyColorPalettes,
+    );

  const mergedMapToken = mapToken ?? defaultAlgorithm(token);

--- a/components/theme/themes/default/index.ts
+++ b/components/theme/themes/default/index.ts
@ -1,7 +1,13 @@
 import { generate } from '@ant-design/colors';
 import genControlHeight from '../shared/genControlHeight';
 import genSizeMapToken from '../shared/genSizeMapToken';
-import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
+import type {
+  ColorPalettes,
+  LegacyColorPalettes,
+  MapToken,
+  PresetColorType,
+  SeedToken,
+} from '../../interface';
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import genCommonMapToken from '../shared/genCommonMapToken';
@ -14,17 +20,21 @@ export default function derivative(token: SeedToken): MapToken {
      const colors = generate(token[colorKey]);

      return new Array(10).fill(1).reduce((prev, _, i) => {
+        prev[`${colorKey}-${i + 1}`] = colors[i];
        prev[`${colorKey}${i + 1}`] = colors[i];
        return prev;
-      }, {}) as ColorPalettes;
+      }, {}) as ColorPalettes & LegacyColorPalettes;
    })
-    .reduce((prev, cur) => {
+    .reduce(
+      (prev, cur) => {
        prev = {
          ...prev,
          ...cur,
        };
        return prev;
-    }, {} as ColorPalettes);
+      },
+      {} as ColorPalettes & LegacyColorPalettes,
+    );

  return {
    ...token,
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "5.11.5",
+  "version": "5.12.1",
  "description": "An enterprise-class UI design language and React components implementation",
  "keywords": [
    "ant",
@ -112,7 +112,7 @@
  ],
  "dependencies": {
    "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.18.0-alpha.5",
+    "@ant-design/cssinjs": "^1.18.0",
    "@ant-design/icons": "^5.2.6",
    "@ant-design/react-slick": "~1.0.2",
    "@babel/runtime": "^7.23.4",