chore: feature merge master

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

@@ -7,7 +7,6 @@ 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: {
@@ -69,7 +68,11 @@ export default function Banner({ children }: BannerProps) {
     <>
       {/* Banner Placeholder Motion */}
       {isMobile ? (
-        <img src={topicImage} alt="" style={{ width: '100%' }} />
+        <img
+          src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JmlaR5oQn3MAAAAAAAAAAAAADrJ8AQ/original"
+          style={{ width: '100%' }}
+          alt=""
+        />
       ) : (
         <div
           style={{

.dumi/theme/common/ThemeSwitch/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { FloatButton } from 'antd';
-import { FormattedMessage } from 'dumi';
-import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons';
+import { FormattedMessage, Link, useLocation } from 'dumi';
+import { DarkTheme, CompactTheme } from 'antd-token-previewer/es/icons';
+import { BgColorsOutlined } from '@ant-design/icons';
+import useSiteToken from '../../../hooks/useSiteToken';
+import { getLocalizedPathname, isZhCN } from '../../utils';
 import ThemeIcon from './ThemeIcon';
 
 export type ThemeName = 'light' | 'dark' | 'compact';
@@ -11,41 +14,46 @@ export type ThemeSwitchProps = {
   onChange: (value: ThemeName[]) => void;
 };
 
-const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ value, onChange }) => (
-  <FloatButton.Group trigger="click" icon={<ThemeIcon />}>
-    <FloatButton
-      icon={<Light />}
-      type={!value.includes('dark') ? 'primary' : 'default'}
-      onClick={() => {
-        if (value.includes('dark')) {
-          onChange(value.filter((theme) => theme !== 'dark'));
-        }
-      }}
-      tooltip={<FormattedMessage id="app.theme.switch.default" />}
-    />
-    <FloatButton
-      icon={<DarkTheme />}
-      type={value.includes('dark') ? 'primary' : 'default'}
-      onClick={() => {
-        if (!value.includes('dark')) {
-          onChange([...value, 'dark']);
-        }
-      }}
-      tooltip={<FormattedMessage id="app.theme.switch.dark" />}
-    />
-    <FloatButton
-      icon={<CompactTheme />}
-      type={value.includes('compact') ? 'primary' : 'default'}
-      onClick={() => {
-        if (value.includes('compact')) {
-          onChange(value.filter((theme) => theme !== 'compact'));
-        } else {
-          onChange([...value, 'compact']);
-        }
-      }}
-      tooltip={<FormattedMessage id="app.theme.switch.compact" />}
-    />
-  </FloatButton.Group>
-);
+const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ value, onChange }) => {
+  const { token } = useSiteToken();
+  const { pathname, search } = useLocation();
+  return (
+    <FloatButton.Group trigger="click" icon={<ThemeIcon />}>
+      <Link
+        to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}
+        style={{ display: 'block', marginBottom: token.margin }}
+      >
+        <FloatButton
+          icon={<BgColorsOutlined />}
+          tooltip={<FormattedMessage id="app.footer.theme" />}
+        />
+      </Link>
+      <FloatButton
+        icon={<DarkTheme />}
+        type={value.includes('dark') ? 'primary' : 'default'}
+        onClick={() => {
+          if (value.includes('dark')) {
+            onChange(value.filter((theme) => theme !== 'dark'));
+          } else {
+            onChange([...value, 'dark']);
+          }
+        }}
+        tooltip={<FormattedMessage id="app.theme.switch.dark" />}
+      />
+      <FloatButton
+        icon={<CompactTheme />}
+        type={value.includes('compact') ? 'primary' : 'default'}
+        onClick={() => {
+          if (value.includes('compact')) {
+            onChange(value.filter((theme) => theme !== 'compact'));
+          } else {
+            onChange([...value, 'compact']);
+          }
+        }}
+        tooltip={<FormattedMessage id="app.theme.switch.compact" />}
+      />
+    </FloatButton.Group>
+  );
+};
 
 export default ThemeSwitch;

.dumi/theme/utils.tsx

@@ -129,7 +129,7 @@ export function getLocalizedPathname(
   },
 ) {
   const pathname = path.startsWith('/') ? path : `/${path}`;
-  let fullPath;
+  let fullPath: string;
   if (!zhCN) {
     // to enUS
     fullPath = /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');

components/_util/ActionButton.tsx

@@ -65,7 +65,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     );
   };
 
-  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     const { actionFn } = props;
     if (clickedRef.current) {
       return;
@@ -75,7 +75,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
       onInternalClose();
       return;
     }
