fix(core/category-filter, core/expanding-search): adjust clear button (…

…#303) Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Jan 23, 2023 · 87574a6 · 87574a6
1 parent ea0381e
commit 87574a6
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 22 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -688,14 +688,19 @@
       "encapsulation": "scoped",
       "dependents": [],
       "dependencies": [
+        "ix-icon-button",
         "ix-icon",
         "ix-filter-chip"
       ],
       "dependencyGraph": {
         "ix-category-filter": [
+          "ix-icon-button",
           "ix-icon",
           "ix-filter-chip"
         ],
+        "ix-icon-button": [
+          "ix-icon"
+        ],
         "ix-filter-chip": [
           "ix-icon"
         ]
@@ -4018,6 +4023,7 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [
+        "ix-category-filter",
         "ix-date-picker",
         "ix-drawer",
         "ix-dropdown-button",
@@ -4042,6 +4048,9 @@
         "ix-icon-button": [
           "ix-icon"
         ],
+        "ix-category-filter": [
+          "ix-icon-button"
+        ],
         "ix-date-picker": [
           "ix-icon-button"
         ],

diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss
@@ -22,13 +22,14 @@
     box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;
   }
 
-  .btn-close {
+  .reset-button {
     position: absolute;
     top: $tiny-space;
     right: $tiny-space;
-    min-width: $large-space;
-    width: $large-space;
-    height: $large-space;
+  }
+
+  .reset-button.hide-reset-button {
+    display: none;
   }
 
   .input-container {

diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx
@@ -528,6 +528,24 @@ export class CategoryFilter {
     }
   }
 
+  private getResetButton() {
+    return (
+      <ix-icon-button
+        onClick={() => this.resetFilter()}
+        class={{
+          'reset-button': true,
+          'hide-reset-button': !this.filterTokens.length && !this.category,
+        }}
+        variant="Secondary"
+        ghost
+        oval
+        icon="clear"
+        size="16"
+        tabindex="1"
+      ></ix-icon-button>
+    );
+  }
+
   render() {
     return (
       <Host>
@@ -585,19 +603,7 @@ export class CategoryFilter {
                 ></input>
               </ul>
             </div>
-            <button
-              class={{
-                btn: true,
-                'btn-invisible-secondary': true,
-                'btn-oval': true,
-                'btn-close': true,
-                'd-none': !this.filterTokens.length && !this.category,
-              }}
-              onClick={() => this.resetFilter()}
-              tabindex="1"
-            >
-              <span class="glyph glyph-error glyph-16"></span>
-            </button>
+            {this.getResetButton()}
           </div>
         </form>
 

diff --git a/packages/core/src/components/category-filter/test/basic/index.html b/packages/core/src/components/category-filter/test/basic/index.html
@@ -0,0 +1,62 @@
+<!--
+SPDX-FileCopyrightText: 2022 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 {
+        display: flex;
+        flex-direction: column;
+      }
+
+      form {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <ix-category-filter placeholder="Filter by"></ix-category-filter>
+    <script type="module">
+      (async () => {
+        await window.customElements.whenDefined('ix-category-filter');
+
+        const repeatCategories = false;
+        const filterState = {
+          tokens: ['Custom filter text'],
+          categories: [
+            {
+              id: 'ID_1',
+              value: 'IBM',
+              operator: 'Not equal',
+            },
+          ],
+        };
+        const categories = {
+          ID_1: {
+            label: 'Vendor',
+            options: ['Apple', 'MS', 'Siemens'],
+          },
+          ID_2: {
+            label: 'Product',
+            options: ['iPhone X', 'Windows', 'APS'],
+          },
+        };
+
+        const categoryFilter = document.querySelector('ix-category-filter');
+        categoryFilter.repeatCategories = repeatCategories;
+        categoryFilter.filterState = filterState;
+        categoryFilter.categories = categories;
+      })();
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/category-filter/test/category-filter.e2e.ts b/packages/core/src/components/category-filter/test/category-filter.e2e.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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('category-filter', () => {
+  regressionTest('should not have visual regressions', async ({ page }) => {
+    await page.goto('category-filter/test/basic');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...er-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/...er-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
diff --git a/...r-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/...r-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/components/expanding-search/expanding-search.scss b/packages/core/src/components/expanding-search/expanding-search.scss
@@ -101,6 +101,7 @@ $container-width: 11.5625rem;
     position: absolute;
     border-radius: var(--theme-input--border-radius);
     right: 0px;
+    margin-right: 0.25rem;
   }
 
   .input {

diff --git a/packages/core/src/components/expanding-search/expanding-search.tsx b/packages/core/src/components/expanding-search/expanding-search.tsx
@@ -158,7 +158,7 @@ export class ExpandingSearch {
               class="btn-clear"
               icon="clear"
               ghost={true}
-              size="24"
+              size="16"
               data-testid="clear-button"
               onClick={() => this.clearClicked()}
             />

diff --git a/yarn.lock b/yarn.lock
@@ -5090,10 +5090,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bootstrap@~5.2.0:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.2.tgz#834e053eed584a65e244d8aa112a6959f56e27a0"
-  integrity sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==
+bootstrap@^5.2.0:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
+  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
 
 boxen@^5.0.0:
   version "5.1.2"