Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Textarea: Resize improvements, handle, paste etc #1968

Merged
merged 34 commits into from
Feb 11, 2025
Merged

Conversation

astrit
Copy link
Member

@astrit astrit commented Feb 6, 2025

This PR fixes the following:

  • 1. Auto Resizing on paste
  • 2. Auto resizing when content is added programmatically
  • 3. Show resize handle at all times if active not just in hover
  • 4. Change overflow to auto

@astrit astrit self-assigned this Feb 6, 2025
@green-design-system-bot
Copy link
Contributor

green-design-system-bot bot commented Feb 6, 2025

🦋 Changeset status

Based on the included changeset, the following releases will be published as a result of this PR:

  • @sebgroup/green-core: 1.65.0 → 1.65.1 (patch bump)

Note: If unpublished changesets where merged to main after the first commit of this PR, this
list will include those changes in addition to the ones specific to this PR.

@green-design-system-bot
Copy link
Contributor

green-design-system-bot bot commented Feb 6, 2025

👋 Thanks for creating a pull request!

🚀 Checkout the storybooks we've created for it:

@astrit astrit requested a review from splashdust February 7, 2025 13:09
Copy link
Contributor

@splashdust splashdust left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things come to mind:

  • On the resizable property, the manual option should allow the user to resize by handle only. So in that mode there should be no automatic resize based on content, only manual resize by the user. In the other modes, no resize handle should be present at all. Currently it looks like the resizable property is not used at all? It's not being read anywhere in the code.
  • See if you can set the CSS resize property on the #field element instead. It may require some minor changes to field-base, but then we would get the handle always in the corner. But skip if it turns out to be a rabbit hole :)

@astrit astrit requested a review from splashdust February 10, 2025 13:29
Copy link
Contributor

@splashdust splashdust left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added two little things in the inline comments.

Also noticed that the position of badges has gotten shifted in regular inputs:
image

Other than that, excellent work!

Comment on lines 72 to 75
connectedCallback(): void {
super.connectedCallback()
TransitionalStyles.instance.apply(this, 'gds-field-base')
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still needs to be here for Transitional styles to work

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will add it back, not sure why I removed it on the first place!

Comment on lines 255 to 264
if (
element.value === '' ||
this.resizable === 'false' ||
this.resizable === 'manual'
) {
// If the textarea is empty, reset to the default number of rows
this.rows = this._defaultRows
// Clear any manual resize height
element.style.height = ''
} else {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this bit can be removed entirely now?

In particular, the behavior when you paste in a manual field is a bit unexpected:

  1. Make the field larger using the resize handle
  2. Paste a large chunk of text
  3. You would expect the field to stay the same size, but instead it shrinks to initial size

@astrit
Copy link
Member Author

astrit commented Feb 11, 2025

Added two little things in the inline comments.

Also noticed that the position of badges has gotten shifted in regular inputs: image

Other than that, excellent work!

The missaligment was because of a wrong if statement

CleanShot 2025-02-11 at 09 22 58@2x

@astrit astrit requested a review from splashdust February 11, 2025 08:54
@astrit astrit merged commit 67547d2 into main Feb 11, 2025
5 checks passed
@astrit astrit deleted the textarea/patch-resizing branch February 11, 2025 09:12
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants