fix(core/form-controls): readonly states (#485)

siemens · Apr 14, 2023 · 696366d · 696366d
1 parent a595268
commit 696366d
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 5 deletions.
diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss
@@ -78,6 +78,11 @@
   box-shadow: none !important;
   outline: none !important;
   border-color: var(--theme-input--border-color);
+  cursor: default !important;
+
+  &::placeholder {
+    color: transparent;
+  }
 }
 
 .form-control:disabled,

diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -353,6 +353,18 @@ export class Select {
     this.dropdownShow = false;
   }
 
+  private placeholderValue() {
+    if (this.editable) {
+      return this.i18nPlaceholderEditable;
+    }
+
+    if (this.readonly) {
+      return '';
+    }
+
+    return this.i18nPlaceholder;
+  }
+
   render() {
     return (
       <Host>
@@ -396,11 +408,7 @@ export class Select {
                   class={{
                     'allow-clear': this.allowClear && !!this.value?.length,
                   }}
-                  placeholder={
-                    this.editable
-                      ? this.i18nPlaceholderEditable
-                      : this.i18nPlaceholder
-                  }
+                  placeholder={this.placeholderValue()}
                   value={this.inputValue}
                   ref={(ref) => (this.inputRef = ref)}
                   onInput={() => this.filterItemsWithTypeahead()}

diff --git a/packages/core/src/tests/input/input.e2e.ts b/packages/core/src/tests/input/input.e2e.ts
@@ -42,4 +42,9 @@ regressionTest.describe('input', () => {
     await page.waitForTimeout(1000);
     expect(await page.screenshot()).toMatchSnapshot();
   });
+
+  regressionTest('readonly', async ({ page }) => {
+    await page.goto('input/readonly');
+    expect(await page.screenshot()).toMatchSnapshot();
+  });
 });
diff --git a/...input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-dark-linux.png b/...input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-dark-linux.png
diff --git a/...nput.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-light-linux.png b/...nput.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/input/readonly/index.html b/packages/core/src/tests/input/readonly/index.html
@@ -0,0 +1,22 @@
+<!--
+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>
+</head>
+
+<body>
+  <div class="m-2">
+    <input class="form-control" defaultValue="" placeholder="Enter text here" type="text" readonly />
+  </div>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+
+</html>
diff --git a/packages/core/src/tests/select/readonly/index.html b/packages/core/src/tests/select/readonly/index.html
@@ -0,0 +1,25 @@
+<!--
+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>
+</head>
+
+<body style="padding: 2rem">
+  <ix-select readonly>
+    <ix-select-item label="Item 1" value="1"></ix-select-item>
+    <ix-select-item label="Item 2" value="2"></ix-select-item>
+    <ix-select-item label="Item 3" value="3"></ix-select-item>
+    <ix-select-item label="Item 4" value="4"></ix-select-item>
+  </ix-select>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+
+</html>
diff --git a/packages/core/src/tests/select/select.e2e.ts b/packages/core/src/tests/select/select.e2e.ts
@@ -95,4 +95,9 @@ regressionTest.describe('select', () => {
     await page.waitForSelector('.dropdown-menu.show');
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('readonly', async ({ page }) => {
+    await page.goto('select/readonly');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });
diff --git a/...lect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-dark-linux.png b/...lect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-dark-linux.png
diff --git a/...ect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-light-linux.png b/...ect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/textarea/basic/index.html b/packages/core/src/tests/textarea/basic/index.html
@@ -0,0 +1,22 @@
+<!--
+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>
+</head>
+
+<body>
+  <div class="m-2">
+    <textarea class="form-control" placeholder="Enter text here"></textarea>
+  </div>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+
+</html>
diff --git a/packages/core/src/tests/textarea/readonly/index.html b/packages/core/src/tests/textarea/readonly/index.html
@@ -0,0 +1,22 @@
+<!--
+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>
+</head>
+
+<body>
+  <div class="m-2">
+    <textarea class="form-control" placeholder="Enter text here" readonly></textarea>
+  </div>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+
+</html>
diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts b/packages/core/src/tests/textarea/textarea.e2e.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('textarea', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto('textarea/basic');
+    expect(await page.screenshot()).toMatchSnapshot();
+  });
+
+  regressionTest('readonly', async ({ page }) => {
+    await page.goto('textarea/readonly');
+    expect(await page.screenshot()).toMatchSnapshot();
+  });
+});
diff --git a/...tarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png b/...tarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...area.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png b/...area.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...ea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png b/...ea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png
diff --git a/...a.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png b/...a.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png