Refactoring Default textarea size

[igeligel]

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>
    </>
  );
};

Files involved

• ./src/index.tsx

[WulfPlasma]

@igeligel Can I work on this?

[igeligel]

@WulfPlasma thanks for reaching out. Yeah, you can work on it. I will assign the ticket to you now.