maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: onboarding profile bio textarea length (#18611)

Browse source 
Co-authored-by: Fernando Valverde <fernando@fdo.cr>
This commit is contained in:
Jeferson S. Brito 2022-11-01 20:25:38 -03:00 • committed by GitHub
parent d98eee3b08
commit 17bedfee55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/javascript/onboarding/components/ProfileForm.jsx
View file

@ -147,6 +147,8 @@ export class ProfileForm extends Component {
this.props;
const { profile_image_90, username, name } = this.user;
const { canSkip, groups = [], error, errorMessage } = this.state;
const SUMMARY_MAXLENGTH = 200;
const summaryCharacters = this.state?.formValues?.summary?.length || 0;
const sections = groups.map((group) => {
return (
@ -219,6 +221,7 @@ export class ProfileForm extends Component {
label: 'Username',
default_value: username,
required: true,
maxLength: 20,
}}
onFieldChange={this.handleFieldChange}
/>
@ -230,9 +233,21 @@ export class ProfileForm extends Component {
label: 'Bio',
placeholder_text: 'Tell us a little about yourself',
required: false,
maxLength: SUMMARY_MAXLENGTH,
}}
onFieldChange={this.handleFieldChange}
/>
<p
id="summary-description"
class="crayons-field__description align-right"
>
<span class="screen-reader-only" aria-live="polite">
Remaining characters: {SUMMARY_MAXLENGTH - summaryCharacters}
</span>
<span id="summary-characters">
{summaryCharacters}/{SUMMARY_MAXLENGTH}
</span>
</p>
</div>
{sections}

5
app/javascript/onboarding/components/ProfileForm/TextArea.jsx
View file

@ -27,7 +27,8 @@ import { FormField } from '@crayons';
export function TextArea(props) {
const { onFieldChange } = props;
const { attribute_name, placeholder_text, description, label } = props.field;
const { attribute_name, placeholder_text, description, label, maxLength } =
props.field;
return (
<FormField>
@ -40,6 +41,7 @@ export function TextArea(props) {
name={attribute_name}
id={attribute_name}
onChange={onFieldChange}
maxLength={maxLength}
/>
{description && <p class="crayons-field__description">{description}</p>}
</FormField>
@ -53,5 +55,6 @@ TextArea.propTypes = {
description: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
input_type: PropTypes.string.isRequired,
maxLength: PropTypes.number,
}).isRequired,
};

3
app/javascript/onboarding/components/ProfileForm/TextInput.jsx
View file

@ -33,6 +33,7 @@ export function TextInput(props) {
description,
label,
required,
maxLength,
} = field;
return (
@ -48,6 +49,7 @@ export function TextInput(props) {
id={attribute_name}
onChange={onFieldChange}
required={required ? 'required' : ''}
maxLength={maxLength}
/>
{description && <p class="crayons-field__description">{description}</p>}
</FormField>
@ -61,5 +63,6 @@ TextInput.propTypes = {
description: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
input_type: PropTypes.string.isRequired,
maxLength: PropTypes.number,
}).isRequired,
};