fix(tabs): remove width='inherit' and height='inherit' (#1839)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Feb 11, 2022 · 679be96 · 679be96 · vercel · Feb 11, 2022
1 parent 40e5162
commit 679be96
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
@@ -56,9 +56,10 @@ export const Tabs = WithRef<
 
     const tabPanels = elementList.map((tab: React.ReactElement<WithCommonProps<TabProps>>, index) => {
       if (isNil(tab.props.value)) {
-        return React.cloneElement(<Tab />, { ...tab.props, value: index });
+        // eslint-disable-next-line react/no-array-index-key
+        return React.cloneElement(<Tab />, { ...tab.props, value: index, key: index });
       }
-      return React.cloneElement(<Tab />, tab.props);
+      return React.cloneElement(<Tab />, { ...tab.props, key: tab.props.value });
     });
 
     return (

diff --git a/src/tabs/demos/Tabs.stories.tsx b/src/tabs/demos/Tabs.stories.tsx
@@ -38,16 +38,17 @@ const templateIconArr = [
   <FlowOutlined />,
 ];
 const renderItems = () =>
-  templateIconArr.map((item, index) => <Tab label={`Option${index}`} value={index} prefix={item} />);
-const noTabItem = () => templateIconArr.map((item, index) => <Tab value={index} prefix={item} />);
-const noPrefixItems = () => templateIconArr.map((item, index) => <Tab label={`Option${index}`} value={index} />);
+  templateIconArr.map((item, index) => <Tab label={`Option${index}`} value={index} prefix={item} key={index} />);
+const noTabItem = () => templateIconArr.map((item, index) => <Tab value={index} prefix={item} key={index} />);
+const noPrefixItems = () =>
+  templateIconArr.map((item, index) => <Tab label={`Option${index}`} value={index} key={index} />);
 const disabledItems = () =>
   templateIconArr.map((item, index) => (
-    <Tab label={`Option${index}`} value={index} disabled={!Math.round(Math.random())} />
+    <Tab label={`Option${index}`} value={index} disabled={!Math.round(Math.random())} key={index} />
   ));
 const haveChildrenItems = () =>
   templateIconArr.map((item, index) => (
-    <Tab label={`Option${index}`} value={index}>
+    <Tab label={`Option${index}`} value={index} key={index}>
       <div
         style={{
           backgroundColor: '#f7f8fc',
@@ -107,12 +108,12 @@ const DemoTemplate: Story<TabsProps> = (args) => (
         <td>
           <Tabs style={{ marginBottom: 10 }} {...args}>
             {templateIconArr.map((item, index) => (
-              <Tab label={`Option${index}`} value={index} />
+              <Tab label={`Option${index}`} value={index} key={index} />
             ))}
           </Tabs>
           <Tabs size="small" {...args}>
             {templateIconArr.map((item, index) => (
-              <Tab label={`Option${index}`} value={index} />
+              <Tab label={`Option${index}`} value={index} key={index} />
             ))}
           </Tabs>
         </td>
@@ -123,7 +124,7 @@ const DemoTemplate: Story<TabsProps> = (args) => (
         <td style={{ width: 500 }}>
           <Tabs {...args}>
             {[...Array(10)].map((item, index) => (
-              <Tab label={`Option${index}`} value={index} />
+              <Tab label={`Option${index}`} value={index} key={index} />
             ))}
           </Tabs>
         </td>
@@ -141,7 +142,7 @@ const DemoTemplate: Story<TabsProps> = (args) => (
         <td>
           <Tabs {...args}>
             {templateIconArr.map((item, index) => (
-              <Tab label={`Option${index}`} value={index} prefix={item} />
+              <Tab label={`Option${index}`} value={index} key={index} prefix={item} />
             ))}
           </Tabs>
         </td>
@@ -152,7 +153,7 @@ const DemoTemplate: Story<TabsProps> = (args) => (
         <td>
           <Tabs {...args}>
             {templateIconArr.map((item, index) => (
-              <Tab value={index} prefix={item} />
+              <Tab value={index} prefix={item} key={index} />
             ))}
           </Tabs>
         </td>
@@ -163,7 +164,7 @@ const DemoTemplate: Story<TabsProps> = (args) => (
         <td>
           <Tabs {...args}>
             {templateIconArr.map((item, index) => (
-              <Tab label={`Option${index}`} value={index} />
+              <Tab label={`Option${index}`} value={index} key={index} />
             ))}
           </Tabs>
         </td>
@@ -174,7 +175,7 @@ const DemoTemplate: Story<TabsProps> = (args) => (
         <td>
           <Tabs {...args}>
             {templateIconArr.map((item, index) => (
-              <Tab label={`Option${index}`} value={index} disabled={!Math.round(Math.random())} />
+              <Tab label={`Option${index}`} value={index} key={index} disabled={!Math.round(Math.random())} />
             ))}
           </Tabs>
         </td>
@@ -190,7 +191,7 @@ const DemoTemplate: Story<TabsProps> = (args) => (
             }}
           >
             {templateIconArr.map((item, index) => (
-              <Tab label={`Option${index}`} value={index}>
+              <Tab label={`Option${index}`} value={index} key={index}>
                 <div
                   style={{
                     backgroundColor: '#f7f8fc',

diff --git a/src/tabs/style/index.less b/src/tabs/style/index.less
@@ -1,11 +1,9 @@
-@import '../../stylesheet/variables/index.less';
+@import (reference) '../../stylesheet/variables/index.less';
 
 @tabs-prefix-cls: ~'@{component-prefix}-tabs';
 
 .@{tabs-prefix-cls} {
   display: block;
-  width: inherit;
-  height: inherit;
   overflow-y: auto;
   .scrollbar(@x: overlay, @y: overlay);