demo: update Grid、Table、Select demo (ant-design#47709)

* demo: update demo * fix: fix test * feat: table snap --------- Co-authored-by: 叶枫 <[email protected]>
madocto · Mar 5, 2024 · c01c1b5 · c01c1b5
1 parent 0d5e0df
commit c01c1b5
Show file tree

Hide file tree

Showing 11 changed files with 233 additions and 149 deletions.
diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1500,14 +1500,16 @@ exports[`renders components/grid/demo/sort.tsx extend context correctly 1`] = `
 exports[`renders components/grid/demo/sort.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 1`] = `
-Array [
-  Current break point: ,
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+>
+  Current break point:
   <span
     class="ant-tag ant-tag-blue"
   >
     xs
-  </span>,
-]
+  </span>
+</div>
 `;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 2`] = `[]`;
diff --git a/components/grid/__tests__/__snapshots__/demo.test.ts.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
@@ -1419,9 +1419,9 @@ exports[`renders components/grid/demo/sort.tsx correctly 1`] = `
 `;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx correctly 1`] = `
-Array [
-  Current break point:,
-  <!-- -->,
-   ,
-]
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+>
+  Current break point:
+</div>
 `;
diff --git a/components/grid/demo/useBreakpoint.tsx b/components/grid/demo/useBreakpoint.tsx
@@ -1,22 +1,21 @@
 import React from 'react';
-import { Grid, Tag } from 'antd';
+import { Flex, Grid, Tag } from 'antd';
 
 const { useBreakpoint } = Grid;
 
 const App: React.FC = () => {
   const screens = useBreakpoint();
-
   return (
-    <>
-      Current break point:{' '}
+    <Flex wrap="wrap" gap="small">
+      Current break point:
       {Object.entries(screens)
         .filter((screen) => !!screen[1])
-        .map((screen) => (
+        .map<React.ReactNode>((screen) => (
           <Tag color="blue" key={screen[0]}>
             {screen[0]}
           </Tag>
         ))}
-    </>
+    </Flex>
   );
 };
 

diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1522,9 +1522,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
         <span>
           <span
             class="ant-tag ant-tag-gold"
-            style="margin-right: 3px;"
+            style="margin-inline-end: 4px;"
           >
-            gold
+            <span>
+              gold
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -1556,9 +1558,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
         <span>
           <span
             class="ant-tag ant-tag-cyan"
-            style="margin-right: 3px;"
+            style="margin-inline-end: 4px;"
           >
-            cyan
+            <span>
+              cyan
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -1657,12 +1661,13 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
               <div
                 aria-selected="true"
                 class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                title="gold"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  gold
+                  <span>
+                    gold
+                  </span>
                 </div>
                 <span
                   aria-hidden="true"
@@ -1694,34 +1699,37 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
-                title="lime"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  lime
+                  <span>
+                    lime
+                  </span>
                 </div>
               </div>
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
-                title="green"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  green
+                  <span>
+                    green
+                  </span>
                 </div>
               </div>
               <div
                 aria-selected="true"
                 class="ant-select-item ant-select-item-option ant-select-item-option-selected"
-                title="cyan"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  cyan
+                  <span>
+                    cyan
+                  </span>
                 </div>
                 <span
                   aria-hidden="true"

diff --git a/components/select/__tests__/__snapshots__/demo.test.tsx.snap b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
@@ -718,9 +718,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
         <span>
           <span
             class="ant-tag ant-tag-gold"
-            style="margin-right:3px"
+            style="margin-inline-end:4px"
           >
-            gold
+            <span>
+              gold
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -752,9 +754,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
         <span>
           <span
             class="ant-tag ant-tag-cyan"
-            style="margin-right:3px"
+            style="margin-inline-end:4px"
           >
-            cyan
+            <span>
+              cyan
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"

diff --git a/components/select/demo/custom-tag-render.tsx b/components/select/demo/custom-tag-render.tsx
@@ -4,7 +4,12 @@ import type { SelectProps } from 'antd';
 
 type TagRender = SelectProps['tagRender'];
 
-const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
+const options: SelectProps['options'] = [
+  { value: 'gold', label: <span>gold</span> },
+  { value: 'lime', label: <span>lime</span> },
+  { value: 'green', label: <span>green</span> },
+  { value: 'cyan', label: <span>cyan</span> },
+];
 
 const tagRender: TagRender = (props) => {
   const { label, value, closable, onClose } = props;
@@ -18,7 +23,7 @@ const tagRender: TagRender = (props) => {
       onMouseDown={onPreventMouseDown}
       closable={closable}
       onClose={onClose}
-      style={{ marginRight: 3 }}
+      style={{ marginInlineEnd: 4 }}
     >
       {label}
     </Tag>