Merge pull request #16737 from ant-design/add-select-optionLabelProp-demo

docs: Add select optionLabelProp demo

components/select/__tests__/__snapshots__/demo.test.js.snap

@@ -647,6 +647,91 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = `
+<div
+  class="ant-select ant-select-enabled"
+  style="width:100%"
+>
+  <div
+    aria-autocomplete="list"
+    aria-controls=""
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="ant-select-selection
+            ant-select-selection--multiple"
+    role="combobox"
+  >
+    <div
+      class="ant-select-selection__rendered"
+    >
+      <div
+        class="ant-select-selection__placeholder"
+        style="display:none;user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        select one country
+      </div>
+      <ul>
+        <li
+          class="ant-select-selection__choice"
+          role="presentation"
+          style="user-select:none;-webkit-user-select:none"
+          title="China"
+          unselectable="on"
+        >
+          <div
+            class="ant-select-selection__choice__content"
+          >
+            China
+          </div>
+          <span
+            class="ant-select-selection__choice__remove"
+          >
+            <i
+              aria-label="icon: close"
+              class="anticon anticon-close ant-select-remove-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </i>
+          </span>
+        </li>
+        <li
+          class="ant-select-search ant-select-search--inline"
+        >
+          <div
+            class="ant-select-search__field__wrap"
+          >
+            <input
+              autocomplete="off"
+              class="ant-select-search__field"
+              value=""
+            />
+            <span
+              class="ant-select-search__field__mirror"
+            >
+               
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/select/demo/search.md correctly 1`] = `
 <div
   class="ant-select ant-select-enabled"

components/select/demo/multiple.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-多选，从已有条目中选择（scroll the menu）
+多选，从已有条目中选择。
 
 ## en-US
 
-Multiple selection, selecting from existing items (scroll the menu).
+Multiple selection, selecting from existing items.
 
 ```jsx
 import { Select } from 'antd';

components/select/demo/option-label-prop.md

@@ -0,0 +1,61 @@
+---
+order: 4
+title:
+  zh-CN: 定制回填内容
+  en-US: Custom selection render
+---
+
+## zh-CN
+
+使用 `optionLabelProp` 指定回填到选择框的 `Option` 属性。
+
+## en-US
+
+Spacified the prop name of Option which will be rendered in select box.
+
+```jsx
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+function handleChange(value) {
+  console.log(`selected ${value}`);
+}
+
+ReactDOM.render(
+  <Select
+    mode="multiple"
+    style={{ width: '100%' }}
+    placeholder="select one country"
+    defaultValue={['china']}
+    onChange={handleChange}
+    optionLabelProp="label"
+  >
+    <Option value="china" label="China">
+      <span role="img" aria-label="China">
+        🇨🇳{' '}
+      </span>
+      China (中国)
+    </Option>
+    <Option value="usa" label="USA">
+      <span role="img" aria-label="USA">
+        🇺🇸{' '}
+      </span>
+      USA (美国)
+    </Option>
+    <Option value="japan" label="Japan">
+      <span role="img" aria-label="USA">
+        🇯🇵{' '}
+      </span>
+      Japan (日本)
+    </Option>
+    <Option value="koean" label="Koean">
+      <span role="img" aria-label="USA">
+        🇰🇷{' '}
+      </span>
+      Koean (韩国)
+    </Option>
+  </Select>,
+  mountNode,
+);
+```

components/select/index.en-US.md

@@ -43,7 +43,7 @@ Select component to select value from options.
 | mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' |
 | notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
-| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes |
+| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes |
 | placeholder | Placeholder of select | string\|ReactNode | - |
 | showArrow | Whether to show the drop-down arrow | boolean | true |
 | showSearch | Whether show search input in single mode. | boolean | false |

components/select/index.zh-CN.md

@@ -43,7 +43,7 @@ title: Select
 | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - |
 | mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - |
 | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
-| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
+| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
 | placeholder | 选择框默认文字 | string | - |
 | showArrow | 是否显示下拉小箭头 | boolean | true |