Merge branch 'master' into fix/duplicate-style-tags

.dumi/theme/common/Color/ColorPaletteToolDark.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Col, ColorPicker, Row } from 'antd';
-import { FormattedMessage } from 'dumi';
 import type { Color } from 'antd/es/color-picker';
+import { FormattedMessage } from 'dumi';
 
 import useLocale from '../../../hooks/useLocale';
 import ColorPatterns from './ColorPatterns';
@@ -34,7 +34,7 @@ const ColorPaletteTool: React.FC = () => {
     setPrimaryColorInstance(color);
   };
 
-  const handleChangeBackgroundColor = (_, hex: string) => {
+  const handleChangeBackgroundColor = (_: Color, hex: string) => {
     setBackgroundColor(hex);
   };
 

.dumi/theme/common/Color/Palette.tsx

@@ -5,6 +5,9 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 
 const rgbToHex = (rgbString: string): string => {
   const rgb = rgbString.match(/\d+/g);
+  if (!rgb) {
+    return '';
+  }
   let r = parseInt(rgb[0], 10).toString(16);
   let g = parseInt(rgb[1], 10).toString(16);
   let b = parseInt(rgb[2], 10).toString(16);

.dumi/theme/common/JSONEditor/index.tsx

@@ -1,16 +1,20 @@
 import React, { useEffect, useRef } from 'react';
-import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor';
-import { JSONEditor, Mode } from 'vanilla-jsoneditor';
+import type { JsonEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor';
+import { createJSONEditor, Mode } from 'vanilla-jsoneditor';
 
 const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
-  const editorRef = useRef<JSONEditor>(null);
+  const editorRef = useRef<JsonEditor>();
   const container = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    editorRef.current = new JSONEditor({
-      target: container.current,
-      props: { mode: Mode.text },
-    });
+    if (container.current) {
+      editorRef.current = createJSONEditor({
+        target: container.current,
+        props: {
+          mode: Mode.text,
+        },
+      });
+    }
     return () => {
       editorRef.current?.destroy();
     };

.dumi/theme/common/styles/Demo.tsx

@@ -347,12 +347,13 @@ const GlobalDemoStyles: React.FC = () => {
           display: flex;
           align-items: center;
           column-gap: ${token.marginXS}px;
+        }
 
-          ${antCls}-btn {
-            opacity: 0.6;
-            &.icon-enabled {
-             background: ${token.colorFillSecondary};
-             opacity: 1;
+        ${antCls}-btn {
+          opacity: 0.6;
+          &.icon-enabled {
+            background: ${token.colorFillSecondary};
+            opacity: 1;
             ${iconCls} {
               color: ${token.colorTextBase};
               font-weight: bold;

components/tooltip/demo/debug.tsx

@@ -1,15 +1,26 @@
 import React from 'react';
-import { Button, Tooltip } from 'antd';
+import { Button, Flex, Tooltip } from 'antd';
+
+const zeroWidthEle = <div />;
 
 const App: React.FC = () => (
-  <Tooltip
-    open
-    title="Thanks for using antd. Have a nice day !"
-    arrow={{ pointAtCenter: true }}
-    placement="topLeft"
-  >
-    <Button>Point at center</Button>
-  </Tooltip>
+  <Flex vertical gap={72} align="flex-start">
+    <span />
+    <Tooltip
+      open
+      title="Thanks for using antd. Have a nice day !"
+      arrow={{ pointAtCenter: true }}
+      placement="topLeft"
+    >
+      <Button>Point at center</Button>
+    </Tooltip>
+    <Tooltip open title={zeroWidthEle} placement="topLeft">
+      <Button>Min Width</Button>
+    </Tooltip>
+    <Tooltip open title={zeroWidthEle} placement="top">
+      <Button>Min Width</Button>
+    </Tooltip>
+  </Flex>
 );
 
 export default App;

components/tooltip/style/index.ts

@@ -30,6 +30,7 @@ interface TooltipToken extends FullToken<'Tooltip'> {
 
 const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
   const {
+    calc,
     componentCls, // ant-tooltip
     tooltipMaxWidth,
     tooltipColor,
@@ -40,8 +41,19 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
     boxShadowSecondary,
     paddingSM,
     paddingXS,
+    arrowOffsetHorizontal,
+    sizePopupArrow,
   } = token;
 
+  // arrowOffsetHorizontal + arrowWidth + borderRadius
+  const edgeAlignMinWidth = calc(tooltipBorderRadius)
+    .add(sizePopupArrow)
+    .add(arrowOffsetHorizontal)
+    .equal();
+
+  // borderRadius * 2 + arrowWidth
+  const centerAlignMinWidth = calc(tooltipBorderRadius).mul(2).add(sizePopupArrow).equal();
+
   return [
     {
       [componentCls]: {
@@ -65,7 +77,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
 
         // Wrapper for the tooltip content
         [`${componentCls}-inner`]: {
-          minWidth: '1em',
+          minWidth: centerAlignMinWidth,
           minHeight: controlHeight,
           padding: `${unit(token.calc(paddingSM).div(2).equal())} ${unit(paddingXS)}`,
           color: tooltipColor,
@@ -78,6 +90,16 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
           boxSizing: 'border-box',
         },
 
+        // Align placement should have another min width
+        [[
+          `&-placement-topLeft`,
+          `&-placement-topRight`,
+          `&-placement-bottomLeft`,
+          `&-placement-bottomRight`,
+        ].join(',')]: {
+          minWidth: edgeAlignMinWidth,
+        },
+
         // Limit left and right placement radius
         [[
           `&-placement-left`,

docs/spec/transition.en-US.md

@@ -5,7 +5,7 @@ order: 9
 title: Use Transition
 ---
 
-Our Gray Matter are wired to react to dynamic things like movement,shape change and color change. Transitions smooth out the jarring world of the Web, making changes appear more natural. The main purpose for Transitions is to provide an engaging interface and reinforce communication.
+Our Gray Matter are wired to react to dynamic things like movement, shape change and color change. Transitions smooth out the jarring world of the Web, making changes appear more natural. The main purpose for Transitions is to provide an engaging interface and reinforce communication.
 
 - Adding: The added elements should inform the users how to use, and the modified elements should be recognized.
 - Receding: The irrelevant page elements should be removed properly.