fix(core/input): prevent mouse states for read-only and disabled inpu…

…ts (#562) Co-authored-by: goncalosard <innsiiiider@hotmail.com>
siemens · May 31, 2023 · b3fdbc1 · b3fdbc1
1 parent 510b131
commit b3fdbc1
Show file tree

Hide file tree

Showing 19 changed files with 446 additions and 85 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/input-labels.ts b/packages/angular-test-app/src/preview-examples/input-labels.ts
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * 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-example',
+  template: `
+    <form class="needs-validation m-2">
+      <ix-input-group style="margin-bottom: 0.5rem;">
+        <span slot="input-start">Label Start</span>
+        <input type="text" class="form-control" />
+      </ix-input-group>
+
+      <ix-input-group>
+        <input type="text" class="form-control" />
+        <span slot="input-end">Label End</span>
+      </ix-input-group>
+    </form>
+  `,
+})
+export default class Input {}
diff --git a/packages/angular-test-app/src/preview-examples/input-search.ts b/packages/angular-test-app/src/preview-examples/input-search.ts
@@ -12,51 +12,52 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-  <form class="needs-validation m-2">
-  <ix-input-group>
-    <span slot="input-start">
-      <ix-icon name="search" size="16"></ix-icon>
-    </span>
-    <input
-      ng-init="verifyStart()"
-      [(ngModel)]="customSearch"
-      name="input"
-      (keyup)="onKey($event)"
-      id="input-string"
-      type="string"
-      class="form-control"
-    />
-    <span slot="input-end">
-      <ix-icon-button
-        (click)="clearInput()"
-        id="clear-button"
-        icon="clear"
-        ghost="{true}"
-        size="16"
-        [style.display]="display"
-      ></ix-icon-button>
-    </span>
-  </ix-input-group>
-</form>
+    <form class="needs-validation m-2">
+      <ix-input-group>
+        <span slot="input-start">
+          <ix-icon name="search" size="16"></ix-icon>
+        </span>
+        <input
+          ng-init="verifyStart()"
+          [(ngModel)]="customSearch"
+          name="input"
+          (keyup)="onKey($event)"
+          id="input-string"
+          type="string"
+          class="form-control"
+        />
+        <span slot="input-end">
+          <ix-icon-button
+            (click)="clearInput()"
+            id="clear-button"
+            icon="clear"
+            ghost="{true}"
+            size="16"
+            [style.display]="display"
+          ></ix-icon-button>
+        </span>
+      </ix-input-group>
+    </form>
   `,
 })
 export default class Input {
-  customSearch = ''
-  display = 'none'
+  customSearch = '';
+  display = 'none';
 
   public ngOnInit(): void {
-    if(this.customSearch !== ''){
-      this.display = 'block'
+    if (this.customSearch !== '') {
+      this.display = 'block';
     }
- }
+  }
 
   clearInput() {
-    this.customSearch = ''
-    this.display = 'none'
+    this.customSearch = '';
+    this.display = 'none';
   }
 
   onKey(event: any) {
-    event.target.value === '' ? this.display = 'none'
-    : this.display = 'block'
+    event.target.value === ''
+      ? (this.display = 'none')
+      : (this.display = 'block');
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/input-types.ts b/packages/angular-test-app/src/preview-examples/input-types.ts
@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * 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-example',
+  template: `
+    <form class="needs-validation m-2">
+      <ix-input-group style="margin-bottom: 0.5rem;">
+        <span slot="input-start">Text:</span>
+        <input placeholder="Enter text" type="text" class="form-control" />
+      </ix-input-group>
+
+      <ix-input-group style="margin-bottom: 0.5rem;">
+        <span slot="input-start">Number:</span>
+        <input type="number" class="form-control" />
+        <span slot="input-end">.00</span>
+        <span slot="input-end">$</span>
+      </ix-input-group>
+
+      <ix-input-group style="margin-bottom: 0.5rem;">
+        <span slot="input-start">Password:</span>
+        <input
+          placeholder="Enter password"
+          type="password"
+          class="form-control"
+        />
+      </ix-input-group>
+
+      <ix-input-group style="margin-bottom: 0.5rem;">
+        <span slot="input-start">Email:</span>
+        <input
+          placeholder="example@domain.com"
+          type="email"
+          class="form-control"
+        />
+      </ix-input-group>
+
+      <ix-input-group style="margin-bottom: 0.5rem;">
+        <span slot="input-start">Telephone:</span>
+        <input placeholder="111-111-111" type="tel" class="form-control" />
+      </ix-input-group>
+    </form>
+  `,
+})
+export default class Input {}
diff --git a/packages/angular-test-app/src/preview-examples/input-with-icon.ts b/packages/angular-test-app/src/preview-examples/input-with-icon.ts
@@ -14,10 +14,8 @@ import { Component } from '@angular/core';
   template: `
     <form class="needs-validation m-2">
       <ix-input-group>