-    let returnValueOfOnOk;
+    let returnValueOfOnOk: PromiseLike<any>;
     if (props.emitEvent) {
       returnValueOfOnOk = actionFn(e);
       if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {

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

@@ -1084,6 +1084,40 @@ exports[`renders ./components/button/demo/disabled.tsx extend context correctly
       </div>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        <a
+          class="ant-btn ant-btn-primary"
+          href="https://ant.design/index-cn"
+        >
+          <span>
+            Href Primary
+          </span>
+        </a>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <a
+          class="ant-btn ant-btn-primary ant-btn-disabled"
+          href="https://ant.design/index-cn"
+        >
+          <span>
+            Href Primary(disabled)
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-space-item"
     style="margin-bottom:8px"

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

@@ -988,6 +988,40 @@ exports[`renders ./components/button/demo/disabled.tsx correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        <a
+          class="ant-btn ant-btn-primary"
+          href="https://ant.design/index-cn"
+        >
+          <span>
+            Href Primary
+          </span>
+        </a>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <a
+          class="ant-btn ant-btn-primary ant-btn-disabled"
+          href="https://ant.design/index-cn"
+        >
+          <span>
+            Href Primary(disabled)
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-space-item"
     style="margin-bottom:8px"

components/button/button.tsx

@@ -119,13 +119,13 @@ export interface BaseButtonProps {
 export type AnchorButtonProps = {
   href: string;
   target?: string;
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 } & BaseButtonProps &
   Omit<React.AnchorHTMLAttributes<any>, 'type' | 'onClick'>;
 
 export type NativeButtonProps = {
   htmlType?: ButtonHTMLType;
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 } & BaseButtonProps &
   Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'>;
 
@@ -141,7 +141,10 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
 
 type Loading = number | boolean;
 
-const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
+const InternalButton: React.ForwardRefRenderFunction<
+  HTMLButtonElement | HTMLAnchorElement,
+  ButtonProps
+> = (props, ref) => {
   const {
     loading = false,
     prefixCls: customizePrefixCls,
@@ -175,7 +178,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const groupSize = React.useContext(GroupSizeContext);
   const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
-  const buttonRef = (ref as any) || React.createRef<HTMLElement>();
+  const buttonRef = (ref as any) || React.createRef<HTMLAnchorElement | HTMLButtonElement>();
   const isNeedInserted = () =>
     React.Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
 
@@ -254,6 +257,8 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 
   const linkButtonRestProps = omit(rest as AnchorButtonProps & { navigate: any }, ['navigate']);
 
+  const hrefAndDisabled = linkButtonRestProps.href !== undefined && mergedDisabled;
+
   const classes = classNames(
     prefixCls,
     hashId,
@@ -268,7 +273,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
       [`${prefixCls}-block`]: block,
       [`${prefixCls}-dangerous`]: !!danger,
       [`${prefixCls}-rtl`]: direction === 'rtl',
-      [`${prefixCls}-disabled`]: linkButtonRestProps.href !== undefined && mergedDisabled,
+      [`${prefixCls}-disabled`]: hrefAndDisabled,
     },
     compactItemClassnames,
     className,
@@ -316,7 +321,10 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   return wrapSSR(buttonNode);
 };
 
-const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
+const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  InternalButton,
+) as CompoundedComponent;
+
 if (process.env.NODE_ENV !== 'production') {
   Button.displayName = 'Button';
 }

components/button/demo/disabled.tsx

@@ -31,6 +31,14 @@ const App: React.FC = () => (
         Link(disabled)
       </Button>
     </Space>
+    <Space>
+      <Button type="primary" href='https://ant.design/index-cn'>
+        Href Primary
+      </Button>
+      <Button type="primary" href='https://ant.design/index-cn' disabled>
+        Href Primary(disabled)
+      </Button>
+    </Space>
     <Space>
       <Button danger>Danger Default</Button>
       <Button danger disabled>

components/button/index.en-US.md

@@ -64,7 +64,7 @@ Different button styles can be generated by setting Button properties. The recom
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` |  |
-| onClick | Set the handler to handle `click` event | (event) => void | - |  |
+| onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - |  |
 
 It accepts all props which native buttons support.
 

components/button/index.zh-CN.md

@@ -69,7 +69,7 @@ group:
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event) => void | - |  |
+| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |  |
 
 支持原生 button 的其他所有属性。
 

components/button/style/index.tsx

@@ -117,6 +117,14 @@ const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
 });
 
 // =============================== Type ===============================
+const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
+  cursor: 'not-allowed',
+  borderColor: token.colorBorder,
+  color: token.colorTextDisabled,
+  backgroundColor: token.colorBgContainerDisabled,
+  boxShadow: 'none',
+});
+
 const genGhostButtonStyle = (
   btnCls: string,
   textColor: string | false,
@@ -153,11 +161,7 @@ const genGhostButtonStyle = (
 
 const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   '&:disabled': {
-    cursor: 'not-allowed',
-    borderColor: token.colorBorder,
-    color: token.colorTextDisabled,
-    backgroundColor: token.colorBgContainerDisabled,
-    boxShadow: 'none',
+    ...genDisabledStyle(token),
   },
 });
 
@@ -297,7 +301,6 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
 // Type: Dashed
 const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   ...genDefaultButtonStyle(token),
-
   borderStyle: 'dashed',
 });
 
@@ -364,6 +367,14 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   },
 });
 
+// Href and Disabled
+const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
+  ...genDisabledStyle(token),
+  [`&${token.componentCls}:hover`]: {
+    ...genDisabledStyle(token),
+  },
+});
+
 const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls } = token;
 
@@ -373,6 +384,7 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
     [`${componentCls}-dashed`]: genDashedButtonStyle(token),
     [`${componentCls}-link`]: genLinkButtonStyle(token),
     [`${componentCls}-text`]: genTextButtonStyle(token),
+    [`${componentCls}-disabled`]: genDisabledButtonStyle(token),
   };
 };