@vtex/styleguide - npm Package Compare versions

Comparing version 2.0.0-rc.19 to 2.0.0-rc.20

lib/Alert/index.js

@@ -62,7 +62,4 @@ 'use strict';
       var classes = 'pa5 br2 ';
-      var closeClass = '';
       var showIcon = false;
       var icon = '';
-      var width = void 0;
-      var height = void 0;
       var color = _config2.default.colors['serious-black'];
@@ -125,3 +122,3 @@ var closeBtnColor = 'near-black';
           'div',
-          { className: 'pointer flex items-center pv2 ' + closeClass, onClick: onClose },
+          { className: 'pointer flex items-center pv2', onClick: onClose },
           _react2.default.createElement(_Icon2.default, { type: 'close', height: 10, width: 10, fill: closeBtnColor })
@@ -128,0 +125,0 @@ )

lib/Input/index.js

@@ -34,5 +34,3 @@ 'use strict';
     _this.handleChange = function (event) {
-      var value = event.target.value;
-      _this.setState({ value: value });
-      _this.props.onChange && _this.props.onChange(value);
+      _this.props.onChange && _this.props.onChange(event);
     };
@@ -51,4 +49,3 @@
     _this.state = {
-      active: false,
-      value: props.htmlProps.value || ''
+      active: false
     };
@@ -62,9 +59,5 @@ return _this;
       var _props = this.props,
-          error = _props.error,
           errorMessage = _props.errorMessage,
-          disabled = _props.disabled,
-          htmlProps = _props.htmlProps;
-      var _state = this.state,
-          active = _state.active,
-          value = _state.value;
+          error = _props.error;
+      var active = this.state.active;
 
@@ -76,4 +69,3 @@
       var typography = 'f6 near-black';
-      var customClasses = htmlProps.class || '';
-      var classes = size + ' ' + box + ' ' + border + ' ' + typography + ' ' + customClasses + ' ';
+      var classes = size + ' ' + box + ' ' + border + ' ' + typography + ' ';
 
@@ -84,3 +76,2 @@ var eBox = 'pa2 ';
       var eBackground = 'bg-washed-red ';
-      var errorMessageClasses = eBox + ' ' + eBorder + ' ' + eTypography + ' ' + eBackground;
 
@@ -93,7 +84,7 @@ if (active) {
 
-      if (error) {
+      if (error || errorMessage) {
         classes += 'b--red mb3 ';
       }
 
-      if (disabled) {
+      if (this.props.disabled) {
         classes += 'bg-light-gray bg-silver silver ';
@@ -107,3 +98,3 @@ } else {
         null,
-        _react2.default.createElement('input', Object.assign({}, htmlProps, {
+        _react2.default.createElement('input', {
           onBlur: this.handleBlur,
@@ -113,8 +104,30 @@ onFocus: this.handleFocus,
           className: classes,
-          disabled: disabled,
-          value: value
-        })),
+          disabled: this.props.disabled,
+          accept: this.props.accept,
+          autoComplete: this.props.autoComplete,
+          autoCorrect: this.props.autoCorrect,
+          autoFocus: this.props.autoFocus,
+          autoSave: this.props.autoSave,
+          inputMode: this.props.inputMode,
+          list: this.props.list,
+          max: this.props.max,
+          maxLength: this.props.maxLength,
+          min: this.props.min,
+          minLength: this.props.minLength,
+          multiple: this.props.multiple,
+          name: this.props.name,
+          pattern: this.props.pattern,
+          placeholder: this.props.placeholder,
+          readOnly: this.props.readOnly,
+          required: this.props.required,
+          spellCheck: this.props.spellCheck,
+          src: this.props.src,
+          step: this.props.step,
+          tabIndex: this.props.tabIndex,
+          type: this.props.type,
+          value: this.props.value
+        }),
         errorMessage && _react2.default.createElement(
           'div',
-          { className: errorMessageClasses },
+          { className: eBox + ' ' + eBorder + ' ' + eTypography + ' ' + eBackground },
           errorMessage
@@ -130,19 +143,68 @@ )
 Input.defaultProps = {
-  disabled: false,
-  htmlProps: {},
-  error: false,
-  errorMessage: ''
+  disabled: false
 };
 
 Input.propTypes = {
+  /** (Input spec attribute) */
+  id: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  type: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  accept: _propTypes2.default.string,
+  /** (Input spec attribute) */
   disabled: _propTypes2.default.bool,
-  error: _propTypes2.default.bool,
-  errorMessage: _propTypes2.default.string,
-  /** Extra attributes for the input */
-  htmlProps: _propTypes2.default.object,
+  /** (Input spec attribute) */
+  autoComplete: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  autoCorrect: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  autoFocus: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  autoSave: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  inputMode: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  list: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  max: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  maxLength: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  min: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  minLength: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  multiple: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  name: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  pattern: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  placeholder: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  readOnly: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  required: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  spellCheck: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  src: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  step: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  tabIndex: _propTypes2.default.string,
+  /** (Input spec attribute) */
+  value: _propTypes2.default.string,
+  /** onChange event */
   onChange: _propTypes2.default.func,
+  /** onFocus event */
   onFocus: _propTypes2.default.func,
-  onBlur: _propTypes2.default.func
+  /** onBlur event */
+  onBlur: _propTypes2.default.func,
+  /** If the input has an error, you can hightlight it */
+  error: _propTypes2.default.bool,
+  /** If the input has an error, you can pass an error message */
+  errorMessage: _propTypes2.default.string
 };
 
 exports.default = Input;

package.json

 {
   "name": "@vtex/styleguide",
-  "version": "2.0.0-rc.19",
+  "version": "2.0.0-rc.20",
   "scripts": {
@@ -5,0 +5,0 @@ "test": "react-scripts test --env=jsdom",

No alert changes

Improved metrics

Total package byte prevSize

58727

increased by17.46%

Number of package files

17

increased by6.25%

Lines of code

1188

increased by20.73%

No dependency changes