fix(select): Fix Typography component is not centered in the Select component (#40422)

Co-authored-by: Yuiai01 <dujiaqi@kezaihui.com>
2 years ago · 2e9d14f282
8 changed files with 320 additions and 0 deletions
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
@ -3960,6 +3960,191 @@ exports[`renders ./components/select/demo/optgroup.tsx extend context correctly
 </div>
 `;

+exports[`renders ./components/select/demo/option-label-center.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-8px"
+>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <div
+      class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+      style="width:120px"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-activedescendant="undefined_list_0"
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-haspopup="listbox"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-item"
+          title="long, long, long piece of text"
+        >
+          long, long, long piece of text
+        </span>
+      </div>
+      <div>
+        <div
+          class="ant-select-dropdown"
+          style="opacity:0"
+        >
+          <div>
+            <div
+              id="undefined_list"
+              role="listbox"
+              style="height:0;width:0;overflow:hidden"
+            >
+              <div
+                aria-selected="false"
+                id="undefined_list_0"
+                role="option"
+              >
+                long
+              </div>
+              <div
+                aria-selected="false"
+                id="undefined_list_1"
+                role="option"
+              >
+                short
+              </div>
+            </div>
+            <div
+              class="rc-virtual-list"
+              style="position:relative"
+            >
+              <div
+                class="rc-virtual-list-holder"
+                style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+              >
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    style="display:flex;flex-direction:column"
+                  >
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        <article
+                          class="ant-typography"
+                        >
+                          long, long, long piece of text
+                        </article>
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select:none;-webkit-user-select:none"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        <article
+                          class="ant-typography"
+                        >
+                          short
+                        </article>
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select:none;-webkit-user-select:none"
+                        unselectable="on"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/select/demo/option-label-prop.tsx extend context correctly 1`] = `
 <div
  class="ant-select ant-select-multiple ant-select-show-search"
--- a/components/select/tests/snapshots/demo.test.tsx.snap
+++ b/components/select/tests/snapshots/demo.test.tsx.snap
@ -1562,6 +1562,105 @@ exports[`renders ./components/select/demo/optgroup.tsx correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/select/demo/option-label-center.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-8px"
+>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <div
+      class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
+      style="width:120px"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-activedescendant="undefined_list_0"
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-haspopup="listbox"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-item"
+          title="long, long, long piece of text"
+        >
+          long, long, long piece of text
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/select/demo/option-label-prop.tsx correctly 1`] = `
 <div
  class="ant-select ant-select-multiple ant-select-show-search"
--- a/components/select/demo/option-label-center.md
+++ b/components/select/demo/option-label-center.md
@ -0,0 +1,7 @@
+## zh-CN
+
+选项文本居中
+
+## en-US
+
+Options label Centered.
--- a/components/select/demo/option-label-center.tsx
+++ b/components/select/demo/option-label-center.tsx
@ -0,0 +1,18 @@
+import React from 'react';
+import { Select, Space, Typography } from 'antd';
+
+const App: React.FC = () => (
+  <Space wrap>
+    <Select
+      defaultValue="long, long, long piece of text"
+      style={{ width: 120 }}
+      allowClear
+      options={[
+        { value: 'long', label: <Typography>long, long, long piece of text</Typography> },
+        { value: 'short', label: <Typography>short</Typography> },
+      ]}
+    />
+  </Space>
+);
+
+export default App;
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -42,6 +42,7 @@ Select component to select value from options.
 <code src="./demo/placement.tsx">Placement</code>
 <code src="./demo/debug.tsx" debug>4.0 Debug</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/option-label-center.tsx" debug>Options label Centered</code>

 ## API

--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -43,6 +43,7 @@ demo:
 <code src="./demo/placement.tsx">弹出位置</code>
 <code src="./demo/debug.tsx" debug>4.0 Debug</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/option-label-center.tsx" debug>选项文本居中</code>

 ## API

--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -114,6 +114,10 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
            '&-content': {
              flex: 'auto',
              ...textEllipsis,
+
+              '> *': {
+                ...textEllipsis,
+              },
            },

            '&-state': {
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -144,6 +144,11 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
        flex: 1,
        fontWeight: 'normal',
        ...textEllipsis,
+
+        '> *': {
+          lineHeight: 'inherit',
+          ...textEllipsis,
+        },
      },

      // ======================= Placeholder =======================