readonly style + other fixes for forms

Author: nielslyngsoe

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

@@ -16,23 +16,35 @@ export declare abstract class FormControlMixinInterface extends LitElement {
   protected _value: FormDataEntryValue;
   protected _internals: any;
   protected abstract getFormElement(): HTMLElement | undefined;
+  protected addValidator: (
+    flagKey: FlagTypes,
+    getMessageMethod: () => String,
+    checkMethod: () => boolean
+  ) => void;
   pristine: boolean;
   required: boolean;
   requiredMessage: string;
   error: boolean;
   errorMessage: string;
 }
 
+/* FlagTypes type options originate from:
+ * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+ * */
 type FlagTypes =
-  | 'valueMissing'
-  | 'typeMismatch'
+  | 'badInput'
+  | 'customError'
   | 'patternMismatch'
-  | 'tooLong'
-  | 'tooShort'
+  | 'rangeOverflow'
   | 'rangeUnderflow'
   | 'stepMismatch'
+  | 'tooLong'
+  | 'tooShort'
+  | 'typeMismatch'
+  | 'valueMissing'
   | 'badInput'
-  | 'customError';
+  | 'valid';
+
 interface Validator {
   flagKey: FlagTypes;
   getMessage: () => String;

packages/uui-css/lib/custom-properties/interface.css

@@ -21,6 +21,7 @@
   --uui-interface-border-hover: var(--uui-color-grey-dark);
   --uui-interface-border-disabled: var(--uui-color-grey-dimmed);
   --uui-interface-border-focus: var(--uui-color-grey-dark);
+  --uui-interface-border-readonly: var(--uui-color-grey-light);
 
   --uui-interface-border-style: solid;
   --uui-interface-font-weight: 400;

packages/uui-form-validation-message/lib/uui-form-validation-message.story.ts

@@ -53,6 +53,14 @@ export const ForAnotherElement: Story = () =>
         required
         required-message="You must enter a phone number">
       </uui-input>
+      <uui-textarea
+        label="Textarea"
+        name="textarea"
+        value="Some long text that needs more space"
+        minlength="10"
+        maxlength="30"
+        required>
+      </uui-textarea>
     </div>
     <uui-form-validation-message for="myCustomScope">
     </uui-form-validation-message>`;

packages/uui-form/lib/uui-form.story.ts

@@ -75,6 +75,17 @@ export const Overview: Story = () => html` <form
     </uui-slider>
   </div>
 
+  <div style="margin-bottom: 15px;">
+    <uui-textarea
+      label="Textarea"
+      name="textarea"
+      value="Some long text that needs more space"
+      minlength="10"
+      maxlength="30"
+      required>
+    </uui-textarea>
+  </div>
+
   <div style="margin-bottom: 15px;">
     <input
       name="nativeCheckbox"

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

@@ -79,14 +79,19 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
           --uui-input-background-color-disabled,
           var(--uui-interface-surface-disabled)
         );
-        border: 1px solid
-          var(
-            --uui-input-border-color-disabled,
-            var(--uui-interface-border-disable)
-          );
+        border-color: var(
+          --uui-input-border-color-disabled,
+          var(--uui-interface-surface-disabled)
+        );
 
         color: var(--uui-interface-contrast-disabled);
       }
+      :host([readonly]) {
+        border-color: var(
+          --uui-input-border-color-readonly,
+          var(--uui-interface-border-readonly)
+        );
+      }
 
       :host(:not([pristine]):invalid),
       /* polyfill support */
@@ -97,7 +102,7 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
       input {
         font-family: inherit;
         padding: var(--uui-size-1) var(--uui-size-space-3);
-        font-size: 15px;
+        font-size: inherit;
         color: inherit;
         border-radius: 0;
         box-sizing: border-box;
@@ -111,7 +116,7 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
       input::placeholder {
         transition: opacity 120ms;
       }
-      input:focus::placeholder {
+      :host(:not([readonly])) input:focus::placeholder {
         opacity: 0;
       }
 
@@ -138,6 +143,15 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
   /**
    * Label for input element.
    * @type {string}
@@ -219,6 +233,7 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
         placeholder=${this.placeholder}
         aria-label=${this.label}
         .disabled=${this.disabled}
+        ?readonly=${this.readonly}
         @input=${this._onInput}
         @change=${this._onChange} />
       ${this.renderAppend()}

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

@@ -11,6 +11,8 @@ export default {
   component: 'uui-input',
   id: 'uui-input',
   args: {
+    disabled: false,
+    readonly: false,
     value: '',
     label: 'Label',
     placeholder: 'Placeholder',
@@ -39,6 +41,7 @@ const Template: Story = props =>
   html`
     <uui-input
       .disabled=${props.disabled}
+      .readonly=${props.readonly}
       .error=${props.error}
       .label=${props.label}
       .type=${props.type}
@@ -100,6 +103,7 @@ export const PrependAndAppend: Story = props =>
   html`
     <uui-input
       .disabled=${props.disabled}
+      .readonly=${props.readonly}
       .error=${props.error}
       .hideLabel=${props.hideLabel}
       .label=${props.label}
@@ -144,6 +148,7 @@ export const MultipleInputs: Story = props =>
   html`
     <uui-input
       .disabled=${props.disabled}
+      .readonly=${props.readonly}
       .error=${props.error}
       .hideLabel=${props.hideLabel}
       .label=${props.label}

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

@@ -26,9 +26,6 @@ describe('UuiInputElement', () => {
     it('has a name property', () => {
       expect(element).to.have.property('name');
     });
-    it('has a error property', () => {
-      expect(element).to.have.property('error');
-    });
     it('has a type property', () => {
       expect(element).to.have.property('type');
     });
@@ -41,6 +38,21 @@ 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 error property', () => {
+      expect(element).to.have.property('error');
+    });
+    it('has a errorMessage property', () => {
+      expect(element).to.have.property('errorMessage');
+    });
+    it('has a required property', () => {
+      expect(element).to.have.property('required');
+    });
+    it('has a requiredMessage property', () => {
+      expect(element).to.have.property('requiredMessage');
+    });
 
     it('disable property set input to disabled', async () => {
       element.disabled = true;

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

@@ -167,6 +167,7 @@ export class UUIRadioElement extends LitElement {
     return this._checked;
   }
   public set checked(value) {
+    const oldValue = this._checked;
     this._checked = value;
     if (value === true) {
       this.setAttribute('aria-checked', '');
@@ -177,6 +178,7 @@ export class UUIRadioElement extends LitElement {
       this.setAttribute('tabindex', '-1');
       this.removeAttribute('aria-checked');
     }
+    this.requestUpdate('checked', oldValue);
   }
   private _checked = false;