bemto-input
Advanced tools
bemto-input - npm Package Compare versions
Comparing version 0.5.1 to 0.6.0
| ## Changelog | ||
| ### v0.6.0 (2019-03-26) | ||
| Note: this project wouldn't probably be updated a lot, due to me re-thinking the architecture of the bemto-components as a whole, this is a maintainance update in order to allow usage of the newer version of styled-components. | ||
| - Updated the version of styled-components. | ||
| - Updated some of the deps. | ||
| ### v0.5.1 (2018-07-30) | ||
@@ -4,0 +11,0 @@ |
@@ -10,3 +10,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/). | ||
| You can use it as a base for highly functional and stylable text inputs which provides basic reset & layout which you could later easily style by extending with styled-components (or use your external styles). This component has all the powers of bemto-components beneath, so you can use modifiers, polymorphic tags and all the other stuff. See the docs of [bemto-components](http://kizu.ru/bemto-components/#elements) for more features and [this component's source code](https://github.com/bemto/bemto-input) to how easily it is done. | ||
| You can use it as a base for highly functional and stylable text inputs which provides basic reset & layout which you could later easily style by extending with styled-components (or use your external styles). This component has all the powers of bemto-components beneath, so you can use modifiers, polymorphic tags and all the other stuff. See the docs of [bemto-components](https://kizu.github.io/bemto-components/#elements) for more features and [this component's source code](https://github.com/bemto/bemto-input) to how easily it is done. | ||
@@ -35,6 +35,6 @@ ### Installation & Usage | ||
| But that foundation can be really easily styled by [extending](https://www.styled-components.com/docs/api#extend): | ||
| But that foundation can be really easily styled by [extending](https://www.styled-components.com/docs/basics#extending-styles): | ||
| // That's now the proper usage: | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__Layout { | ||
@@ -66,3 +66,3 @@ padding: 5px 10px; | ||
| The following Elements are available for styling and adding additional props (see the [section about Elements](http://kizu.ru/bemto-components/#elements) for everything about how to use elements): | ||
| The following Elements are available for styling and adding additional props (see the [section about Elements](https://kizu.github.io/bemto-components/#elements) for everything about how to use elements): | ||
@@ -80,3 +80,3 @@ - The top level, which would accept only bemto props (those starting from underscore) plus `className` & `style` props. | ||
| When used with styled-components, you **must** extend the styles. Don't use the component without extending and don't wrap with `styled()` as this would produce unneeded classNames and would be overall worse than `.extend`. | ||
| When used with styled-components, you **must** extend the styles. | ||
@@ -93,3 +93,3 @@ 1. For the best result you should split the CSS for your inputs among two basic elements: `__Layout` for layout & text styles, and `__View` for everything else (like background, shadows, borders etc). | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__View { | ||
@@ -117,3 +117,3 @@ box-shadow: 0 0 0 1px; | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__View { | ||
@@ -140,3 +140,3 @@ box-shadow: 0 0 0 1px; | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__View { | ||
@@ -168,3 +168,3 @@ box-shadow: 0 0 0 1px; | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__View { | ||
@@ -188,3 +188,3 @@ box-shadow: 0 0 0 1px; | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__View { | ||
@@ -199,3 +199,3 @@ box-shadow: 0 0 0 1px; | ||
| `; | ||
| <div className='Grid'> | ||
@@ -222,3 +222,3 @@ <Input placeholder="Native placeholder" /> | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| margin-bottom: 1em; | ||
@@ -265,3 +265,3 @@ | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__Layout { | ||
@@ -289,3 +289,3 @@ padding: 0 0.5em; | ||
| const Input = BemtoInput.extend` | ||
| const Input = styled(BemtoInput)` | ||
| &__Layout { | ||
@@ -292,0 +292,0 @@ padding: 0 0.5em; |
| { | ||
| "name": "bemto-input", | ||
| "version": "0.5.1", | ||
| "version": "0.6.0", | ||
| "description": "Complex input foundation based on bemto-components & styled-components", | ||
@@ -31,15 +31,21 @@ "main": "lib/index.js", | ||
| "peerDependencies": { | ||
| "styled-components": ">= 2 < 4" | ||
| "styled-components": ">= 2 < 5" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-preset-env": "^1.6.1", | ||
| "jest": "21.2.1", | ||
| "jest-styled-components": "^5.0.0", | ||
| "react-test-renderer": "16.1.1", | ||
| "stylelint": "9.1.3", | ||
| "@babel/core": "^7.3.4", | ||
| "@babel/preset-env": "^7.3.4", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
| "babel-eslint": "^10.0.1", | ||
| "babel-jest": "^24.5.0", | ||
| "jest": "24.5.0", | ||
| "jest-styled-components": "^6.3.1", | ||
| "react-dom": "^16.8.5", | ||
| "react-test-renderer": "16.8.5", | ||
| "styled-components": "4.2.0", | ||
| "stylelint": "9.10.1", | ||
| "stylelint-config-standard": "^18.2.0", | ||
| "stylelint-config-styled-components": "^0.1.1", | ||
| "stylelint-processor-styled-components": "^1.3.1" | ||
| "stylelint-processor-styled-components": "^1.5.2" | ||
| } | ||
| } |
@@ -10,5 +10,5 @@ # bemto-input [![Build Status][build]][build-link] [![NPM package version][version]][version-link] | ||
| You can use it as a base for highly functional and stylable text inputs which provides basic reset & layout which you could later easily style by extending with styled-components (or use your external styles). This component has all the powers of bemto-components beneath, so you can use modifiers, polymorphic tags and all the other stuff. See the docs of [bemto-components](http://kizu.ru/bemto-components/#elements) for more features and [this component's source code](https://github.com/bemto/bemto-input) to how easily it is done. | ||
| You can use it as a base for highly functional and stylable text inputs which provides basic reset & layout which you could later easily style by extending with styled-components (or use your external styles). This component has all the powers of bemto-components beneath, so you can use modifiers, polymorphic tags and all the other stuff. See the docs of [bemto-components](https://kizu.github.io/bemto-components/#elements) for more features and [this component's source code](https://github.com/bemto/bemto-input) to how easily it is done. | ||
| [Each example at **documentation** is an interactive playground](http://kizu.ru/bemto-components/#bemtoinput) | ||
| [Each example at **documentation** is an interactive playground](https://kizu.github.io/bemto-components/#bemtoinput) | ||
@@ -15,0 +15,0 @@ ### Installation & Usage |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by755.09%
259649
Worsened metrics
- Dev dependency count
- increased by66.67%
15