Browse Source

fix: [Tabs] Fix the wrong style of Radio and Checkbox in ReactNode passed in through the tab API in Tabs

zhangyumei.0319 2 years ago
parent
commit
dfa696b2e0

+ 6 - 6
packages/semi-foundation/tabs/tabs.scss

@@ -52,7 +52,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
 
             }
             }
 
 
-            .#{$prefix}-icon.#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 margin-right: 0;
                 font-size: 14px;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
                 color: var(--semi-color-text-2);
@@ -90,12 +90,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                     color: $color-tabs_tab_selected-icon-default;
                     color: $color-tabs_tab_selected-icon-default;
                 }
                 }
 
 
-                .#{$prefix}-icon.#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                     color: var(--semi-color-text-2);
                 }
                 }
             }
             }
 
 
-            .#{$prefix}-icon.#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
                 color: var(--semi-color-text-1);
             }
             }
         }
         }
@@ -134,7 +134,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
 
             }
             }
 
 
-            .#{$prefix}-icon.#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 margin-right: 0;
                 font-size: 14px;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
                 color: var(--semi-color-text-2);
@@ -172,12 +172,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                     color: $color-tabs_tab_selected-icon-default;
                     color: $color-tabs_tab_selected-icon-default;
                 }
                 }
 
 
-                .#{$prefix}-icon.#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                     color: var(--semi-color-text-2);
                 }
                 }
             }
             }
 
 
-            .#{$prefix}-icon.#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
                 color: var(--semi-color-text-1);
             }
             }
         }
         }

+ 7 - 4
packages/semi-ui/tabs/_story/tabs.stories.jsx

@@ -5,7 +5,7 @@ import Typography from '@douyinfe/semi-ui/typography/index';
 import Switch from '@douyinfe/semi-ui/switch/index';
 import Switch from '@douyinfe/semi-ui/switch/index';
 import { Radio, RadioGroup, Checkbox } from '@douyinfe/semi-ui';
 import { Radio, RadioGroup, Checkbox } from '@douyinfe/semi-ui';
 import Icon from '../../icons';
 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 TabPane = Tabs.TabPane;
 const { Title } = Typography;
 const { Title } = Typography;
 
 
@@ -990,11 +990,14 @@ Fix1456.story = {
 
 
 export const IconStyle = () => {
 export const IconStyle = () => {
   return (
   return (
-    <Tabs type="line">
-        <TabPane tab={<Radio defaultChecked>test2</Radio>} itemKey="1">
+    <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 是否收到影响
           用于测试 tab 下的 Radio 中的 semi-icon 是否收到影响
         </TabPane>
         </TabPane>
-        <TabPane tab={<Checkbox defaultChecked>test2</Checkbox>} itemKey="2">
+        <TabPane tab={<Checkbox defaultChecked>test2</Checkbox>} itemKey="3">
           用于测试 Checkbox 下的 Radio 中的 semi-icon 是否收到影响
           用于测试 Checkbox 下的 Radio 中的 semi-icon 是否收到影响
         </TabPane>
         </TabPane>
     </Tabs>
     </Tabs>