Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

uui-textarea: font size and auto-height optimisations #597

Merged
merged 5 commits into from
Oct 10, 2023
Merged

uui-textarea: font size and auto-height optimisations #597

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
16530b3
font size
loivsen Oct 4, 2023
647467b
auto-height
loivsen Oct 4, 2023
31a883f
styles moved back to top. font-size is inherit instead
loivsen Oct 10, 2023
735dc12
height
loivsen Oct 10, 2023
43175ec
Merge branch 'v1/contrib' into feature/textarea-font-size
loivsen Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions packages/uui-textarea/lib/uui-textarea.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
* @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea
* @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea
* @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea
* @cssprop --uui-textarea-font-size - Overwrites the default font size
*/

@defineElement('uui-textarea')
export class UUITextareaElement extends FormControlMixin(LitElement) {
/**
Expand Down Expand Up @@ -71,10 +73,10 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
box-sizing: border-box;
min-width: 100%;
max-width: 100%;
font-size: var(--uui-size-5);
font-size: inherit;
padding: var(--uui-size-2);
border: 1px solid
var(--uui-textarea-border-color, var(--uui-color-border));
var(--uui-textarea-border-color, var(--uui-color-border)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */
border-radius: 0;
outline: none;
min-height: var(--uui-textarea-min-height);
Expand Down Expand Up @@ -262,6 +264,12 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
if (!this.label) {
console.warn(this.tagName + ' needs a `label`', this);
}

if (this.autoHeight) {
requestAnimationFrame(() => {
loivsen marked this conversation as resolved.
Show resolved Hide resolved
this.autoUpdateHeight();
});
}
}

/**
Expand Down Expand Up @@ -305,8 +313,11 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {

input.style.height = 'auto';

if (input.scrollHeight > input.clientHeight) {
input.style.height = input.scrollHeight + 'px';
// Note: Add + 2 because of the border top+bottom 1px each
loivsen marked this conversation as resolved.
Show resolved Hide resolved
if (input.scrollHeight + 2 > input.clientHeight) {
loivsen marked this conversation as resolved.
Show resolved Hide resolved
input.style.height = input.scrollHeight + 2 + 'px';
} else if (input.scrollHeight + 2 < input.clientHeight) {
input.style.removeProperty('height');
}

// Reset host styles and scroll to where we were
Expand All @@ -319,8 +330,8 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
return html`
<textarea
id="textarea"
.rows=${this.rows}
.cols=${this.cols}
rows=${ifDefined(this.rows)}
cols=${ifDefined(this.cols)}
.value=${this.value as string}
.name=${this.name}
wrap=${ifDefined(this.wrap)}
Expand Down
Loading