diff --git a/package.json b/package.json index be4013d..7e2f255 100644 --- 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 index ef8d742..b4a30ce 100644 --- 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 index 68a7ac1..9c1ec60 100644 --- 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 index 658b915..30c4814 100644 --- 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 index 905a450..6322519 100644 --- 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 index 8e92376..b944d5f 100644 --- 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; }