From 668335f2303f55ecdcc1ddb8ba7bd700f5479a1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 Jan 2025 11:21:31 +0100 Subject: [PATCH 1/9] correction block type card --- .../lib/uui-card-block-type.element.ts | 135 ++++++++++++------ 1 file changed, 94 insertions(+), 41 deletions(-) diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts index 20d12f746..d516d672b 100644 --- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts +++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts @@ -3,7 +3,6 @@ import { UUICardElement } from '@umbraco-ui/uui-card/lib'; import { css, html, nothing } from 'lit'; import { property } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { styleMap } from 'lit/directives/style-map.js'; export type BlockTypeIcon = { name?: string; @@ -37,16 +36,19 @@ export class UUICardBlockTypeElement extends UUICardElement { description?: string; @property({ type: String, attribute: 'background' }) - background?: string; + public get background(): string | undefined { + return undefined; + } + public set background(value: string | undefined) { + this.style.backgroundColor = value ?? ''; + } render() { return html` -
- -
+ ${this.#renderMedia()} ${this.href ? this.#renderLink() : this.#renderButton()} + +
@@ -60,7 +62,7 @@ export class UUICardBlockTypeElement extends UUICardElement { tabindex=${this.disabled ? (nothing as any) : '0'} @click=${this.handleOpenClick} @keydown=${this.handleOpenKeydown}> - ${this.name}${this.description} + ${this.#renderContent()} `; } @@ -78,55 +80,86 @@ export class UUICardBlockTypeElement extends UUICardElement { this.target === '_blank' ? 'noopener noreferrer' : undefined, ), )}> - ${this.name}${this.description} + ${this.#renderContent()} `; } + #renderMedia() { + return html`
+ +
`; + } + + #renderContent() { + return html` +
+ ${this.name} + ${this.description} +
+ `; + } + static styles = [ ...UUICardElement.styles, css` :host { - flex-direction: column; - justify-content: flex-start; + background-color: var(--uui-color-surface-alt); } - :host(:hover) #info { - color: var(--uui-color-interactive-emphasis); + slot[name='tag'] { + position: absolute; + top: var(--uui-size-4); + right: var(--uui-size-4); + display: flex; + justify-content: right; + z-index: 2; + } + + slot[name='actions'] { + position: absolute; + top: var(--uui-size-4); + right: var(--uui-size-4); + display: flex; + justify-content: right; + z-index: 2; + opacity: 0; + transition: opacity 120ms; + } + :host(:focus) slot[name='actions'], + :host(:focus-within) slot[name='actions'], + :host(:hover) slot[name='actions'] { + opacity: 1; } #portrait { - background-color: var(--uui-color-surface-alt); display: flex; justify-content: center; min-height: 150px; max-height: 150px; + width: 100%; + margin-bottom: var(--uui-size-layout-2); } slot:not([name])::slotted(*) { align-self: center; - font-size: var(--uui-size-8); border-radius: var(--uui-border-radius); object-fit: cover; max-width: 100%; max-height: 100%; + font-size: var(--uui-size-8); } #open-part { - text-align: left; - background-color: var(--uui-color-surface); - cursor: pointer; + position: absolute; + z-index: 1; + inset: 0; color: var(--uui-color-interactive); border: none; - border-top: 1px solid var(--uui-color-divider); - border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius); - font-family: inherit; - font-size: var(--uui-type-small-size); - box-sizing: border-box; - padding: var(--uui-size-2) var(--uui-size-4); + cursor: pointer; display: flex; flex-direction: column; - line-height: var(--uui-size-6); + justify-content: flex-end; } :host([disabled]) #open-part { @@ -135,35 +168,43 @@ export class UUICardBlockTypeElement extends UUICardElement { color: var(--uui-color-contrast-disabled); } - #open-part:hover strong { - text-decoration: underline; - } #open-part:hover { color: var(--uui-color-interactive-emphasis); } + #open-part:hover #name { + text-decoration: underline; + } :host([image]:not([image=''])) #open-part { transition: opacity 0.5s 0.5s; opacity: 0; } - slot[name='tag'] { - position: absolute; - top: var(--uui-size-4); - right: var(--uui-size-4); + + #content { + position: relative; display: flex; - justify-content: right; + flex-direction: column; + width: 100%; + font-family: inherit; + font-size: var(--uui-type-small-size); + box-sizing: border-box; + text-align: left; + word-break: break-word; + padding-top: var(--uui-size-space-3); } - slot[name='actions'] { + #content::before { + content: ''; position: absolute; - top: var(--uui-size-4); - right: var(--uui-size-4); - display: flex; - justify-content: right; - - opacity: 0; - transition: opacity 120ms; + inset: 0; + z-index: -1; + border-top: 1px solid var(--uui-color-divider); + border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius); + background-color: var(--uui-color-surface); + pointer-events: none; + opacity: 0.96; } + :host(:focus) slot[name='actions'], :host(:focus-within) slot[name='actions'], :host(:hover) slot[name='actions'] { @@ -182,6 +223,18 @@ export class UUICardBlockTypeElement extends UUICardElement { transition-duration: 120ms; transition-delay: 0s; } + + :host([selectable]) #open-part { + inset: var(--uui-size-space-3) var(--uui-size-space-4); + } + :host(:not([selectable])) #content { + padding: var(--uui-size-space-3) var(--uui-size-space-4); + } + :host([selectable]) #content::before { + inset: calc(var(--uui-size-space-3) * -1) + calc(var(--uui-size-space-4) * -1); + top: 0; + } `, ]; } From b3d0f4ce809f5a2726136cd5006a1114952ca9a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 22 Jan 2025 12:21:55 +0100 Subject: [PATCH 2/9] correction media card symbols and detail text --- .../lib/uui-card-media.element.ts | 18 ++++++++++-------- packages/uui-card/lib/uui-card.element.ts | 1 + .../lib/uui-symbol-file.element.ts | 1 + .../lib/uui-symbol-folder.element.ts | 3 +-- .../lib/uui-symbol-folder.story.ts | 3 ++- 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts index b35a035ef..596aaeeda 100644 --- a/packages/uui-card-media/lib/uui-card-media.element.ts +++ b/packages/uui-card-media/lib/uui-card-media.element.ts @@ -62,11 +62,11 @@ export class UUICardMediaElement extends UUICardElement { if (this.hasPreview === true) return ''; if (this.fileExt === '') { - return html``; + return html``; } return html``; } @@ -107,7 +107,7 @@ export class UUICardMediaElement extends UUICardElement { TODO: Implement info box when pop-out is ready --> ${this.name} - ${this.detail} + ${this.detail} `; } @@ -126,11 +126,11 @@ export class UUICardMediaElement extends UUICardElement { static styles = [ ...UUICardElement.styles, css` - #file-symbol, - #folder-symbol { + #entity-symbol { align-self: center; - margin: var(--uui-size-14); - width: 80%; + width: 60%; + margin-bottom: var(--uui-size-layout-1); + padding: var(--uui-size-space-6); } slot[name='tag'] { @@ -185,9 +185,11 @@ export class UUICardMediaElement extends UUICardElement { } #open-part:hover { - text-decoration: underline; color: var(--uui-color-interactive-emphasis); } + #open-part:hover #name { + text-decoration: underline; + } :host([image]:not([image=''])) #open-part { transition: opacity 0.5s 0.5s; diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts index f1e61443f..04b893d71 100644 --- a/packages/uui-card/lib/uui-card.element.ts +++ b/packages/uui-card/lib/uui-card.element.ts @@ -140,6 +140,7 @@ export class UUICardElement extends SelectOnlyMixin( a { text-decoration: none; color: inherit; + line-height: initial; } button:focus, diff --git a/packages/uui-symbol-file/lib/uui-symbol-file.element.ts b/packages/uui-symbol-file/lib/uui-symbol-file.element.ts index 9db4512c1..bbf545afd 100644 --- a/packages/uui-symbol-file/lib/uui-symbol-file.element.ts +++ b/packages/uui-symbol-file/lib/uui-symbol-file.element.ts @@ -45,6 +45,7 @@ export class UUISymbolFileElement extends LitElement { :host { position: relative; display: block; + box-sizing: border-box; } #file-type { diff --git a/packages/uui-symbol-folder/lib/uui-symbol-folder.element.ts b/packages/uui-symbol-folder/lib/uui-symbol-folder.element.ts index cd10cc8f2..72851a416 100644 --- a/packages/uui-symbol-folder/lib/uui-symbol-folder.element.ts +++ b/packages/uui-symbol-folder/lib/uui-symbol-folder.element.ts @@ -26,9 +26,8 @@ export class UUISymbolFolderElement extends LitElement { css` :host { display: block; - box-sizing: border-box; position: relative; - max-width: 100px; + box-sizing: border-box; } #icon { diff --git a/packages/uui-symbol-folder/lib/uui-symbol-folder.story.ts b/packages/uui-symbol-folder/lib/uui-symbol-folder.story.ts index f3966d74d..2d1c18997 100644 --- a/packages/uui-symbol-folder/lib/uui-symbol-folder.story.ts +++ b/packages/uui-symbol-folder/lib/uui-symbol-folder.story.ts @@ -7,7 +7,8 @@ const meta: Meta = { id: 'uui-symbol-folder', component: 'uui-symbol-folder', title: 'Symbols/Folder', - render: () => html``, + render: () => + html``, parameters: { readme: { markdown: readme, From 0c9d306fa6d41eff89fe092ae312b5aa245f31c8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 26 Nov 2024 18:06:23 +0100 Subject: [PATCH 3/9] center align icons --- packages/uui-icon/lib/uui-icon.element.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/uui-icon/lib/uui-icon.element.ts b/packages/uui-icon/lib/uui-icon.element.ts index 36f4c4836..d04d66988 100644 --- a/packages/uui-icon/lib/uui-icon.element.ts +++ b/packages/uui-icon/lib/uui-icon.element.ts @@ -139,8 +139,9 @@ export class UUIIconElement extends LitElement { static styles = [ css` :host { - display: inline-block; - vertical-align: bottom; + display: inline-flex; + align-items: center; + justify-content: center; width: 1.125em; height: 1.125em; } From 4a4c327ab51158c2eec50dce31774bbe3e5e11b8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 26 Nov 2024 18:18:04 +0100 Subject: [PATCH 4/9] align icon in ref items --- packages/uui-ref-node/lib/uui-ref-node.element.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts index f8e12b8f5..9798651d9 100644 --- a/packages/uui-ref-node/lib/uui-ref-node.element.ts +++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts @@ -178,18 +178,16 @@ export class UUIRefNodeElement extends UUIRefElement { } #content { - align-self: stretch; - line-height: normal; display: flex; - position: relative; align-items: center; + justify-content: center; + line-height: 1.2em; } #open-part { color: inherit; text-decoration: none; cursor: pointer; - align-self: stretch; display: flex; flex-grow: 1; padding: calc(var(--uui-size-2)); @@ -199,6 +197,9 @@ export class UUIRefNodeElement extends UUIRefElement { font-size: 1.2em; margin-left: var(--uui-size-2); margin-right: var(--uui-size-1); + display: flex; + align-items: center; + justify-content: center; } #info { From 50e004c80e1a5389d8cdf531d4b72d3e1f7cf549 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 26 Nov 2024 18:23:29 +0100 Subject: [PATCH 5/9] align header center --- packages/uui-box/lib/uui-box.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts index 44c4b4fd9..4041ec1a5 100644 --- a/packages/uui-box/lib/uui-box.element.ts +++ b/packages/uui-box/lib/uui-box.element.ts @@ -131,6 +131,7 @@ export class UUIBoxElement extends LitElement { #header { display: flex; + align-items: center; column-gap: var(--uui-size-space-5); border-bottom: 1px solid var(--uui-color-divider-standalone); padding: var( From 4c3c7266dfa4851b209e44ba79ac2e1ba82609c4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 26 Nov 2024 22:34:13 +0100 Subject: [PATCH 6/9] Update uui-button.element.ts --- packages/uui-button/lib/uui-button.element.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts index b2879c0cd..54abf4ae7 100644 --- a/packages/uui-button/lib/uui-button.element.ts +++ b/packages/uui-button/lib/uui-button.element.ts @@ -293,9 +293,12 @@ export class UUIButtonElement extends UUIFormControlMixin( .label { line-height: normal; /** needed to reset 'a > span' */ - display: block; transition: opacity 120ms; + display: flex; + gap: var(--uui-size-1); + align-items: center; } + :host([state]:not([state=''])) .label { opacity: 0; } From 31700c262e29e1911277d086d7c5e3d53532008e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 23 Jan 2025 07:51:20 +0100 Subject: [PATCH 7/9] Fix: remove bold from ref name (#973) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * remove bold from ref name * adjust sizes and apperance for ref node * correct fonts on cards --------- Co-authored-by: Niels Lyngsø --- .../lib/uui-card-content-node.element.ts | 3 +-- .../uui-card-media/lib/uui-card-media.element.ts | 8 ++++---- packages/uui-ref-node/lib/uui-ref-node.element.ts | 13 +++++-------- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts index 80658db04..98b7c6000 100644 --- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts +++ b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts @@ -68,7 +68,7 @@ export class UUICardContentNodeElement extends UUICardElement { #renderContent() { return html` - + @@ -167,7 +167,6 @@ export class UUICardContentNodeElement extends UUICardElement { #open-part { display: flex; position: relative; - font-weight: 700; align-items: center; cursor: pointer; flex-grow: 1; diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts index 596aaeeda..09afbed47 100644 --- a/packages/uui-card-media/lib/uui-card-media.element.ts +++ b/packages/uui-card-media/lib/uui-card-media.element.ts @@ -102,12 +102,12 @@ export class UUICardMediaElement extends UUICardElement { #renderContent() { return html` -
+
${this.name} - ${this.detail} + ${this.detail}
`; } @@ -221,8 +221,8 @@ export class UUICardMediaElement extends UUICardElement { opacity: 0.96; } - #name { - font-weight: 700; + #detail { + opacity: 0.6; } :host( diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts index 9798651d9..b370bf925 100644 --- a/packages/uui-ref-node/lib/uui-ref-node.element.ts +++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts @@ -104,7 +104,7 @@ export class UUIRefNodeElement extends UUIRefElement { #renderContent() { return html` - + ${this._iconSlotHasContent === false @@ -122,6 +122,7 @@ export class UUIRefNodeElement extends UUIRefElement { #renderLink() { return html` Date: Thu, 23 Jan 2025 11:29:14 +0100 Subject: [PATCH 8/9] Improvement: Set Font size 14, as we do in Backoffice (#995) * change base font size to 14px * fix card font sizes * general font size * just inherit * make more room in combo box list options --- .../lib/uui-card-block-type.element.ts | 2 ++ .../uui-card-media/lib/uui-card-media.element.ts | 1 - packages/uui-card/lib/uui-card.element.ts | 2 ++ .../lib/uui-combobox-list-option.element.ts | 5 +++-- packages/uui-css/lib/custom-properties.story.ts | 2 +- packages/uui-css/lib/custom-properties/sizes.css | 4 ++-- packages/uui-css/lib/guidelines.story.ts | 2 +- packages/uui-css/lib/uui-font.css | 2 +- packages/uui-css/lib/uui-text.css | 12 ++++++------ packages/uui-select/lib/uui-select.element.ts | 2 +- packages/uui-tabs/lib/uui-tab.element.ts | 2 +- 11 files changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts index d516d672b..fa86d8bd2 100644 --- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts +++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts @@ -59,6 +59,7 @@ export class UUICardBlockTypeElement extends UUICardElement { return html`