Merge remote-tracking branch 'origin/dev' into bugfix/replace-postcss-custom-properties-fallback-with-local-version

Author: nielslyngsoe

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

@@ -134,6 +134,42 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
     `,
   ];
 
+  /**
+   * This is a minimum value of the input.
+   * @type {number}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: Number })
+  minlength?: number;
+
+  /**
+   * Minlength validation message.
+   * @type {boolean}
+   * @attr
+   * @default
+   */
+  @property({ type: String, attribute: 'minlength-message' })
+  minlengthMessage = 'This field need more characters';
+
+  /**
+   * This is a maximum value of the input.
+   * @type {number}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: Number })
+  maxlength?: number;
+
+  /**
+   * Maxlength validation message.
+   * @type {boolean}
+   * @attr
+   * @default
+   */
+  @property({ type: String, attribute: 'maxlength-message' })
+  maxlengthMessage = 'This field exceeds the allowed amount of characters';
+
   /**
    * Disables the input.
    * @type {boolean}
@@ -190,6 +226,17 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
     this.addEventListener('blur', () => {
       this.style.setProperty('--uui-show-focus-outline', '');
     });
+
+    this.addValidator(
+      'tooShort',
+      () => this.minlengthMessage,
+      () => !!this.minlength && (this._value as string).length < this.minlength
+    );
+    this.addValidator(
+      'tooLong',
+      () => this.maxlengthMessage,
+      () => !!this.maxlength && (this._value as string).length > this.maxlength
+    );
   }
 
   /**

packages/uui-input/lib/uui-input.test.ts

@@ -38,8 +38,8 @@ describe('UuiInputElement', () => {
     it('has a disabled property', () => {
       expect(element).to.have.property('disabled');
     });
-    it('has a readOnly property', () => {
-      expect(element).to.have.property('readOnly');
+    it('has a readonly property', () => {
+      expect(element).to.have.property('readonly');
     });
     it('has a error property', () => {
       expect(element).to.have.property('error');

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

@@ -116,6 +116,11 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         transition: opacity 120ms;
         grid-column-start: 3;
       }
+      :host(:not([disabled])) #menu-item:hover #actions-container,
+      :host(:not([disabled])) #menu-item:focus #actions-container,
+      :host(:not([disabled])) #menu-item:focus-within #actions-container {
+        opacity: 1;
+      }
 
       #loader {
         position: absolute;

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

@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property, query } from 'lit/decorators.js';
 import { UUITextareaEvent } from './UUITextareaEvent';
-import { FormControlMixin } from 'packages/uui-base/lib/mixins';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 
 /**
  * @element uui-textarea

packages/uui-toast-notification-layout/lib/uui-toast-notification-layout.element.ts

@@ -15,7 +15,13 @@ export class UUIToastNotificationLayoutElement extends LitElement {
   static styles = [
     UUITextStyles,
     css`
-      #message > h5 {
+      #message {
+        margin-bottom: calc(var(--uui-size-space-1) * -1);
+      }
+      #message::after {
+        content: '';
+        display: block;
+        clear: both;
       }
       #actions {
         /*
@@ -26,15 +32,9 @@ export class UUIToastNotificationLayoutElement extends LitElement {
         display: block;
         float: right;
 
-        margin-top: var(--uui-size-space-3);
+        margin-top: var(--uui-size-space-4);
         margin-bottom: calc(var(--uui-size-space-2) * -1);
       }
-
-      #message::after {
-        content: '';
-        display: block;
-        clear: both;
-      }
     `,
   ];
 
@@ -59,7 +59,8 @@ export class UUIToastNotificationLayoutElement extends LitElement {
     return html`
       <div id="message" class="uui-text">
         <h5
-          style=${this._headlineSlotHasContent || this.headline !== null
+          style=${this._headlineSlotHasContent ||
+          (this.headline && this.headline !== '')
             ? ''
             : 'display: none'}>
           ${this.headline}

packages/uui-toast-notification/lib/uui-toast-notification.element.ts

@@ -84,10 +84,9 @@ export class UUIToastNotificationElement extends LitElement {
 
       #close {
         float: right;
-        margin-top: -7px;
+        margin-top: -6px;
         margin-left: var(--uui-size-space-1);
-        margin-bottom: calc(var(--uui-size-space-2) * -1);
-        margin-bottom: var(--uui-size-space-1);
+        margin-bottom: -4px;
       }
 
       #close > uui-button {

packages/uui-toast-notification/lib/uui-toast-notification.story.ts

@@ -42,14 +42,15 @@ AAAOverview.parameters = {
 export const ErrorStyle: Story = props => html`<uui-toast-notification
   .open=${props.open}
   .look=${props.look}>
-  <uui-toast-notification-layout headline="Document could not be published!">
-    An error occurred while attempting to contact the server. Please check your
-    internet connection.
+  <uui-toast-notification-layout .headline=${props.headline}>
+    ${props.message}
     <uui-button slot="actions" look="danger">Retry</uui-button>
   </uui-toast-notification-layout>
 </uui-toast-notification>`;
 ErrorStyle.args = {
   headline: 'Document could not be published!',
+  message:
+    'An error occurred while attempting to contact the server. Please check your internet connection.',
   look: 'danger',
 };
 ErrorStyle.parameters = {
@@ -70,12 +71,13 @@ export const PositiveStyle: Story = props => html`<uui-toast-notification
   .open=${props.open}
   .look=${props.look}>
   <uui-toast-notification-layout .headline=${props.headline}>
-    <p>This document is now saved and published.</p>
+    ${props.message}
     <uui-button slot="actions" .look=${props.look}>View in browser</uui-button>
   </uui-toast-notification-layout>
 </uui-toast-notification>`;
 PositiveStyle.args = {
   headline: 'Document was published',
+  message: 'This document is now saved and published.',
   look: 'positive',
 };
 PositiveStyle.parameters = {