demo: update demo (#47021)

* demo: update demo * Update components/select/index.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-11-30 02:59:04 +08:00 · 2024-01-18 13:08:02 +08:00 · 2024-01-18 13:08:02 +08:00 · f35738fd8c
commit f35738fd8c
parent 4d41fbf315
7 changed files with 94 additions and 52 deletions
--- a/components/radio/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/radio/tests/snapshots/demo-extend.test.ts.snap
@ -486,7 +486,9 @@ Array [
 exports[`renders components/radio/demo/disabled.tsx extend context correctly 2`] = `[]`;

 exports[`renders components/radio/demo/radiobutton.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
  <div
    class="ant-radio-group ant-radio-group-outline"
  >
@ -567,10 +569,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-top: 16px;"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -650,10 +651,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-top: 16px;"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"
@ -736,14 +736,16 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
-]
+  </div>
+</div>
 `;

 exports[`renders components/radio/demo/radiobutton.tsx extend context correctly 2`] = `[]`;

 exports[`renders components/radio/demo/radiobutton-solid.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
  <div
    class="ant-radio-group ant-radio-group-solid"
  >
@ -824,10 +826,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-solid"
-    style="margin-top: 16px;"
  >
    <label
      class="ant-radio-button-wrapper"
@ -907,8 +908,8 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
-]
+  </div>
+</div>
 `;

 exports[`renders components/radio/demo/radiobutton-solid.tsx extend context correctly 2`] = `[]`;
@ -1459,7 +1460,9 @@ exports[`renders components/radio/demo/radiogroup-with-name.tsx extend context c
 exports[`renders components/radio/demo/radiogroup-with-name.tsx extend context correctly 2`] = `[]`;

 exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
  <div
    class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
  >
@ -1540,10 +1543,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-top: 16px;"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -1622,10 +1624,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
-    style="margin-top: 16px;"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -1704,8 +1705,8 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
-]
+  </div>
+</div>
 `;

 exports[`renders components/radio/demo/size.tsx extend context correctly 2`] = `[]`;
--- a/components/radio/tests/snapshots/demo.test.tsx.snap
+++ b/components/radio/tests/snapshots/demo.test.tsx.snap
@ -478,7 +478,9 @@ Array [
 `;

 exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
  <div
    class="ant-radio-group ant-radio-group-outline"
  >
@ -559,10 +561,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-top:16px"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -642,10 +643,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-top:16px"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"
@ -728,12 +728,14 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
-]
+  </div>
+</div>
 `;

 exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
  <div
    class="ant-radio-group ant-radio-group-solid"
  >
@ -814,10 +816,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-solid"
-    style="margin-top:16px"
  >
    <label
      class="ant-radio-button-wrapper"
@ -897,8 +898,8 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
-]
+  </div>
+</div>
 `;

 exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
@ -1439,7 +1440,9 @@ exports[`renders components/radio/demo/radiogroup-with-name.tsx correctly 1`] =
 `;

 exports[`renders components/radio/demo/size.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
  <div
    class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
  >
@ -1520,10 +1523,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-top:16px"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -1602,10 +1604,9 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
+  </div>
  <div
    class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
-    style="margin-top:16px"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -1684,8 +1685,8 @@ Array [
        Chengdu
      </span>
    </label>
-  </div>,
-]
+  </div>
+</div>
 `;

 exports[`renders components/radio/demo/wireframe.tsx correctly 1`] = `
--- a/components/radio/demo/radiobutton-solid.tsx
+++ b/components/radio/demo/radiobutton-solid.tsx
@ -1,15 +1,15 @@
 import React from 'react';
-import { Radio } from 'antd';
+import { Flex, Radio } from 'antd';

 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
    <Radio.Group defaultValue="a" buttonStyle="solid">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-    <Radio.Group defaultValue="c" buttonStyle="solid" style={{ marginTop: 16 }}>
+    <Radio.Group defaultValue="c" buttonStyle="solid">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b" disabled>
        Shanghai
@ -17,7 +17,7 @@ const App: React.FC = () => (
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-  </>
+  </Flex>
 );

 export default App;
--- a/components/radio/demo/radiobutton.tsx
+++ b/components/radio/demo/radiobutton.tsx
@ -1,20 +1,20 @@
 import React from 'react';
 import type { RadioChangeEvent } from 'antd';
-import { Radio } from 'antd';
+import { Flex, Radio } from 'antd';

 const onChange = (e: RadioChangeEvent) => {
  console.log(`radio checked:${e.target.value}`);
 };

 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
    <Radio.Group onChange={onChange} defaultValue="a">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-    <Radio.Group onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
+    <Radio.Group onChange={onChange} defaultValue="a">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b" disabled>
        Shanghai
@ -22,13 +22,13 @@ const App: React.FC = () => (
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-    <Radio.Group disabled onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
+    <Radio.Group disabled onChange={onChange} defaultValue="a">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-  </>
+  </Flex>
 );

 export default App;
--- a/components/radio/demo/size.tsx
+++ b/components/radio/demo/size.tsx
@ -1,27 +1,27 @@
 import React from 'react';
-import { Radio } from 'antd';
+import { Flex, Radio } from 'antd';

 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
    <Radio.Group defaultValue="a" size="large">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-    <Radio.Group defaultValue="a" style={{ marginTop: 16 }}>
+    <Radio.Group defaultValue="a">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-    <Radio.Group defaultValue="a" size="small" style={{ marginTop: 16 }}>
+    <Radio.Group defaultValue="a" size="small">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
-  </>
+  </Flex>
 );

 export default App;
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -16,6 +16,26 @@ Select component to select value from options.
 - Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).
 - You probably need [AutoComplete](/components/auto-complete/) if you're looking for an input box that can be typed or selected.

+### Usage upgrade after 5.11.0
+
+<!-- prettier-ignore -->
+:::info
+After version 5.11.0, we provide a simpler usage `<Select options={[...]} />` with better performance and potential of writing simpler code style in your applications.
+Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.
+:::
+
+```jsx
+// works when >=5.11.0, recommended ✅
+return <Select options={[{ value: 'sample', label: <span>sample</span> }]} />;
+
+// works when <5.11.0, deprecated when >=5.11.0 🙅🏻‍♀️
+return (
+  <Select onChange={onChange}>
+    <Select.Option value="sample">Sample</Select.Option>
+  </Select>
+);
+```
+
 ## Examples

 <!-- prettier-ignore -->
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -17,6 +17,26 @@ demo:
 - 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
 - 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/auto-complete-cn/)。

+### 5.11.0 用法升级
+
+<!-- prettier-ignore -->
+:::info
+在 5.11.0 版本后，我们提供了 `<Select options={[...]} />` 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。
+同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。
+:::
+
+```jsx
+// >=5.11.0 可用，推荐的写法 ✅
+return <Select options={[{ value: 'sample', label: <span>sample</span> }]} />;
+
+// 5.x 都可用，>=5.11.0 时不推荐 🙅🏻‍♀️
+return (
+  <Select onChange={onChange}>
+    <Select.Option value="sample">Sample</Select.Option>
+  </Select>
+);
+```
+
 ## 代码演示

 <!-- prettier-ignore -->