Merge pull request #1616 from DouyinFE/fix/tabs-icon

Fix/tabs icon

packages/semi-foundation/tabs/tabs.scss

@@ -4,6 +4,8 @@
 
 
 $module: #{$prefix}-tabs;
+// Prevent the Radio and Checkbox in ReactNode passed in through the tab attribute in Tabs from being affected by the icon style override
+$ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix}-icon-checkbox_indeterminate';
 
 .#{$module} {
     box-sizing: border-box;
@@ -41,7 +43,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -50,7 +52,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -61,7 +63,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -69,7 +71,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -84,16 +86,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }
@@ -123,7 +125,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -132,7 +134,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -143,7 +145,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -151,7 +153,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -166,16 +168,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }

packages/semi-ui/tabs/_story/tabs.stories.jsx

@@ -3,9 +3,9 @@ import Tabs from '../index';
 import Button from '@douyinfe/semi-ui/button/index';
 import Typography from '@douyinfe/semi-ui/typography/index';
 import Switch from '@douyinfe/semi-ui/switch/index';
-import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { Radio, RadioGroup, Checkbox } from '@douyinfe/semi-ui';
 import Icon from '../../icons';
-import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';
+import { IconFile, IconGlobe, IconHelpCircle, IconClose } from '@douyinfe/semi-icons';
 const TabPane = Tabs.TabPane;
 const { Title } = Typography;
 
@@ -987,3 +987,19 @@ export const Fix1456 = () =>{
 Fix1456.story = {
   name: 'Fix-1456',
 };
+
+export const IconStyle = () => {
+  return (
+    <Tabs type="card" >
+        <TabPane tab={<span><IconClose />文档</span> } itemKey="1" closable={true}>
+          用于测试图标设置为 close icon 是否正确
+        </TabPane>
+        <TabPane tab={<Radio defaultChecked>test2</Radio>} itemKey="2">
+          用于测试 tab 下的 Radio 中的 semi-icon 是否收到影响
+        </TabPane>
+        <TabPane tab={<Checkbox defaultChecked>test2</Checkbox>} itemKey="3">
+          用于测试 Checkbox 下的 Radio 中的 semi-icon 是否收到影响
+        </TabPane>
+    </Tabs>
+  )
+}