Merge pull request #30 from XiaoMi/develop

Develop

CHANGELOG.md

@@ -8,6 +8,10 @@
 > 1. 修订号：当你做了向下兼容的问题修正。
 > 先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。
 
+## 1.1.1
+- 修改：修复 <Button /> 在使用旧版 api 时的样式兼容；
+- 修改：修复 <Checkbox /> 占据整行及点击区域的 bug。
+
 ## 1.1.0
 - 修改：按钮组件 `<Button />` API 调整，向前兼容；
 - 修改：修改 `<Notification />` 回调改为非必填项，关闭按钮可配置；

components/_util/deprecatedPropsCheck.js

@@ -0,0 +1,17 @@
+function deprecatedWarning (componentName, propName, propValue) {
+  console.warn(
+    `Deprecated Warning: Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`
+  )
+}
+
+export default function deprecatedPropsCheck (deprecatedProps, props, componentName) {
+  for (const propName in deprecatedProps) {
+    if (deprecatedProps.hasOwnProperty(propName)) {
+      if (deprecatedProps[propName].includes(props[propName])) {
+        deprecatedWarning(componentName, propName, props[propName])
+      }
+    }
+  }
+}
+
+export { deprecatedWarning }

components/button/Button.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import Provider from '../context'
+import deprecatedPropsCheck from '../_util/deprecatedPropsCheck'
 
 class Button extends Component {
   static propTypes = {
@@ -16,6 +17,11 @@ class Button extends Component {
     target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])
   }
 
+  deprecatedProps = {
+    type: ['info'],
+    appearance: ['line']
+  }
+
   static defaultProps = {
     prefixCls: 'hi-btn',
     type: 'default',
@@ -59,6 +65,9 @@ class Button extends Component {
     )
 
     const disabledBool = !!disabled
+
+    deprecatedPropsCheck(this.deprecatedProps, this.props, 'Button')
+
     return (
       href
         ? <a

components/button/style/index.scss

@@ -111,7 +111,8 @@
   }
 
   // Common Styles
-  &--type--default {
+  &--type--default,
+  &--type--info {
     background-color: $white;
     border-color: $gray;
     color: $black;

components/checkbox/style/index.scss

@@ -1,13 +1,11 @@
-.label-checkbox {
-  span {
-    font-size: 12px;
-    padding: 0 5px;
-  }
-}
+@import '@hi-ui/core-css';
 
 .hi-checkbox {
+  display: inline-block;
   cursor: pointer;
 
+  @include component-reset();
+
   &:hover {
     .hi-checkbox-input {
       border: 1px solid #4284f5;
@@ -44,6 +42,8 @@
       opacity: 0;
       // display: none;
       cursor: pointer;
+      width: 18px;
+      height: 18px;
     }
 
     &.hi-checkbox-input-checked,
@@ -52,6 +52,7 @@
 
       &::after {
         transform: rotate(45deg) scaleY(1);
+        pointer-events: none;
         box-sizing: content-box;
         content: '';
         border: 2px solid #fff;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@hi-ui/classic-theme": "^0.9.6",
-    "@hi-ui/core-css": "^1.0.0-beta.9",
+    "@hi-ui/core-css": "^1.0.0",
     "async-validator": "^1.8.5",
     "axios": "^0.18.0",
     "classnames": "^2.2.5",