Merge branch 'master' into feature-merge-master

.dumi/pages/index/components/Banner.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { Button, Space, Typography } from 'antd';
 import { Link, useLocation } from 'dumi';
+import { css } from '@emotion/react';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import { GroupMask } from './Group';
 import * as utils from '../../../theme/utils';
+import SiteContext from './SiteContext';
+import topicImage from './images/topic.png';
 
 const locales = {
   cn: {
@@ -20,6 +23,35 @@ const locales = {
   },
 };
 
+const useStyle = () => {
+  const { token } = useSiteToken();
+  const { isMobile } = React.useContext(SiteContext);
+
+  return {
+    titleBase: css`
+      h1& {
+        font-family: AliPuHui, ${token.fontFamily};
+      }
+    `,
+    title: isMobile
+      ? css`
+          h1& {
+            margin-bottom: ${token.margin}px;
+            font-weight: normal;
+            font-size: ${token.fontSizeHeading1 + 2}px;
+            line-height: ${token.lineHeightHeading2};
+          }
+        `
+      : css`
+          h1& {
+            margin-bottom: ${token.marginMD}px;
+            font-weight: 900;
+            font-size: 68px;
+          }
+        `,
+  };
+};
+
 export interface BannerProps {
   children?: React.ReactNode;
 }
@@ -28,53 +60,59 @@ export default function Banner({ children }: BannerProps) {
   const [locale] = useLocale(locales);
   const { pathname, search } = useLocation();
   const { token } = useSiteToken();
+  const styles = useStyle();
+  const { isMobile } = React.useContext(SiteContext);
 
   const isZhCN = utils.isZhCN(pathname);
 
   return (
     <>
       {/* Banner Placeholder Motion */}
-      <div
+      {isMobile ? (
-        style={{
+        <img src={topicImage} alt="" style={{ width: '100%' }} />
-          height: 320,
+      ) : (
-          background: '#77C6FF',
-          display: 'flex',
-          flexWrap: 'nowrap',
-          justifyContent: 'center',
-        }}
-      >
         <div
           style={{
-            backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
+            height: 320,
-            flex: 'auto',
+            background: '#77C6FF',
-            backgroundRepeat: 'repeat-x',
+            display: 'flex',
-            backgroundPosition: '100% 0',
+            flexWrap: 'nowrap',
-            backgroundSize: 'auto 100%',
+            justifyContent: 'center',
           }}
-        />
+        >
-
+          <div
-        <video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
+            style={{
-          <source
+              backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
-            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
+              flex: 'auto',
-            type="video/webm"
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '100% 0',
+              backgroundSize: 'auto 100%',
+            }}
           />
-          <source
-            src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
-            type="video/mp4"
-          />
-        </video>
 
-        <div
+          <video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
-          style={{
+            <source
-            backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
+              src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
-            flex: 'auto',
+              type="video/webm"
-            backgroundRepeat: 'repeat-x',
+            />
-            backgroundPosition: '0 0',
+            <source
-            backgroundSize: 'auto 100%',
+              src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
-            marginLeft: -1,
+              type="video/mp4"
-          }}
+            />
-        />
+          </video>
-      </div>
+
+          <div
+            style={{
+              backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
+              flex: 'auto',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 0',
+              backgroundSize: 'auto 100%',
+              marginLeft: -1,
+            }}
+          />
+        </div>
+      )}
 
       {/* Logo */}
       <div style={{ position: 'relative', background: '#fff' }}>
@@ -94,34 +132,26 @@ export default function Banner({ children }: BannerProps) {
         >
           {/* Image Left Top */}
           <img
-            style={{ position: 'absolute', left: 0, top: 0, width: 240 }}
+            style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
             src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
             alt="bg"
           />
-          {/* Image Left Top */}
+          {/* Image Right Top */}
           <img
-            style={{ position: 'absolute', right: 120, top: 0, width: 240 }}
+            style={{ position: 'absolute', right: isMobile ? 0 : 120, top: 0, width: 240 }}
             src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
             alt="bg"
           />
 
-          <Typography.Title
+          <Typography.Title level={1} css={[styles.titleBase, styles.title]}>
-            level={1}
-            style={{
-              fontFamily: `AliPuHui, ${token.fontFamily}`,
-              fontSize: token.fontSizes[9],
-              lineHeight: token.lineHeights[9],
-              fontWeight: 900,
-              marginBottom: token.marginMD,
-            }}
-          >
             Ant Design 5.0
           </Typography.Title>
           <Typography.Paragraph
             style={{
-              fontSize: token.fontSizeHeading5,
+              fontSize: isMobile ? token.fontSizeHeading5 - 2 : token.fontSizeHeading5,
-              lineHeight: token.lineHeightHeading5,
+              lineHeight: isMobile ? token.lineHeightSM : token.lineHeightHeading5,
               marginBottom: token.marginMD * 2,
+              padding: isMobile ? `0 ${token.paddingLG + 2}px` : 0,
             }}
           >
             <div>{locale.slogan}</div>

.dumi/pages/index/components/BannerRecommends.tsx

@@ -1,75 +1,127 @@
 import * as React from 'react';
-import { Skeleton, Typography } from 'antd';
+import { Typography, Skeleton, Carousel } from 'antd';
+import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { Extra, Icon } from './util';
 import useSiteToken from '../../../hooks/useSiteToken';
+import SiteContext from './SiteContext';
+import { useCarouselStyle } from './util';
 
 const useStyle = () => {
   const { token } = useSiteToken();
+  const { carousel } = useCarouselStyle();
 
   return {
-    card: css`
+    itemBase: css`
-      border: ${token.lineWidth}px solid ${token.colorBorderSecondary};
-      border-radius: ${token.borderRadiusLG}px;
-      padding-block: ${token.paddingMD}px;
-      padding-inline: ${token.paddingLG}px;
-      flex: 1 1 0;
-      width: 33%;
       display: flex;
+      flex: 1 1 0;
       flex-direction: column;
       align-items: stretch;
       text-decoration: none;
-      transition: all ${token.motionDurationSlow};
       background: ${token.colorBgContainer};
-
+      border: ${token.lineWidth}px solid ${token.colorBorderSecondary};
+      border-radius: ${token.borderRadiusLG}px;
+      transition: all ${token.motionDurationSlow};
+      padding-block: ${token.paddingMD}px;
+      padding-inline: ${token.paddingLG}px;
+    `,
+    cardItem: css`
+      width: 33%;
       &:hover {
         box-shadow: ${token.boxShadowCard};
       }
     `,
+    sliderItem: css`
+      margin: 0 ${token.margin}px;
+      text-align: start;
+    `,
+    container: css`
+      display: flex;
+      max-width: 1208px;
+      margin-inline: auto;
+      box-sizing: border-box;
+      padding-inline: ${token.marginXXL}px;
+      column-gap: ${token.paddingMD * 2}px;
+      align-items: stretch;
+      text-align: start;
+    `,
+    carousel,
   };
 };
 
+interface RecommendItemProps {
+  extra: Extra;
+  index: number;
+  icons: Icon[];
+  itemCss: SerializedStyles;
+}
+const RecommendItem = ({ extra, index, icons, itemCss }: RecommendItemProps) => {
+  const style = useStyle();
+  const { token } = useSiteToken();
+
+  if (!extra) {
+    return <Skeleton key={index} />;
+  }
+  const icon = icons.find((i) => i.name === extra.source);
+
+  return (
+    <a
+      key={extra?.title}
+      href={extra.href}
+      target="_blank"
+      css={[style.itemBase, itemCss]}
+      rel="noreferrer"
+    >
+      <Typography.Title level={5}>{extra?.title}</Typography.Title>
+      <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
+        {extra.description}
+      </Typography.Paragraph>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Typography.Text>{extra.date}</Typography.Text>
+        {icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
+      </div>
+    </a>
+  );
+};
+
 export interface BannerRecommendsProps {
   extras?: Extra[];
   icons?: Icon[];
 }
 
 export default function BannerRecommends({ extras = [], icons = [] }: BannerRecommendsProps) {
-  const style = useStyle();
+  const styles = useStyle();
+  const { isMobile } = React.useContext(SiteContext);
   const first3 = extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
-  const { token } = useSiteToken();
 
   return (
-    <div
+    <div>
-      style={{
+      {isMobile ? (
-        maxWidth: 1208,
+        <Carousel css={styles.carousel}>
-        marginInline: 'auto',
+          {first3.map((extra, index) => (
-        boxSizing: 'border-box',
+            <div key={index}>
-        paddingInline: token.marginXXL,
+              <RecommendItem
-        display: 'flex',
+                extra={extra}
-        columnGap: token.paddingMD * 2,
+                index={index}
-        alignItems: 'stretch',
+                icons={icons}
-        textAlign: 'start',
+                itemCss={styles.sliderItem}
-      }}
+              />
-    >
-      {first3.map((extra, index) => {
-        if (!extra) {
-          return <Skeleton key={index} />;
-        }
-        const icon = icons.find((i) => i.name === extra.source);
-        return (
-          <a key={extra?.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
-            <Typography.Title level={5}>{extra?.title}</Typography.Title>
-            <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
-              {extra.description}
-            </Typography.Paragraph>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Typography.Text>{extra.date}</Typography.Text>
-              {icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
             </div>
-          </a>
+          ))}
-        );
+        </Carousel>
-      })}
+      ) : (
+        <div css={styles.container}>
+          {first3.map((extra, index) => (
+            <RecommendItem
+              extra={extra}
+              index={index}
+              icons={icons}
+              itemCss={styles.cardItem}
+              key={index}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }

.dumi/pages/index/components/ComponentsList.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-pascal-case */
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   Space,
   Typography,
@@ -10,12 +10,15 @@ import {
   Modal,
   FloatButton,
   Progress,
+  Carousel,
 } from 'antd';
 import dayjs from 'dayjs';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
 import useSiteToken from '../../../hooks/useSiteToken';
 import useLocale from '../../../hooks/useLocale';
+import SiteContext from './SiteContext';
+import { useCarouselStyle } from './util';
 
 const SAMPLE_CONTENT_EN =
   'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.';
@@ -54,6 +57,7 @@ const locales = {
 
 const useStyle = () => {
   const { token } = useSiteToken();
+  const { carousel } = useCarouselStyle();
 
   return {
     card: css`
@@ -80,13 +84,25 @@ const useStyle = () => {
       filter: blur(40px);
       opacity: 0.1;
     `,
+    mobileCard: css`
+      height: 395px;
+    `,
+    carousel,
   };
 };
 
+interface ComponentItemProps {
+  title: React.ReactNode;
+  node: React.ReactNode;
+  type: 'new' | 'update';
+  index: number;
+}
+
 export default function ComponentsList() {
   const { token } = useSiteToken();
   const styles = useStyle();
   const [locale] = useLocale(locales);
+  const { isMobile } = useContext(SiteContext);
 
   const COMPONENTS: {
     title: React.ReactNode;
@@ -110,12 +126,16 @@ export default function ComponentsList() {
         node: (
           <DatePicker._InternalPanelDoNotUseOrYouWillBeFired
             showToday={false}
-            presets={[
+            presets={
-              { label: locale.yesterday, value: dayjs().add(-1, 'd') },
+              isMobile
-              { label: locale.lastWeek, value: dayjs().add(-7, 'd') },
+                ? []
-              { label: locale.lastMonth, value: dayjs().add(-1, 'month') },
+                : [
-              { label: locale.lastYear, value: dayjs().add(-1, 'year') },
+                    { label: locale.yesterday, value: dayjs().add(-1, 'd') },
-            ]}
+                    { label: locale.lastWeek, value: dayjs().add(-7, 'd') },
+                    { label: locale.lastMonth, value: dayjs().add(-1, 'month') },
+                    { label: locale.lastYear, value: dayjs().add(-1, 'year') },
+                  ]
+            }
             value={dayjs('2022-11-18 14:00:00')}
           />
         ),
@@ -149,7 +169,7 @@ export default function ComponentsList() {
           <Tour._InternalPanelDoNotUseOrYouWillBeFired
             title="Ant Design 5.0"
             description={locale.tour}
-            style={{ width: 350 }}
+            style={{ width: isMobile ? 'auto' : 350 }}
             current={3}
             total={9}
           />
@@ -211,49 +231,61 @@ export default function ComponentsList() {
         ),
       },
     ],
-    [],
+    [isMobile],
   );
 
-  return (
+  const ComponentItem = ({ title, node, type, index }: ComponentItemProps) => {
+    const tagColor = type === 'new' ? 'processing' : 'warning';
+    const tagText = type === 'new' ? locale.new : locale.update;
+
+    return (
+      <div key={index} css={[styles.card, isMobile && styles.mobileCard]}>
+        {/* Decorator */}
+        <div
+          css={styles.cardCircle}
+          style={{
+            right: (index % 2) * -20 - 20,
+            bottom: (index % 3) * -40 - 20,
+          }}
+        />
+
+        {/* Title */}
+        <Space>
+          <Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
+            {title}
+          </Typography.Title>
+          <Tag color={tagColor}>{tagText}</Tag>
+        </Space>
+
+        <div
+          style={{
+            marginTop: token.paddingLG,
+            flex: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {node}
+        </div>
+      </div>
+    );
+  };
+
+  return isMobile ? (
+    <div style={{ margin: '0 16px' }}>
+      <Carousel css={styles.carousel}>
+        {COMPONENTS.map(({ title, node, type }, index) => (
+          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
+        ))}
+      </Carousel>
+    </div>
+  ) : (
     <div style={{ width: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
       <div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
-        {COMPONENTS.map(({ title, node, type }, index) => {
+        {COMPONENTS.map(({ title, node, type }, index) => (
-          const tagColor = type === 'new' ? 'processing' : 'warning';
+          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
-          const tagText = type === 'new' ? locale.new : locale.update;
+        ))}
-
-          return (
-            <div key={index} css={styles.card}>
-              {/* Decorator */}
-              <div
-                css={styles.cardCircle}
-                style={{
-                  right: (index % 2) * -20 - 20,
-                  bottom: (index % 3) * -40 - 20,
-                }}
-              />
-
-              {/* Title */}
-              <Space>
-                <Typography.Title level={4} style={{ fontWeight: 'normal', margin: 0 }}>
-                  {title}
-                </Typography.Title>
-                <Tag color={tagColor}>{tagText}</Tag>
-              </Space>
-
-              <div
-                style={{
-                  marginTop: token.paddingLG,
-                  flex: 'auto',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                {node}
-              </div>
-            </div>
-          );
-        })}
       </div>
     </div>
   );

.dumi/pages/index/components/DesignFramework.tsx

@@ -1,10 +1,11 @@
 import { Col, Row, Typography } from 'antd';
-import React from 'react';
+import React, { useContext } from 'react';
 import { css } from '@emotion/react';
 import { Link, useLocation } from 'dumi';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import * as utils from '../../../theme/utils';
+import SiteContext from './SiteContext';
 
 const SECONDARY_LIST = [
   {
@@ -98,6 +99,8 @@ export default function DesignFramework() {
   const style = useStyle();
   const { pathname, search } = useLocation();
   const isZhCN = utils.isZhCN(pathname);
+  const { isMobile } = useContext(SiteContext);
+  const colSpan = isMobile ? 24 : 8;
 
   const MAINLY_LIST = [
     {
@@ -124,7 +127,7 @@ export default function DesignFramework() {
         const desc = locale[`${key}Desc` as keyof typeof locale];
 
         return (
-          <Col key={index} span={8}>
+          <Col key={index} span={colSpan}>
             <Link to={path}>
               <div css={style.card}>
                 <img alt={title} src={img} />
@@ -149,7 +152,7 @@ export default function DesignFramework() {
         const desc = locale[`${key}Desc` as keyof typeof locale];
 
         return (
-          <Col key={index} span={8}>
+          <Col key={index} span={colSpan}>
             <a css={style.cardMini} target="_blank" href={url} rel="noreferrer">
               <img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
 

.dumi/pages/index/components/Group.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { useContext } from 'react';
 import { Typography } from 'antd';
 import useSiteToken from '../../../hooks/useSiteToken';
+import SiteContext from './SiteContext';
 
 export interface GroupMaskProps {
   style?: React.CSSProperties;
@@ -49,6 +51,7 @@ export interface GroupProps {
 export default function Group(props: GroupProps) {
   const { id, title, titleColor, description, children, decoration, background, collapse } = props;
   const { token } = useSiteToken();
+  const { isMobile } = useContext(SiteContext);
 
   const marginStyle: React.CSSProperties = collapse
     ? {}
@@ -56,7 +59,7 @@ export default function Group(props: GroupProps) {
         maxWidth: 1208,
         marginInline: 'auto',
         boxSizing: 'border-box',
-        paddingInline: token.marginXXL,
+        paddingInline: isMobile ? token.margin : token.marginXXL,
       };
   const childNode = (
     <>
@@ -69,11 +72,17 @@ export default function Group(props: GroupProps) {
             color: titleColor,
             // Special for the title
             fontFamily: `AliPuHui, ${token.fontFamily}`,
+            fontSize: isMobile ? token.fontSizeHeading2 : token.fontSizeHeading1,
           }}
         >
           {title}
         </Typography.Title>
-        <Typography.Paragraph style={{ marginBottom: token.marginFarXS, color: titleColor }}>
+        <Typography.Paragraph
+          style={{
+            marginBottom: isMobile ? token.marginXXL : token.marginFarXS,
+            color: titleColor,
+          }}
+        >
           {description}
         </Typography.Paragraph>
       </div>

.dumi/pages/index/components/SiteContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface SiteContextProps {
+  isMobile: boolean;
+}
+
+const SiteContext = React.createContext<SiteContextProps>({
+  isMobile: false,
+});
+
+export default SiteContext;

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

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { css } from '@emotion/react';
+import { Typography, Carousel } from 'antd';
+import { useCarouselStyle } from '../util';
+import useSiteToken from '../../../../hooks/useSiteToken';
+
+const useStyle = () => {
+  const { carousel } = useCarouselStyle();
+  return {
+    carousel,
+    container: css`
+      position: relative;
+    `,
+    title: css`
+      position: absolute;
+      top: 15%;
+      z-index: 1;
+      width: 100%;
+      text-align: center;
+    `,
+  };
+};
+
+const mobileImageConfigList = [
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KsMrRZaciFcAAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: 'rgba(0,0,0,.88)',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3FkqR6XRNgoAAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cSX_RbD3k9wAAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MldsRZeax6EAAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xCAmSL0xlZ8AAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*vCfCSbiI_VIAAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xCAmSL0xlZ8AAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BeDBTY9UnXIAAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+  {
+    imageSrc:
+      'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Q63XTbk8YaMAAAAAAAAAAAAADrJ8AQ/original',
+    titleColor: '#fff',
+  },
+];
+
+export interface MobileCarouselProps {
+  id?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+export default function MobileCarousel(props: MobileCarouselProps) {
+  const styles = useStyle();
+  const { id, title, description } = props;
+  const { token } = useSiteToken();
+  const [currentSlider, setCurrentSlider] = useState<number>(0);
+
+  return (
+    <div css={styles.container}>
+      <div css={styles.title}>
+        <Typography.Title
+          id={id}
+          level={1}
+          style={{
+            fontWeight: 900,
+            color: mobileImageConfigList[currentSlider].titleColor,
+            // Special for the title
+            fontFamily: `AliPuHui, ${token.fontFamily}`,
+            fontSize: token.fontSizeHeading2,
+          }}
+        >
+          {title}
+        </Typography.Title>
+        <Typography.Paragraph
+          style={{
+            marginBottom: token.marginXXL,
+            color: mobileImageConfigList[currentSlider].titleColor,
+          }}
+        >
+          {description}
+        </Typography.Paragraph>
+      </div>
+      <Carousel css={styles.carousel} afterChange={setCurrentSlider}>
+        {mobileImageConfigList.map((item, index) => (
+          <div key={index}>
+            <img src={item.imageSrc} alt="" style={{ width: '100%' }} />
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  );
+}

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

@@ -30,6 +30,9 @@ import RadiusPicker from './RadiusPicker';
 import Group from '../Group';
 import BackgroundImage from './BackgroundImage';
 import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil';
+import SiteContext from '../SiteContext';
+import { useCarouselStyle } from '../util';
+import MobileCarousel from './MobileCarousel';
 
 const { Header, Content, Sider } = Layout;
 
@@ -81,6 +84,7 @@ const locales = {
 // ============================= Style =============================
 const useStyle = () => {
   const { token } = useSiteToken();
+  const { carousel } = useCarouselStyle();
 
   return {
     demo: css`
@@ -177,6 +181,7 @@ const useStyle = () => {
       width: 800px;
       margin: 0 auto;
     `,
+    carousel,
   };
 };
 
@@ -278,6 +283,7 @@ export default function Theme() {
   const { compact, themeType, ...themeToken } = themeData;
   const isLight = themeType !== 'dark';
   const [form] = Form.useForm();
+  const { isMobile } = React.useContext(SiteContext);
 
   // const algorithmFn = isLight ? theme.defaultAlgorithm : theme.darkAlgorithm;
   const algorithmFn = React.useMemo(() => {
@@ -487,8 +493,22 @@ export default function Theme() {
   const posStyle: React.CSSProperties = {
     position: 'absolute',
   };
+  const leftTopImageStyle = {
+    left: '50%',
+    transform: 'translate3d(-900px, 0, 0)',
+    top: -100,
+    height: 500,
+  };
+  const rightBottomImageStyle = {
+    right: '50%',
+    transform: 'translate3d(750px, 0, 0)',
+    bottom: -100,
+    height: 287,
+  };
 
-  return (
+  return isMobile ? (
+    <MobileCarousel title={locale.themeTitle} description={locale.themeDesc} id="flexible" />
+  ) : (
     <Group
       title={locale.themeTitle}
       titleColor={getTitleColor(themeData.colorPrimary, isLight)}
@@ -509,10 +529,7 @@ export default function Theme() {
             <img
               style={{
                 ...posStyle,
-                left: '50%',
+                ...leftTopImageStyle,
-                transform: 'translate3d(-900px, 0, 0)',
-                top: -100,
-                height: 500,
               }}
               src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
               alt=""
@@ -521,10 +538,7 @@ export default function Theme() {
             <img
               style={{
                 ...posStyle,
-                right: '50%',
+                ...rightBottomImageStyle,
-                transform: 'translate3d(750px, 0, 0)',
-                bottom: -100,
-                height: 287,
               }}
               src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
               alt=""

.dumi/pages/index/components/util.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import * as React from 'react';
+import { css } from '@emotion/react';
 
 export interface Author {
   avatar: string;
@@ -98,3 +99,28 @@ export function useSiteData(): [Partial<SiteData>, boolean] {
 
   return [data, loading];
 }
+
+export const useCarouselStyle = () => ({
+  carousel: css`
+      .slick-dots.slick-dots-bottom {
+        bottom: -22px;
+        li {
+          width: 6px;
+          height: 6px;
+          background: #e1eeff;
+          border-radius: 50%;
+          button {
+            height: 6px;
+            background: #e1eeff;
+            border-radius: 50%;
+          }
+          &.slick-active {
+            background: #4b9cff;
+            button {
+              background: #4b9cff;
+            }
+          }
+        }
+      }
+    `,
+});

.dumi/pages/index/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useLocale as useDumiLocale } from 'dumi';
 import { ConfigProvider } from 'antd';
 import useLocale from '../../hooks/useLocale';
@@ -9,6 +9,7 @@ import Theme from './components/Theme';
 import BannerRecommends from './components/BannerRecommends';
 import ComponentsList from './components/ComponentsList';
 import DesignFramework from './components/DesignFramework';
+import SiteContext from './components/SiteContext';
 
 const locales = {
   cn: {
@@ -33,44 +34,61 @@ const Homepage: React.FC = () => {
   const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
 
   const [siteData] = useSiteData();
+  const [isMobile, setIsMobile] = React.useState<boolean>(false);
+
+  const updateMobileMode = () => {
+    setIsMobile(window.innerWidth < 768);
+  };
+
+  useEffect(() => {
+    updateMobileMode();
+    window.addEventListener('resize', updateMobileMode);
+    return () => {
+      window.removeEventListener('resize', updateMobileMode);
+    };
+  }, []);
+
+  const siteValue = useMemo(() => ({ isMobile }), [isMobile]);
 
   return (
     <ConfigProvider theme={{ algorithm: undefined }}>
-      <section>
+      <SiteContext.Provider value={siteValue}>
-        <Banner>
+        <section>
-          <BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
+          <Banner>
-        </Banner>
+            <BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
+          </Banner>
 
-        <div>
+          <div>
-          <Theme />
+            <Theme />
-          <Group
+            <Group
-            background="#fff"
+              background="#fff"
-            collapse
+              collapse
-            title={locale.assetsTitle}
+              title={locale.assetsTitle}
-            description={locale.assetsDesc}
+              description={locale.assetsDesc}
-            id="design"
+              id="design"
-          >
+            >
-            <ComponentsList />
+              <ComponentsList />
-          </Group>
+            </Group>
-          <Group
+            <Group
-            title={locale.designTitle}
+              title={locale.designTitle}
-            description={locale.designDesc}
+              description={locale.designDesc}
-            background="#F5F8FF"
+              background="#F5F8FF"
-            decoration={
+              decoration={
-              <>
+                <>
-                {/* Image Left Top */}
+                  {/* Image Left Top */}
-                <img
+                  <img
-                  style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
+                    style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
-                  src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
+                    src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
-                  alt=""
+                    alt=""
-                />
+                  />
-              </>
+                </>
-            }
+              }
-          >
+            >
-            <DesignFramework />
+              <DesignFramework />
-          </Group>
+            </Group>
-        </div>
+          </div>
-      </section>
+        </section>
+      </SiteContext.Provider>
     </ConfigProvider>
   );
 };

.dumi/pages/theme-editor/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer';
+import { enUS, zhCN, ThemeEditor } from 'antd-token-previewer';
 import { Button, ConfigProvider, message, Modal, Typography } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';

.dumi/theme/common/styles/Markdown.tsx

@@ -181,37 +181,6 @@ export default () => {
             }
           }
 
-          .markdown .dumi-default-table-content > table,
-          .markdown > table {
-            width: 100%;
-            margin: 8px 0 16px;
-            direction: ltr;
-            empty-cells: show;
-            border: 1px solid ${token.colorSplit};
-            border-collapse: collapse;
-            border-spacing: 0;
-          }
-
-          .markdown .dumi-default-table-content,
-          .markdown {
-            > table th {
-              color: #5c6b77;
-              font-weight: 500;
-              white-space: nowrap;
-              background: rgba(0, 0, 0, 0.02);
-            }
-          }
-
-          .markdown .dumi-default-table-content,
-          .markdown {
-            > table th,
-            > table td {
-              padding: 16px 24px;
-              text-align: left;
-              border: 1px solid ${token.colorSplit};
-            }
-          }
-
           .markdown table td > a:not(:last-child) {
             margin-right: 0 !important;
 
@@ -294,12 +263,72 @@ export default () => {
           }
 
           .markdown .dumi-default-table {
-            .component-api-table {
+            table {
-              display: block;
+              margin: 0;
+              overflow-x: auto;
+              overflow-y: hidden;
+              margin: 8px 0 16px;
+              direction: ltr;
+              empty-cells: show;
+              border: 1px solid ${token.colorSplit};
+              border-collapse: collapse;
+              border-spacing: 0;
+
+              th,
+              td {
+                padding: 12px 24px;
+                text-align: left;
+                border: 1px solid ${token.colorSplit};
+
+                &:first-child {
+                  border-left: 1px solid ${token.colorSplit};
+                }
+
+                &:last-child {
+                  border-right: 1px solid ${token.colorSplit};
+                }
+
+                img {
+                  max-width: unset;
+                }
+              }
+
+              th {
+                color: #5c6b77;
+                border-width: 1px 1px 2px;
+                font-weight: 500;
+                white-space: nowrap;
+                background: rgba(0, 0, 0, 0.02);
+              }
+
+              tbody tr {
+                transition: all 0.3s;
+
+                &:hover {
+                  background: rgba(60, 90, 100, 0.04);
+                }
+              }
+            }
+
+            table.component-api-table {
+              margin: 2em 0;
+              overflow-x: auto;
+              overflow-y: hidden;
+              font-size: ${Math.max(token.fontSize - 1, 12)}px;
+              font-family: ${token.codeFamily};
+              line-height: ${token.lineHeight};
+              border: 1px solid ${token.colorSplit};
+              border-width: 0 1px;
+
+              th {
+                border-width: 1px 0 2px;
+              }
 
               td {
+                border-width: 1px 0;
                 &:first-child {
                   width: 18%;
+                  min-width: 58px;
                   color: #595959;
                   font-weight: 600;
                   white-space: nowrap;
@@ -307,6 +336,7 @@ export default () => {
 
                 &:nth-child(2) {
                   width: 55%;
+                  min-width: 160px;
                 }
 
                 &:nth-child(3) {
@@ -336,116 +366,10 @@ export default () => {
             }
           }
 
-          .markdown .dumi-default-table {
-            table {
-              margin: 0;
-              overflow-x: auto;
-              overflow-y: hidden;
-              font-size: ${Math.max(token.fontSize - 1, 12)}px;
-              font-family: ${token.codeFamily};
-              line-height: ${token.lineHeight};
-              border: 0;
-              -webkit-overflow-scrolling: touch;
-
-              th,
-              td {
-                padding: 12px;
-                border-color: ${token.colorSplit};
-                border-width: 1px 0;
-
-                &:first-child {
-                  border-left: 1px solid ${token.colorSplit};
-                }
-
-                &:last-child {
-                  border-right: 1px solid ${token.colorSplit};
-                }
-              }
-
-              th {
-                padding-top: 14px;
-                border-width: 1px 0 2px;
-              }
-
-              tbody tr {
-                transition: all 0.3s;
-
-                &:hover {
-                  background: rgba(60, 90, 100, 0.04);
-                }
-              }
-
-              td {
-                &:first-child {
-                  min-width: 58px;
-                }
-              }
-            }
-
-            hr {
-              margin: 12px 0;
-            }
-          }
-
           .grid-demo,
           [id^='components-grid-demo-'] {
-            .demo-row,
-            .code-box-demo .demo-row {
-              margin-bottom: 8px;
-              overflow: hidden;
-              background-image: linear-gradient(
-                90deg,
-                #f5f5f5 4.16666667%,
-                transparent 4.16666667%,
-                transparent 8.33333333%,
-                #f5f5f5 8.33333333%,
-                #f5f5f5 12.5%,
-                transparent 12.5%,
-                transparent 16.66666667%,
-                #f5f5f5 16.66666667%,
-                #f5f5f5 20.83333333%,
-                transparent 20.83333333%,
-                transparent 25%,
-                #f5f5f5 25%,
-                #f5f5f5 29.16666667%,
-                transparent 29.16666667%,
-                transparent 33.33333333%,
-                #f5f5f5 33.33333333%,
-                #f5f5f5 37.5%,
-                transparent 37.5%,
-                transparent 41.66666667%,
-                #f5f5f5 41.66666667%,
-                #f5f5f5 45.83333333%,
-                transparent 45.83333333%,
-                transparent 50%,
-                #f5f5f5 50%,
-                #f5f5f5 54.16666667%,
-                transparent 54.16666667%,
-                transparent 58.33333333%,
-                #f5f5f5 58.33333333%,
-                #f5f5f5 62.5%,
-                transparent 62.5%,
-                transparent 66.66666667%,
-                #f5f5f5 66.66666667%,
-                #f5f5f5 70.83333333%,
-                transparent 70.83333333%,
-                transparent 75%,
-                #f5f5f5 75%,
-                #f5f5f5 79.16666667%,
-                transparent 79.16666667%,
-                transparent 83.33333333%,
-                #f5f5f5 83.33333333%,
-                #f5f5f5 87.5%,
-                transparent 87.5%,
-                transparent 91.66666667%,
-                #f5f5f5 91.66666667%,
-                #f5f5f5 95.83333333%,
-                transparent 95.83333333%
-              );
-            }
-
             ${antCls}-row > div,
-  .code-box-demo ${antCls}-row > div {
+            .code-box-demo ${antCls}-row > div {
               min-height: 30px;
               margin-top: 8px;
               margin-bottom: 8px;
@@ -464,7 +388,7 @@ export default () => {
             }
 
             ${antCls}-row .demo-col,
-  .code-box-demo ${antCls}-row .demo-col {
+            .code-box-demo ${antCls}-row .demo-col {
               margin-top: 0;
               margin-bottom: 0;
               padding: 30px 0;
@@ -479,23 +403,23 @@ export default () => {
             }
 
             ${antCls}-row .demo-col-2,
-  .code-box-demo ${antCls}-row .demo-col-2 {
+            .code-box-demo ${antCls}-row .demo-col-2 {
               background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
             }
 
             ${antCls}-row .demo-col-3,
-  .code-box-demo ${antCls}-row .demo-col-3 {
+            .code-box-demo ${antCls}-row .demo-col-3 {
               color: #999;
               background: rgba(255, 255, 255, 0.2);
             }
 
             ${antCls}-row .demo-col-4,
-  .code-box-demo ${antCls}-row .demo-col-4 {
+            .code-box-demo ${antCls}-row .demo-col-4 {
               background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()};
             }
 
             ${antCls}-row .demo-col-5,
-  .code-box-demo ${antCls}-row .demo-col-5 {
+            .code-box-demo ${antCls}-row .demo-col-5 {
               color: #999;
               background: rgba(255, 255, 255, 0.2);
             }
@@ -528,40 +452,6 @@ export default () => {
               margin-bottom: 0;
             }
           }
-
-          // For Changelog
-          .markdown ul${antCls}-timeline {
-            line-height: 2;
-
-            li${antCls}-timeline-item {
-              margin: 0;
-              padding: 0 0 30px;
-              list-style: none;
-
-              ${antCls}-timeline-item-content {
-                position: relative;
-                top: -14px;
-                padding-left: 32px;
-                font-size: 14px;
-
-                > h2 {
-                  margin-top: 0;
-                  padding-top: 4px;
-                  direction: ltr;
-
-                  span {
-                    ${antCls}-row-rtl & {
-                      float: right;
-                    }
-                  }
-                }
-              }
-            }
-
-            li${antCls}-timeline-item:first-child {
-              margin-top: 40px;
-            }
-          }
         `}
     />
   );

.dumi/theme/slots/Footer/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import RcFooter from 'rc-footer';
 import { Link, FormattedMessage } from 'dumi';
 import type { FooterColumn } from 'rc-footer/lib/column';
@@ -23,6 +23,7 @@ import useLocation from '../../../hooks/useLocation';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import AdditionalInfo from './AdditionalInfo';
+import SiteContext from '../SiteContext';
 
 const locales = {
   cn: {
@@ -35,6 +36,7 @@ const locales = {
 
 const useStyle = () => {
   const { token } = useSiteToken();
+  const { isMobile } = useContext(SiteContext);
   const background = new TinyColor(getAlphaColor('#f0f3fa', '#fff'))
     .onBackground(token.colorBgContainer)
     .toHexString();
@@ -59,7 +61,10 @@ const useStyle = () => {
       }
 
       .rc-footer-column {
-        margin-bottom: 0;
+        margin-bottom: ${isMobile ? 60 : 0}px;
+        :last-child {
+          margin-bottom: ${isMobile ? 20 : 0}px;
+        }
       }
 
       .rc-footer-container {
@@ -69,8 +74,10 @@ const useStyle = () => {
       }
 
       .rc-footer-bottom {
-        font-size: ${token.fontSize}px;
         box-shadow: inset 0 106px 36px -116px rgba(0, 0, 0, 0.14);
+        .rc-footer-bottom-container {
+          font-size: ${token.fontSize}px;
+        }
       }
     `,
   };
@@ -369,7 +376,10 @@ const Footer = () => {
         css={style.footer}
         bottom={
           <>
-            Made with <span style={{ color: '#fff' }}>❤</span> by {locale.owner}
+            <div style={{ opacity: '0.4' }}>
+              Made with <span style={{ color: '#fff' }}>❤</span> by
+            </div>
+            <div>{locale.owner}</div>
           </>
         }
       />

.github/workflows/issue-open-check.yml

@@ -40,7 +40,7 @@ jobs:
           actions: 'check-issue'
           issue-number: ${{ github.event.issue.number }}
           # 格式如：'x1,x2' or  'x1,x2/y1,y2' 最多支持 2 个数组
-          title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant design pro,pro.ant.design/挂了,挂掉了,无法访问,不能访问,访问速度,访问慢,访问不了,出问题,打不开,登不上,can not open,cannot open,can not be reached'
+          title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant design pro,pro.ant.design/挂了,挂掉了,无法访问,不能访问,访问速度,访问慢,访问不了,加载太慢,加载慢,加载很慢,出问题,打不开,登不上,can not open,cannot open,can not be reached'
 
       - name: deal website
         if: steps.checkid.outputs.check-result == 'true'

CHANGELOG.en-US.md

@@ -15,6 +15,20 @@ timeline: true
 
 ---
 
+## 5.0.6
+
+`2022-12-12`
+
+- 🐞 Fix FloatButton `tooltip` property is not support `0` value. [#39425](https://github.com/ant-design/ant-design/pull/39425) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 Fix Space wrapped Select not display clear icon problem when mouse hover. [#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki)
+- 💄 Fix Cascader ul has unexpected margin value. [#39436](https://github.com/ant-design/ant-design/pull/39436) [@ZN1996](https://github.com/ZN1996)
+- 💄 Fix Input has unexpected padding problem in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 Optimize Message padding in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 Fix Radio.Button has unexpected text color in dark mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 Fix Select has unexpected padding problem in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 Fix Slider has unexpected size for marking dot. [#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 Optimize Switch color in dark mode. [#39428](https://github.com/ant-design/ant-design/pull/39428)
+
 ## 5.0.5
 
 `2022-12-08`

CHANGELOG.zh-CN.md

@@ -15,6 +15,20 @@ timeline: true
 
 ---
 
+## 5.0.6
+
+`2022-12-12`
+
+- 🐞 修复 FloatButton 的 `toolip` 属性不支持设置为 `0` 的问题。[#39425](https://github.com/ant-design/ant-design/pull/39425) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 修复 Space 组件包裹的 Select 系列组件在 hover 时清除图标不展示的问题。[#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki)
+- 💄 修复 Cascader 内部 ul 的 margin 值异常的问题。[#39436](https://github.com/ant-design/ant-design/pull/39436) [@ZN1996](https://github.com/ZN1996)
+- 💄 修复 Input 组件在紧凑模式下内边距异常的问题。[#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 优化 Message 组件在紧凑模式下的内边距。[#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 修复 Radio.Button 组件在暗色模式下的文字颜色。[#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 修复 Select 组件在紧凑模式下内边距异常的问题。[#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 修复 Slider 组件标签原点样式问题。[#39428](https://github.com/ant-design/ant-design/pull/39428)
+- 💄 优化 Switch 组件暗色模式下的颜色。[#39428](https://github.com/ant-design/ant-design/pull/39428)
+
 ## 5.0.5
 
 `2022-12-08`

components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,77 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] = `
-<div>
+<div
+  class="ant-row"
+>
   <div
-    class=""
+    class="ant-col ant-col-16"
   >
     <div
-      class="ant-anchor-wrapper"
+      id="part-1"
-      style="max-height:100vh"
+      style="height:100vh;background:rgba(255,0,0,0.02)"
-    >
+    />
+    <div
+      id="part-2"
+      style="height:100vh;background:rgba(0,255,0,0.02)"
+    />
+    <div
+      id="part-3"
+      style="height:100vh;background:rgba(0,0,255,0.02)"
+    />
+  </div>
+  <div
+    class="ant-col ant-col-8"
+  >
+    <div>
       <div
-        class="ant-anchor"
+        class=""
       >
         <div
-          class="ant-anchor-ink"
+          class="ant-anchor-wrapper"
+          style="max-height:100vh"
         >
-          <span
-            class="ant-anchor-ink-ball"
-          />
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
-            title="Basic demo"
-          >
-            Basic demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
-            title="Static demo"
-          >
-            Static demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#api"
-            title="API"
-          >
-            API
-          </a>
           <div
-            class="ant-anchor-link"
+            class="ant-anchor"
           >
-            <a
+            <div
-              class="ant-anchor-link-title"
+              class="ant-anchor-ink"
-              href="#anchor-props"
-              title="Anchor Props"
             >
-              Anchor Props
+              <span
-            </a>
+                class="ant-anchor-ink-ball"
-          </div>
+              />
-          <div
+            </div>
-            class="ant-anchor-link"
+            <div
-          >
+              class="ant-anchor-link"
-            <a
-              class="ant-anchor-link-title"
-              href="#link-props"
-              title="Link Props"
             >
-              Link Props
+              <a
-            </a>
+                class="ant-anchor-link-title"
+                href="#part-1"
+                title="Part 1"
+              >
+                Part 1
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-2"
+                title="Part 2"
+              >
+                Part 2
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-3"
+                title="Part 3"
+              >
+                Part 3
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -459,79 +461,96 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
 exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correctly 1`] = `
 <div>
   <div
-    class=""
+    class="ant-row"
   >
     <div
-      class="ant-anchor-wrapper"
+      class="ant-col ant-col-18"
-      style="max-height:100vh"
     >
       <div
-        class="ant-anchor"
+        id="part-1"
+        style="height:100vh;background:rgba(255,0,0,0.02);margin-top:30vh"
       >
+        Part 1
+      </div>
+      <div
+        id="part-2"
+        style="height:100vh;background:rgba(0,255,0,0.02)"
+      >
+        Part 2
+      </div>
+      <div
+        id="part-3"
+        style="height:100vh;background:rgba(0,0,255,0.02)"
+      >
+        Part 3
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6"
+    >
+      <div>
         <div
-          class="ant-anchor-ink"
+          class=""
         >
-          <span
-            class="ant-anchor-ink-ball"
-          />
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
-            title="Basic demo"
-          >
-            Basic demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
-            title="Static demo"
-          >
-            Static demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#api"
-            title="API"
-          >
-            API
-          </a>
           <div
-            class="ant-anchor-link"
+            class="ant-anchor-wrapper"
+            style="max-height:100vh"
           >
-            <a
+            <div
-              class="ant-anchor-link-title"
+              class="ant-anchor"
-              href="#anchor-props"
-              title="Anchor Props"
             >
-              Anchor Props
+              <div
-            </a>
+                class="ant-anchor-ink"
-          </div>
+              >
-          <div
+                <span
-            class="ant-anchor-link"
+                  class="ant-anchor-ink-ball"
-          >
+                />
-            <a
+              </div>
-              class="ant-anchor-link-title"
+              <div
-              href="#link-props"
+                class="ant-anchor-link"
-              title="Link Props"
+              >
-            >
+                <a
-              Link Props
+                  class="ant-anchor-link-title"
-            </a>
+                  href="#part-1"
+                  title="Part 1"
+                >
+                  Part 1
+                </a>
+              </div>
+              <div
+                class="ant-anchor-link"
+              >
+                <a
+                  class="ant-anchor-link-title"
+                  href="#part-2"
+                  title="Part 2"
+                >
+                  Part 2
+                </a>
+              </div>
+              <div
+                class="ant-anchor-link"
+              >
+                <a
+                  class="ant-anchor-link-title"
+                  href="#part-3"
+                  title="Part 3"
+                >
+                  Part 3
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div
+    style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
+  >
+    <div>
+      Fixed Top Block
+    </div>
+  </div>
 </div>
 `;

components/anchor/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,77 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
-<div>
+<div
+  class="ant-row"
+>
   <div
-    class=""
+    class="ant-col ant-col-16"
   >
     <div
-      class="ant-anchor-wrapper"
+      id="part-1"
-      style="max-height:100vh"
+      style="height:100vh;background:rgba(255,0,0,0.02)"
-    >
+    />
+    <div
+      id="part-2"
+      style="height:100vh;background:rgba(0,255,0,0.02)"
+    />
+    <div
+      id="part-3"
+      style="height:100vh;background:rgba(0,0,255,0.02)"
+    />
+  </div>
+  <div
+    class="ant-col ant-col-8"
+  >
+    <div>
       <div
-        class="ant-anchor"
+        class=""
       >
         <div
-          class="ant-anchor-ink"
+          class="ant-anchor-wrapper"
+          style="max-height:100vh"
         >
-          <span
-            class="ant-anchor-ink-ball"
-          />
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
-            title="Basic demo"
-          >
-            Basic demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
-            title="Static demo"
-          >
-            Static demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#api"
-            title="API"
-          >
-            API
-          </a>
           <div
-            class="ant-anchor-link"
+            class="ant-anchor"
           >
-            <a
+            <div
-              class="ant-anchor-link-title"
+              class="ant-anchor-ink"
-              href="#anchor-props"
-              title="Anchor Props"
             >
-              Anchor Props
+              <span
-            </a>
+                class="ant-anchor-ink-ball"
-          </div>
+              />
-          <div
+            </div>
-            class="ant-anchor-link"
+            <div
-          >
+              class="ant-anchor-link"
-            <a
-              class="ant-anchor-link-title"
-              href="#link-props"
-              title="Link Props"
             >
-              Link Props
+              <a
-            </a>
+                class="ant-anchor-link-title"
+                href="#part-1"
+                title="Part 1"
+              >
+                Part 1
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-2"
+                title="Part 2"
+              >
+                Part 2
+              </a>
+            </div>
+            <div
+              class="ant-anchor-link"
+            >
+              <a
+                class="ant-anchor-link-title"
+                href="#part-3"
+                title="Part 3"
+              >
+                Part 3
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -459,79 +461,96 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
 exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
 <div>
   <div
-    class=""
+    class="ant-row"
   >
     <div
-      class="ant-anchor-wrapper"
+      class="ant-col ant-col-18"
-      style="max-height:100vh"
     >
       <div
-        class="ant-anchor"
+        id="part-1"
+        style="height:100vh;background:rgba(255,0,0,0.02);margin-top:30vh"
       >
+        Part 1
+      </div>
+      <div
+        id="part-2"
+        style="height:100vh;background:rgba(0,255,0,0.02)"
+      >
+        Part 2
+      </div>
+      <div
+        id="part-3"
+        style="height:100vh;background:rgba(0,0,255,0.02)"
+      >
+        Part 3
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6"
+    >
+      <div>
         <div
-          class="ant-anchor-ink"
+          class=""
         >
-          <span
-            class="ant-anchor-ink-ball"
-          />
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
-            title="Basic demo"
-          >
-            Basic demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
-            title="Static demo"
-          >
-            Static demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#api"
-            title="API"
-          >
-            API
-          </a>
           <div
-            class="ant-anchor-link"
+            class="ant-anchor-wrapper"
+            style="max-height:100vh"
           >
-            <a
+            <div
-              class="ant-anchor-link-title"
+              class="ant-anchor"
-              href="#anchor-props"
-              title="Anchor Props"
             >
-              Anchor Props
+              <div
-            </a>
+                class="ant-anchor-ink"
-          </div>
+              >
-          <div
+                <span
-            class="ant-anchor-link"
+                  class="ant-anchor-ink-ball"
-          >
+                />
-            <a
+              </div>
-              class="ant-anchor-link-title"
+              <div
-              href="#link-props"
+                class="ant-anchor-link"
-              title="Link Props"
+              >
-            >
+                <a
-              Link Props
+                  class="ant-anchor-link-title"
-            </a>
+                  href="#part-1"
+                  title="Part 1"
+                >
+                  Part 1
+                </a>
+              </div>
+              <div
+                class="ant-anchor-link"
+              >
+                <a
+                  class="ant-anchor-link-title"
+                  href="#part-2"
+                  title="Part 2"
+                >
+                  Part 2
+                </a>
+              </div>
+              <div
+                class="ant-anchor-link"
+              >
+                <a
+                  class="ant-anchor-link-title"
+                  href="#part-3"
+                  title="Part 3"
+                >
+                  Part 3
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div
+    style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
+  >
+    <div>
+      Fixed Top Block
+    </div>
+  </div>
 </div>
 `;

components/anchor/demo/basic.tsx

@@ -1,38 +1,35 @@
 import React from 'react';
-import { Anchor } from 'antd';
+import { Anchor, Row, Col } from 'antd';
 
 const App: React.FC = () => (
-  <Anchor
+  <Row>
-    items={[
+    <Col span={16}>
-      {
+      <div id="part-1" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />
-        key: '1',
+      <div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />
-        href: '#components-anchor-demo-basic',
+      <div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />
-        title: 'Basic demo',
+    </Col>
-      },
+    <Col span={8}>
-      {
+      <Anchor
-        key: '2',
+        items={[
-        href: '#components-anchor-demo-static',
-        title: 'Static demo',
-      },
-      {
-        key: '3',
-        href: '#api',
-        title: 'API',
-        children: [
           {
-            key: '4',
+            key: 'part-1',
-            href: '#anchor-props',
+            href: '#part-1',
-            title: 'Anchor Props',
+            title: 'Part 1',
           },
           {
-            key: '5',
+            key: 'part-2',
-            href: '#link-props',
+            href: '#part-2',
-            title: 'Link Props',
+            title: 'Part 2',
           },
-        ],
+          {
-      },
+            key: 'part-3',
-    ]}
+            href: '#part-3',
-  />
+            title: 'Part 3',
+          },
+        ]}
+      />
+    </Col>
+  </Row>
 );
 
 export default App;

components/anchor/demo/targetOffset.tsx

@@ -1,46 +1,70 @@
 import React, { useEffect, useState } from 'react';
-import { Anchor } from 'antd';
+import { Anchor, Row, Col } from 'antd';
 
 const App: React.FC = () => {
+  const topRef = React.useRef<HTMLDivElement>(null);
   const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
 
   useEffect(() => {
-    setTargetOffset(window.innerHeight / 2);
+    setTargetOffset(topRef.current?.clientHeight);
   }, []);
 
   return (
-    <Anchor
+    <div>
-      targetOffset={targetOffset}
+      <Row>
-      items={[
+        <Col span={18}>
-        {
+          <div
-          key: '1',
+            id="part-1"
-          href: '#components-anchor-demo-basic',
+            style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}
-          title: 'Basic demo',
+          >
-        },
+            Part 1
-        {
+          </div>
-          key: '2',
+          <div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>
-          href: '#components-anchor-demo-static',
+            Part 2
-          title: 'Static demo',
+          </div>
-        },
+          <div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>
-        {
+            Part 3
-          key: '3',
+          </div>
-          href: '#api',
+        </Col>
-          title: 'API',
+        <Col span={6}>
-          children: [
+          <Anchor
-            {
+            targetOffset={targetOffset}
-              key: '4',
+            items={[
-              href: '#anchor-props',
+              {
-              title: 'Anchor Props',
+                key: 'part-1',
-            },
+                href: '#part-1',
-            {
+                title: 'Part 1',
-              key: '5',
+              },
-              href: '#link-props',
+              {
-              title: 'Link Props',
+                key: 'part-2',
-            },
+                href: '#part-2',
-          ],
+                title: 'Part 2',
-        },
+              },
-      ]}
+              {
-    />
+                key: 'part-3',
+                href: '#part-3',
+                title: 'Part 3',
+              },
+            ]}
+          />
+        </Col>
+      </Row>
+
+      <div
+        style={{
+          height: '30vh',
+          background: 'rgba(0,0,0,0.85)',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '75%',
+          color: '#FFF',
+        }}
+        ref={topRef}
+      >
+        <div>Fixed Top Block</div>
+      </div>
+    </div>
   );
 };
 

components/anchor/index.en-US.md

@@ -22,11 +22,11 @@ For displaying anchor hyperlinks on page and jumping between them.
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">Basic</code>
+<code src="./demo/basic.tsx" iframe="200">Basic</code>
 <code src="./demo/static.tsx">Static Anchor</code>
 <code src="./demo/onClick.tsx">Customize the onClick event</code>
 <code src="./demo/customizeHighlight.tsx">Customize the anchor highlight</code>
-<code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
+<code src="./demo/targetOffset.tsx" iframe="200">Set Anchor scroll offset</code>
 <code src="./demo/onChange.tsx">Listening for anchor link change</code>
 <code src="./demo/legacy-anchor.tsx" debug>Deprecated JSX demo</code>
 

components/anchor/index.zh-CN.md

@@ -23,11 +23,11 @@ group:
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">基本</code>
+<code src="./demo/basic.tsx" iframe="200">基本</code>
 <code src="./demo/static.tsx">静态位置</code>
 <code src="./demo/onClick.tsx">自定义 onClick 事件</code>
 <code src="./demo/customizeHighlight.tsx">自定义锚点高亮</code>
-<code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
+<code src="./demo/targetOffset.tsx" iframe="200">设置锚点滚动偏移量</code>
 <code src="./demo/onChange.tsx">监听锚点链接改变</code>
 <code src="./demo/legacy-anchor.tsx" debug>废弃的 JSX 示例</code>
 

components/button/style/index.tsx

@@ -50,9 +50,6 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         ...genFocusStyle(token),
       },
 
-      ...genCompactItemStyle(token, componentCls, { focus: false }),
-      ...genCompactItemVerticalStyle(token, componentCls),
-
       // make `btn-icon-only` not too narrow
       '&-icon-only&-compact-item': {
         flex: 'none',
@@ -496,5 +493,9 @@ export default genComponentStyleHook('Button', (token) => {
 
     // Button Group
     genGroupStyle(buttonToken),
+
+    // Space Compact
+    genCompactItemStyle(token, { focus: false }),
+    genCompactItemVerticalStyle(token),
   ];
 });

components/cascader/style/index.tsx

@@ -32,7 +32,6 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
     {
       [componentCls]: {
         width: token.controlWidth,
-        ...genCompactItemStyle(token, componentCls),
       },
     },
     // =====================================================
@@ -153,6 +152,10 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
         direction: 'rtl',
       },
     },
+    // =====================================================
+    // ==             Space Compact                       ==
+    // =====================================================
+    genCompactItemStyle(token),
   ];
 };
 

components/date-picker/style/index.tsx

@@ -973,11 +973,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         borderRadius,
         transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
 
-        // Space.Compact
-        ...genCompactItemStyle(token, componentCls, {
-          focusElCls: `${componentCls}-focused`,
-        }),
-
         '&:hover, &-focused': {
           ...genHoverStyle(token),
         },
@@ -1426,7 +1421,16 @@ export default genComponentStyleHook(
       initInputToken<FullToken<'DatePicker'>>(token),
       initPickerPanelToken(token),
     );
-    return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
+    return [
+      genPickerStyle(pickerToken),
+      genPickerStatusStyle(pickerToken),
+      // =====================================================
+      // ==             Space Compact                       ==
+      // =====================================================
+      genCompactItemStyle(token, {
+        focusElCls: `${token.componentCls}-focused`,
+      }),
+    ];
   },
   (token) => ({
     presetsWidth: 120,

components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -388,6 +388,64 @@ Array [
         </div>
       </div>
     </button>
+    <button
+      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
+      type="button"
+    >
+      <div
+        class="ant-float-btn-body"
+      >
+        <div
+          class="ant-float-btn-content"
+        >
+          <div
+            class="ant-float-btn-icon"
+          >
+            <span
+              aria-label="vertical-align-top"
+              class="anticon anticon-vertical-align-top"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="vertical-align-top"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="ant-tooltip"
+          style="opacity:0"
+        >
+          <div
+            class="ant-tooltip-content"
+          >
+            <div
+              class="ant-tooltip-arrow"
+            >
+              <span
+                class="ant-tooltip-arrow-content"
+              />
+            </div>
+            <div
+              class="ant-tooltip-inner"
+              role="tooltip"
+            />
+          </div>
+        </div>
+      </div>
+    </button>
   </div>,
   <div
     class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
@@ -570,6 +628,64 @@ Array [
         </div>
       </div>
     </button>
+    <button
+      class="ant-float-btn ant-float-btn-default ant-float-btn-square"
+      type="button"
+    >
+      <div
+        class="ant-float-btn-body"
+      >
+        <div
+          class="ant-float-btn-content"
+        >
+          <div
+            class="ant-float-btn-icon"
+          >
+            <span
+              aria-label="vertical-align-top"
+              class="anticon anticon-vertical-align-top"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="vertical-align-top"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="ant-tooltip"
+          style="opacity:0"
+        >
+          <div
+            class="ant-tooltip-content"
+          >
+            <div
+              class="ant-tooltip-arrow"
+            >
+              <span
+                class="ant-tooltip-arrow-content"
+              />
+            </div>
+            <div
+              class="ant-tooltip-inner"
+              role="tooltip"
+            />
+          </div>
+        </div>
+      </div>
+    </button>
   </div>,
 ]
 `;

components/float-button/__tests__/__snapshots__/demo.test.ts.snap

@@ -256,6 +256,42 @@ Array [
         </div>
       </div>
     </button>
+    <button
+      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
+      type="button"
+    >
+      <div
+        class="ant-float-btn-body"
+      >
+        <div
+          class="ant-float-btn-content"
+        >
+          <div
+            class="ant-float-btn-icon"
+          >
+            <span
+              aria-label="vertical-align-top"
+              class="anticon anticon-vertical-align-top"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="vertical-align-top"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </button>
   </div>,
   <div
     class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
@@ -372,6 +408,42 @@ Array [
         </div>
       </div>
     </button>
+    <button
+      class="ant-float-btn ant-float-btn-default ant-float-btn-square"
+      type="button"
+    >
+      <div
+        class="ant-float-btn-body"
+      >
+        <div
+          class="ant-float-btn-content"
+        >
+          <div
+            class="ant-float-btn-icon"
+          >
+            <span
+              aria-label="vertical-align-top"
+              class="anticon anticon-vertical-align-top"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="vertical-align-top"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </button>
   </div>,
 ]
 `;

components/float-button/demo/group.tsx

@@ -7,13 +7,13 @@ const App: React.FC = () => (
     <FloatButton.Group shape="circle" style={{ right: 24 }}>
       <FloatButton icon={<QuestionCircleOutlined />} />
       <FloatButton />
-      <FloatButton.BackTop visibilityHeight={-1} />
+      <FloatButton.BackTop visibilityHeight={0} />
     </FloatButton.Group>
     <FloatButton.Group shape="square" style={{ right: 94 }}>
       <FloatButton icon={<QuestionCircleOutlined />} />
       <FloatButton />
       <FloatButton icon={<SyncOutlined />} />
-      <FloatButton.BackTop visibilityHeight={-1} />
+      <FloatButton.BackTop visibilityHeight={0} />
     </FloatButton.Group>
   </>
 );

components/input-number/style/index.tsx

@@ -63,8 +63,6 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         border: `${lineWidth}px ${lineType} ${colorBorder}`,
         borderRadius,
 
-        ...genCompactItemStyle(token, componentCls),
-
         '&-rtl': {
           direction: 'rtl',
 
@@ -396,7 +394,14 @@ export default genComponentStyleHook(
   'InputNumber',
   (token) => {
     const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
-    return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
+    return [
+      genInputNumberStyles(inputNumberToken),
+      genAffixWrapperStyles(inputNumberToken),
+      // =====================================================
+      // ==             Space Compact                       ==
+      // =====================================================
+      genCompactItemStyle(inputNumberToken),
+    ];
   },
   (token) => ({
     controlWidth: 90,

components/input/style/index.tsx

@@ -504,7 +504,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 };
 
 const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const { prefixCls, componentCls, controlHeightSM, lineWidth } = token;
+  const { componentCls, controlHeightSM, lineWidth } = token;
 
   const FIXED_CHROME_COLOR_HEIGHT = 16;
   const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
@@ -514,7 +514,6 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       ...resetComponent(token),
       ...genBasicInputStyle(token),
       ...genStatusStyle(token),
-      ...genCompactItemStyle(token, prefixCls),
 
       '&[type="color"]': {
         height: token.controlHeight,
@@ -933,5 +932,9 @@ export default genComponentStyleHook('Input', (token) => {
     genAffixStyle(inputToken),
     genGroupStyle(inputToken),
     genSearchInputStyle(inputToken),
+    // =====================================================
+    // ==             Space Compact                       ==
+    // =====================================================
+    genCompactItemStyle(inputToken),
   ];
 });

components/radio/style/index.tsx

@@ -68,7 +68,6 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
     componentCls,
     radioWrapperMarginRight,
     radioCheckedColor,
-    radioTop,
     radioSize,
     motionDurationSlow,
     motionDurationMid,
@@ -135,10 +134,10 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
       [componentCls]: {
         ...resetComponent(token),
         position: 'relative',
-        insetBlockStart: radioTop,
         display: 'inline-block',
         outline: 'none',
         cursor: 'pointer',
+        alignSelf: 'center',
       },
 
       [`${componentCls}-wrapper:hover &,
@@ -487,8 +486,6 @@ export default genComponentStyleHook('Radio', (token) => {
     controlItemBgActiveDisabled,
     colorTextDisabled,
     colorBgContainer,
-    fontSize,
-    lineHeight,
     fontSizeLG,
     controlOutline,
     colorPrimaryHover,
@@ -506,7 +503,6 @@ export default genComponentStyleHook('Radio', (token) => {
   const radioButtonFocusShadow = radioFocusShadow;
 
   const radioSize = fontSizeLG;
-  const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2;
   const dotPadding = 4; // Fixed value
   const radioDotDisabledSize = radioSize - dotPadding * 2;
   const radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (dotPadding + lineWidth) * 2;
@@ -524,7 +520,6 @@ export default genComponentStyleHook('Radio', (token) => {
     radioFocusShadow,
     radioButtonFocusShadow,
     radioSize,
-    radioTop,
     radioDotSize,
     radioDotDisabledSize,
     radioCheckedColor,

components/select/index.zh-CN.md

@@ -13,7 +13,7 @@ demo:
 ## 何时使用
 
 - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
-- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio/) 是更好的选择。
+- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
 
 ## 代码演示
 

components/select/style/index.tsx

@@ -262,11 +262,6 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
         '&&-in-form-item': {
           width: '100%',
         },
-        // Space.Compact
-        ...genCompactItemStyle(token, componentCls, {
-          borderElCls: `${componentCls}-selector`,
-          focusElCls: `${componentCls}-focused`,
-        }),
       },
     },
 
@@ -320,6 +315,13 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
       }),
       true,
     ),
+    // =====================================================
+    // ==             Space Compact                       ==
+    // =====================================================
+    genCompactItemStyle(token, {
+      borderElCls: `${componentCls}-selector`,
+      focusElCls: `${componentCls}-focused`,
+    }),
   ];
 };
 

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -448,7 +448,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -587,6 +587,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
           </svg>
         </span>
       </span>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"
@@ -600,7 +626,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
       style="width:50%"
     >
       <div
@@ -778,6 +804,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"

components/space/__tests__/__snapshots__/demo.test.ts.snap

@@ -341,7 +341,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -398,6 +398,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
           </svg>
         </span>
       </span>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"
@@ -411,7 +437,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
       style="width:50%"
     >
       <div
@@ -493,6 +519,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"

components/space/demo/compact.tsx

@@ -45,7 +45,7 @@ const App: React.FC = () => (
     </Space.Compact>
     <br />
     <Space.Compact block>
-      <Select defaultValue="Zhejiang">
+      <Select defaultValue="Zhejiang" allowClear>
         <Option value="Zhejiang">Zhejiang</Option>
         <Option value="Jiangsu">Jiangsu</Option>
       </Select>
@@ -53,7 +53,7 @@ const App: React.FC = () => (
     </Space.Compact>
     <br />
     <Space.Compact block>
-      <Select mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
+      <Select allowClear mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
         <Option value="Zhejianggggg">Zhejianggggg</Option>
         <Option value="Jiangsu">Jiangsu</Option>
       </Select>

components/style/compact-item-vertical.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme/internal';
+import type { DerivativeToken, FullToken } from '../theme/internal';
+import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
 
 function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
   return {
@@ -43,11 +44,13 @@ function compactItemBorderVerticalRadius(prefixCls: string): CSSObject {
   };
 }
 
-export function genCompactItemVerticalStyle(token: DerivativeToken, prefixCls: string): CSSObject {
+export function genCompactItemVerticalStyle<T extends OverrideComponent>(
+  token: FullToken<T>,
+): CSSInterpolation {
   return {
-    '&-compact-vertical': {
+    [`${token.componentCls}-compact-vertical`]: {
       ...compactItemVerticalBorder(token),
-      ...compactItemBorderVerticalRadius(prefixCls),
+      ...compactItemBorderVerticalRadius(token.componentCls),
     },
   };
 }

components/style/compact-item.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme/internal';
+import type { DerivativeToken, FullToken } from '../theme/internal';
+import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
 
 interface CompactItemOptions {
   focus?: boolean;
@@ -75,15 +76,14 @@ function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions)
   };
 }
 
-export function genCompactItemStyle(
+export function genCompactItemStyle<T extends OverrideComponent>(
-  token: DerivativeToken,
+  token: FullToken<T>,
-  prefixCls: string,
   options: CompactItemOptions = { focus: true },
-): CSSObject {
+): CSSInterpolation {
   return {
-    '&-compact': {
+    [`${token.componentCls}-compact`]: {
       ...compactItemBorder(token, options),
-      ...compactItemBorderRadius(prefixCls, options),
+      ...compactItemBorderRadius(token.componentCls, options),
     },
   };
 }

components/tabs/index.zh-CN.md

@@ -16,7 +16,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 - 卡片式的页签，提供可关闭的样式，常用于容器顶部。
 - 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
-- [Radio.Button](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
+- [Radio.Button](/components/radio-cn/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
 
 ## 代码演示
 

docs/blog/css-in-js.zh-CN.md

@@ -12,7 +12,7 @@ author: MadCcc
 
 ![image.png](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*X5tDQ5VIpcoAAAAAAAAAAAAADrJ8AQ/original)
 
-如此便可以引入一个 CSS-in-JS 被诟病已久的问题：我们在编写代码时写的并不是最终的 css，所以每次都需要重新序列化得到 css 后再次计算 hash，这就在每次渲染组件时带来了而外的开销。如果你的页面或者组件带有非常复杂或者大量的 CSS-in-JS 代码，甚至样式会跟随组件的 props 变化，那么这个性能消耗便变得不可忽视。<br />针对这个问题，各个 CSS-in-JS 库会有自己的应对方式，这里就先不做赘述，让我们来看一看 Ant Design 的方案。
+如此便可以引入一个 CSS-in-JS 被诟病已久的问题：我们在编写代码时写的并不是最终的 css，所以每次都需要重新序列化得到 css 后再次计算 hash，这就在每次渲染组件时带来了额外的开销。如果你的页面或者组件带有非常复杂或者大量的 CSS-in-JS 代码，甚至样式会跟随组件的 props 变化，那么这个性能消耗便变得不可忽视。<br />针对这个问题，各个 CSS-in-JS 库会有自己的应对方式，这里就先不做赘述，让我们来看一看 Ant Design 的方案。
 
 ## 计算 hash
 

docs/blog/getContainer.zh-CN.md

@@ -4,7 +4,7 @@ date: 2022-12-08
 author: zombieJ
 ---
 
-在网页开发中，我们时长会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉：
+在网页开发中，我们时常会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉：
 
 ![Overflow](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Noh-TYJ0BdcAAAAAAAAAAAAADrJ8AQ/original)
 

docs/react/migration-v5.en-US.md

@@ -164,6 +164,13 @@ Use git to save your code and install latest version:
 npm install --save antd@5.x
 ```
 
+If you want to use v4 deprecated component like `Comment` or `PageHeader`. You can install `@ant-design/compatible` and `@ant-design/pro-layout` for compatible:
+
+```bash
+npm install --save @ant-design/compatible@v5-compatible-v4
+npm install --save @ant-design/pro-layout
+```
+
 You can manually check the code one by one against the above list for modification. In addition, we also provide a codemod cli tool [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) To help you quickly upgrade to v5.
 
 Before running codemod cli, please submit your local code changes.

docs/react/migration-v5.zh-CN.md

@@ -156,6 +156,13 @@ title: 从 v4 到 v5
 npm install --save antd@5.x
 ```
 
+如果你需要使用 v4 废弃组件如 `Comment`、`PageHeader`，请安装 `@ant-design/compatible` 与 `@ant-design/pro-layout` 做兼容：
+
+```bash
+npm install --save @ant-design/compatible@v5-compatible-v4
+npm install --save @ant-design/pro-layout
+```
+
 你可以手动对照上面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) 以帮助你快速升级到 v5 版本。
 
 在运行 codemod cli 前，请先提交你的本地代码修改。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -116,6 +116,7 @@
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.4.0",
     "@rc-component/tour": "~1.0.1-2",
+    "antd-token-previewer": "^1.1.0-21",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",
@@ -194,7 +195,6 @@
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "antd-img-crop": "^4.2.8",
-    "antd-token-previewer": "^1.1.0-6",
     "array-move": "^4.0.0",
     "bundlesize2": "^0.0.31",
     "chalk": "^4.0.0",