[DRAFT] Add rightElement and leftElement to textArea#7694
[DRAFT] Add rightElement and leftElement to textArea#7694cameronjoyner wants to merge 10 commits intodevelopfrom
Conversation
Generate changelog in
|
removing some fluff from =TextAreaExampleBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
| /** | ||
| * Element to render on the left side of the textarea. | ||
| */ | ||
| leftElement?: React.JSX.Element; | ||
|
|
||
| /** | ||
| * Element to render on the right side of the textarea. | ||
| * For best results, use a minimal button, tag, or small spinner. | ||
| */ | ||
| rightElement?: React.JSX.Element; | ||
|
|
There was a problem hiding this comment.
A concern/possibility that I'm considering is that this implementation is really [top]leftElement and [top]RightElement. There is a part of me that thinks we'd be missing a good opportunity to provide slightly more robust options and allow textArea to be even more useful. I bring that up because if we want to do it its probably worth doing in this PR and considering the right API. For example do we instead call it textAreaElement and accept React.JSX.Element and an enum of top-left, top-right, bottom-left, bottom-right? Or do we let the API sprawl a bit and go with bottomLeftElement... etc?
There was a problem hiding this comment.
My personal preference is that we some how provide all four corners, especially as the bottomRight is so commonly used for some kind of send or submit button.
| const textareaClasses = classNames( | ||
| Classes.INPUT_GROUP, | ||
| Classes.intentClass(intent), | ||
| Classes.sizeClass(size, { large, small }), | ||
| { | ||
| [Classes.DISABLED]: htmlProps.disabled, | ||
| [Classes.READ_ONLY]: htmlProps.readOnly, | ||
| [Classes.FILL]: fill, | ||
| }, | ||
| className, | ||
| ); |
| private maybeRenderLeftElement() { | ||
| const { leftElement } = this.props; | ||
|
|
||
| if (leftElement != null) { | ||
| return ( | ||
| <span className={Classes.INPUT_LEFT_CONTAINER} ref={this.refHandlers.leftElement}> | ||
| {leftElement} | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| return undefined; | ||
| } | ||
|
|
||
| private maybeRenderRightElement() { | ||
| const { rightElement } = this.props; | ||
|
|
||
| if (rightElement != null) { | ||
| return ( | ||
| <span className={Classes.INPUT_ACTION} ref={this.refHandlers.rightElement}> | ||
| {rightElement} | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| return undefined; | ||
| } |
There was a problem hiding this comment.
similarly followed existing codebase precedent
| <TabsExample /> | ||
| <TagExample /> | ||
| <TagInputExample /> | ||
| <TextAreaExample /> |
There was a problem hiding this comment.
surprised that we didn't have this yet and thought it was worth adding
| if (!hasLeftOrRightElement) { | ||
| return textareaElement; | ||
| } |
There was a problem hiding this comment.
To avoid a breaking change
Merge branch 'develop' into cj/text-area-elementsBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
2 participants
Fixes #7511
Checklist
Changes proposed in this pull request:
Bring
leftElementandrightElementtotextareain much the same way that we have forinputGroup. The example below if from the original issue.Screenshot