belle - npm Package Compare versions

Comparing version 2.0.0-rc1 to 2.0.0-rc2

CHANGELOG.md

@@ -10,8 +10,6 @@ # Change Log
 - [Button, Card, Choice, ComboBox, Option, Placeholder, Rating, Select, Separator, TextInput, Toggle] Removed the 'Belle ' prefix from displayName
+- [Button] Prevent sticky hover for touch devices by leveraging mouseEnter & mouseLeave instead of the :hover pseudo class [8f590e2](https://github.com/nikgraf/belle/commit/8f590e27bf0da53828ff7d8fdac32d759e480aa5)
 
-### Fixed
-- [Rating] Fix styling the wrapper [82087cb](https://github.com/nikgraf/belle/commit/82087cb220253486e31269c8a989e9cf26fec18e)
-
 ### Added
-- [DatePicker] Added DatePicker component
+- [DatePicker] Add DatePicker component
 
@@ -22,2 +20,22 @@ ```
 
+- [Spinner] Add Spinner component
+
+```
+<Spinner />
+```
+
+### Fixed
+- [Rating] Fix styling the wrapper [82087cb](https://github.com/nikgraf/belle/commit/82087cb220253486e31269c8a989e9cf26fec18e)
+- [Select] Fix rendering the selected option with a falsy value e.g. 0 [f0e5611](https://github.com/nikgraf/belle/commit/f0e5611cfce2da3833ed50bd7ac542501ae2999a)
+- [Select] Fix hovering and selecting Options with values of type Number [09c52e3](https://github.com/nikgraf/belle/commit/09c52e3ad9f515218fb6fcc922ffcb55c52809a8)
+
+```
+<Select>
+  <Option value={ 0 }>Zero</Option>
+  <Option value={ 1 }>One</Option>
+</Select>
+```
+
+- [ComboBox] Fix hovering and selecting Options with values of type Number [64a2797](https://github.com/nikgraf/belle/commit/64a27974ecfa6f327063810484e1150d94276699)
+
 ### Removed
@@ -24,0 +42,0 @@ - [Rating] Removed the `resetValue` function. Reseting should accomplished by making the Rating a controlled component and passing in the value as `undefined`. See an example below:

lib/components/Button.js

@@ -15,2 +15,4 @@ 'use strict';
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -49,3 +51,22 @@
 function sanitizeChildProps(properties) {
-  return (0, _utilsHelpers.omit)(properties, ['className', 'style', 'hoverStyle', 'focusStyle', 'activeStyle', 'disabledStyle', 'disabledHoverStyle', 'primary', 'onTouchStart', 'onTouchEnd', 'onTouchCancel', 'onMouseDown', 'onFocus', 'onBlur']);
+  var className = properties.className;
+  var style = properties.style;
+  var hoverStyle = properties.hoverStyle;
+  var focusStyle = properties.focusStyle;
+  var activeStyle = properties.activeStyle;
+  var disabledStyle = properties.disabledStyle;
+  var disabledHoverStyle = properties.disabledHoverStyle;
+  var primary = properties.primary;
+  var onTouchStart = properties.onTouchStart;
+  var onTouchEnd = properties.onTouchEnd;
+  var onTouchCancel = properties.onTouchCancel;
+  var onMouseDown = properties.onMouseDown;
+  var onMouseEnter = properties.onMouseEnter;
+  var onMouseLeave = properties.onMouseLeave;
+  var onFocus = properties.onFocus;
+  var onBlur = properties.onBlur;
+
+  var childProps = _objectWithoutProperties(properties, ['className', 'style', 'hoverStyle', 'focusStyle', 'activeStyle', 'disabledStyle', 'disabledHoverStyle', 'primary', 'onTouchStart', 'onTouchEnd', 'onTouchCancel', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur']);
+
+  return childProps;
 }
@@ -60,8 +81,5 @@
 function updatePseudoClassStyle(styleId, properties, preventFocusStyleForTouchAndClick) {
-  var baseHoverStyle = properties.primary ? _styleButton2['default'].primaryHoverStyle : _styleButton2['default'].hoverStyle;
   var baseActiveStyle = properties.primary ? _styleButton2['default'].primaryActiveStyle : _styleButton2['default'].activeStyle;
-  var baseDisabledHoverStyle = properties.primary ? _styleButton2['default'].primaryDisabledHoverStyle : _styleButton2['default'].disabledHoverStyle;
-  var hoverStyle = _extends({}, baseHoverStyle, properties.hoverStyle);
+
   var activeStyle = _extends({}, baseActiveStyle, properties.activeStyle);
-  var disabledHoverStyle = _extends({}, baseDisabledHoverStyle, properties.disabledHoverStyle);
 
@@ -78,6 +96,2 @@ var focusStyle = undefined;
     id: styleId,
-    style: hoverStyle,
-    pseudoClass: 'hover'
-  }, {
-    id: styleId,
     style: activeStyle,
@@ -87,7 +101,2 @@ pseudoClass: 'active'
     id: styleId,
-    style: disabledHoverStyle,
-    pseudoClass: 'hover',
-    disabled: true
-  }, {
-    id: styleId,
     style: focusStyle,
@@ -123,3 +132,4 @@ pseudoClass: 'focus'
       // pseudoClass is not supported on touch
-      active: false
+      isActive: false,
+      isHovered: false
     };
@@ -140,3 +150,3 @@
     /**
-     * Generates the style-id & inject the focus, hover & active style.
+     * Generates the style-id & inject the focus & active style.
      *
@@ -210,3 +220,3 @@ * The style-id is based on React's unique DOM node id.
       this.focused = false;
-      this.setState({ active: false });
+      this.setState({ isActive: false });
 
@@ -236,3 +246,3 @@ if (this.props.onBlur) {
       if (!this.props.disabled && event.touches.length === 1) {
-        this.setState({ active: true });
+        this.setState({ isActive: true });
       }
@@ -251,3 +261,3 @@
     value: function _onTouchEnd(event) {
-      this.setState({ active: false });
+      this.setState({ isActive: false });
 
@@ -265,3 +275,3 @@ if (this.props.onTouchEnd) {
     value: function _onTouchCancel(event) {
-      this.setState({ active: false });
+      this.setState({ isActive: false });
 
@@ -272,24 +282,57 @@ if (this.props.onTouchEnd) {
     }
+
+    /**
+     * As soon as the mouse enters the component the isHovered state is activated.
+     */
   }, {
+    key: '_onMouseEnter',
+    value: function _onMouseEnter(event) {
+      this.setState({
+        isHovered: true
+      });
+
+      if (this.props.onMouseEnter) {
+        this.props.onMouseEnter(event);
+      }
+    }
+
+    /**
+     * Deactivate the isHovered state.
+     */
+  }, {
+    key: '_onMouseLeave',
+    value: function _onMouseLeave(event) {
+      this.setState({
+        isHovered: false
+      });
+
+      if (this.props.onMouseLeave) {
+        this.props.onMouseLeave(event);
+      }
+    }
+  }, {
     key: 'render',
     value: function render() {
       var baseStyle = this.props.primary ? _styleButton2['default'].primaryStyle : _styleButton2['default'].style;
-      var baseButtonStyle = _extends({}, baseStyle, this.props.style);
+      var combinedStyle = _extends({}, baseStyle, this.props.style);
 
-      var buttonStyle = undefined;
+      if (this.state.isHovered) {
+        var baseHoverStyle = this.props.primary ? _styleButton2['default'].primaryHoverStyle : _styleButton2['default'].hoverStyle;
+        combinedStyle = _extends({}, combinedStyle, baseHoverStyle, this.props.hoverStyle);
+      }
+
       if (this.props.disabled) {
-        if (this.props.primary) {
-          buttonStyle = _extends({}, baseButtonStyle, _styleButton2['default'].primaryDisabledStyle, this.props.disabledStyle);
-        } else {
-          buttonStyle = _extends({}, baseButtonStyle, _styleButton2['default'].disabledStyle, this.props.disabledStyle);
+        var baseDisabledStyle = this.props.primary ? _styleButton2['default'].primaryDisabledStyle : _styleButton2['default'].disabledStyle;
+        combinedStyle = _extends({}, combinedStyle, baseDisabledStyle, this.props.disabledStyle);
+        if (this.state.isHovered) {
+          var baseDisabledHoverStyle = this.props.primary ? _styleButton2['default'].primaryDisabledHoverStyle : _styleButton2['default'].disabledHoverStyle;
+          combinedStyle = _extends({}, combinedStyle, baseDisabledHoverStyle, this.props.disabledHoverStyle);
         }
       } else {
-        if (this.state.active) {
+        if (this.state.isActive) {
           var baseActiveStyle = this.props.primary ? _styleButton2['default'].primaryActiveStyle : _styleButton2['default'].activeStyle;
-          buttonStyle = _extends({}, baseButtonStyle, baseActiveStyle, this.props.activeStyle);
-        } else if (this.focused && !this.state.active && !this.mouseDownOnButton && this.preventFocusStyleForTouchAndClick) {
+          combinedStyle = _extends({}, combinedStyle, baseActiveStyle, this.props.activeStyle);
+        } else if (this.focused && !this.state.isActive && !this.mouseDownOnButton && this.preventFocusStyleForTouchAndClick) {
           var baseFocusStyle = this.props.primary ? _styleButton2['default'].primaryFocusStyle : _styleButton2['default'].focusStyle;
-          buttonStyle = _extends({}, baseButtonStyle, baseFocusStyle, this.props.focusStyle);
-        } else {
-          buttonStyle = baseButtonStyle;
+          combinedStyle = _extends({}, combinedStyle, baseFocusStyle, this.props.focusStyle);
         }
@@ -300,3 +343,3 @@ }
         'button',
-        _extends({ style: buttonStyle,
+        _extends({ style: combinedStyle,
           className: (0, _utilsUnionClassNames2['default'])(this.props.className, this.styleId),
@@ -308,3 +351,5 @@ onTouchStart: this._onTouchStart.bind(this),
           onBlur: this._onBlur.bind(this),
-          onMouseDown: this._onMouseDown.bind(this)
+          onMouseDown: this._onMouseDown.bind(this),
+          onMouseEnter: this._onMouseEnter.bind(this),
+          onMouseLeave: this._onMouseLeave.bind(this)
         }, this.state.childProps),
@@ -335,2 +380,4 @@ this.props.children
       onMouseDown: _react.PropTypes.func,
+      onMouseEnter: _react.PropTypes.func,
+      onMouseLeave: _react.PropTypes.func,
       onFocus: _react.PropTypes.func,
@@ -337,0 +384,0 @@ onBlur: _react.PropTypes.func,

lib/components/ComboBox.js

@@ -251,6 +251,6 @@ 'use strict';
     key: '_onTouchStartAtOption',
-    value: function _onTouchStartAtOption(event) {
+    value: function _onTouchStartAtOption(event, index) {
       if (!this.props.disabled && event.touches.length === 1) {
-        this._touchStartedAt = Number(event.currentTarget.getAttribute('data-belle-index'));
-        this.setState({ focusedOptionIndex: this._touchStartedAt });
+        this._touchStartedAt = index;
+        this.setState({ focusedOptionIndex: index });
       }
@@ -264,10 +264,7 @@ }
     key: '_onTouchEndAtOption',
-    value: function _onTouchEndAtOption(event) {
+    value: function _onTouchEndAtOption(event, index) {
       if (!this.props.disabled && this._touchStartedAt) {
-        var index = Number(event.currentTarget.getAttribute('data-belle-index'));
         if (this._touchStartedAt === index) {
           event.preventDefault();
-          var entry = event.currentTarget.querySelector('[data-belle-value]');
-          var value = entry.getAttribute('data-belle-value');
-          this._triggerChange(value);
+          this._triggerChange(this._getValueForIndex(index));
         }
@@ -345,5 +342,4 @@
     key: '_onMouseEnterAtOption',
-    value: function _onMouseEnterAtOption(event) {
+    value: function _onMouseEnterAtOption(index) {
       if (!this.props.disabled) {
-        var index = Number(event.currentTarget.getAttribute('data-belle-index'));
         this.setState({
@@ -373,6 +369,5 @@ focusedOptionIndex: index
     key: '_onClickAtOption',
-    value: function _onClickAtOption(event) {
+    value: function _onClickAtOption(index) {
       if (!this.props.disabled) {
-        var entry = event.currentTarget.querySelector('[data-belle-value]');
-        this._triggerChange(entry.getAttribute('data-belle-value'));
+        this._triggerChange(this._getValueForIndex(index));
       }
@@ -545,2 +540,11 @@ }
     /**
+     * Returns the value of the child with a certain index.
+     */
+  }, {
+    key: '_getValueForIndex',
+    value: function _getValueForIndex(index) {
+      return this.props.children[index].props.value;
+    }
+
+    /**
      * The function is called when user inputs a value in the input box. This can be done by:
@@ -667,8 +671,15 @@ * 1. typing/ pasting value into input box
               { key: index,
-                'data-belle-index': index,
-                onTouchStart: _this._onTouchStartAtOption.bind(_this),
-                onTouchEnd: _this._onTouchEndAtOption.bind(_this),
+                onTouchStart: function (event) {
+                  return _this._onTouchStartAtOption(event, index);
+                },
+                onTouchEnd: function (event) {
+                  return _this._onTouchEndAtOption(event, index);
+                },
                 onTouchCancel: _this._onTouchCancelAtOption.bind(_this),
-                onClick: _this._onClickAtOption.bind(_this),
-                onMouseEnter: _this._onMouseEnterAtOption.bind(_this),
+                onClick: function () {
+                  return _this._onClickAtOption(index);
+                },
+                onMouseEnter: function () {
+                  return _this._onMouseEnterAtOption(index);
+                },
                 onMouseLeave: _this._onMouseLeaveAtOption.bind(_this),
@@ -675,0 +686,0 @@ onMouseDown: function (event) {

lib/components/DatePicker.js

@@ -63,3 +63,3 @@ 'use strict';
 function sanitizeDisabledDayProps(properties) {
-  return (0, _utilsHelpers.omit)(properties, ['key', 'ref', 'onMouseOver', 'onMouseOut', 'style']);
+  return (0, _utilsHelpers.omit)(properties, ['key', 'ref', 'onMouseEnter', 'onMouseLeave', 'style']);
 }
@@ -71,3 +71,3 @@
 function sanitizeDayProps(properties) {
-  return (0, _utilsHelpers.omit)(properties, ['key', 'ref', 'onMouseDown', 'onMouseUp', 'onMouseOver', 'onMouseOut', 'onTouchStart', 'onTouchEnd', 'onTouchCancel', 'aria-current', 'aria-selected', 'style', 'role']);
+  return (0, _utilsHelpers.omit)(properties, ['key', 'ref', 'onMouseDown', 'onMouseUp', 'onMouseEnter', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'onTouchCancel', 'aria-current', 'aria-selected', 'style', 'role']);
 }
@@ -166,3 +166,3 @@
 
-    if (properties.month) {
+    if (properties.defaultMonth) {
       month = properties.defaultMonth - 1;
@@ -175,3 +175,3 @@ } else if (selectedDate) {
 
-    if (properties.year) {
+    if (properties.defaultYear) {
       year = properties.defaultYear;
@@ -558,7 +558,7 @@ } else if (selectedDate) {
         this.setState({
-          // Note: updating focusedDateKey in mouseOver normally would be good enough,
+          // Note: updating focusedDateKey in mouseEnter normally would be good enough,
           // but it is necessary to set on mouseUp for the following edge case:
           // A user moves the cursor over a day. Moves on with the keyboard and
           // then without moving again just pressing the mouse. In this case
-          // mouseOver did not get called again.
+          // mouseEnter did not get called again.
           focusedDateKey: dateKey,
@@ -575,7 +575,7 @@ activeDay: undefined
     /**
-     * Callback is called when some day receives MouseOver. It will conditionally set this.state.focusedDateKey.
+     * Callback is called when some day receives MouseEnter. It will conditionally set this.state.focusedDateKey.
      */
   }, {
-    key: '_onDayMouseOver',
-    value: function _onDayMouseOver(dateKey) {
+    key: '_onDayMouseEnter',
+    value: function _onDayMouseEnter(dateKey) {
       if (!this.props.readOnly) {
@@ -587,4 +587,4 @@ this.setState({
 
-      if (this.props.dayProps && this.props.dayProps.onMouseOver) {
-        this.props.dayProps.onMouseOver(event);
+      if (this.props.dayProps && this.props.dayProps.onMouseEnter) {
+        this.props.dayProps.onMouseEnter(event);
       }
@@ -594,7 +594,7 @@ }
     /**
-     * Callback is called when some day receives MouseOut. It will reset this.state.focusedDateKey.
+     * Callback is called when some day receives MouseLeave. It will reset this.state.focusedDateKey.
      */
   }, {
-    key: '_onDayMouseOut',
-    value: function _onDayMouseOut(dateKey, event) {
+    key: '_onDayMouseLeave',
+    value: function _onDayMouseLeave(dateKey, event) {
       if (!this.props.readOnly && event.button === 0 && this.state.focusedDateKey === dateKey) {
@@ -607,4 +607,4 @@ this.setState({
 
-      if (this.props.dayProps && this.props.dayProps.onMouseOut) {
-        this.props.dayProps.onMouseOut(event);
+      if (this.props.dayProps && this.props.dayProps.onMouseLeave) {
+        this.props.dayProps.onMouseLeave(event);
       }
@@ -1035,4 +1035,4 @@ }
             style: dayStyle,
-            onMouseOver: this._onDayMouseOver.bind(this, dateKey),
-            onMouseOut: this._onDayMouseOut.bind(this, dateKey)
+            onMouseEnter: this._onDayMouseEnter.bind(this, dateKey),
+            onMouseLeave: this._onDayMouseLeave.bind(this, dateKey)
           }, this.disabledDayProps),
@@ -1049,4 +1049,4 @@ renderedDay
           onMouseUp: this._onDayMouseUp.bind(this, dateKey, day, month, year),
-          onMouseOver: this._onDayMouseOver.bind(this, dateKey),
-          onMouseOut: this._onDayMouseOut.bind(this, dateKey),
+          onMouseEnter: this._onDayMouseEnter.bind(this, dateKey),
+          onMouseLeave: this._onDayMouseLeave.bind(this, dateKey),
           onTouchStart: this._onDayTouchStart.bind(this, dateKey),
@@ -1053,0 +1053,0 @@ onTouchEnd: this._onDayTouchEnd.bind(this, dateKey, day, month, year),

lib/components/Option.js

@@ -83,4 +83,3 @@ 'use strict';
         'div',
-        _extends({ 'data-belle-value': this.props.value,
-          style: optionStyle
+        _extends({ style: optionStyle
         }, this.state.childProps),
@@ -87,0 +86,0 @@ this.props.children

lib/components/Select.js

@@ -375,6 +375,5 @@ 'use strict';
     key: '_onTouchStartAtOption',
-    value: function _onTouchStartAtOption(event) {
+    value: function _onTouchStartAtOption(event, index) {
       if (event.touches.length === 1) {
-        var entry = event.currentTarget.querySelector('[data-belle-value]');
-        this._touchStartedAt = entry.getAttribute('data-belle-value');
+        this._touchStartedAt = this._getValueForIndex(index);
 
@@ -414,6 +413,5 @@ // save the scroll position
     key: '_onTouchEndAtOption',
-    value: function _onTouchEndAtOption() {
+    value: function _onTouchEndAtOption(event, index) {
       if (this._touchStartedAt && !this._scrollActive) {
-        var entry = event.currentTarget.querySelector('[data-belle-value]');
-        var value = entry.getAttribute('data-belle-value');
+        var value = this._getValueForIndex(index);
         if (this._touchStartedAt === value) {
@@ -442,5 +440,4 @@ event.preventDefault();
     key: '_onClickAtOption',
-    value: function _onClickAtOption(event) {
-      var entry = event.currentTarget.querySelector('[data-belle-value]');
-      this._triggerChange(entry.getAttribute('data-belle-value'));
+    value: function _onClickAtOption(index) {
+      this._triggerChange(this._getValueForIndex(index));
     }
@@ -490,6 +487,5 @@
     key: '_onMouseEnterAtOption',
-    value: function _onMouseEnterAtOption(event) {
-      var entry = event.currentTarget.querySelector('[data-belle-value]');
+    value: function _onMouseEnterAtOption(index) {
       this.setState({
-        focusedOptionValue: entry.getAttribute('data-belle-value')
+        focusedOptionValue: this._getValueForIndex(index)
       });
@@ -620,3 +616,3 @@ }
     value: function _onArrowDownKeyDown() {
-      if (this.state.focusedOptionValue) {
+      if (this.state.focusedOptionValue !== void 0) {
         var indexOfFocusedOption = this._getIndexOfFocusedOption();
@@ -648,3 +644,3 @@
     value: function _onArrowUpKeyDown() {
-      if (this.state.focusedOptionValue) {
+      if (this.state.focusedOptionValue !== void 0) {
         var indexOfFocusedOption = this._getIndexOfFocusedOption();
@@ -761,2 +757,11 @@
     /**
+     * Returns the value of the child with a certain index.
+     */
+  }, {
+    key: '_getValueForIndex',
+    value: function _getValueForIndex(index) {
+      return this.props.children[index].props.value;
+    }
+
+    /**
      * After an option has been selected the menu gets closed and the
@@ -810,3 +815,3 @@ * selection processed.
       var selectedOptionOrPlaceholder = undefined;
-      if (this.state.selectedValue) {
+      if (this.state.selectedValue !== void 0) {
         var selectedEntry = (0, _utilsHelpers.find)(this.children, function (entry) {
@@ -904,9 +909,17 @@ return entry.props.value === _this2.state.selectedValue;
                 'li',
-                { onClick: _this2._onClickAtOption.bind(_this2),
-                  onTouchStart: _this2._onTouchStartAtOption.bind(_this2),
+                { onClick: function () {
+                    return _this2._onClickAtOption(index);
+                  },
+                  onTouchStart: function (event) {
+                    return _this2._onTouchStartAtOption(event, index);
+                  },
                   onTouchMove: _this2._onTouchMoveAtOption.bind(_this2),
-                  onTouchEnd: _this2._onTouchEndAtOption.bind(_this2),
+                  onTouchEnd: function (event) {
+                    return _this2._onTouchEndAtOption(event, index);
+                  },
                   onTouchCancel: _this2._onTouchCancelAtOption.bind(_this2),
                   key: index,
-                  onMouseEnter: _this2._onMouseEnterAtOption.bind(_this2),
+                  onMouseEnter: function () {
+                    return _this2._onMouseEnterAtOption(index);
+                  },
                   role: 'option',
@@ -913,0 +926,0 @@ 'aria-selected': isHovered },

lib/index.js

@@ -45,2 +45,6 @@ 'use strict';
 
+var _componentsSpinner = require('./components/Spinner');
+
+var _componentsSpinner2 = _interopRequireDefault(_componentsSpinner);
+
 var _componentsToggle = require('./components/Toggle');
@@ -54,2 +58,6 @@
 
+var _styleActionArea = require('./style/actionArea');
+
+var _styleActionArea2 = _interopRequireDefault(_styleActionArea);
+
 var _styleButton = require('./style/button');
@@ -83,2 +91,6 @@
 
+var _styleSpinner = require('./style/spinner');
+
+var _styleSpinner2 = _interopRequireDefault(_styleSpinner);
+
 var _styleToggle = require('./style/toggle');
@@ -135,7 +147,11 @@
   ComboBox: _componentsComboBox2['default'],
+  Spinner: _componentsSpinner2['default'],
   Toggle: _componentsToggle2['default'],
   DatePicker: _componentsDatePicker2['default'],
   style: {
+    actionArea: _styleActionArea2['default'],
     button: _styleButton2['default'],
     card: _styleCard2['default'],
+    comboBox: _styleComboBox2['default'],
+    datePicker: _styleDatePicker2['default'],
     option: _styleOption2['default'],
@@ -146,6 +162,5 @@ placeholder: _stylePlaceholder2['default'],
     separator: _styleSeparator2['default'],
+    spinner: _styleSpinner2['default'],
     textInput: _styleTextInput2['default'],
-    toggle: _styleToggle2['default'],
-    comboBox: _styleComboBox2['default'],
-    datePicker: _styleDatePicker2['default']
+    toggle: _styleToggle2['default']
   },
@@ -152,0 +167,0 @@ config: {

lib/style/animations.js

@@ -6,5 +6,5 @@ 'use strict';
 });
-var animations = ['\n@-webkit-keyframes belle-button-focus {\n0% { box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n99% { box-shadow: 0 0 0 8px #fff }\n100% { box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n@-webkit-keyframes belle-toggle-focus {\n0% { box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n99% { box-shadow: 0 0 0 8px #fff }\n100% { box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n@-webkit-keyframes belle-rating-focus {\n0% { background: rgba(140, 224, 255, 0); box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n25% { background: rgba(140, 224, 255, 0.15) }\n99% { background: transparent; box-shadow: 0 0 0 8px #fff }\n100% { background: transparent; box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n'];
+var animations = ['\n@-webkit-keyframes belle-button-focus {\n0% { box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n99% { box-shadow: 0 0 0 8px #fff }\n100% { box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n@-webkit-keyframes belle-toggle-focus {\n0% { box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n99% { box-shadow: 0 0 0 8px #fff }\n100% { box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n@-webkit-keyframes belle-rating-focus {\n0% { background: rgba(140, 224, 255, 0); box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n25% { background: rgba(140, 224, 255, 0.15) }\n99% { background: transparent; box-shadow: 0 0 0 8px #fff }\n100% { background: transparent; box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n\n@keyframes belle-button-focus {\n0% { box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n99% { box-shadow: 0 0 0 8px #fff }\n100% { box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n@keyframes belle-toggle-focus {\n0% { box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n99% { box-shadow: 0 0 0 8px #fff }\n100% { box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n@keyframes belle-rating-focus {\n0% { background: rgba(140, 224, 255, 0); box-shadow: 0 0 0 0 rgba(140, 224, 255, 1); }\n25% { background: rgba(140, 224, 255, 0.15) }\n99% { background: transparent; box-shadow: 0 0 0 8px #fff }\n100% { background: transparent; box-shadow: 0 0 0 0 rgba(0, 131, 180, 0); }\n}\n@-webkit-keyframes belle-spinner-pulse {\n 0%,\n 90%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n @keyframes belle-spinner-pulse {\n 0%,\n 90%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }'];
 
 exports['default'] = animations;
 module.exports = exports['default'];

lib/style/date-picker.js

@@ -46,3 +46,2 @@ 'use strict';
   focusStyle: {
-    // boxShadow: '0 0 0 2px rgba(140, 224, 255, 0.6) inset',
     WebkitAnimation: 'belle-button-focus 2s',
@@ -49,0 +48,0 @@ outline: 0 },

package.json

 {
   "name": "belle",
-  "version": "2.0.0-rc1",
+  "version": "2.0.0-rc2",
   "description": "Configurable React Components with great UX",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -24,3 +24,3 @@ # Belle
 ```
-npm install belle@2.0.0-rc1
+npm install belle@2.0.0-rc2
 ```
@@ -27,0 +27,0 @@

No alert changes

Improved metrics

Total package byte prevSize

380895

increased by2.49%

Number of package files

64

increased by3.23%

Lines of code

9057

increased by1.92%

No dependency changes