Merge pull request ant-design#45271 from ant-design/master

chore: feature merge master
ammar-knowledge · Oct 12, 2023 · 012e878 · 012e878
2 parents bef9539 + 70ce748
commit 012e878
Show file tree

Hide file tree

Showing 37 changed files with 688 additions and 384 deletions.
diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -35,6 +35,7 @@ const useStyle = createStyles(({ token, css }) => ({
 }));
 
 export interface ColorPickerProps {
+  id?: string;
   children?: React.ReactNode;
   value?: string | Color;
   onChange?: (value?: Color | string) => void;
@@ -66,7 +67,7 @@ const DebouncedColorPicker: React.FC<ColorPickerProps> = (props) => {
   );
 };
 
-const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
+const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) => {
   const { styles } = useStyle();
 
   const matchColors = React.useMemo(() => {
@@ -95,6 +96,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
         value={typeof value === 'string' ? value : value?.toHexString()}
         onChange={(event) => onChange?.(event.target.value)}
         style={{ width: 120 }}
+        id={id}
       />
 
       <Space size="middle">

diff --git a/.dumi/pages/index/components/Theme/RadiusPicker.tsx b/.dumi/pages/index/components/Theme/RadiusPicker.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { InputNumber, Space, Slider } from 'antd';
+import { InputNumber, Slider, Space } from 'antd';
 
 export interface RadiusPickerProps {
+  id?: string;
   value?: number;
   onChange?: (value: number | null) => void;
 }
 
-export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
+export default function RadiusPicker({ value, onChange, id }: RadiusPickerProps) {
   return (
     <Space size="large">
       <InputNumber
@@ -16,6 +17,7 @@ export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
         min={0}
         formatter={(val) => `${val}px`}
         parser={(str) => (str ? parseFloat(str) : (str as any))}
+        id={id}
       />
 
       <Slider

diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -1,7 +1,8 @@
-import { createStyles, useTheme } from 'antd-style';
 import * as React from 'react';
-import classNames from 'classnames';
 import { Space } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import classNames from 'classnames';
+
 import useLocale from '../../../../hooks/useLocale';
 
 export const THEMES = {
@@ -33,56 +34,62 @@ const locales = {
 
 const useStyle = createStyles(({ token, css }) => ({
   themeCard: css`
-      border-radius: ${token.borderRadius}px;
-      cursor: pointer;
-      transition: all ${token.motionDurationSlow};
-      overflow: hidden;
-      display: inline-block;
-
-      & > input[type="radio"] {
-        width: 0;
-        height: 0;
-        opacity: 0;
-        position: absolute;
-      }
-
-      img {
-        vertical-align: top;
-        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-          0 9px 28px 8px rgba(0, 0, 0, 0.05);
-      }
-
-      &:focus-within,
-      &:hover {
-        transform: scale(1.04);
-      }
-    `,
+    border-radius: ${token.borderRadius}px;
+    cursor: pointer;
+    transition: all ${token.motionDurationSlow};
+    overflow: hidden;
+    display: inline-block;
+
+    & > input[type='radio'] {
+      width: 0;
+      height: 0;
+      opacity: 0;
+      position: absolute;
+    }
+
+    img {
+      vertical-align: top;
+      box-shadow:
+        0 3px 6px -4px rgba(0, 0, 0, 0.12),
+        0 6px 16px 0 rgba(0, 0, 0, 0.08),
+        0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    &:focus-within,
+    &:hover {
+      transform: scale(1.04);
+    }
+  `,
 
   themeCardActive: css`
-      box-shadow: 0 0 0 1px ${token.colorBgContainer},
-        0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};
-
-      &,
-      &:hover:not(:focus-within) {
-        transform: scale(1);
-      }
-    `,
+    box-shadow:
+      0 0 0 1px ${token.colorBgContainer},
+      0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};
+
+    &,
+    &:hover:not(:focus-within) {
+      transform: scale(1);
+    }
+  `,
 }));
 
 export interface ThemePickerProps {
+  id?: string;
   value?: string;
   onChange?: (value: string) => void;
 }
 
-export default function ThemePicker({ value, onChange }: ThemePickerProps) {
+export default function ThemePicker(props: ThemePickerProps) {
+  const { value, onChange, id } = props;
+
   const token = useTheme();
   const { styles } = useStyle();
 
   const [locale] = useLocale(locales);
 
   return (
     <Space size={token.paddingLG}>
-      {Object.keys(THEMES).map((theme) => {
+      {Object.keys(THEMES).map((theme, index) => {
         const url = THEMES[theme as THEME];
 
         return (
@@ -94,7 +101,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
                 onChange?.(theme);
               }}
             >
-              <input type="radio" name="theme" />
+              <input type="radio" name="theme" id={index === 0 ? id : null} />
               <img src={url} alt={theme} />
             </label>
             <span>{locale[theme as keyof typeof locale]}</span>

diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
@@ -534,11 +534,20 @@ export default function Theme() {
                     <Form.Item label={locale.titleBorderRadius} name="borderRadius">
                       <RadiusPicker />
                     </Form.Item>
-                    <Form.Item label={locale.titleCompact} name="compact">
-                      <Radio.Group>
-                        <Radio value="default">{locale.default}</Radio>
-                        <Radio value="compact">{locale.compact}</Radio>
-                      </Radio.Group>
+                    <Form.Item label={locale.titleCompact} name="compact" htmlFor="compact_default">
+                      <Radio.Group
+                        options={[
+                          {
+                            label: locale.default,
+                            value: 'default',
+                            id: 'compact_default',
+                          },
+                          {
+                            label: locale.compact,
+                            value: 'compact',
+                          },
+                        ]}
+                      />
                     </Form.Item>
                   </Form>
                 </Card>

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
 import LZString from 'lz-string';
 
-import type { AntdPreviewerProps } from '.';
+import type { AntdPreviewerProps } from './Previewer';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
 import ClientOnly from '../../common/ClientOnly';
@@ -171,7 +171,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   });
 
   const localizedTitle = title;
-  const introChildren = <div dangerouslySetInnerHTML={{ __html: description }} />;
   const highlightClass = classNames('highlight-wrapper', {
     'highlight-wrapper-expand': codeExpand,
   });
@@ -205,7 +204,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
 
   const suffix = codeType === 'tsx' ? 'tsx' : 'js';
 
-  const dependencies: Record<PropertyKey, string> = jsx.split('\n').reduce(
+  const dependencies = (jsx as string).split('\n').reduce<Record<PropertyKey, string>>(
     (acc, line) => {
       const matches = line.match(/import .+? from '(.+)';$/);
       if (matches?.[1]) {
@@ -377,7 +376,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
           </Tooltip>
           <EditButton title={<FormattedMessage id="app.content.edit-demo" />} filename={filename} />
         </div>
-        <div className="code-box-description">{introChildren}</div>
+        {description && (
+          <div className="code-box-description" dangerouslySetInnerHTML={{ __html: description }} />
+        )}
         <Space wrap size="middle" className="code-box-actions">
           {showOnlineUrl && (
             <Tooltip title={<FormattedMessage id="app.demo.online" />}>

diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import { Helmet, useOutlet } from 'dumi';
+import { Helmet, useOutlet, useSiteData } from 'dumi';
 import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import zhCN from 'antd/es/locale/zh_CN';
 import ConfigProvider from 'antd/es/config-provider';
@@ -30,10 +30,11 @@ const locales = {
 const DocLayout: React.FC = () => {
   const outlet = useOutlet();
   const location = useLocation();
-  const { pathname, search } = location;
+  const { pathname, search, hash } = location;
   const [locale, lang] = useLocale(locales);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const { direction } = useContext(SiteContext);
+  const { loading } = useSiteData();
 
   useLayoutEffect(() => {
     if (lang === 'cn') {
@@ -52,6 +53,13 @@ const DocLayout: React.FC = () => {
     }
   }, []);
 
+  // handle hash change or visit page hash from Link component, and jump after async chunk loaded
+  useEffect(() => {
+    const id = hash.replace('#', '');
+
+    if (id) document.getElementById(decodeURIComponent(id))?.scrollIntoView();
+  }, [loading, hash]);
+
   useEffect(() => {
     if (typeof (window as any).ga !== 'undefined') {
       (window as any).ga('send', 'pageview', pathname + search);

diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml