Refactoring Default textarea size #71
Description
Type of Change
- Name variables and functions well
- Remove magic numbers
- Extract each step of logic into a function
- Extract React component
- Remove duplicate code
Description
Currently, the left textarea has rows set to 2. This is done so it looks nice on desktop but because we are moving to mobile this behavior should change a bit. See how the size of the red arrows is different in the picture below.
The problem with the screenshot above is that the lower box would be 1 row high when the upper one would be 2 rows high. For desktop, the minimum row should be 2 though. Otherwise, that looks weird.
After a bit of investigating I could not find a CSS-Native solution with the rows attribute of <textarea>, so we are forced to use min-height and media queries.
Code Before
const Textarea = styled(TextareaAutosize)<ExampleTextProps>`
box-sizing: border-box;
border: 0;
resize: none;
flex-grow: 1;
color: ${(props) => (props.theme.main === "dark" ? "#fff" : "#14213d")};
background-color: transparent;
font-family: ${(props) =>
props.theme && props.theme.font ? props.theme.font : "Roboto"};
font-size: ${(props) => (props.smallerFont ? "1.2em" : "1.61em")};
${(props) => (props.showCopyCursor ? "cursor: text;" : "")};
width: 100%;
::placeholder {
color: ${(props) =>
props.theme.main === "dark"
? "hsl(221, 51%, 64%)"
: "rgba(20, 33, 61, 0.4)"};
}
:focus {
outline: none;
}
`;
// ...
export const InOutTextarea: FC<Props> = (props) => {
return (
<>
{/* ... */}
<TextAreaContent>
<TextAreaWrapper>
<Textarea
data-test="from-textarea"
placeholder="..."
rows={2}
smallerFont={false}
value={inValue}
maxLength={maxContentLength}
onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
if (
event.target.value === null ||
event.target.value === undefined
)
return;
onInInput(event.target.value);
}}
/>
</TextAreaWrapper>
{/* ... */}
</TextAreaContent>
<TextAreaContent>
<TextAreaWrapper>
<Textarea
disabled
smallerFont={false}
showCopyCursor={true}
value={outValue}
/>
</TextAreaWrapper>
{/* ... */}
</TextAreaContent>
</>
);
};Code Expected after Refactoring
const Textarea = styled(TextareaAutosize)<ExampleTextProps>`
box-sizing: border-box;
border: 0;
resize: none;
flex-grow: 1;
color: ${(props) => (props.theme.main === "dark" ? "#fff" : "#14213d")};
background-color: transparent;
font-family: ${(props) =>
props.theme && props.theme.font ? props.theme.font : "Roboto"};
font-size: ${(props) => (props.smallerFont ? "1.2em" : "1.61em")};
${(props) => (props.showCopyCursor ? "cursor: text;" : "")};
width: 100%;
min-height: 64px;
@media (max-width: 720px) {
min-height: auto;
}
::placeholder {
color: ${(props) =>
props.theme.main === "dark"
? "hsl(221, 51%, 64%)"
: "rgba(20, 33, 61, 0.4)"};
}
:focus {
outline: none;
}
`;
// ...
export const InOutTextarea: FC<Props> = (props) => {
return (
<>
{/* ... */}
<TextAreaContent>
<TextAreaWrapper>
<Textarea
data-test="from-textarea"
placeholder="..."
smallerFont={false}
value={inValue}
maxLength={maxContentLength}
onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
if (
event.target.value === null ||
event.target.value === undefined
)
return;
onInInput(event.target.value);
}}
/>
</TextAreaWrapper>
{/* ... */}
</TextAreaContent>
<TextAreaContent>
<TextAreaWrapper>
<Textarea
disabled
smallerFont={false}
showCopyCursor={true}
value={outValue}
/>
</TextAreaWrapper>
{/* ... */}
</TextAreaContent>
</>
);
};