feat(core/validation-tooltip): add validation tooltip

siemens · Sep 9, 2022 · 3f196ac · 3f196ac
1 parent 91fbd1d
commit 3f196ac
Show file tree

Hide file tree

Showing 31 changed files with 1,032 additions and 41 deletions.
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -66,6 +66,7 @@ import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
 import { Upload } from 'src/preview-examples/upload';
+import { Validation } from 'src/preview-examples/validation';
 import { VerticalTabs } from 'src/preview-examples/vertical-tabs';
 import { VerticalTabsWithAvatar } from 'src/preview-examples/vertical-tabs-with-avatar';
 import { NavigationTestComponent } from './components/navigation-test.component';
@@ -238,6 +239,7 @@ const routes: Routes = [
       { path: 'upload', component: Upload },
       { path: 'vertical-tabs-with-avatar', component: VerticalTabsWithAvatar },
       { path: 'vertical-tabs', component: VerticalTabs },
+      { path: 'validation', component: Validation },
     ],
   },
 ];

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -4,11 +4,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { CoreUIModule } from '@siemens/ix-angular';
+import { IxModule } from '@siemens/ix-angular';
 import { AGGrid } from 'src/preview-examples/aggrid';
 import { ButtonGroup } from 'src/preview-examples/button-group';
 import { Buttons } from 'src/preview-examples/buttons';
 
+import { FormsModule } from '@angular/forms';
 import { AgGridModule } from 'ag-grid-angular';
 import { AboutAndLegal } from 'src/preview-examples/about-and-legal';
 import { BasicNavigation } from 'src/preview-examples/basic-navigation';
@@ -73,6 +74,7 @@ import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
 import { Upload } from 'src/preview-examples/upload';
+import { Validation } from 'src/preview-examples/validation';
 import { VerticalTabs } from 'src/preview-examples/vertical-tabs';
 import { VerticalTabsWithAvatar } from 'src/preview-examples/vertical-tabs-with-avatar';
 import { NavigationTestComponent } from './components/navigation-test.component';
@@ -149,12 +151,14 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Upload,
     VerticalTabsWithAvatar,
     VerticalTabs,
+    Validation,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    CoreUIModule.forRoot(),
+    IxModule.forRoot(),
     AgGridModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/packages/angular-test-app/src/preview-examples/validation.ts b/packages/angular-test-app/src/preview-examples/validation.ts
