feat: Tab Item support icon prop (#46096)

* feat: Tab Item support icon prop * Update package.json Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * fix: fix style * Update components/tabs/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/style/index.ts Co-authored-by: MadCcc <madccc@foxmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <madccc@foxmail.com>
1 year ago · 1eee6d90ce
parent 2eba0e0071
commit 1eee6d90ce
7 changed files with 29 additions and 13 deletions
--- a/components/tabs/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tabs/tests/snapshots/demo-extend.test.ts.snap
@ -3244,7 +3244,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
            role="tab"
            tabindex="0"
          >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
              <span
                aria-label="apple"
                class="anticon anticon-apple"
@ -3264,6 +3266,8 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
                  />
                </svg>
              </span>
+            </span>
+            <span>
              Tab 1
            </span>
          </div>
@ -3280,7 +3284,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
            role="tab"
            tabindex="0"
          >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
              <span
                aria-label="android"
                class="anticon anticon-android"
@ -3300,6 +3306,8 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
                  />
                </svg>
              </span>
+            </span>
+            <span>
              Tab 2
            </span>
          </div>
--- a/components/tabs/tests/snapshots/demo.test.ts.snap
+++ b/components/tabs/tests/snapshots/demo.test.ts.snap
@ -2709,7 +2709,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
            role="tab"
            tabindex="0"
          >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
              <span
                aria-label="apple"
                class="anticon anticon-apple"
@ -2729,6 +2731,8 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
                  />
                </svg>
              </span>
+            </span>
+            <span>
              Tab
              <!-- -->
              1
@ -2745,7 +2749,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
            role="tab"
            tabindex="0"
          >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
              <span
                aria-label="android"
                class="anticon anticon-android"
@ -2765,6 +2771,8 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
                  />
                </svg>
              </span>
+            </span>
+            <span>
              Tab
              <!-- -->
              2
--- a/components/tabs/demo/icon.tsx
+++ b/components/tabs/demo/icon.tsx
@ -7,16 +7,11 @@ const App: React.FC = () => (
    defaultActiveKey="2"
    items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
      const id = String(i + 1);
-
      return {
-        label: (
-          <span>
-            <Icon />
-            Tab {id}
-          </span>
-        ),
+        label: <span>Tab {id}</span>,
        key: id,
        children: `Tab ${id}`,
+        icon: <Icon />,
      };
    })}
  />
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -82,6 +82,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
 | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |  |
 | key | TabPane's key | string | - |  |
 | label | TabPane's head display text | ReactNode | - |  |
+| icon | TabPane's head display icon | ReactNode | - | 5.12.0 |
 | children | TabPane's head display content | ReactNode | - |  |
 | closable | Whether a close (x) button is visible, Only works while `type="editable-card"` | boolean | true |  |

--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -84,6 +84,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
 | key | 对应 activeKey | string | - |  |
 | label | 选项卡头显示文字 | ReactNode | - |  |
+| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
 | children | 选项卡头显示内容 | ReactNode | - |  |
 | closable | 是否显示选项卡的关闭按钮，在 `type="editable-card"` 时有效 | boolean | true |  |

--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@ -691,6 +691,9 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
      '&-btn': {
        outline: 'none',
        transition: 'all 0.3s',
+        [`${tabCls}-icon:not(:last-child)`]: {
+          marginInlineEnd: token.marginSM,
+        },
      },
      '&-remove': {
        flex: 'none',
@ -734,7 +737,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
      [`& ${tabCls}-remove ${iconCls}`]: {
        margin: 0,
      },
-      [iconCls]: {
+      [`${iconCls}:not(:last-child)`]: {
        marginRight: {
          _skip_check_: true,
          value: token.marginSM,
--- a/package.json
+++ b/package.json
@ -151,7 +151,7 @@
    "rc-steps": "~6.0.1",
    "rc-switch": "~4.1.0",
    "rc-table": "~7.36.0",
-    "rc-tabs": "~12.13.1",
+    "rc-tabs": "~12.14.1",
    "rc-textarea": "~1.5.3",
    "rc-tooltip": "~6.1.2",
    "rc-tree": "~5.8.2",