fix(core/dropdown-item): dropdown item disabled state events & icon c…

…olor (#390) Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Feb 23, 2023 · e906b50 · e906b50
1 parent 479a883
commit e906b50
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 2 deletions.
diff --git a/packages/core/scss/components/_dropdown.scss b/packages/core/scss/components/_dropdown.scss
@@ -145,6 +145,10 @@
   > .glyph {
     color: var(--theme-menu-item-icon--color);
 
+    &.disabled {
+      color: var(--color-weak-text);
+    }
+
     &.glyph-single-check {
       color: var(--theme-menu-item-icon-check--color);
     }

diff --git a/packages/core/src/components/dropdown-item/dropdown-item.scss b/packages/core/src/components/dropdown-item/dropdown-item.scss
@@ -43,6 +43,10 @@
   .label {
     @include ellipsis;
   }
+
+  &.disabled {
+    pointer-events: none;
+  }
 }
 
 ::slotted(ix-icon) {

diff --git a/packages/core/src/components/dropdown-item/dropdown-item.tsx b/packages/core/src/components/dropdown-item/dropdown-item.tsx
@@ -71,6 +71,7 @@ export class DropdownItem {
           checked: this.checked,
           'icon-text': this.label !== undefined && this.icon !== undefined,
           'icon-only': this.label === undefined && this.icon !== undefined,
+          disabled: this.disabled,
         }}
       >
         <button
@@ -90,6 +91,7 @@ export class DropdownItem {
               class={{
                 glyph: true,
                 [`glyph-${this.icon}`]: true,
+                disabled: this.disabled,
               }}
             ></span>
           ) : null}

diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
@@ -270,12 +270,13 @@ export class Dropdown {
           this.close();
         }
         break;
-
       case 'inside':
-        if (this.dropdownRef.contains(target)) {
+        if (this.dropdownRef.contains(target) && this.hostElement !== target) {
           this.close();
         }
         break;
+      case 'both':
+        if (this.hostElement !== target) this.close();
 
       default:
         this.close();

diff --git a/packages/core/src/tests/dropdown/disabled/index.html b/packages/core/src/tests/dropdown/disabled/index.html
@@ -0,0 +1,30 @@
+<!--
+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>
+  </head>
+  <body style="width: 100vw; height: 100vh">
+    <ix-button id="trigger">Open</ix-button>
+    <ix-dropdown trigger="trigger">
+      <ix-dropdown-item
+        id="test"
+        label="Item 1"
+        icon="print"
+        disabled
+      ></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item>Custom</ix-dropdown-item>
+    </ix-dropdown>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/dropdown/dropdown.e2e.ts b/packages/core/src/tests/dropdown/dropdown.e2e.ts
@@ -49,6 +49,17 @@ regressionTest.describe('dropdown', () => {
     });
   });
 
+  regressionTest('disabled', async ({ page }) => {
+    await page.goto('dropdown/disabled');
+
+    await page.locator('ix-button').click();
+    await page.waitForSelector('.dropdown-menu.show');
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      maxDiffPixelRatio: 0.05,
+    });
+  });
+
   regressionTest('handle multiple', async ({ page }) => {
     await page.goto('dropdown/multiple');
 

diff --git a/...wn.e2e.ts-snapshots/dropdown-disabled-1-chromium---theme-classic-dark-linux.png b/...wn.e2e.ts-snapshots/dropdown-disabled-1-chromium---theme-classic-dark-linux.png
diff --git a/...n.e2e.ts-snapshots/dropdown-disabled-1-chromium---theme-classic-light-linux.png b/...n.e2e.ts-snapshots/dropdown-disabled-1-chromium---theme-classic-light-linux.png