fix(core/expanding-search): add full-width support (#491)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · May 30, 2023 · b0bb9e2 · b0bb9e2
1 parent f05f81c
commit b0bb9e2
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 20 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -649,14 +649,14 @@ export declare interface IxEventListItem extends Components.IxEventListItem {
 
 
 @ProxyCmp({
-  inputs: ['icon', 'placeholder', 'value']
+  inputs: ['fullWidth', 'icon', 'placeholder', 'value']
 })
 @Component({
   selector: 'ix-expanding-search',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['icon', 'placeholder', 'value'],
+  inputs: ['fullWidth', 'icon', 'placeholder', 'value'],
 })
 export class IxExpandingSearch {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -3429,6 +3429,28 @@
         ]
       },
       "props": [
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "full-width",
+          "reflectToAttr": false,
+          "docs": "If true the search field will fill all available horizontal space of it's parent container when expanded.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "1.6.0"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "icon",
           "type": "string",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -669,6 +669,11 @@ export namespace Components {
         "selected": boolean;
     }
     interface IxExpandingSearch {
+        /**
+          * If true the search field will fill all available horizontal space of it's parent container when expanded.
+          * @since 1.6.0
+         */
+        "fullWidth": boolean;
         /**
           * Search icon
          */
@@ -3189,6 +3194,11 @@ declare namespace LocalJSX {
         "selected"?: boolean;
     }
     interface IxExpandingSearch {
+        /**
+          * If true the search field will fill all available horizontal space of it's parent container when expanded.
+          * @since 1.6.0
+         */
+        "fullWidth"?: boolean;
         /**
           * Search icon
          */

diff --git a/packages/core/src/components/expanding-search/expanding-search.scss b/packages/core/src/components/expanding-search/expanding-search.scss
@@ -19,9 +19,14 @@ $container-width: 11.5625rem;
   height: $x-large-space;
   align-items: center;
   justify-content: space-between;
+  position: relative;
 
   &.right-position {
     width: $container-width !important;
+
+    &.fullWidth {
+      width: 100% !important;
+    }
   }
 
   .input-container {
@@ -34,10 +39,15 @@ $container-width: 11.5625rem;
 
   input {
     box-shadow: var(--theme-input--box-shadow);
+    cursor: auto !important;
   }
 
   .expanded {
     width: $container-width;
+
+    &.fullWidth {
+      width: 100%;
+    }
   }
 
   .collapsed {

diff --git a/packages/core/src/components/expanding-search/expanding-search.tsx b/packages/core/src/components/expanding-search/expanding-search.tsx
@@ -38,6 +38,12 @@ export class ExpandingSearch {
    */
   @Prop({ mutable: true }) value = '';
 
+  /**
+   * If true the search field will fill all available horizontal space of it's parent container when expanded.
+   * @since 1.6.0
+   */
+  @Prop() fullWidth = false;
+
   @State() isFieldChanged = false;
 
   @State() expanded = false;
@@ -98,6 +104,7 @@ export class ExpandingSearch {
         class={{
           expanded: this.expanded,
           'right-position': this.expanded,
+          fullWidth: this.fullWidth,
         }}
       >
         <button
@@ -125,6 +132,7 @@ export class ExpandingSearch {
         <div
           class={{
             expanded: this.expanded,
+            fullWidth: this.fullWidth,
             collapsed: !this.expanded,
             'disable-pointer': !this.expanded,
             'input-container': true,

diff --git a/packages/core/src/tests/expanding-search/basic/index.html b/packages/core/src/tests/expanding-search/basic/index.html
@@ -5,18 +5,20 @@
 -->
 
 <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="display: flex; width: 100%; margin: 2rem">
-    <ix-button style="margin-right: 1rem">BEFORE</ix-button>
+
+<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="display: flex; width: 100%;">
+  <div style="display: flex; width: 100%; margin: 2rem">
+    <ix-button style=" margin-right: 1rem">BEFORE</ix-button>
     <ix-expanding-search placeholder="Search..."></ix-expanding-search>
     <ix-button style="margin-left: 1rem">AFTER</ix-button>
-    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
-  </body>
+  </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/expanding-search/expanding-search.e2e.ts b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts
@@ -19,15 +19,22 @@ regressionTest.describe('expanding-search', () => {
       .locator('ix-expanding-search .input-container.expanded')
       .waitFor();
     await page.waitForTimeout(1000);
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.05,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
   regressionTest('basic not expanded', async ({ page }) => {
     await page.goto('expanding-search/basic');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.05,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('fullWidth', async ({ page }) => {
+    await page.goto('expanding-search/fullWidth');
+
+    await page.locator('ix-expanding-search button').click();
+    await page
+      .locator('ix-expanding-search .input-container.expanded')
+      .waitFor();
+    await page.waitForTimeout(1000);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 });
diff --git a/...e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-dark-linux.png b/...e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/....ts-snapshots/expanding-search-basic-1-chromium---theme-classic-light-linux.png b/....ts-snapshots/expanding-search-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...s/expanding-search-basic-not-expanded-1-chromium---theme-classic-dark-linux.png b/...s/expanding-search-basic-not-expanded-1-chromium---theme-classic-dark-linux.png
diff --git a/.../expanding-search-basic-not-expanded-1-chromium---theme-classic-light-linux.png b/.../expanding-search-basic-not-expanded-1-chromium---theme-classic-light-linux.png
diff --git a/...-snapshots/expanding-search-fullWidth-1-chromium---theme-classic-dark-linux.png b/...-snapshots/expanding-search-fullWidth-1-chromium---theme-classic-dark-linux.png
diff --git a/...snapshots/expanding-search-fullWidth-1-chromium---theme-classic-light-linux.png b/...snapshots/expanding-search-fullWidth-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/expanding-search/fullWidth/index.html b/packages/core/src/tests/expanding-search/fullWidth/index.html
@@ -0,0 +1,24 @@
+<!--
+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="display: flex; width: 100%;">
+  <div style="display: flex; width: 100%; margin: 2rem">
+    <ix-button style=" margin-right: 1rem">BEFORE</ix-button>
+    <ix-expanding-search full-width placeholder="Search..."></ix-expanding-search>
+    <ix-button style="margin-left: 1rem">AFTER</ix-button>
+  </div>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+
+</html>
diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -246,6 +246,7 @@ export const IxExpandingSearch = /*@__PURE__*/ defineContainer<JSX.IxExpandingSe
   'icon',
   'placeholder',
   'value',
+  'fullWidth',
   'valueChange'
 ]);