Merge remote-tracking branch 'upstream/master' into feat/typography

ant-design · Apr 23, 2024 · 5efdce5 · 5efdce5
2 parents 4f5f091 + 634b6cb
commit 5efdce5
Show file tree

Hide file tree

Showing 19 changed files with 521 additions and 436 deletions.
diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx
@@ -43,7 +43,7 @@ const useStyle = createStyles(({ token }) => ({
     align-items: center;
     column-gap: ${token.paddingXXS}px;
     border-radius: ${token.borderRadiusSM}px;
-    padding-inline: ${token.paddingXS}px;
+    padding-inline: ${token.paddingXXS}px;
     transition: all ${token.motionDurationSlow} !important;
     font-family: ${token.codeFamily};
     color: ${token.colorTextSecondary} !important;
@@ -62,6 +62,7 @@ const useStyle = createStyles(({ token }) => ({
   `,
   from: css`
     color: ${token.magenta8};
+    margin-inline-end: 0.5em;
   `,
   antd: css`
     color: ${token.green8};
@@ -144,19 +145,17 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           {
             label: locale.import,
             children: (
-              <Tooltip
-                placement="right"
-                title={copied ? locale.copied : locale.copy}
-                onOpenChange={onOpenChange}
-              >
-                <span>
-                  <CopyToClipboard text={`import { ${component} } from "antd";`} onCopy={onCopy}>
-                    <Typography.Text className={styles.code} onClick={onCopy}>
-                      {importList}
-                    </Typography.Text>
-                  </CopyToClipboard>
-                </span>
-              </Tooltip>
+              <CopyToClipboard text={`import { ${component} } from "antd";`} onCopy={onCopy}>
+                <Tooltip
+                  placement="right"
+                  title={copied ? locale.copied : locale.copy}
+                  onOpenChange={onOpenChange}
+                >
+                  <Typography.Text className={styles.code} onClick={onCopy}>
+                    {importList}
+                  </Typography.Text>
+                </Tooltip>
+              </CopyToClipboard>
             ),
           },
           filledSource && {

diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
@@ -700,21 +700,37 @@ describe('ColorPicker', () => {
   });
 
   describe('default clearValue should be changed', () => {
-    const Demo = () => {
-      const [color, setColor] = useState<string>('');
+    const Demo = ({ defaultValue }: { defaultValue?: string }) => {
+      const [color, setColor] = useState<string | undefined>(defaultValue);
       useEffect(() => {
         setColor('#1677ff');
       }, []);
       return <ColorPicker value={color} allowClear />;
     };
 
     it('normal', () => {
-      const { container } = render(<Demo />);
+      const { container } = render(<Demo defaultValue="" />);
 
       expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
     });
 
     it('strict', () => {
+      const { container } = render(
+        <React.StrictMode>
+          <Demo defaultValue="" />
+        </React.StrictMode>,
+      );
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+
+    it('default undefined, normal', () => {
+      const { container } = render(<Demo />);
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+
+    it('default undefined, strict', () => {
       const { container } = render(
         <React.StrictMode>
           <Demo />

diff --git a/components/color-picker/hooks/useColorState.ts b/components/color-picker/hooks/useColorState.ts
@@ -43,13 +43,11 @@ const useColorState = (
       return;
     }
     prevValue.current = value;
-    if (hasValue(value)) {
-      const newColor = generateColor(value || '');
-      if (prevColor.current.cleared === true) {
-        newColor.cleared = 'controlled';
-      }
-      setColorValue(newColor);
+    const newColor = generateColor(hasValue(value) ? value || '' : prevColor.current);
+    if (prevColor.current.cleared === true) {
+      newColor.cleared = 'controlled';
     }
+    setColorValue(newColor);
   }, [value]);
 
   return [colorValue, setColorValue, prevColor] as const;

diff --git a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
@@ -2243,7 +2243,7 @@ Array [
     <li
       class="ant-menu-submenu ant-menu-submenu-vertical"
       role="none"
-      style="background:rgba(255,255,255,0.3)"
+      style="background:rgba(255, 255, 255, 0.3)"
     >
       <div
         aria-expanded="false"
@@ -2284,7 +2284,7 @@ Array [
     <li
       class="ant-menu-submenu ant-menu-submenu-vertical"
       role="none"
-      style="background:rgba(255,255,255,0.3)"
+      style="background:rgba(255, 255, 255, 0.3)"
     >
       <div
         aria-expanded="false"

diff --git a/components/menu/demo/component-token.tsx b/components/menu/demo/component-token.tsx
@@ -12,7 +12,7 @@ import { ConfigProvider, Menu, Space, theme } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-const items: MenuProps['items'] = [
+const items: MenuItem[] = [
   {
     label: 'Navigation One',
     key: 'mail',
@@ -33,76 +33,74 @@ const items: MenuProps['items'] = [
         type: 'group',
         label: 'Item 1',
         children: [
-          {
-            label: 'Option 1',
-            key: 'setting:1',
-          },
-          {
-            label: 'Option 2',
-            key: 'setting:2',
-          },
+          { label: 'Option 1', key: 'setting:1' },
+          { label: 'Option 2', key: 'setting:2' },
         ],
       },
       {
         type: 'group',
         label: 'Item 2',
         children: [
-          {
-            label: 'Option 3',
-            key: 'setting:3',
-          },
-          {
-            label: 'Option 4',
-            key: 'setting:4',
-          },
+          { label: 'Option 3', key: 'setting:3' },
+          { label: 'Option 4', key: 'setting:4' },
         ],
       },
     ],
   },
   {
+    key: 'alipay',
     label: (
       <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
         Navigation Four - Link
       </a>
     ),
-    key: 'alipay',
   },
 ];
 
-function getItem(
-  label: React.ReactNode,
-  key: React.Key,
-  icon?: React.ReactNode,
-  children?: MenuItem[],
-  type?: 'group',
-): MenuItem {
-  return {
-    key,
-    icon,
-    children,
-    label,
-    type,
-  } as MenuItem;
-}
-
-const items2: MenuProps['items'] = [
-  getItem('Option 1', '1', <PieChartOutlined />),
-  getItem('Option 2', '2', <DesktopOutlined />),
-  getItem('Option 3', '3', <ContainerOutlined />),
-
-  getItem('Navigation One', 'sub1', <MailOutlined />, [
-    getItem('Option 5', '5'),
-    getItem('Option 6', '6'),
-    getItem('Option 7', '7'),
-    getItem('Option 8', '8'),
-  ]),
-
-  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
-    getItem('Option 9', '9'),
-    getItem('Option 10', '10'),
-
-    getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
-  ]),
+const items2: MenuItem[] = [
+  {
+    key: '1',
+    icon: <PieChartOutlined />,
+    label: 'Option 1',
+  },
+  {
+    key: '2',
+    icon: <DesktopOutlined />,
+    label: 'Option 2',
+  },
+  {
+    key: '3',
+    icon: <ContainerOutlined />,
+    label: 'Option 3',
+  },
+  {
+    key: 'sub1',
+    label: 'Navigation One',
+    icon: <MailOutlined />,
+    children: [
+      { key: '5', label: 'Option 5' },
+      { key: '6', label: 'Option 6' },
+      { key: '7', label: 'Option 7' },
+      { key: '8', label: 'Option 8' },
+    ],
+  },
+  {
+    key: 'sub2',
+    label: 'Navigation Two',
+    icon: <AppstoreOutlined />,
+    children: [
+      { key: '9', label: 'Option 9' },
+      { key: '10', label: 'Option 10' },
+      {
+        key: 'sub3',
+        label: 'Submenu',
+        children: [
+          { key: '11', label: 'Option 11' },
+          { key: '12', label: 'Option 12' },
+        ],
+      },
+    ],
+  },
 ];
 
 const App: React.FC = () => {

diff --git a/components/menu/demo/horizontal-dark.tsx b/components/menu/demo/horizontal-dark.tsx
@@ -3,7 +3,9 @@ import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/ico
 import type { MenuProps } from 'antd';
 import { Menu } from 'antd';
 
-const items: MenuProps['items'] = [
+type MenuItem = Required<MenuProps>['items'][number];
+
+const items: MenuItem[] = [
   {
     label: 'Navigation One',
     key: 'mail',
@@ -24,39 +26,27 @@ const items: MenuProps['items'] = [
         type: 'group',
         label: 'Item 1',
         children: [
-          {
-            label: 'Option 1',
-            key: 'setting:1',
-          },
-          {
-            label: 'Option 2',
-            key: 'setting:2',
-          },
+          { label: 'Option 1', key: 'setting:1' },
+          { label: 'Option 2', key: 'setting:2' },
         ],
       },
       {
         type: 'group',
         label: 'Item 2',
         children: [
-          {
-            label: 'Option 3',
-            key: 'setting:3',
-          },
-          {
-            label: 'Option 4',
-            key: 'setting:4',
-          },
+          { label: 'Option 3', key: 'setting:3' },
+          { label: 'Option 4', key: 'setting:4' },
         ],
       },
     ],
   },
   {
+    key: 'alipay',
     label: (
       <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
         Navigation Four - Link
       </a>
     ),
-    key: 'alipay',
   },
 ];
 

diff --git a/components/menu/demo/horizontal.tsx b/components/menu/demo/horizontal.tsx
@@ -3,7 +3,9 @@ import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/ico
 import type { MenuProps } from 'antd';
 import { Menu } from 'antd';
 
-const items: MenuProps['items'] = [
+type MenuItem = Required<MenuProps>['items'][number];
+
+const items: MenuItem[] = [
   {
     label: 'Navigation One',
     key: 'mail',
@@ -24,39 +26,27 @@ const items: MenuProps['items'] = [
         type: 'group',
         label: 'Item 1',
         children: [
-          {
-            label: 'Option 1',
-            key: 'setting:1',
-          },
-          {
-            label: 'Option 2',
-            key: 'setting:2',
-          },
+          { label: 'Option 1', key: 'setting:1' },
+          { label: 'Option 2', key: 'setting:2' },
         ],
       },
       {
         type: 'group',
         label: 'Item 2',
         children: [
-          {
-            label: 'Option 3',
-            key: 'setting:3',
-          },
-          {
-            label: 'Option 4',
-            key: 'setting:4',
-          },
+          { label: 'Option 3', key: 'setting:3' },
+          { label: 'Option 4', key: 'setting:4' },
         ],
       },
     ],
   },
   {
+    key: 'alipay',
     label: (
       <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
         Navigation Four - Link
       </a>
     ),
-    key: 'alipay',
   },
 ];