fix(core/input): show placeholder in readonly and disabled states

BREAKING_CHANGES.md

@@ -2,6 +2,10 @@
 
 ## v2.0.0
 
+### `input[class="form-control"]` and `textarea[class="form-control"]` are deprecated
+
+The assignment of the 'form-control' class for input and textarea elements is no longer required.
+
 ### Deprecated `ix-split-button-item`
 
 Use `ix-dropdown-item` instead of `ix-split-button-item`. `ix-split-button-item` will be removed in the next major release.

packages/angular-test-app/src/preview-examples/input-disabled.ts

@@ -14,8 +14,7 @@ import { Component } from '@angular/core';
   template: `
     <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

packages/angular-test-app/src/preview-examples/input-labels.ts

@@ -15,11 +15,11 @@ import { Component } from '@angular/core';
     <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" />
+        <input type="text" />
       </ix-input-group>
 
       <ix-input-group>
-        <input type="text" class="form-control" />
+        <input type="text" />
         <span slot="input-end">Label End</span>
       </ix-input-group>
     </form>

packages/angular-test-app/src/preview-examples/input-readonly.ts

@@ -14,8 +14,7 @@ import { Component } from '@angular/core';
   template: `
     <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

packages/angular-test-app/src/preview-examples/input-search.ts

@@ -24,7 +24,6 @@ import { Component } from '@angular/core';
           (keyup)="onKey($event)"
           id="input-string"
           type="string"
-          class="form-control"
         />
         <span slot="input-end">
           <ix-icon-button

packages/angular-test-app/src/preview-examples/input-types.ts

@@ -15,37 +15,29 @@ import { Component } from '@angular/core';
     <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" />
+        <input placeholder="Enter text" type="text" />
       </ix-input-group>
 
       <ix-input-group style="margin-bottom: 0.5rem;">
         <span slot="input-start">Number:</span>
-        <input type="number" class="form-control" />
+        <input type="number" />
         <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"
-        />
+        <input placeholder="Enter password" type="password" />
       </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"
-        />
+        <input placeholder="example@domain.com" type="email" />
       </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" />
+        <input placeholder="111-111-111" type="tel" />
       </ix-input-group>
     </form>
   `,

packages/angular-test-app/src/preview-examples/input-with-icon.ts

@@ -14,7 +14,7 @@ import { Component } from '@angular/core';
   template: `
     <form class="needs-validation m-2">
       <ix-input-group>
-        <input type="text" class="form-control" />
+        <input type="text" />
         <span slot="input-end"><ix-icon name="about" size="16"></ix-icon></span>
       </ix-input-group>
     </form>

packages/angular-test-app/src/preview-examples/input.ts

@@ -14,8 +14,7 @@ import { Component } from '@angular/core';
   template: `
     <form class="needs-validation m-2">
       <input
-        class="form-control"
-        defaultValue="Some example text"
+        value="Some example text"
         placeholder="Enter text here"
         type="text"
       />

packages/angular-test-app/src/preview-examples/key-value-list-with-custom-value.ts

@@ -14,30 +14,15 @@ import { Component } from '@angular/core';
   template: `
     <ix-key-value-list>
       <ix-key-value label="Label" labelPosition="left">
-        <input
-          class="form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
+        <input placeholder="Enter text here" type="text" slot="custom-value" />
       </ix-key-value>
 
       <ix-key-value label="Label" labelPosition="left">
-        <input
-          class="form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
+        <input placeholder="Enter text here" type="text" slot="custom-value" />
       </ix-key-value>
 
       <ix-key-value label="Label" labelPosition="left">
-        <input
-          class="form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
+        <input placeholder="Enter text here" type="text" slot="custom-value" />
       </ix-key-value>
     </ix-key-value-list>
   `,

packages/angular-test-app/src/preview-examples/key-value-with-custom-value.ts

@@ -13,12 +13,7 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <ix-key-value label="Label">
-      <input
-        class="form-control"
-        placeholder="Enter text here"
-        type="text"
-        slot="custom-value"
-      />
+      <input placeholder="Enter text here" type="text" slot="custom-value" />
     </ix-key-value>
   `,
 })

packages/angular-test-app/src/preview-examples/textarea-disabled.ts

@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <textarea class="form-control" placeholder="Enter text here" disabled>
+    <textarea placeholder="Enter text here" disabled>
   Some example text
 </textarea>
   `,

packages/angular-test-app/src/preview-examples/textarea-readonly.ts

@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <textarea class="form-control" placeholder="Enter text here" readonly>
+    <textarea placeholder="Enter text here" readonly>
   Some example text
 </textarea>
   `,

