Feature: correct open size of block type card + media card adjustments (#994)

* correction block type card

* correction media card symbols and detail text

Author: nielslyngsoe

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`
-      <div
-        id="portrait"
-        style=${styleMap({ backgroundColor: this.background })}>
-        <slot></slot>
-      </div>
+      ${this.#renderMedia()}
       ${this.href ? this.#renderLink() : this.#renderButton()}
+      <!-- Select border must be right after #open-part -->
+      <div id="select-border"></div>
 
       <slot name="tag"></slot>
       <slot name="actions"></slot>
@@ -61,8 +63,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
         tabindex=${this.disabled ? (nothing as any) : '0'}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
-        <span id="name">${this.name}</span>
-        <small>${this.description}</small>
+        ${this.#renderContent()}
       </button>
     `;
   }
@@ -81,55 +82,86 @@ export class UUICardBlockTypeElement extends UUICardElement {
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
         )}>
-        <span id="name">${this.name}</span>
-        <small>${this.description}</small>
+        ${this.#renderContent()}
       </a>
     `;
   }
 
+  #renderMedia() {
+    return html`<div id="portrait">
+      <slot></slot>
+    </div> `;
+  }
+
+  #renderContent() {
+    return html`
+      <div id="content">
+        <span id="name">${this.name}</span>
+        <small>${this.description}<slot name="description"></slot></small>
+      </div></div>
+    `;
+  }
+
   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;
-        box-sizing: border-box;
-        padding: var(--uui-size-2) var(--uui-size-4);
+        cursor: pointer;
         display: flex;
         flex-direction: column;
-        line-height: normal;
+        justify-content: flex-end;
       }
 
       :host([disabled]) #open-part {
@@ -138,35 +170,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'] {
@@ -185,6 +225,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;
+      }
     `,
   ];
 }

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`<uui-symbol-folder id="folder-symbol"></uui-symbol-folder>`;
+      return html`<uui-symbol-folder id="entity-symbol"></uui-symbol-folder>`;
     }
 
     return html`<uui-symbol-file
-      id="file-symbol"
+      id="entity-symbol"
       type="${this.fileExt}"></uui-symbol-file>`;
   }
 
@@ -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;

packages/uui-card/lib/uui-card.element.ts

@@ -142,6 +142,7 @@ export class UUICardElement extends SelectOnlyMixin(
       a {
         text-decoration: none;
         color: inherit;
+        line-height: initial;
       }
 
       button:focus,

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 {

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 {

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`<uui-symbol-folder></uui-symbol-folder>`,
+  render: () =>
+    html`<uui-symbol-folder style="width: 240px"></uui-symbol-folder>`,
   parameters: {
     readme: {
       markdown: readme,

packages/uui-tag/lib/uui-tag.element.ts

@@ -59,9 +59,8 @@ export class UUITagElement extends LitElement {
       }
 
       slot {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        display: block;
+        align-content: center;
         margin: 2px;
       }