Merge pull request #1438 from XiaoMi/feature/#1437

Feature/#1437
XiaoMi · Dec 16, 2020 · 55a3817 · 55a3817
2 parents 682f9c4 + 915ecd8
commit 55a3817
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - 修复 `DatePicker` 在 type 为 daterange 时候，传入不合法日期，面板显示异常 [#1418](https://github.com/XiaoMi/hiui/issues/1418)
 - 修复 `Table` 对其他组件造成的样式污染问题 [#1428](https://github.com/XiaoMi/hiui/issues/1428)
 - 修复 `Tree` onDrop 回调函数参数不正确的问题 [#1425](https://github.com/XiaoMi/hiui/issues/1425)
+- 优化 `Tabs` 组件弹出层样式[#1437](https://github.com/XiaoMi/hiui/issues/1437)
 
 ## 3.2.0
 

diff --git a/components/tabs/ItemDropdown.js b/components/tabs/ItemDropdown.js
@@ -79,27 +79,28 @@ class ItemDropdown extends Component {
           attachEle={this.toggleRef}
           zIndex={1010}
           width="auto"
-          leftGap={-18}
           topGap={3}
         >
-          <div className={classNames('hi-tabs-dropdown__items', `theme__${theme}`)}>
-            {items.map((item, index) => {
-              return (
-                <div
-                  className={classNames('hi-tabs-dropdown__item', {
-                    'hi-tabs-dropdown__item--active': index === activeIndex,
-                    'hi-tabs-dropdown__item--focus': index === focusIndex
-                  })}
-                  onClick={(e) => {
-                    this.toggle()
-                    onChoose(item, e)
-                  }}
-                  key={index}
-                >
-                  {item.tabTitle}
-                </div>
-              )
-            })}
+          <div className={classNames('hi-tabs-dropdown__wrapper', `theme__${theme}`)}>
+            <ul className={classNames('hi-tabs-dropdown__items', `theme__${theme}`)}>
+              {items.map((item, index) => {
+                return (
+                  <li
+                    className={classNames('hi-tabs-dropdown__item', {
+                      'hi-tabs-dropdown__item--active': index === activeIndex,
+                      'hi-tabs-dropdown__item--focus': index === focusIndex
+                    })}
+                    onClick={(e) => {
+                      this.toggle()
+                      onChoose(item, e)
+                    }}
+                    key={index}
+                  >
+                    {item.tabTitle}
+                  </li>
+                )
+              })}
+            </ul>
           </div>
         </Popper>
       </div>

diff --git a/components/tabs/style/index.scss b/components/tabs/style/index.scss
@@ -394,18 +394,26 @@ $prefix: 'hi-tabs' !default;
 }
 
 .hi-tabs-dropdown {
+  &__wrapper {
+    max-height: 178px;
+    padding: 8px 0;
+    overflow: auto;
+    background-color: use-color('white');
+    border-radius: 2px;
+    border: 1px solid use-color('gray-20');
+    box-shadow: 0 2px 8px 0 rgba(56, 62, 71, 0.1);
+  }
+
   &__toggle-title {
     margin-right: 8px;
   }
 
   &__items {
-    max-height: 160px;
-    padding: 4px 0;
+    max-height: 162px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
     overflow: auto;
-    background-color: use-color('white');
-    border-radius: 2px;
-    border: 1px solid use-color('gray-20');
-    box-shadow: 0 2px 8px 0 rgba(56, 62, 71, 0.1);
   }
 
   &__item {