@@ -0,0 +1,89 @@
+/**
+ * COPYRIGHT (c) Siemens AG
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-validation',
+  template: `
+    <form
+      class="row g-3 needs-validation"
+      [ngClass]="{ 'was-validated': wasValidated }"
+      no-validate
+      (submit)="onSubmit($event)"
+    >
+      <div class="col-md-4">
+        <label htmlFor="validationCustom01" class="form-label">
+          First name
+        </label>
+        <input
+          name="firstName"
+          type="text"
+          class="form-control"
+          id="validationCustom01"
+          [(ngModel)]="data.firstName"
+          #firstName="ngModel"
+          required
+        />
+        <div class="valid-feedback">Looks good!</div>
+      </div>
+      <div class="col-md-4">
+        <label htmlFor="validationCustom02" class="form-label">
+          Last name
+        </label>
+        <ix-validation-tooltip
+          message="Error hint textError hint textError hint textError hint textError hint textError hint textError hint textError hint textError hint text"
+        >
+          <input
+            name="lastName"
+            type="text"
+            class="form-control"
+            id="validationCustom02"
+            [(ngModel)]="data.lastName"
+            #lastName="ngModel"
+            required
+          />
+        </ix-validation-tooltip>
+        <div class="valid-feedback">Looks good!</div>
+      </div>
+      <div class="col-md-4">
+        <label htmlFor="validationCustomUsername" class="form-label">
+          Username
+        </label>
+        <input
+          name="userName"
+          type="text"
+          class="form-control"
+          id="validationCustomUsername"
+          aria-describedby="inputGroupPrepend"
+          [(ngModel)]="data.userName"
+          #userName="ngModel"
+          required
+        />
+        <div class="invalid-feedback">Please choose a username.</div>
+      </div>
+      <div class="col-12">
+        <button class="btn btn-primary" type="submit">Submit form</button>
+      </div>
+    </form>
+  `,
+})
+export class Validation {
+  data = {
+    firstName: '',
+    lastName: '',
+    userName: '',
+  };
+
+  wasValidated = false;
+
+  onSubmit(event: SubmitEvent) {
+    event.preventDefault();
+
+    this.wasValidated = true;
+  }
+}
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -184,13 +184,13 @@ export declare interface IxButton extends Components.IxButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'variant']
+  inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'type', 'variant']
 })
 @Component({
   selector: 'ix-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'variant']
+  inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'type', 'variant']
 })
 export class IxButton {
   protected el: HTMLElement;
@@ -710,13 +710,13 @@ export declare interface IxIconButton extends Components.IxIconButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'variant']
+  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'type', 'variant']
 })
 @Component({
   selector: 'ix-icon-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'variant']
+  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'type', 'variant']
 })
 export class IxIconButton {
   protected el: HTMLElement;
@@ -1561,6 +1561,27 @@ export class IxUpload {
 }
 
 
+export declare interface IxValidationTooltip extends Components.IxValidationTooltip {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['message', 'placement']
+})
+@Component({
+  selector: 'ix-validation-tooltip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['message', 'placement']
+})
+export class IxValidationTooltip {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface IxWorkflowStep extends Components.IxWorkflowStep {}
 
 @ProxyCmp({

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -62,6 +62,7 @@ export const DIRECTIVES = [
   d.IxToggle,
   d.IxTreeItem,
   d.IxUpload,
+  d.IxValidationTooltip,
   d.IxWorkflowStep,
   d.IxWorkflowSteps
 ];
diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts
@@ -7,10 +7,10 @@
  */
 import { DOCUMENT } from '@angular/common';
 import {
-    APP_INITIALIZER,
-    ModuleWithProviders,
-    NgModule,
-    NgZone
+  APP_INITIALIZER,
+  ModuleWithProviders,
+  NgModule,
+  NgZone,
 } from '@angular/core';
 import { appInitialize } from './app-initialize';
 import { DIRECTIVES } from './declare-components';
@@ -23,10 +23,10 @@ const DECLARATIONS = [...DIRECTIVES, tree.IxTree];
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
 })