packages/angular-test-app/src/preview-examples/textarea.ts

@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <textarea class="form-control" placeholder="Enter text here">
+    <textarea placeholder="Enter text here">
   Some example text
 </textarea>
   `,

packages/angular-test-app/src/preview-examples/validation.ts

@@ -25,7 +25,6 @@ import { Component } from '@angular/core';
         <input
           name="firstName"
           type="text"
-          class="form-control"
           id="validationCustom01"
           [(ngModel)]="data.firstName"
           #firstName="ngModel"
@@ -43,7 +42,6 @@ import { Component } from '@angular/core';
           <input
             name="lastName"
             type="text"
-            class="form-control"
             id="validationCustom02"
             [(ngModel)]="data.lastName"
             #lastName="ngModel"
@@ -58,7 +56,6 @@ import { Component } from '@angular/core';
         <input
           name="userName"
           type="text"
-          class="form-control"
           id="validationCustomUsername"
           aria-describedby="inputGroupPrepend"
           [(ngModel)]="data.userName"

packages/core/scss/components/_radiobuttons.scss

@@ -110,7 +110,7 @@
       background-color: var(--theme-radiobtn-checked--color);
       border-radius: 100%;
       position: absolute;
-      top: 0.3125rem;
+      top: 0.4125rem;
       left: 0.3125rem;
     }
 

packages/core/scss/components/form/_input.scss

@@ -59,6 +59,13 @@
         solid
         var(--theme-input--border-color-bottom--readonly);
     }
+
+    &.read-only,
+    &:read-only {
+      &::placeholder {
+        color: transparent;
+      }
+    }
   }
 
   &:disabled {
@@ -70,6 +77,10 @@
     border-bottom: var(--theme-input--border-thickness, 1px) solid
       var(--theme-input--border-color-bottom--disabled);
   }
+
+  &:disabled::placeholder {
+    color: transparent;
+  }
 }
 
 @mixin element-textarea {
@@ -80,6 +91,11 @@
 @mixin form {
   label {
     color: var(--theme-color-soft-text);
+    padding: 2px 0px;
+  }
+
+  label.label-alignment-left {
+    padding: 6px 0px;
   }
 
   input {
@@ -138,14 +154,14 @@
 
     :invalid,
     .is-invalid {
-      ~ .invalid-feedback {
+      & ~ .invalid-feedback {
         display: block;
       }
     }
 
     :valid,
     .is-valid {
-      ~ .valid-feedback {
+      & ~ .valid-feedback {
         display: block;
       }
     }

packages/core/src/components/tooltip/tooltip.tsx

@@ -246,7 +246,7 @@ export class Tooltip {
   }
 
   disconnectedCallback() {
-    this.observer.disconnect();
+    this.observer?.disconnect();
     this.destroyAutoUpdate();
   }
 

packages/core/src/components/validation-tooltip/validation-tooltip.scss

@@ -14,6 +14,7 @@
   display: inline-block;
   position: relative;
   $padding: 5px;
+  width: 100%;
 
   .validation-tooltip {
     background-color: var(--theme-tootlip--background);

packages/core/src/tests/input/basic/index.html

@@ -12,10 +12,16 @@
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
     />
     <title>Stencil Component Starter</title>
+    <style>
+      body {
+        padding: 1rem;
+      }
+    </style>
   </head>
   <body>
-    <div class="m-2">
+    <div>
       <input class="form-control" placeholder="Enter text here" type="text" />
+      <input placeholder="Enter text here" type="text" />
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

packages/core/src/tests/input/disabled/index.html

@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+    <style>
+      body {
+        padding: 1rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div>
+      <input
+        class="form-control"
+        placeholder="Enter text here"
+        type="text"
+        disabled
+      />
+      <input placeholder="Enter text here" type="text" disabled />
+
+      <input
+        class="form-control"
+        placeholder="Enter text here"
+        type="text"
+        value="some value"
+        disabled
+      />
+      <input
+        placeholder="Enter text here"
+        type="text"
+        disabled
+        value="some value"
+      />
+    </div>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/core/src/tests/input/input.e2e.ts

@@ -47,4 +47,9 @@ regressionTest.describe('input', () => {
     await page.goto('input/readonly');
     expect(await page.screenshot()).toMatchSnapshot();
   });
+
+  regressionTest('disabled', async ({ page }) => {
+    await page.goto('input/disabled');
+    expect(await page.screenshot()).toMatchSnapshot();
+  });
 });