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 2 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
192 changes: 101 additions & 91 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 All @@ -22,93 +24,6 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
*/
static readonly formAssociated = true;

static styles = [
css`
:host {
position: relative;
}
: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(--uui-size-5);
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 @@ -262,6 +177,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 +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
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';
}

// Reset host styles and scroll to where we were
Expand All @@ -319,8 +241,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 All @@ -333,6 +255,94 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
</textarea>
`;
}

static styles = [
css`
:host {
position: relative;
--textarea-font-size: var(--uui-size-5);
loivsen marked this conversation as resolved.
Show resolved Hide resolved
}
: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
Loading