fix: Small visual corrections (#212)

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

Author: 3 people

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/
 .eslintrc.js
+plopfile.js

packages/uui-base/lib/mixins/SelectableMixin.ts

@@ -9,6 +9,7 @@ export declare class SelectableMixinInterface extends LitElement {
   selectable: boolean;
   unselectable: boolean;
   selected: boolean;
+  selectableTarget: EventTarget;
 }
 
 /**
@@ -54,16 +55,20 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
     @property({ type: Boolean, reflect: true })
     public selected = false;
 
+    protected selectableTarget: EventTarget = this;
+
     constructor(...args: any[]) {
       super(...args);
       this.addEventListener('click', this._handleClick);
       this.addEventListener('keydown', this.handleSelectKeydown);
     }
 
     private handleSelectKeydown(e: KeyboardEvent) {
-      if (e.key !== ' ' && e.key !== 'Enter') return;
-      e.preventDefault();
-      this._handleClick();
+      if (e.composedPath().indexOf(this.selectableTarget) !== -1) {
+        if (e.key !== ' ' && e.key !== 'Enter') return;
+        e.preventDefault();
+        this._toggleSelect();
+      }
     }
 
     private _select() {
@@ -78,7 +83,13 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
       this.dispatchEvent(new UUISelectableEvent(UUISelectableEvent.UNSELECTED));
     }
 
-    private _handleClick() {
+    private _handleClick(e: Event) {
+      if (e.composedPath().indexOf(this.selectableTarget) !== -1) {
+        this._toggleSelect();
+      }
+    }
+
+    private _toggleSelect() {
       if (this.unselectable === false) {
         this._select();
       } else {

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

@@ -76,6 +76,8 @@ export class UUICardMediaElement extends UUICardElement {
 
       :host([disabled]) #open-part {
         pointer-events: none;
+        background: var(--uui-interface-surface-disabled);
+        color: var(--uui-interface-contrast-disabled);
       }
 
       #open-part:hover {

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

@@ -46,8 +46,17 @@ export class UUICardElement extends SelectOnlyMixin(
         outline-offset: var(--uui-card-border-width);
       }
 
-      :host([error]) {
+      :host([error])::before {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        box-sizing: border-box;
         border: var(--uui-card-border-width) solid var(--uui-color-danger);
+        border-radius: var(--uui-border-radius);
       }
 
       :host([selectable]) {
@@ -64,8 +73,8 @@ export class UUICardElement extends SelectOnlyMixin(
         position: absolute;
         pointer-events: none;
         inset: calc(var(--uui-card-border-width) * -1);
-        width: calc(100% + var(--uui-card-border-width) * 2);
-        height: calc(100% + var(--uui-card-border-width) * 2);
+        width: calc(100% + calc(var(--uui-card-border-width) * 2));
+        height: calc(100% + calc(var(--uui-card-border-width) * 2));
         box-sizing: border-box;
         border: var(--uui-card-border-width) solid var(--uui-color-selected);
         border-radius: calc(
@@ -84,40 +93,6 @@ export class UUICardElement extends SelectOnlyMixin(
         opacity: 1;
       }
 
-      :host([selectable]:not([selected]):hover) #select-border::after {
-        animation: not-selected--hover 1.2s infinite;
-      }
-      @keyframes not-selected--hover {
-        0%,
-        100% {
-          opacity: 0.66;
-        }
-        50% {
-          opacity: 1;
-        }
-      }
-
-      :host([selectable][selected]:hover) #select-border::after {
-        animation: selected--hover 1.4s infinite;
-      }
-      @keyframes selected--hover {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.66;
-        }
-      }
-      :host([selectable]) #open-part:hover + #select-border::after {
-        animation: none;
-      }
-      :host([error])::after {
-        inset: calc(var(--uui-card-border-width) * -2);
-        width: calc(100% + calc(var(--uui-card-border-width) * 4));
-        height: calc(100% + calc(var(--uui-card-border-width) * 4));
-      }
-
       :host([select-only]) *,
       :host([select-only]) ::slotted(*) {
         pointer-events: none;

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

@@ -36,6 +36,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
         display: flex;
         align-items: center;
         justify-content: center;
+        flex-shrink: 0;
 
         box-sizing: border-box;
         width: var(--uui-checkbox-size);

packages/uui-menu-item/lib/uui-menu-item.element.ts

@@ -8,6 +8,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { UUIMenuItemEvent } from './UUIMenuItemEvent';
@@ -261,6 +262,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   @state()
   private iconSlotHasContent = false;
 
+  labelButtonChanged(label?: Element | undefined) {
+    this.selectableTarget = label || this;
+  }
+
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute('role')) this.setAttribute('role', 'menu');
@@ -300,12 +305,13 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
 
   private _renderLabelAsAnchor() {
     if (this.disabled) {
-      return html` <span id="label-button">
+      return html` <span id="label-button" ${ref(this.labelButtonChanged)}>
         ${this._renderLabelInside()}
       </span>`;
     }
     return html` <a
       id="label-button"
+      ${ref(this.labelButtonChanged)}
       href=${ifDefined(this.href)}
       target=${ifDefined(this.target || undefined)}
       rel=${ifDefined(this.target === '_blank' ? 'noopener' : undefined)}
@@ -319,6 +325,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   private _renderLabelAsButton() {
     return html` <button
       id="label-button"
+      ${ref(this.labelButtonChanged)}
       @click=${this.onLabelClicked}
       ?disabled=${this.disabled}
       aria-label="${this.label}">

plopfile.js

@@ -82,7 +82,8 @@ module.exports = function (plop) {
       {
         type: 'append',
         path: './packages/uui/lib/index.ts',
-        template: "export * from '@umbraco-ui/{{> tagnamePartial }}/lib/index.js';",
+        template:
+          "export * from '@umbraco-ui/{{> tagnamePartial }}/lib/index.js';",
       },
     ],
   });