improve colors theme, add props descriptions

id-ui · Feb 26, 2021 · 15f02f9 · 15f02f9
1 parent fc5402f
commit 15f02f9
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@idui/react-text-area",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React TextArea Component",
   "author": "kaprisa57@gmail.com",
   "license": "MIT",

diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx
@@ -53,6 +53,8 @@ const colorsSetShape = PropTypes.shape({
   color: PropTypes.string,
   background: PropTypes.string,
   border: PropTypes.string,
+  outline: PropTypes.string,
+  placeholder: PropTypes.string,
 });
 
 TextArea.propTypes = {
@@ -68,9 +70,6 @@ TextArea.propTypes = {
     default: colorsSetShape,
     disabled: colorsSetShape,
     error: colorsSetShape,
-    focused: PropTypes.shape({
-      border: PropTypes.string,
-    }),
   }),
 };
 

diff --git a/src/components/TextArea/styled.js b/src/components/TextArea/styled.js
@@ -15,12 +15,12 @@ export const Container = styled.textarea`
       color: ${colors[state].color};
       border-color: ${colors[state].border};
       background-color: ${colors[state].background};
+      &:focus-within {
+        border-color: ${colors[state].outline || colors[state].border};
+      }
+      &::placeholder {
+        color: ${colors[state].placeholder || colors.default.placeholder};
+      }
     `
   )}
-  ${(ifProp({ state: 'default' }),
-  css`
-    &:focus-within {
-      border-color: ${prop('colors.focused.border')};
-    }
-  `)}
 `;
diff --git a/src/components/TextArea/textArea.stories.js b/src/components/TextArea/textArea.stories.js
@@ -48,6 +48,7 @@ export default {
         },
       },
     },
+    placeholder: { control: 'text', description: 'TextArea placeholder' },
     className: { control: 'text', description: 'TextArea className' },
     maxHeight: { control: 'text', description: 'max TextArea height' },
     rows: {

diff --git a/src/components/TextArea/theme.js b/src/components/TextArea/theme.js
@@ -3,6 +3,8 @@ export const colors = {
     border: '#B4B4B4',
     color: '#313131',
     background: 'inherit',
+    outline: '#A569ED',
+    placeholder: '#B4B4B4',
   },
   disabled: {
     border: '#EFEFEF',
@@ -13,8 +15,6 @@ export const colors = {
     border: '#C02908',
     color: '#C02908',
     background: '#FDDCDC',
-  },
-  focused: {
-    border: '#A569ED',
+    placeholder: '#c34328',
   },
 };
diff --git a/types.d.ts b/types.d.ts
@@ -4,52 +4,59 @@ export interface TextAreaStateColorsSet {
     border?: string;
     color?: string;
     background?: string;
+    outline?: string;
+    placeholder?: string;
 }
 
 export interface TextAreaColors {
     default?: TextAreaStateColorsSet;
     disabled?: TextAreaStateColorsSet;
     error?: TextAreaStateColorsSet;
-    focused?: {
-        border?: string
-    };
 }
 
 export interface TextAreaProps {
     /**
-     *
+     * TextArea value
      */
     value?: string;
     /**
-     *
+     * whether TextArea disabled or not
+     * @default false
      */
     disabled?: boolean;
     /**
-     *
+     * whether TextArea has error or not
+     * @default false
      */
     withError?: boolean;
     /**
-     *
+     * whether fit TextArea height to content height or not
+     * @default false
      */
     autoHeight?: boolean;
     /**
-     *
+     * onChange value handler
      */
     onChange?: (value: string) => void;
     /**
-     *
+     * TextArea placeholder
+     */
+    placeholder?: string;
+    /**
+     * TextArea className
      */
     className?: string;
     /**
-     *
+     * TextArea rows count
+     * @default 3
      */
     rows?: number;
     /**
-     *
+     * max TextArea height
      */
     maxHeight?: string;
     /**
-     *
+     * Textarea colors theme for different states (default, disabled, error, focused)
      */
     colors?: TextAreaColors;
 }