diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index dbc936c7f..88dbfd52c 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -12,6 +12,10 @@ const defaultStyles = StyleSheet.create({ marginBottom: 20, textAlign: 'center', }, + label: { + marginBottom: 4, + fontSize: 16, + }, input: { height: 50, borderColor: '#ccc', diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx index b11084473..ba6be6712 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackForm.tsx @@ -7,15 +7,20 @@ import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native'; import { CANCEL_BUTTON_LABEL, EMAIL_ERROR, + EMAIL_LABEL, EMAIL_PLACEHOLDER, ERROR_TITLE, FORM_ERROR, FORM_TITLE, + IS_REQUIRED_LABEL, + MESSAGE_LABEL, MESSAGE_PLACEHOLDER, + NAME_LABEL, NAME_PLACEHOLDER, SUBMIT_BUTTON_LABEL} from './constants'; import defaultStyles from './FeedbackForm.styles'; import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types'; +import LabelText from './LabelText'; /** * @beta @@ -72,13 +77,24 @@ export class FeedbackForm extends React.Component {text?.formTitle || FORM_TITLE} + this.setState({ name: value })} /> - + this.setState({ email: value })} /> - + = ({ label, isRequired, isRequiredLabel, styles }) => { + return ( + + {label} + {isRequired && ` ${isRequiredLabel}`} + + ); +}; + +export default LabelText; diff --git a/packages/core/src/js/feedback/constants.ts b/packages/core/src/js/feedback/constants.ts index 649cc1f86..c30d30122 100644 --- a/packages/core/src/js/feedback/constants.ts +++ b/packages/core/src/js/feedback/constants.ts @@ -1,7 +1,11 @@ export const FORM_TITLE = 'Report a Bug'; -export const NAME_PLACEHOLDER = 'Name'; -export const EMAIL_PLACEHOLDER = 'Email'; -export const MESSAGE_PLACEHOLDER = 'Description'; +export const NAME_PLACEHOLDER = 'Your Name'; +export const NAME_LABEL = 'Name'; +export const EMAIL_PLACEHOLDER = 'your.email@example.org'; +export const EMAIL_LABEL = 'Email'; +export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?"; +export const MESSAGE_LABEL = 'Description'; +export const IS_REQUIRED_LABEL = '(required)'; export const SUBMIT_BUTTON_LABEL = 'Send Bug Report'; export const CANCEL_BUTTON_LABEL = 'Cancel'; export const ERROR_TITLE = 'Error';