-        <span slot="input-start">Price</span>
-        <input type="number" class="form-control" />
-        <span slot="input-end">.00</span>
-        <span slot="input-end">$</span>
+        <input type="text" class="form-control" />
+        <span slot="input-end"><ix-icon name="about" size="16"></ix-icon></span>
       </ix-input-group>
     </form>
   `,

diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss
@@ -34,18 +34,20 @@
     color: var(--theme-input-hint--color);
   }
 
-  @include hover {
-    background-color: var(--theme-input--background--hover);
-    border-color: var(--theme-input--border-color--hover);
-    cursor: auto;
-  }
-
-  @include focus-visible {
-    background-color: var(--theme-input--background--focus);
-    border-color: var(--theme-input--border-color--focus);
-    outline-offset: var(--theme-input--focus--outline-offset);
-    box-shadow: var(--theme-input--box-shadow);
-    outline: 1px solid var(--theme-color-focus-bdr);
+  &:not(:read-only):not([readonly]):not([readOnly]):not(.readonly) {
+    @include hover {
+      background-color: var(--theme-input--background--hover);
+      border-color: var(--theme-input--border-color--hover);
+      cursor: auto;
+    }
+
+    @include focus-visible {
+      background-color: var(--theme-input--background--focus);
+      border-color: var(--theme-input--border-color--focus);
+      outline-offset: var(--theme-input--focus--outline-offset);
+      box-shadow: var(--theme-input--box-shadow);
+      outline: 1px solid var(--theme-color-focus-bdr);
+    }
   }
 }
 
@@ -96,6 +98,10 @@
   color: var(--theme-color-weak-text);
 
   border-color: var(--theme-input--border-color-bottom--disabled);
+
+  &::placeholder {
+    color: transparent;
+  }
 }
 
 .form-control-plaintext {

diff --git a/...2e.ts-snapshots/category-filter-basic-1-chromium---theme-classic-dark-linux.png b/...2e.ts-snapshots/category-filter-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...-snapshots/category-filter-categories-1-chromium---theme-classic-dark-linux.png b/...-snapshots/category-filter-categories-1-chromium---theme-classic-dark-linux.png
diff --git a/packages/documentation/docs/controls/input.md b/packages/documentation/docs/controls/input.md
@@ -5,24 +5,32 @@ import SourceInputDisabled from './../auto-generated/previews/web-component/inpu
 import SourceInputReadonly from './../auto-generated/previews/web-component/input-readonly.md'
 import SourceInputIcon from './../auto-generated/previews/web-component/input-with-icon.md'
 import SourceInputSearch from './../auto-generated/previews/web-component/input-search.md'
+import SourceInputTypes from './../auto-generated/previews/web-component/input-types.md'
+import SourceInputLabels from './../auto-generated/previews/web-component/input-labels.md'
 
 import SourceReactInput from './../auto-generated/previews/react/input.md'
 import SourceReactInputDisabled from './../auto-generated/previews/react/input-disabled.md'
 import SourceReactInputReadonly from './../auto-generated/previews/react/input-readonly.md'
 import SourceReactInputIcon from './../auto-generated/previews/react/input-with-icon.md'
 import SourceReactInputSearch from './../auto-generated/previews/react/input-search.md'
+import SourceReactInputTypes from './../auto-generated/previews/react/input-types.md'
+import SourceReactInputLabels from './../auto-generated/previews/react/input-labels.md'
 
 import SourceAngularInput from './../auto-generated/previews/angular/input.ts.md'
 import SourceAngularInputDisabled from './../auto-generated/previews/angular/input-disabled.ts.md'
 import SourceAngularInputReadonly from './../auto-generated/previews/angular/input-readonly.ts.md'
 import SourceAngularInputIcon from './../auto-generated/previews/angular/input-with-icon.ts.md'
 import SourceAngularInputSearch from './../auto-generated/previews/angular/input-search.ts.md'
+import SourceAngularInputTypes from './../auto-generated/previews/angular/input-types.ts.md'
+import SourceAngularInputLabels from './../auto-generated/previews/angular/input-labels.ts.md'
 
 import SourceVueInput from './../auto-generated/previews/vue/input.md'
 import SourceVueInputDisabled from './../auto-generated/previews/vue/input-disabled.md'
 import SourceVueInputReadonly from './../auto-generated/previews/vue/input-readonly.md'
 import SourceVueInputIcon from './../auto-generated/previews/vue/input-with-icon.md'
 import SourceVueInputSearch from './../auto-generated/previews/vue/input-search.md'
+import SourceVueInputTypes from './../auto-generated/previews/vue/input-types.md'
+import SourceVueInputLabels from './../auto-generated/previews/vue/input-labels.md'
 
 # Input
 
@@ -61,7 +69,7 @@ frameworks={{
   vue: SourceVueInputReadonly
 }}></Playground>
 
-### with Icon
+### With icon
 
 <Playground
 name="input-with-icon"
@@ -73,6 +81,31 @@ frameworks={{
   vue: SourceVueInputIcon
 }}></Playground>
 
+### Label placement
+
+<Playground
+name="input-labels"
+hideInitalCodePreview
+frameworks={{
+  react: SourceReactInputLabels,
+  angular: SourceAngularInputLabels,
+  javascript: SourceInputLabels,
+  vue: SourceVueInputLabels
+}}></Playground>
+
+### Input types
+
+<Playground
+name="input-types"
+height="15rem"
+hideInitalCodePreview
+frameworks={{
+  react: SourceReactInputTypes,
+  angular: SourceAngularInputTypes,
+  javascript: SourceInputTypes,
+  vue: SourceVueInputTypes
+}}></Playground>
+
 ### Search
 
 <Playground

diff --git a/packages/html-test-app/src/preview-examples/input-disabled.html b/packages/html-test-app/src/preview-examples/input-disabled.html
@@ -14,7 +14,7 @@
     <form class="needs-validation m-2">
       <input
         class="form-control"
-        defaultValue="Some example text"
+        value="Some example text"
         placeholder="Enter text here"
         type="text"
         disabled

diff --git a/packages/html-test-app/src/preview-examples/input-labels.html b/packages/html-test-app/src/preview-examples/input-labels.html
@@ -0,0 +1,33 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Input Search example</title>
+</head>
+
+
+
+<body class="theme-brand-dark">
+  <!-- Preview code -->
+  <form class="needs-validation m-2">
+    <ix-input-group style="margin-bottom: 0.5rem;">
+      <span slot="input-start">Label Start</span>
+      <input type="text" class="form-control" />
+    </ix-input-group>
+
+    <ix-input-group>
+      <input type="text" class="form-control" />
+      <span slot="input-end">Label End</span>
+    </ix-input-group>
+  </form>
+  <!-- Preview code -->
+  <script type="module" src="./init.js"></script>
+</body>
+
+</html>
diff --git a/packages/html-test-app/src/preview-examples/input-readonly.html b/packages/html-test-app/src/preview-examples/input-readonly.html
@@ -14,7 +14,7 @@
     <form class="needs-validation m-2">
       <input
         class="form-control"
-        defaultValue="Some example text"
+        value="Some example text"
         placeholder="Enter text here"
         type="text"
         readonly