Merge pull request #3359 from benjiwheeler/join-flow-placeholder-fixes

Join flow placeholder fixes
This commit is contained in:
Benjamin Wheeler 2019-09-17 21:43:06 -04:00 committed by GitHub
commit 2e7a687547
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 7 deletions

View file

@ -27,7 +27,7 @@ const FormikInput = ({
>
<Field
className={classNames(
'input',
'formik-input',
{fail: error},
className
)}

View file

@ -1,12 +1,12 @@
@import "../../colors";
.input {
.formik-input {
height: 2.75rem;
border-radius: .5rem;
background-color: $ui-white;
margin-bottom: .5rem;
transition: all .5s ease, font-size 0s;
border: 1px solid $active-gray;
border: 1px solid $active-dark-gray;
padding: 0 1rem;
color: $type-gray;
font-size: .875rem;
@ -29,6 +29,6 @@
&::placeholder {
font-style: italic;
color: $type-gray-75percent;
color: $type-gray-60percent;
}
}

View file

@ -13,7 +13,7 @@ const InfoButton = require('../info-button/info-button.jsx');
require('./join-flow-steps.scss');
const getBirthMonthOptions = intl => ([
{value: 'null', label: intl.formatMessage({id: 'general.month'})},
{value: 'null', label: intl.formatMessage({id: 'general.month'}), disabled: true},
{value: '1', label: intl.formatMessage({id: 'general.monthJanuary'})},
{value: '2', label: intl.formatMessage({id: 'general.monthFebruary'})},
{value: '3', label: intl.formatMessage({id: 'general.monthMarch'})},
@ -37,7 +37,8 @@ const getBirthYearOptions = intl => {
.map((defaultVal, i) => (
{value: String(curYear - i), label: String(curYear - i)}
));
birthYearOptions.unshift({
birthYearOptions.unshift({ // set placeholder as first option
disabled: true,
value: 'null',
label: intl.formatMessage({id: 'general.year'})
});

View file

@ -28,7 +28,7 @@ class CountryStep extends React.Component {
setCountryOptions () {
if (this.countryOptions.length === 0) {
this.countryOptions = [...countryData.registrationCountryOptions];
this.countryOptions.unshift({
this.countryOptions.unshift({ // add placeholder as first option
disabled: true,
label: this.props.intl.formatMessage({id: 'general.country'}),
value: 'null'