Patternfly-react: TextArea resize prop needed

[andrewballantyne]

Hello,

Upon implementing the TextArea component into our project we ended up having a horizontal resize issue with the FormGroup and TextArea components:

Note: There may also be a _bug_ in the FormGroup for losing the stacking nature but I'll leave that up to you to determine the best approach (if any) to take.

Currently we are getting around this by using:

style={{ resize: 'vertical' }}

Which limits the resizing to the vertical axis... But it would be greatly appreciated if we could get a prop that allows us to control this without the need of inline styles.

I am looking at the API on the following site, please let me know if it's not the latest set of API.
https://patternfly-react.surge.sh/patternfly-4/components/textarea/

Thanks in advance!

[rachael-phillips]

Thanks for filing @andrewballantyne ! I'm glad you have a work around for now, and we'll take a look at this.

[christiemolloy]

Hi @andrewballantyne I believe this issue is coming from the Core repository. Do you mind taking a look at the issue I created: https://github.com/patternfly/patternfly-next/issues/2251 to see that I covered everything?

[andrewballantyne]

Hi @christiemolloy. unless I am missing something, I don't believe that covers the main/all the issues here. That might cover the alignment issue between the FormGroup label and the contained element (which is definitely good).

I believe a prop is still needed so the consumer of a TextArea can set the resize ability without resorting to a style prop. I believe TextAreas should have this ability baked into them as it's a pretty large cornerstone of the component type (over say an input).

[christiemolloy]

Sorry about the misunderstanding. So the issue I filed is an issue with the parent.
I think I understand now, that you would like a modifier in Core/Prop in React that styles the text area to either resize only on the vertical axis or resize only on the horizontal axis?

@andrewballantyne let me know if this aligns with what you were thinking and I will update the issue accordingly!

[andrewballantyne]

No worries about the misunderstanding - I probably could have made a more clear ticket. I definitely think the parent issue filed is valid hopefully it addresses the FormGroup layout issue.

As for the prop issue... I think a prop that allows for vertical, horizontal or both (which could be the default / no prop provided), something like:

<TextArea resize="vertically" />
<TextArea resize="horizontally" />
<TextArea resize="both" />

[christiemolloy]

We can add the prop in React, but since we are modifying the style properties we would do it in Core first so that we can add modifier classes that update the resize properties. Then it will move to React to add the props @andrewballantyne

Also resize="both" is default.

[mcoker]

https://github.com/patternfly/patternfly-next/pull/2331 has been merged, and we now have pf-m-resize-horizontal and pf-m-resize-vertical variants.

[tlabaj]

closed by #3180