Skip to content

Commit

Permalink
auto-height
Browse files Browse the repository at this point in the history
  • Loading branch information
@loivsen
loivsen committed Oct 4, 2023
1 parent 16530b3 commit 647467b
Showing 1 changed file with 98 additions and 90 deletions.
188 changes: 98 additions & 90 deletions packages/uui-textarea/lib/uui-textarea.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
* @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 All @@ -23,94 +24,6 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
*/
static readonly formAssociated = true;

static styles = [
css`
:host {
position: relative;
--textarea-font-size: var(--uui-size-5);
}
:host([error]) textarea {
border: 1px solid var(--uui-color-danger) !important;
}
:host([error]) textarea[disabled] {
border: 1px solid var(--uui-color-danger) !important;
}
:host([auto-height]) textarea {
resize: none;
}
.label {
display: inline-block;
margin-bottom: var(--uui-size-1);
font-weight: bold;
}
textarea[readonly] {
border-color: var(
--uui-textarea-border-color-readonly,
var(--uui-color-disabled-standalone)
);
background-color: var(
--uui-textarea-background-color-readonly,
var(--uui-color-disabled)
);
}
textarea[disabled] {
cursor: not-allowed;
background-color: var(
--uui-textarea-background-color-disabled,
var(--uui-color-disabled)
);
border-color: var(
--uui-textarea-border-color-disabled,
var(--uui-color-disabled)
);
color: var(--uui-color-disabled-contrast);
}
textarea {
font-family: inherit;
box-sizing: border-box;
min-width: 100%;
max-width: 100%;
font-size: var(--textarea-font-size);
padding: var(--uui-size-2);
border: 1px solid
var(--uui-textarea-border-color, var(--uui-color-border));
border-radius: 0;
outline: none;
min-height: var(--uui-textarea-min-height);
max-height: var(--uui-textarea-max-height);
background-color: var(
--uui-textarea-background-color,
var(--uui-color-surface)
);
}
:host(:hover)
textarea:not([readonly]):not([disabled])
:host(:focus-within)
textarea,
:host(:focus) textarea {
border-color: var(
--uui-textarea-border-color,
var(--uui-color-border-emphasis)
);
}
textarea::placeholder {
transition: opacity 120ms;
}
:host(:not([readonly])) textarea:focus::placeholder {
opacity: 0;
}
textarea:focus {
outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
var(--uui-color-focus);
}
`,
];

/**
* Defines the textarea placeholder.
* @type {string}
Expand Down Expand Up @@ -264,6 +177,12 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
if (!this.label) {
console.warn(this.tagName + ' needs a `label`', this);
}

if (this.autoHeight) {
requestAnimationFrame(() => {
this.autoUpdateHeight();
});
}
}

/**
Expand Down Expand Up @@ -307,8 +226,9 @@ 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
if (input.scrollHeight + 2 > input.clientHeight) {
input.style.height = input.scrollHeight + 2 + 'px';
}

// Reset host styles and scroll to where we were
Expand All @@ -335,6 +255,94 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
</textarea>
`;
}

static styles = [
css`
:host {
position: relative;
--textarea-font-size: var(--uui-size-5);
}
:host([error]) textarea {
border: 1px solid var(--uui-color-danger) !important;
}
:host([error]) textarea[disabled] {
border: 1px solid var(--uui-color-danger) !important;
}
:host([auto-height]) textarea {
resize: none;
}
.label {
display: inline-block;
margin-bottom: var(--uui-size-1);
font-weight: bold;
}
textarea[readonly] {
border-color: var(
--uui-textarea-border-color-readonly,
var(--uui-color-disabled-standalone)
);
background-color: var(
--uui-textarea-background-color-readonly,
var(--uui-color-disabled)
);
}
textarea[disabled] {
cursor: not-allowed;
background-color: var(
--uui-textarea-background-color-disabled,
var(--uui-color-disabled)
);
border-color: var(
--uui-textarea-border-color-disabled,
var(--uui-color-disabled)
);
color: var(--uui-color-disabled-contrast);
}
textarea {
font-family: inherit;
box-sizing: border-box;
min-width: 100%;
max-width: 100%;
font-size: var(--textarea-font-size);
padding: var(--uui-size-2);
border: 1px solid
var(--uui-textarea-border-color, var(--uui-color-border));
border-radius: 0;
outline: none;
min-height: var(--uui-textarea-min-height);
max-height: var(--uui-textarea-max-height);
background-color: var(
--uui-textarea-background-color,
var(--uui-color-surface)
);
}
:host(:hover)
textarea:not([readonly]):not([disabled])
:host(:focus-within)
textarea,
:host(:focus) textarea {
border-color: var(
--uui-textarea-border-color,
var(--uui-color-border-emphasis)
);
}
textarea::placeholder {
transition: opacity 120ms;
}
:host(:not([readonly])) textarea:focus::placeholder {
opacity: 0;
}
textarea:focus {
outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
var(--uui-color-focus);
}
`,
];
}

declare global {
Expand Down

0 comments on commit 647467b

Please sign in to comment.