Merge pull request #994 from XiaoMi/hotfix/#993

fix: #993
XiaoMi · Mar 18, 2020 · 05bff15 · 05bff15
2 parents 96ec295 + 8051769
commit 05bff15
Show file tree

Hide file tree

Showing 27 changed files with 117 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # 更新日志
 
+## 2.11.0
+
+- 新增 `<DatePicker />` altCalendarPreset 预设历法信息（支持中国农历和印度节假日），altCalendar 自定义日期显示，dateMarkRender 自定义日期右上角显示标志，dateMarkPreset 预设右上角显示标志「班」和「休」 [#902](https://github.com/XiaoMi/hiui/issues/902)[#992](https://github.com/XiaoMi/hiui/issues/992)
+- 修复 `<Menu />` 高亮、展开对应菜单项不正确的问题 [#993](https://github.com/XiaoMi/hiui/issues/993)
+- 优化若干视觉还原问题：[#990](https://github.com/XiaoMi/hiui/issues/990) [#991](https://github.com/XiaoMi/hiui/issues/991) [#998](https://github.com/XiaoMi/hiui/issues/998) [#1000](https://github.com/XiaoMi/hiui/issues/1000) [#954](https://github.com/XiaoMi/hiui/issues/954) [#1001](https://github.com/XiaoMi/hiui/issues/1001) [#1002](https://github.com/XiaoMi/hiui/issues/1002) [#1003](https://github.com/XiaoMi/hiui/issues/1003) [#1004](https://github.com/XiaoMi/hiui/issues/1004) [#1005](https://github.com/XiaoMi/hiui/issues/1005)
+
 ## 2.10.0
 
 - 新增 `<Upload />` onDownload 点击上传成功文件的回调 [#613](https://github.com/XiaoMi/hiui/issues/613)

diff --git a/components/alert/style/index.scss b/components/alert/style/index.scss
@@ -2,7 +2,7 @@
 
 .hi-alert {
   position: relative;
-  padding: 9px 12px;
+  padding: 9px 11px;
   background: #ebf2fd;
   border: 1px solid #b3cdfb;
   border-radius: 2px;
@@ -89,8 +89,15 @@
   .hi-alert.theme__#{$key} {
     &.info {
       color: $value;
-      background-color: rgba(map-get(get-palette(get-color($palette-primary, $key)), '50'), 0.1);
-      border: 1px solid map-get(get-palette(get-color($palette-primary, $key)), '20');
+      background-color:
+        rgba(
+          map-get(get-palette(get-color($palette-primary, $key)), '50'),
+          0.1
+        );
+      border:
+        1px
+        solid
+        map-get(get-palette(get-color($palette-primary, $key)), '20');
     }
   }
 }
diff --git a/components/badge/style/index.scss b/components/badge/style/index.scss
@@ -11,6 +11,7 @@
     transform: translateX(50%);
     height: 16px;
     padding: 0 4px;
+    min-width: 8px;
     border: 2px solid #fff;
     border-radius: 10px;
     line-height: 16px;
@@ -29,7 +30,7 @@
     position: absolute;
     width: 8px;
     height: 8px;
-    top: -7px;
+    top: -5px;
     right: -5px;
     background: #f44141;
     border: 1px solid #fff;

diff --git a/components/carousel/style/index.scss b/components/carousel/style/index.scss
@@ -1,6 +1,6 @@
 .hi-carousel {
   width: 100%;
-  color: rgba(153, 153, 153, 1);
+  color: #fff;
   overflow: hidden;
   position: relative;
 
@@ -69,6 +69,10 @@
     margin-left: 24px;
     cursor: pointer;
 
+    &:hover {
+      background: rgba(0, 0, 0, 0.45);
+    }
+
     &:last-child {
       margin-right: 24px;
     }

diff --git a/components/cascader/style/cascader.scss b/components/cascader/style/cascader.scss
@@ -36,7 +36,7 @@ $cascader: 'hi-cascader' !default;
     display: flex;
     align-items: center;
     padding: 5px 12px;
-    border: 1px solid #d9d9d9;
+    border: 1px solid #d8d8d8;
   }
 
   &__input-keyword {

diff --git a/components/collapse/style/index.scss b/components/collapse/style/index.scss
@@ -6,7 +6,7 @@
   font-size: 14px;
 
   .collapse-item {
-    border-bottom: 1px solid #d9d9d9;
+    border-bottom: 1px solid #d8d8d8;
 
     &__head {
       display: flex;

diff --git a/components/counter/style/index.scss b/components/counter/style/index.scss
@@ -32,7 +32,7 @@ $counter: 'hi-counter' !default;
     width: $m-width-ceil;
     height: $m-width-ceil;
     line-height: $m-width-ceil;
-    border: 1px solid $border-color-normal;
+    border: 1px solid $gray-light;
     border-radius: 2px;
     font-weight: bold;
     color: $active-color;
@@ -64,7 +64,7 @@ $counter: 'hi-counter' !default;
     flex: 1 1 auto;
     width: 2 * $m-width-ceil;
     padding: 0 6px;
-    border: 1px solid $border-color-normal;
+    border: 1px solid $gray-light;
     color: $normal-color;
     outline: none;
     box-sizing: border-box;

diff --git a/components/date-picker/Calender.js b/components/date-picker/Calender.js
@@ -249,19 +249,19 @@ class Calender extends Component {
     const LunarInfo = Lunar.toLunar(_year, _month, _value)
     let lunarcellinfo = {
       text: altCalendarPreset === 'zh-CN' ? LunarInfo[6] : null, // 默认预置信息
-      hightlight: false
+      highlight: false
     }
     if (altCalendar || dateMarkRender) {
       lunarcellinfo = {
         text: this.altCalendarText(datainfo, lunarcellinfo),
-        hightlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].hightlight,
+        highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
         nodeMark: this.markRender(datainfo)
       }
     }
     if ((dateMarkPresetData && dateMarkPresetData[datainfo]) || (altCalendarPresetData && altCalendarPresetData[datainfo])) {
       lunarcellinfo = {
         text: this.altCalendarText(datainfo, lunarcellinfo),
-        hightlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].hightlight,
+        highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
         nodeMark: this.markRender(datainfo)
       }
     }
@@ -338,7 +338,7 @@ class Calender extends Component {
                 }}
               >
                 {
-                  fullTimeInfo.hightlight
+                  fullTimeInfo.highlight
                     ? <span value={td.value} className='hi-datepicker__text--showLunar hi-datepicker__text--showLunar--festival'>
                       {fullTimeInfo.text}
                     </span>

diff --git a/components/date-picker/DatePicker.js b/components/date-picker/DatePicker.js
@@ -46,7 +46,7 @@ class DatePicker extends BasePicker {
           Object.assign(oneYear, {
             [item.date.replace(/-/g, '/')]: {
               ...item,
-              hightlight: true
+              highlight: true
             }
           })
         })

diff --git a/components/dropdown/DropdownMenu.jsx b/components/dropdown/DropdownMenu.jsx
@@ -30,7 +30,7 @@ class DropdownMenu extends React.Component {
         placement={placement}
         width={width}
         onMouseEnter={onMouseEnter}
-        leftGap={1}
+        leftGap={0}
         onMouseLeave={onMouseLeave}
       >
         <ul className={menuCls}>

diff --git a/components/menu/SubMenu.js b/components/menu/SubMenu.js
@@ -10,12 +10,16 @@ class SubMenu extends Component {
   }
 
   checkActive (activeIndex, index) {
-    return activeIndex.indexOf(index) === 0
+    const indexArr = index.split('-')
+    const activeIndexArr = activeIndex.split('-')
+    return activeIndexArr.slice(0, indexArr.length).join('-') === index
   }
 
   checkExpand (activeIndex, expandIndex, index) {
     return expandIndex.some(item => {
-      return item.indexOf(index) === 0
+      const indexArr = index.split('-')
+      const expandIndexArr = item.split('-')
+      return expandIndexArr.slice(0, indexArr.length).join('-') === index
     })
   }
 

diff --git a/components/modal/index.js b/components/modal/index.js
@@ -87,7 +87,7 @@ class Modal extends Component {
       return footers || footer
     } else {
       return [
-        <Button type='default' key={0} onClick={this.handleClose.bind(this)}>
+        <Button type='line' key={0} onClick={this.handleClose.bind(this)}>
           {cancelText}
         </Button>,
         <Button type='primary' key={1} onClick={this.handleConfirm.bind(this)}>

diff --git a/components/pagination/style/index.scss b/components/pagination/style/index.scss
@@ -57,6 +57,10 @@
   &__span {
     display: inline-block;
     margin: 0 $spacer-1;
+
+    .hi-select__input {
+      border: 1px solid $gray-light;
+    }
   }
 
   &__jumper-input {
@@ -67,6 +71,10 @@
     .hi-input {
       width: 64px;
 
+      &__inner {
+        border: 1px solid $gray-light;
+      }
+
       &__text {
         text-align: center;
       }

diff --git a/components/select/Select.js b/components/select/Select.js
@@ -612,6 +612,7 @@ class Select extends Component {
           attachEle={this.selectInputContainer}
           zIndex={1050}
           topGap={5}
+          leftGap={0}
           className="hi-select__popper"
           placement="top-bottom-start"
         >

diff --git a/components/select/style/select-input.scss b/components/select/style/select-input.scss
@@ -14,7 +14,7 @@
   color: #333;
   line-height: 1;
   border-radius: 2px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #d8d8d8;
   cursor: pointer;
   outline: none;
   user-select: none;

diff --git a/components/tabs/style/index.scss b/components/tabs/style/index.scss
@@ -54,8 +54,8 @@ $prefix: 'hi-tabs' !default;
     }
 
     .#{$prefix}__item {
-      height: 40px;
-      line-height: 40px;
+      height: 48px;
+      line-height: 46px;
       padding: 0 16px;
       box-sizing: border-box;
 
@@ -217,18 +217,22 @@ $prefix: 'hi-tabs' !default;
     .#{$prefix}__item {
       flex: none;
       height: 36px;
-      line-height: 36px;
-      padding: 0 24px;
+      line-height: 34px;
+      padding: 0 23px;
       box-sizing: border-box;
+      margin-right: 24px;
+      border: 1px solid #d8d8d8;
+      border-radius: 18px;
 
-      &:hover {
+      &:hover:not(.hi-tabs__item--active) {
         color: #4284f5;
+        border: 1px solid #4284f5;
       }
 
       &--active {
-        color: #4284f5;
+        color: #fff;
+        background-color: #4284f5;
         border: 1px solid #4284f5;
-        border-radius: 18px;
       }
     }
   }
@@ -315,12 +319,13 @@ $prefix: 'hi-tabs' !default;
 
     &--button {
       .#{$prefix}__item {
-        &:hover {
+        &:hover:not(.hi-tabs__item--active) {
           color: $value;
+          border: 1px solid $value;
         }
 
         &--active {
-          color: $value;
+          background-color: $value;
           border: 1px solid $value;
         }
       }

diff --git a/components/tree/style/index.scss b/components/tree/style/index.scss
@@ -21,7 +21,7 @@ $tree: 'hi-tree' !default;
 
   /* =========== */
   .hi-checkbox-legacy {
-    margin-left: 8px;
+    margin-left: 6px;
   }
 
   .hi-checkbox-legacy--part .hi-checkbox-legacy__input {

diff --git a/docs/demo/date-picker/section-calendar.jsx b/docs/demo/date-picker/section-calendar.jsx
@@ -55,7 +55,7 @@ class Demo extends React.Component {
               {
                 date:'2020/4/8',
                 text:'十周年',
-                hightlight: true
+                highlight: true
               },
           ]}
           dateMarkRender = {

diff --git a/docs/demo/grid/section-block.jsx b/docs/demo/grid/section-block.jsx
@@ -16,17 +16,19 @@ class Demo extends React.Component {
           <div style={{backgroundColor: '#4284F5', width: '100%', padding: '16px 0', textAlign: 'center', opacity: '.8', color:'#fff'}}>col-6<br />25%</div>
         </Col>
         <Col span={6}>
-          <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', textAlign: 'center', opacity: '.8'}}>col-6<br />25%</div>
+          <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', textAlign: 'center', opacity: '.8', color:'#fff'}}>col-6<br />25%</div>
         </Col>
         <Col span={6}>
-          <div style={{backgroundColor: '#4284F5', width: '100%', padding: '16px 0', textAlign: 'center', opacity: '.8',color:'#fff'}}>col-6<br />25%</div>
+          <div style={{backgroundColor: '#4284F5', width: '100%', padding: '16px 0', textAlign: 'center', opacity: '.8', color:'#fff'}}>col-6<br />25%</div>
         </Col>
         <Col span={6}>
-          <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', textAlign: 'center', opacity: '.8'}}>col-6<br />25%</div>
+          <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', textAlign: 'center', opacity: '.8', color:'#fff'}}>col-6<br />25%</div>
         </Col>
       </Row>
     )
   }
 }`
-const DemoBlock = () => <DocViewer code={code} scope={{ Grid }} prefix={prefix} desc={desc} />
+const DemoBlock = () => (
+  <DocViewer code={code} scope={{ Grid }} prefix={prefix} desc={desc} />
+)
 export default DemoBlock
diff --git a/docs/demo/grid/section-nest.jsx b/docs/demo/grid/section-nest.jsx
@@ -13,7 +13,7 @@ class Demo extends React.Component {
     return (
       <Row gutter={true}>
         <Col span={16} >
-          <div style={{textAlign:'center', background:'#ff6700',opacity: '0.8', padding:16 }}>
+          <div style={{textAlign:'center', background:'#ff6700',opacity: '0.8', padding:16, color:'#fff' }}>
             col-16
             <Row gutter={true}>
               <Col span={12}>
@@ -32,5 +32,7 @@ class Demo extends React.Component {
     )
   }
 }`
-const DemoNest = () => <DocViewer code={code} scope={{ Grid }} prefix={prefix} desc={desc} />
+const DemoNest = () => (
+  <DocViewer code={code} scope={{ Grid }} prefix={prefix} desc={desc} />
+)
 export default DemoNest
diff --git a/docs/demo/grid/section-offset.jsx b/docs/demo/grid/section-offset.jsx
@@ -17,7 +17,7 @@ class Demo extends React.Component {
             <div style={{backgroundColor: '#4284F5', width: '100%', padding: '16px 0', color: '#fff', opacity:'0.8', textAlign: 'center'}}>col-8</div>
           </Col>
           <Col span={6} offset={6}>
-            <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', opacity:'0.8', textAlign: 'center'}}>col-6-offset-6</div>
+            <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', color: '#fff', opacity:'0.8', textAlign: 'center'}}>col-6-offset-6</div>
           </Col>
           <Col span={4}>
             <div style={{backgroundColor: '#4284F5', width: '100%', padding: '16px 0', color: '#fff', opacity:'0.8', textAlign: 'center'}}>col-4</div>
@@ -28,7 +28,7 @@ class Demo extends React.Component {
             <div style={{backgroundColor: '#4284F5', width: '100%', padding: '16px 0', color: '#fff', opacity:'0.8', textAlign: 'center'}}>col-4</div>
           </Col>
           <Col span={6} offset={4}>
-            <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', opacity:'0.8', textAlign: 'center'}}>col-6-offset-4</div>
+            <div style={{backgroundColor: '#ff6700', width: '100%', padding: '16px 0', color: '#fff', opacity:'0.8', textAlign: 'center'}}>col-6-offset-4</div>
           </Col>
           <Col span={4}>
             <div style={{backgroundColor: '#4284F5', width: '100%', padding: '16px 0', color: '#fff', opacity:'0.8', textAlign: 'center'}}>col-4</div>
@@ -41,5 +41,7 @@ class Demo extends React.Component {
     )
   }
 }`
-const DemoOffset = () => <DocViewer code={code} scope={{ Grid }} prefix={prefix} desc={desc} />
+const DemoOffset = () => (
+  <DocViewer code={code} scope={{ Grid }} prefix={prefix} desc={desc} />
+)
 export default DemoOffset
diff --git a/docs/demo/modal/section-size.jsx b/docs/demo/modal/section-size.jsx
@@ -58,9 +58,6 @@ class Demo extends React.Component {
           size={this.state.size}
           show={this.state.show}
           onCancel={this.cancelEvent.bind(this)}
-          footers={[
-            <Button type="default" key={3} onClick={this.cancelEvent.bind(this)}>关闭</Button>
-          ]}
         >
           <span>一些消息</span>
           <span>一些消息</span>

diff --git a/docs/zh-CN/components/alert.mdx b/docs/zh-CN/components/alert.mdx
@@ -1,4 +1,4 @@
-# Alert 警告
+# Alert 警告提示
 
 作用于页面的内容区域的提示，非触发类信息
 
@@ -38,9 +38,9 @@ import DemoAutoClose from '../../demo/alert/section-autoClose.jsx'
 
 | 参数      | 说明                     | 类型                    | 可选值                                      | 默认值 |
 | --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ |
-| type      | 警告框类型               | string                  | 'info' \| 'success' \| 'error' \| 'warning' | 'info' |
-| title     | 警告框标题               | string                  | -                                           | -      |
-| content   | 警告框内容               | string                  | -                                           | -      |
+| type      | 警告提示类型             | string                  | 'info' \| 'success' \| 'error' \| 'warning' | 'info' |
+| title     | 警告提示标题             | string                  | -                                           | -      |
+| content   | 警告提示内容             | string                  | -                                           | -      |
 | closeable | 是否可关闭               | boolean                 | true \| false                               | false  |
 | onClose   | 关闭事件触发时的回调     | (e: MouseEvent) => void | -                                           | -      |
 | duration  | 自动关闭时间，单位为毫秒 | number \| null          | -                                           | null   |