-export class CoreUIModule {
-  static forRoot(): ModuleWithProviders<CoreUIModule> {
+export class IxModule {
+  static forRoot(): ModuleWithProviders<IxModule> {
     return {
-      ngModule: CoreUIModule,
+      ngModule: IxModule,
       providers: [
         {
           provide: APP_INITIALIZER,

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -38,7 +38,8 @@
     "@stencil/core": "~2.15.0",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
-    "luxon": "^3.0.1"
+    "luxon": "^3.0.1",
+    "vest": "^4.6.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.24.1",

diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss
@@ -132,6 +132,8 @@ textarea {
   background-position: left calc(0.375em + 0.1875rem) center !important;
   padding-right: 0.75rem;
   padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
 }
 
 input {

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -115,6 +115,10 @@ export namespace Components {
           * Show button as selected. Should be used with outline or invisible
          */
         "selected": boolean;
+        /**
+          * Type of the button
+         */
+        "type": 'button' | 'submit';
         /**
           * Button varaint
          */
@@ -589,6 +593,10 @@ export namespace Components {
           * Size of icon in button
          */
         "size": '32' | '24' | '16' | '12';
+        /**
+          * Type of the button
+         */
+        "type": 'button' | 'submit';
         /**
           * Variant of button
          */
@@ -1296,6 +1304,16 @@ export namespace Components {
          */
         "uploadSuccessText": string;
     }
+    interface IxValidationTooltip {
+        /**
+          * Message of the tooltip
+         */
+        "message": string;
+        /**
+          * Placement of the tooltip
+         */
+        "placement": Placement;
+    }
     interface IxWorkflowStep {
         /**
           * Activate navigation click
@@ -1710,6 +1728,12 @@ declare global {
         prototype: HTMLIxUploadElement;
         new (): HTMLIxUploadElement;
     };
+    interface HTMLIxValidationTooltipElement extends Components.IxValidationTooltip, HTMLStencilElement {
+    }
+    var HTMLIxValidationTooltipElement: {
+        prototype: HTMLIxValidationTooltipElement;
+        new (): HTMLIxValidationTooltipElement;
+    };
     interface HTMLIxWorkflowStepElement extends Components.IxWorkflowStep, HTMLStencilElement {
     }
     var HTMLIxWorkflowStepElement: {
@@ -1790,6 +1814,7 @@ declare global {
         "ix-tree": HTMLIxTreeElement;
         "ix-tree-item": HTMLIxTreeItemElement;
         "ix-upload": HTMLIxUploadElement;
+        "ix-validation-tooltip": HTMLIxValidationTooltipElement;
         "ix-workflow-step": HTMLIxWorkflowStepElement;
         "ix-workflow-steps": HTMLIxWorkflowStepsElement;
         "my-component": HTMLMyComponentElement;
@@ -1908,6 +1933,10 @@ declare namespace LocalJSX {
           * Show button as selected. Should be used with outline or invisible
          */
         "selected"?: boolean;
+        /**
+          * Type of the button
+         */
+        "type"?: 'button' | 'submit';
         /**
           * Button varaint
          */
@@ -2437,6 +2466,10 @@ declare namespace LocalJSX {
           * Size of icon in button
          */
         "size"?: '32' | '24' | '16' | '12';
+        /**
+          * Type of the button
+         */
+        "type"?: 'button' | 'submit';
         /**
           * Variant of button
          */
@@ -3194,6 +3227,16 @@ declare namespace LocalJSX {
          */
         "uploadSuccessText"?: string;
     }
+    interface IxValidationTooltip {
+        /**
+          * Message of the tooltip
+         */
+        "message"?: string;
+        /**
+          * Placement of the tooltip
+         */
+        "placement"?: Placement;
+    }
     interface IxWorkflowStep {
         /**
           * Activate navigation click
@@ -3306,6 +3349,7 @@ declare namespace LocalJSX {
         "ix-tree": IxTree;
         "ix-tree-item": IxTreeItem;
         "ix-upload": IxUpload;
+        "ix-validation-tooltip": IxValidationTooltip;
         "ix-workflow-step": IxWorkflowStep;
         "ix-workflow-steps": IxWorkflowSteps;
         "my-component": MyComponent;
@@ -3376,6 +3420,7 @@ declare module "@stencil/core" {
             "ix-tree": LocalJSX.IxTree & JSXBase.HTMLAttributes<HTMLIxTreeElement>;
             "ix-tree-item": LocalJSX.IxTreeItem & JSXBase.HTMLAttributes<HTMLIxTreeItemElement>;
             "ix-upload": LocalJSX.IxUpload & JSXBase.HTMLAttributes<HTMLIxUploadElement>;
+            "ix-validation-tooltip": LocalJSX.IxValidationTooltip & JSXBase.HTMLAttributes<HTMLIxValidationTooltipElement>;
             "ix-workflow-step": LocalJSX.IxWorkflowStep & JSXBase.HTMLAttributes<HTMLIxWorkflowStepElement>;
             "ix-workflow-steps": LocalJSX.IxWorkflowSteps & JSXBase.HTMLAttributes<HTMLIxWorkflowStepsElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;

diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
@@ -47,10 +47,15 @@ export class Button {
    */
   @Prop() disabled = false;
 
+  /**
+   * Type of the button
+   */
+  @Prop() type: 'button' | 'submit' = 'button';
+
   render() {
     return (
       <button
-        type="button"
+        type={this.type}
         class={getButtonClasses(
           this.variant,
           this.outline,

diff --git a/packages/core/src/components/button/readme.md b/packages/core/src/components/button/readme.md
@@ -12,6 +12,7 @@
 | `invisible` | `invisible` | <span style="color:red">**[DEPRECATED]**</span> use ghost property<br/><br/>Invisible button | `boolean`                  | `false`     |
 | `outline`   | `outline`   | Outline button                                                                               | `boolean`                  | `false`     |
 | `selected`  | `selected`  | Show button as selected. Should be used with outline or invisible                            | `boolean`                  | `false`     |
+| `type`      | `type`      | Type of the button                                                                           | `"button" \| "submit"`     | `'button'`  |
 | `variant`   | `variant`   | Button varaint                                                                               | `"Primary" \| "Secondary"` | `'Primary'` |