fix(core/chip): applied inactive state to host

siemens · Feb 7, 2025 · 135c896 · 135c896
1 parent 3f5d0a4
commit 135c896
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
@@ -128,6 +128,9 @@ export class Chip {
       <Host
         tabIndex="-1"
         title={this.hostElement.textContent}
+        class={{
+          inactive: isInactive,
+        }}
         style={
           this.variant === 'custom'
             ? {
@@ -141,7 +144,6 @@ export class Chip {
           class={{
             container: true,
             outline: this.outline,
-            inactive: isInactive,
             alarm: this.variant === 'alarm',
             critical: this.variant === 'critical',
             info: this.variant === 'info',

diff --git a/packages/core/src/components/chip/test/chip.ct.ts b/packages/core/src/components/chip/test/chip.ct.ts
@@ -6,8 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { test } from '@utils/test';
 import { expect } from '@playwright/test';
+import { test } from '@utils/test';
 
 test('renders', async ({ mount, page }) => {
   await mount(`<ix-chip></ix-chip>`);
@@ -52,3 +52,9 @@ test.describe('chip test', () => {
     expect(normalChipSize.width).toEqual(outlineChipSize.width);
   });
 });
+
+test('check inactive class', async ({ mount, page }) => {
+  await mount(`<ix-chip active="false">test</ix-chip>`);
+  const chip = page.locator('ix-chip');
+  await expect(chip).toHaveClass('inactive hydrated');
+});