From b7762c472ab487e08c96de6e81bdd9c9979954a6 Mon Sep 17 00:00:00 2001
From: Richard Fernando Heise Ferreira <rfhf19@inf.ufpr.br>
Date: Mon, 22 Jun 2020 09:08:46 -0300
Subject: [PATCH] Issue #20: FIX typography no wrapping long strings
Signed-off-by: Richard Heise <rfhf19@inf.ufpr.br>
---
.../fieldsAnswerForm/FormFieldCheckbox.js | 23 +++++--
.../fieldsAnswerForm/FormFieldRadio.js | 23 +++++--
.../fieldsAnswerForm/FormFieldSelect.js | 19 +++++-
.../fieldsAnswerForm/FormFieldText.js | 17 +++++-
.../fieldsAnswerForm/FormFieldTitle.js | 60 +++++++++++--------
src/components/fieldsListForms/CardForm.jsx | 4 +-
6 files changed, 105 insertions(+), 41 deletions(-)
diff --git a/src/components/fieldsAnswerForm/FormFieldCheckbox.js b/src/components/fieldsAnswerForm/FormFieldCheckbox.js
index f658a90..c1e7479 100644
--- a/src/components/fieldsAnswerForm/FormFieldCheckbox.js
+++ b/src/components/fieldsAnswerForm/FormFieldCheckbox.js
@@ -100,7 +100,11 @@ function FormFieldCheckbox(props) {
const options = props.options.map((x, index) => {
return (
<span>
- <Typography className={classes.text} variant="h7">
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.text}
+ variant="h7"
+ >
{x.value}
</Typography>
<Checkbox onChange={() => handleArray(index)} />
@@ -117,10 +121,16 @@ function FormFieldCheckbox(props) {
<Paper className={classes.paper}>
<Grid container>
<Grid item xs={12} className={classes.questionsGrid}>
- <Typography className={classes.text} variant="h6">
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.text}
+ variant="h6"
+ >
{props.question}
</Typography>
- <Typography variant="h8">{props.description}</Typography>
+ <Typography style={{ wordWrap: "break-word" }} variant="h8">
+ {props.description}
+ </Typography>
</Grid>
<Grid
item
@@ -133,7 +143,12 @@ function FormFieldCheckbox(props) {
>
{options}
<div>
- <Typography className={classes.validation}>{valid}</Typography>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.validation}
+ >
+ {valid}
+ </Typography>
</div>
</Grid>
</Grid>
diff --git a/src/components/fieldsAnswerForm/FormFieldRadio.js b/src/components/fieldsAnswerForm/FormFieldRadio.js
index 3b2724e..2398fe7 100644
--- a/src/components/fieldsAnswerForm/FormFieldRadio.js
+++ b/src/components/fieldsAnswerForm/FormFieldRadio.js
@@ -111,7 +111,11 @@ function FormFieldRadio(props) {
const options = props.options.map(function(x, index) {
return (
<span>
- <Typography className={classes.text} variant="h7">
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.text}
+ variant="h7"
+ >
{x.value}
</Typography>
<Radio
@@ -133,10 +137,16 @@ function FormFieldRadio(props) {
<Paper className={classes.paper}>
<Grid container>
<Grid item xs={12} className={classes.questionsGrid}>
- <Typography className={classes.text} variant="h6">
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.text}
+ variant="h6"
+ >
{props.question}
</Typography>
- <Typography variant="h8">{props.description}</Typography>
+ <Typography style={{ wordWrap: "break-word" }} variant="h8">
+ {props.description}
+ </Typography>
</Grid>
<Grid
item
@@ -149,7 +159,12 @@ function FormFieldRadio(props) {
>
<RadioGroup>
{options}
- <Typography className={classes.validation}>{valid}</Typography>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.validation}
+ >
+ {valid}
+ </Typography>
</RadioGroup>
</Grid>
</Grid>
diff --git a/src/components/fieldsAnswerForm/FormFieldSelect.js b/src/components/fieldsAnswerForm/FormFieldSelect.js
index d00a1ba..e4845ae 100644
--- a/src/components/fieldsAnswerForm/FormFieldSelect.js
+++ b/src/components/fieldsAnswerForm/FormFieldSelect.js
@@ -122,10 +122,18 @@ function FormFieldSelect(props) {
<Paper className={classes.paper}>
<Grid container>
<Grid item xs={12} className={classes.questionsGrid}>
- <Typography className={classes.text} variant="h6">
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.text}
+ variant="h6"
+ >
{props.question}
</Typography>
- <Typography variant="h8" gutterBottom>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ variant="h8"
+ gutterBottom
+ >
{props.description}
</Typography>
</Grid>
@@ -145,7 +153,12 @@ function FormFieldSelect(props) {
>
{options}
</Select>
- <Typography className={classes.validation}>{valid}</Typography>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.validation}
+ >
+ {valid}
+ </Typography>
</Grid>
</Grid>
</Paper>
diff --git a/src/components/fieldsAnswerForm/FormFieldText.js b/src/components/fieldsAnswerForm/FormFieldText.js
index 1ad6d0c..97a5315 100644
--- a/src/components/fieldsAnswerForm/FormFieldText.js
+++ b/src/components/fieldsAnswerForm/FormFieldText.js
@@ -99,10 +99,16 @@ function FormFieldText(props) {
<Paper className={classes.paper}>
<Grid container>
<Grid item xs={12} className={classes.questionsGrid}>
- <Typography className={classes.text} variant="h6">
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.text}
+ variant="h6"
+ >
{props.question}
</Typography>
- <Typography variant="h8">{props.description}</Typography>
+ <Typography style={{ wordWrap: "break-word" }} variant="h8">
+ {props.description}
+ </Typography>
</Grid>
<Grid item xs={9} className={classes.questionsGrid}>
<TextField
@@ -112,7 +118,12 @@ function FormFieldText(props) {
placeholder="Resposta"
onChange={handleChange}
/>
- <Typography className={classes.validation}>{valid}</Typography>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.validation}
+ >
+ {valid}
+ </Typography>
</Grid>
<Grid
item
diff --git a/src/components/fieldsAnswerForm/FormFieldTitle.js b/src/components/fieldsAnswerForm/FormFieldTitle.js
index 34a2d79..cf2c22e 100644
--- a/src/components/fieldsAnswerForm/FormFieldTitle.js
+++ b/src/components/fieldsAnswerForm/FormFieldTitle.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
-import FieldFooterOptions from './FieldFooterOptions';
+import FieldFooterOptions from "./FieldFooterOptions";
const useStyles = makeStyles(theme => ({
paper: {
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
width: theme.spacing(100),
height: theme.spacing(22),
margin: theme.spacing(2),
- color: '#000000',
+ color: "#000000",
["@media (max-width:827px)"]: {
width: theme.spacing(70)
},
@@ -21,32 +21,32 @@ const useStyles = makeStyles(theme => ({
}
},
questionsGrid: {
- marginBottom: '20px',
- color: '#000000',
+ marginBottom: "20px",
+ color: "#000000",
["@media (max-width:827px)"]: {
width: theme.spacing(70)
}
},
title: {
- fontSize: '45px',
- color: '#000000',
+ fontSize: "45px",
+ color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: '35px'
+ fontSize: "35px"
},
["@media (max-width:590px)"]: {
- fontSize: '25px'
+ fontSize: "25px"
}
},
description: {
- fontSize: '30px',
- color: '#000000',
+ fontSize: "30px",
+ color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: '25px'
+ fontSize: "25px"
},
["@media (max-width:590px)"]: {
- fontSize: '15px'
+ fontSize: "15px"
}
- },
+ }
}));
function FormFieldText(props) {
@@ -57,27 +57,37 @@ function FormFieldText(props) {
<Paper className={classes.paper}>
<Grid container>
<Grid item xs={12} className={classes.questionsGrid}>
- <Typography className={classes.title} variant="h3" gutterBottom>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.title}
+ variant="h3"
+ gutterBottom
+ >
{props.title}
</Typography>
</Grid>
<Grid item xs={9} className={classes.questionsGrid}>
- <Typography className={classes.description} variant="h4" gutterBottom>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.description}
+ variant="h4"
+ gutterBottom
+ >
{props.description}
</Typography>
</Grid>
- <Grid item container
+ <Grid
+ item
+ container
direction="row"
justify="flex-end"
alignItems="flex-end"
xs={3}
- >
- </Grid>
+ ></Grid>
</Grid>
</Paper>
</Grid>
);
-
}
-export default FormFieldText;
\ No newline at end of file
+export default FormFieldText;
diff --git a/src/components/fieldsListForms/CardForm.jsx b/src/components/fieldsListForms/CardForm.jsx
index 40fc1f8..9dca0c0 100644
--- a/src/components/fieldsListForms/CardForm.jsx
+++ b/src/components/fieldsListForms/CardForm.jsx
@@ -97,7 +97,7 @@ function CardForm(props) {
return (
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<MoreVertOutlinedIcon />}>
- <Typography className={classes.title}>
+ <Typography noWrap className={classes.title}>
{props.title}
<br />
<div className={classes.create} noWrap>
@@ -139,4 +139,4 @@ function CardForm(props) {
);
}
-export default CardForm;
\ No newline at end of file
+export default CardForm;
--
GitLab