Rename coral-ui/FormField with TextField.

This commit is contained in:
gaba
2017-02-15 11:50:21 -08:00
parent 1d1b1b3391
commit 68c764fd43
13 changed files with 45 additions and 45 deletions
@@ -22,17 +22,17 @@
}
}
.formField {
.textField {
margin-top: 15px;
}
.formField label {
.textField label {
font-size: 1.08em;
font-weight: bold;
margin-bottom: 5px;
}
.formField input {
.textField input {
width: 100%;
display: block;
border: none;
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './style.css';
import {FormField, Button} from 'coral-ui';
import {TextField, Button} from 'coral-ui';
const AddOrganizationName = props => {
const {handleSettingsChange, handleSettingsSubmit, install} = props;
@@ -12,8 +12,8 @@ const AddOrganizationName = props => {
</p>
<div className={styles.form}>
<form onSubmit={handleSettingsSubmit}>
<FormField
className={styles.FormField}
<TextField
className={styles.TextField}
id="organizationName"
type="text"
label='Organization name'
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './style.css';
import {FormField, Button, Spinner} from 'coral-ui';
import {TextField, Button, Spinner} from 'coral-ui';
const InitialStep = props => {
const {handleUserChange, handleUserSubmit, install} = props;
@@ -8,8 +8,8 @@ const InitialStep = props => {
<div className={styles.step}>
<div className={styles.form}>
<form onSubmit={handleUserSubmit}>
<FormField
className={styles.formField}
<TextField
className={styles.textField}
id="email"
type="email"
label='Email address'
@@ -19,8 +19,8 @@ const InitialStep = props => {
noValidate
/>
<FormField
className={styles.formField}
<TextField
className={styles.textField}
id="username"
type="text"
label='Username'
@@ -29,8 +29,8 @@ const InitialStep = props => {
errorMsg={install.errors.username}
/>
<FormField
className={styles.formField}
<TextField
className={styles.textField}
id="password"
type="password"
label='Password'
@@ -39,8 +39,8 @@ const InitialStep = props => {
errorMsg={install.errors.password}
/>
<FormField
className={styles.formField}
<TextField
className={styles.textField}
id="confirmPassword"
type="password"
label='Confirm Password'
@@ -1,6 +1,6 @@
import React from 'react';
import styles from './style.css';
import {Button, Select, Option, FormField} from 'coral-ui';
import {Button, Select, Option, TextField} from 'coral-ui';
const InviteTeamMembers = props => {
const {nextStep} = props;
@@ -14,19 +14,19 @@ const InviteTeamMembers = props => {
<div className={styles.form}>
<form>
<FormField
className={styles.formField}
<TextField
className={styles.textField}
id="email"
type="email"
label='Email address' required/>
<FormField
className={styles.formField}
<TextField
className={styles.textField}
id="username"
type="text"
label='Username' required/>
<div className={styles.formField}>
<div className={styles.textField}>
<label htmlFor='role'>Assing a role</label>
<Select id='role' label='Select Role'>
<Option>Admin</Option>
@@ -33,7 +33,7 @@
margin: 30px 0;
}
.formField {
.textField {
text-align: left;
label {
@@ -1,5 +1,5 @@
import React from 'react';
import {Button, Checkbox, FormField} from 'coral-ui';
import {Button, Checkbox, TextField} from 'coral-ui';
import styles from './ConfigureCommentStream.css';
@@ -47,7 +47,7 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
}} />
<div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
<FormField
<TextField
id="qboxcontent"
onChange={updateQuestionBoxContent}
rows={3}
@@ -1,5 +1,5 @@
import React from 'react';
import FormField from 'coral-ui/components/FormField';
import TextField from 'coral-ui/components/TextField';
import Alert from './Alert';
import Button from 'coral-ui/components/Button';
import {Dialog} from 'coral-ui';
@@ -28,7 +28,7 @@ const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSub
<label htmlFor="username">{lang.t('createdisplay.yourusername')}</label>
{ props.auth.error && <Alert>{props.auth.error}</Alert> }
<form id="saveDisplayName" onSubmit={handleSubmitDisplayName}>
<FormField
<TextField
id="username"
type="string"
label={lang.t('createdisplay.username')}
@@ -26,7 +26,7 @@ class ForgotContent extends React.Component {
<h1>{lang.t('signIn.recoverPassword')}</h1>
</div>
<form onSubmit={this.handleSubmit}>
<div className={styles.formField}>
<div className={styles.textField}>
<label htmlFor="email">{lang.t('signIn.email')}</label>
<input
ref={input => this.emailInput = input}
@@ -1,6 +1,6 @@
import React, {PropTypes} from 'react';
import Alert from './Alert';
import {Button, FormField, Spinner, Success} from 'coral-ui';
import {Button, TextField, Spinner, Success} from 'coral-ui';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
@@ -32,7 +32,7 @@ const SignInContent = ({
auth.emailVerificationFailure
? <form onSubmit={handleResendVerification}>
<p>{lang.t('signIn.requestNewVerifyEmail')}</p>
<FormField
<TextField
id="confirm-email"
type="email"
label={lang.t('signIn.email')}
@@ -54,14 +54,14 @@ const SignInContent = ({
</h1>
</div>
<form onSubmit={handleSignIn}>
<FormField
<TextField
id="email"
type="email"
label={lang.t('signIn.email')}
value={formData.email}
onChange={handleChange}
/>
<FormField
<TextField
id="password"
type="password"
label={lang.t('signIn.password')}
@@ -1,6 +1,6 @@
import React, {PropTypes} from 'react';
import Alert from './Alert';
import {Button, FormField, Spinner, Success} from 'coral-ui';
import {Button, TextField, Spinner, Success} from 'coral-ui';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
@@ -79,7 +79,7 @@ class SignUpContent extends React.Component {
</h1>
</div>
<form onSubmit={handleSignUp}>
<FormField
<TextField
id="email"
type="email"
label={lang.t('signIn.email')}
@@ -88,7 +88,7 @@ class SignUpContent extends React.Component {
errorMsg={errors.email}
onChange={handleChange}
/>
<FormField
<TextField
id="username"
type="text"
label={lang.t('signIn.username')}
@@ -97,7 +97,7 @@ class SignUpContent extends React.Component {
errorMsg={errors.username}
onChange={handleChange}
/>
<FormField
<TextField
id="password"
type="password"
label={lang.t('signIn.password')}
@@ -108,7 +108,7 @@ class SignUpContent extends React.Component {
minLength="8"
/>
{ errors.password && <span className={styles.hint}> Password must be at least 8 characters. </span> }
<FormField
<TextField
id="confirmPassword"
type="password"
label={lang.t('signIn.confirmPassword')}
@@ -1,14 +1,14 @@
.formField {
.textField {
margin-top: 15px;
}
.formField label {
.textField label {
font-size: 1.08em;
font-weight: bold;
margin-bottom: 5px;
}
.formField input {
.textField input {
width: 100%;
display: block;
border: none;
@@ -1,8 +1,8 @@
import React, {PropTypes} from 'react';
import styles from './FormField.css';
import styles from './TextField.css';
const FormField = ({className, showErrors = false, errorMsg, label, ...props}) => (
<div className={`${styles.formField} ${className ? className : ''}`}>
const TextField = ({className, showErrors = false, errorMsg, label, ...props}) => (
<div className={`${styles.textField} ${className ? className : ''}`}>
<label htmlFor={props.id}>
{label}
</label>
@@ -15,7 +15,7 @@ const FormField = ({className, showErrors = false, errorMsg, label, ...props}) =
</div>
);
FormField.propTypes = {
TextField.propTypes = {
label: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func,
@@ -23,4 +23,4 @@ FormField.propTypes = {
type: PropTypes.string
};
export default FormField;
export default TextField;
+1 -1
View File
@@ -13,7 +13,7 @@ export {default as Icon} from './components/Icon';
export {default as List} from './components/List';
export {default as Item} from './components/Item';
export {default as Card} from './components/Card';
export {default as FormField} from './components/FormField';
export {default as TextField} from './components/TextField';
export {default as Success} from './components/Success';
export {default as Pager} from './components/Pager';
export {default as Wizard} from './components/Wizard';