bemto-input - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

Changelog.md

 ## Changelog
 
+### v0.3.0 (2018-04-18)
+
+- Added `_disabled` state, used it to filter out hover mixins.
+
 ### v0.2.0 (2018-04-05)
@@ -4,0 +8,0 @@

lib/index.js

@@ -12,2 +12,3 @@ const bemto = require('bemto-components');
   }),
+  _disabled: props => !!props.disabled,
   _empty: (props, state) => !state.value,
@@ -93,8 +94,9 @@ _focus: (props, state) => state.isFocused,
     @media (pointer: fine) {
-      :not(&_focus) > *:hover > &__View {
+      :not(&_focus):not(&_disabled) > *:hover > &__View {
         ${styles}
       }
     }
+
     @supports (-moz-appearance:meterbar) {
-      :not(&_focus) > *:hover > &__View {
+      :not(&_focus):not(&_disabled) > *:hover > &__View {
         ${styles}
@@ -107,2 +109,3 @@ }
     }
+
     @supports (-moz-appearance:meterbar) {
@@ -120,3 +123,3 @@ ${styles}
 
-    &_focus > * > &__View {
+    &_focus:not(&_disabled) > * > &__View {
       ${styles}
@@ -126,8 +129,9 @@ }
     @media (pointer: fine) {
-      *:hover > &__View {
+      *:not(&_disabled) > *:hover > &__View {
         ${styles}
       }
     }
+
     @supports (-moz-appearance:meterbar) {
-      *:hover > &__View {
+      *:not(&_disabled) > *:hover > &__View {
         ${styles}
@@ -203,3 +207,3 @@ }
   &__Controller {
-    -webkit-appearance: none;
+    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
     display: inline-block;
@@ -236,2 +240,5 @@ vertical-align: baseline;
 
+  /** Disables the input by adding `_disabled` modifier. */
+  disabled: PropTypes.bool,
+
   /** Custom placeholder that hides when input is not empty. If `__PlaceholderHint` is present, shows only on focus when empty. */
@@ -238,0 +245,0 @@ __Placeholder: bemto.DefaultPropTypes.elem,

lib/Readme.md

@@ -132,3 +132,3 @@ This is a foundation for all the text input I use in my markup for more than 4 years. Now in a form of a React component, using [bemto-components](https://github.com/bemto/bemto-components) and [styled-components](https://www.styled-components.com/).
 
-Note that the default styles (when used without `&__` inside) wouldn't be applied when the input is focused. So if you'd want to have the same behaviour for your overridden selectors, you would need to use `:not(&_focus)` by yourself:
+Note that the default styles (when used without `&__` inside) wouldn't be applied when the input is focused. So if you'd want to have the same behaviour for your overridden selectors, you would need to use `:not(&_focus):not(&_disabled)` by yourself:
 
@@ -145,3 +145,3 @@ const Input = BemtoInput.extend`
       ${BemtoInput.hoverCSS(`
-        &:not(&_focus) > &__Layout:hover {
+        &:not(&_focus):not(&_disabled) > &__Layout:hover {
           color: red;
@@ -148,0 +148,0 @@ }

package.json

 {
   "name": "bemto-input",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Complex input foundation based on bemto-components & styled-components",
@@ -36,6 +36,6 @@ "main": "lib/index.js",
     "babel-preset-env": "^1.6.1",
-    "jest": "^22.4.2",
+    "jest": "21.2.1",
     "jest-styled-components": "^5.0.0",
     "react-test-renderer": "16.1.1",
-    "stylelint": "^9.2.0",
+    "stylelint": "9.1.3",
     "stylelint-config-standard": "^18.2.0",
@@ -42,0 +42,0 @@ "stylelint-config-styled-components": "^0.1.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28200

increased by1.42%

Lines of code

243

increased by1.25%

No dependency changes