chore: auto merge branches (#46244)

chore: feature merge master

.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 ? (

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -94,6 +94,7 @@ const useStyle = () => {
 
       child: css`
         position: relative;
+        width: 100%;
         z-index: 1;
       `,
     };

.dumi/pages/index/components/Theme/index.tsx

@@ -407,8 +407,8 @@ export default function Theme() {
         components: {
           Layout: isLight
             ? {
-                colorBgHeader: 'transparent',
+                headerBg: 'transparent',
-                colorBgBody: 'transparent',
+                bodyBg: 'transparent',
               }
             : {
                 // colorBgBody: 'transparent',

.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> {
+export function useSiteData(): Partial<SiteData> | undefined {
-  return useFetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json');
+  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 = () => ({

.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>

.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}
-        <Articles />
-      </Suspense>
     </div>
   );
 };

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`

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`

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,
     },
 

components/theme/__tests__/token.test.tsx

@@ -37,6 +37,7 @@ describe('Theme', () => {
     expect(result.current!.token).toEqual(
       expect.objectContaining({
         colorPrimary: '#1677ff',
+        'blue-6': '#1677ff',
       }),
     );
   });

components/theme/interface/index.ts

@@ -27,6 +27,7 @@ export type {
 } from './maps';
 export { PresetColors } from './presetColors';
 export type {
+  LegacyColorPalettes,
   ColorPalettes,
   PresetColorKey,
   PresetColorType,

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,

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;
 };

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);
 

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,

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",