@potok/forms - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

components/Input/Input.jsx

@@ -87,3 +87,3 @@ // @flow
     return (
-      <Container className={className} focused={focused}>
+      <Container className={className} focused={focused} disabled={disabled}>
         {leftAddon({ focused })}
@@ -90,0 +90,0 @@ <InputStyled

components/Input/README.md

@@ -18,2 +18,5 @@ TextInput component
 initialState = { value: '' };
+const InputWrapper = ({ children }) => (
+  <div style={{ margin: '1rem 0' }}>{children}</div>
+);
 <>
@@ -25,2 +28,8 @@ <Input
   />
+  <InputWrapper>
+    <Input value="Disabled" disabled />
+  </InputWrapper>
+  <InputWrapper>
+    <Input placeholder="Disabled placeholder" disabled />
+  </InputWrapper>
 </>;
@@ -27,0 +36,0 @@ ```

components/Input/styled/index.js

 import styled from 'styled-components';
-import { ifProp } from 'styled-tools';
+import { ifProp, ifNotProp } from 'styled-tools';
 import { colors, borderRadius } from '@potok/theme';
@@ -14,2 +14,4 @@
   transition: color 0.2s ease;
+  background: transparent;
+  border: 0;
 
@@ -19,2 +21,6 @@ &::placeholder {
   }
+
+  &:disabled {
+    background: transparent;
+  }
 `;
@@ -27,3 +33,3 @@
   align-items: center;
-  border: 1px solid ${ifProp('focused', colors.B500, colors.N30)};
+  border: 1px solid ${colors.N30};
   background: ${ifProp('disabled', colors.N10, colors.N0)};
@@ -33,7 +39,7 @@ transition: border-color 0.2s ease;
   &:focus-within {
-    border-color: ${colors.B500};
+    border-color: ${ifNotProp('disabled', colors.B500, colors.N30)};
     ${InputStyled} {
-      color: ${colors.N900};
+      color: ${ifNotProp('disabled', colors.N900)};
     }
   }
 `;

components/TextArea/README.md

@@ -25,2 +25,8 @@ TextArea component
     </div>
+    <div style={{ marginTop: 20 }}>
+      <TextArea maxLength={10} value="Disabled textarea" placeholder="Max length = 10" disabled />
+    </div>
+     <div style={{ marginTop: 20 }}>
+      <TextArea maxLength={10} placeholder="Disabled textarea placeholder" disabled />
+    </div>
   </>
@@ -27,0 +33,0 @@ ```

components/TextArea/styled/index.js

@@ -1,3 +0,3 @@
-import styled from 'styled-components';
-import { ifProp, prop } from 'styled-tools';
+import styled, { css } from 'styled-components';
+import { ifProp, ifNotProp, prop } from 'styled-tools';
 import { colors, borderRadius } from '@potok/theme';
@@ -21,11 +21,14 @@
 
-  &:focus,
-  &:hover {
-    border-color: ${colors.B500};
-    color: ${colors.N900};
-  }
-
-  &::placeholder {
+  ${ifNotProp(
+    'disabled',
+    css`
+      &:focus,
+      &:hover {
+        border-color: ${colors.B500};
+        color: ${colors.N900};
+      }
+    `
+  )} &::placeholder {
     color: ${colors.N100};
   }
 `;

package.json

 {
   "name": "@potok/forms",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Potok.io UI Kit Form Components",
@@ -5,0 +5,0 @@ "main": "./components/index.js",

No alert changes

Improved metrics

Total package byte prevSize

261646

increased by0.3%

Lines of code

3675

increased by0.25%

No dependency changes