web: Refactoring TextInput component:
+ Moved scale as independent parameter + Changed font-size, padding by size + Added password story + Changed README.md
This commit is contained in:
parent
b3539fa70e
commit
cc0f9e0fb4
@ -33,7 +33,9 @@ Input description
|
|||||||
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
||||||
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
||||||
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
||||||
| `size` | `object` | | `small`, `medium`, `large`, `xlarge`, `scale` | `scale` | Horizontal size limit of the input fields. |
|
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
|
||||||
|
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
|
||||||
|
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
|
||||||
|
|
||||||
### Main Functions and use cases are:
|
### Main Functions and use cases are:
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ import Readme from './README.md';
|
|||||||
import { TextInput } from 'asc-web-components';
|
import { TextInput } from 'asc-web-components';
|
||||||
import Section from '../../../../.storybook/decorators/section';
|
import Section from '../../../../.storybook/decorators/section';
|
||||||
|
|
||||||
const sizeOptions = ['base', 'middle', 'big', 'huge', 'scale'];
|
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||||
|
|
||||||
storiesOf('Components|Input', module)
|
storiesOf('Components|Input', module)
|
||||||
.addDecorator(withKnobs)
|
.addDecorator(withKnobs)
|
||||||
@ -16,7 +16,7 @@ storiesOf('Components|Input', module)
|
|||||||
.add('text', () => (
|
.add('text', () => (
|
||||||
<Section>
|
<Section>
|
||||||
<Value
|
<Value
|
||||||
defaultValue=""
|
defaultValue="text sample"
|
||||||
render={(value, onChange) => (
|
render={(value, onChange) => (
|
||||||
<TextInput
|
<TextInput
|
||||||
id={text('id', '')}
|
id={text('id', '')}
|
||||||
@ -24,7 +24,8 @@ storiesOf('Components|Input', module)
|
|||||||
value={text('value', value)}
|
value={text('value', value)}
|
||||||
placeholder={text('placeholder', 'This is placeholder')}
|
placeholder={text('placeholder', 'This is placeholder')}
|
||||||
maxLength={number('maxLength', 255)}
|
maxLength={number('maxLength', 255)}
|
||||||
size={select('size', sizeOptions, 'middle')}
|
size={select('size', sizeOptions, 'base')}
|
||||||
|
scale={boolean('scale', false)}
|
||||||
onChange={event => {
|
onChange={event => {
|
||||||
action('onChange')(event);
|
action('onChange')(event);
|
||||||
onChange(event.target.value);
|
onChange(event.target.value);
|
||||||
|
@ -0,0 +1,43 @@
|
|||||||
|
# Input: TextInput
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { TextInput } from 'asc-web-components';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Input description
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
<TextInput value="text" type="password" onChange={event => alert(event.target.value)} />;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Props | Type | Required | Values | Default | Description |
|
||||||
|
| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
|
||||||
|
| `id` | `string` | - | - | - | Used as HTML `id` property |
|
||||||
|
| `name` | `string` | - | - | - | Used as HTML `name` property |
|
||||||
|
| `value` | `string` | ✅ | - | - | Value of the input |
|
||||||
|
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
|
||||||
|
| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` |
|
||||||
|
| `onBlur` | `func` | - | - | - | Called when field is blurred |
|
||||||
|
| `onFocus` | `func` | - | - | - | Called when field is focused |
|
||||||
|
| `isAutofocussed` | `bool` | - | - | - | Focus the input field on initial render |
|
||||||
|
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
|
||||||
|
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
|
||||||
|
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
||||||
|
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
||||||
|
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
||||||
|
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
|
||||||
|
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
|
||||||
|
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
|
||||||
|
|
||||||
|
|
||||||
|
### Main Functions and use cases are:
|
||||||
|
|
||||||
|
- Input field for single-line strings
|
@ -0,0 +1,48 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
import { action } from '@storybook/addon-actions';
|
||||||
|
import { Value } from 'react-value';
|
||||||
|
import { withKnobs, boolean, text, select, number } from '@storybook/addon-knobs/react';
|
||||||
|
import withReadme from 'storybook-readme/with-readme';
|
||||||
|
import Readme from './README.md';
|
||||||
|
import { TextInput } from 'asc-web-components';
|
||||||
|
import Section from '../../../../.storybook/decorators/section';
|
||||||
|
|
||||||
|
const sizeOptions = ['base', 'middle', 'big', 'huge'];
|
||||||
|
|
||||||
|
storiesOf('Components|Input', module)
|
||||||
|
.addDecorator(withKnobs)
|
||||||
|
.addDecorator(withReadme(Readme))
|
||||||
|
.add('password', () => (
|
||||||
|
<Section>
|
||||||
|
<Value
|
||||||
|
defaultValue="password sample"
|
||||||
|
render={(value, onChange) => (
|
||||||
|
<TextInput
|
||||||
|
type="password"
|
||||||
|
id={text('id', '')}
|
||||||
|
name={text('name', '')}
|
||||||
|
value={text('value', value)}
|
||||||
|
placeholder={text('placeholder', 'This is placeholder')}
|
||||||
|
maxLength={number('maxLength', 255)}
|
||||||
|
size={select('size', sizeOptions, 'base')}
|
||||||
|
scale={boolean('scale', false)}
|
||||||
|
onChange={event => {
|
||||||
|
action('onChange')(event);
|
||||||
|
onChange(event.target.value);
|
||||||
|
}}
|
||||||
|
onBlur={action('onBlur')}
|
||||||
|
onFocus={action('onFocus')}
|
||||||
|
isAutoFocussed={boolean('isAutoFocussed', false)}
|
||||||
|
isDisabled={boolean('isDisabled', false)}
|
||||||
|
isReadOnly={boolean('isReadOnly', false)}
|
||||||
|
hasError={boolean('hasError', false)}
|
||||||
|
hasWarning={boolean('hasWarning', false)}
|
||||||
|
autoComplete={text('autoComplete', 'off')}
|
||||||
|
tabIndex={number('tabIndex', 1)}
|
||||||
|
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
));
|
@ -39,7 +39,8 @@ const LoginForm = props => {
|
|||||||
hasError={!loginValid}
|
hasError={!loginValid}
|
||||||
value={login}
|
value={login}
|
||||||
placeholder={loginPlaceholder}
|
placeholder={loginPlaceholder}
|
||||||
size='scale'
|
size='huge'
|
||||||
|
scale={true}
|
||||||
isAutoFocussed={true}
|
isAutoFocussed={true}
|
||||||
tabIndex={1}
|
tabIndex={1}
|
||||||
onChange={event => {
|
onChange={event => {
|
||||||
@ -57,7 +58,8 @@ const LoginForm = props => {
|
|||||||
hasError={!passwordValid}
|
hasError={!passwordValid}
|
||||||
value={password}
|
value={password}
|
||||||
placeholder={passwordPlaceholder}
|
placeholder={passwordPlaceholder}
|
||||||
size='scale'
|
size='huge'
|
||||||
|
scale={true}
|
||||||
tabIndex={2}
|
tabIndex={2}
|
||||||
onChange={event => {
|
onChange={event => {
|
||||||
setPassword(event.target.value);
|
setPassword(event.target.value);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import styled, { css } from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const StyledInput = styled.input.attrs((props) => ({
|
const StyledInput = styled.input.attrs((props) => ({
|
||||||
id: props.id,
|
id: props.id,
|
||||||
@ -29,21 +29,31 @@ const StyledInput = styled.input.attrs((props) => ({
|
|||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
background-color: ${props => props.isDisabled ? '#efefef' : '#fff'};
|
background-color: ${props => props.isDisabled ? '#efefef' : '#fff'};
|
||||||
color: ${props => props.isDisabled ? '#666562' : '#434341'}; ;
|
color: ${props => props.isDisabled ? '#666562' : '#434341'};
|
||||||
display: flex;
|
display: flex;
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
font-size: 18px;
|
font-size: ${props =>
|
||||||
|
(props.size === 'base' && '12px') ||
|
||||||
|
(props.size === 'middle' && '14px') ||
|
||||||
|
(props.size === 'big' && '16px') ||
|
||||||
|
(props.size === 'huge' && '18px')
|
||||||
|
};
|
||||||
flex: 1 1 0%;
|
flex: 1 1 0%;
|
||||||
outline: none;
|
outline: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 8px 20px;
|
padding: ${props =>
|
||||||
|
(props.size === 'base' && '4px 8px') ||
|
||||||
|
(props.size === 'middle' && '8px 12px') ||
|
||||||
|
(props.size === 'big' && '8px 16px') ||
|
||||||
|
(props.size === 'huge' && '8px 20px')
|
||||||
|
};
|
||||||
transition: all 0.2s ease 0s;
|
transition: all 0.2s ease 0s;
|
||||||
width: ${props =>
|
width: ${props =>
|
||||||
|
(props.scale && '100%') ||
|
||||||
(props.size === 'base' && '135px') ||
|
(props.size === 'base' && '135px') ||
|
||||||
(props.size === 'middle' && '300px') ||
|
(props.size === 'middle' && '300px') ||
|
||||||
(props.size === 'big' && '350px') ||
|
(props.size === 'big' && '350px') ||
|
||||||
(props.size === 'huge' && '500px') ||
|
(props.size === 'huge' && '500px')
|
||||||
(props.size === 'scale' && '100%')
|
|
||||||
};
|
};
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
@ -79,7 +89,8 @@ TextInput.propTypes = {
|
|||||||
placeholder: PropTypes.string,
|
placeholder: PropTypes.string,
|
||||||
tabIndex: PropTypes.number,
|
tabIndex: PropTypes.number,
|
||||||
|
|
||||||
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'scale']),
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
|
||||||
|
scale: PropTypes.bool,
|
||||||
|
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
onBlur: PropTypes.func,
|
onBlur: PropTypes.func,
|
||||||
@ -97,7 +108,8 @@ TextInput.defaultProps = {
|
|||||||
type: 'text',
|
type: 'text',
|
||||||
value: '',
|
value: '',
|
||||||
maxLength: 255,
|
maxLength: 255,
|
||||||
size: 'middle',
|
size: 'base',
|
||||||
|
scale: false,
|
||||||
tabIndex: -1,
|
tabIndex: -1,
|
||||||
hasError: false,
|
hasError: false,
|
||||||
hasWarning: false,
|
hasWarning: false,
|
||||||
|
Loading…
Reference in New Issue
Block a user