@roo-ui/components - npm Package Compare versions

Comparing version 0.20.0 to 0.21.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="0.21.0"></a>
+# [0.21.0](https://github.com/hooroo/roo-ui/compare/v0.20.0...v0.21.0) (2018-05-28)
+
+
+### Features
+
+* add read only input style ([#52](https://github.com/hooroo/roo-ui/issues/52)) ([ba50fd4](https://github.com/hooroo/roo-ui/commit/ba50fd4))
+
+
+
+
 <a name="0.20.0"></a>
@@ -8,0 +19,0 @@ # [0.20.0](https://github.com/hooroo/roo-ui/compare/v0.19.1...v0.20.0) (2018-05-23)

dist/Input/Input.js

@@ -23,3 +23,3 @@ Object.defineProperty(exports, "__esModule", {
   displayName: 'Input'
-})(['display:block;width:100%;margin:0;margin-bottom:', ';padding:', ' ', ';font-size:', ';line-height:', ';color:', ';border:', ';border-color:', ';outline:0;transition:border-color ', ';appearance:none;&:focus{border-color:', ';}::placeholder{color:', ';}::-ms-clear{display:none;}', ' ', ';'], (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.4'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('colors.grey.0'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.grey.2'), (0, _styledSystem.themeGet)('transitions.default'), (0, _styledSystem.themeGet)('colors.brand.secondary'), (0, _styledSystem.themeGet)('colors.grey.1'), function (props) {
+})(['display:block;width:100%;margin:0;margin-bottom:', ';padding:', ' ', ';font-size:', ';line-height:', ';color:', ';border:', ';border-color:', ';outline:0;transition:border-color ', ';appearance:none;&:focus{border-color:', ';}&[readonly]{border-color:transparent;background:transparent;padding-left:0;}::placeholder{color:', ';}::-ms-clear{display:none;}', ' ', ';'], (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.4'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('colors.grey.0'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.grey.2'), (0, _styledSystem.themeGet)('transitions.default'), (0, _styledSystem.themeGet)('colors.brand.secondary'), (0, _styledSystem.themeGet)('colors.grey.1'), function (props) {
   return props.error && (0, _styledComponents.css)(['border-color:', ';'], (0, _styledSystem.themeGet)('colors.ui.error'));
@@ -26,0 +26,0 @@ }, _styledSystem.space);

dist/Input/Input.story.js

@@ -9,2 +9,4 @@ var _react = require('react');
 
+var _react4 = require('@storybook/addon-knobs/react');
+
 var _ = require('.');
@@ -21,3 +23,7 @@
 (0, _react3.storiesOf)('Components|Input', module).addDecorator((0, _storybookReadme.withDocs)(_README2['default'])).add('default', function () {
-  return _react2['default'].createElement(_2['default'], { placeholder: 'Hello world' });
+  return _react2['default'].createElement(_2['default'], {
+    placeholder: 'Hello world',
+    error: (0, _react4.boolean)('Error', false),
+    readOnly: (0, _react4.boolean)('Read only', false)
+  });
 });

package.json

 {
   "name": "@roo-ui/components",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "publishConfig": {

src/Input/Input.js

@@ -25,2 +25,8 @@ import PropTypes from 'prop-types';
 
+  &[readonly] {
+    border-color: transparent;
+    background: transparent;
+    padding-left: 0;
+  }
+
   ::placeholder {
@@ -27,0 +33,0 @@ color: ${themeGet('colors.grey.1')};

src/Input/Input.story.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withDocs } from 'storybook-readme';
+import { boolean } from '@storybook/addon-knobs/react';
 
@@ -11,3 +12,7 @@ import Input from '.';
   .add('default', () => (
-    <Input placeholder="Hello world" />
+    <Input
+      placeholder="Hello world"
+      error={boolean('Error', false)}
+      readOnly={boolean('Read only', false)}
+    />
   ));

No alert changes

Improved metrics

Total package byte prevSize

213765

0.49%

Lines of code

4442

0.34%

No dependency changes