fix(core/chip): adjust width on outline variant (#1312)

.changeset/cuddly-boxes-provide.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/chip): adjust width on outline variant

packages/core/src/components/chip/chip-mixin.scss

@@ -35,8 +35,8 @@ $border-radius: 100px;
 
     .hidden {
       display: none;
-      width: 0px;
-      margin-right: 0px;
+      width: 0;
+      margin-right: 0;
     }
 
     .close-button-container {
@@ -50,15 +50,50 @@ $border-radius: 100px;
     }
   }
 
-  .container.icon {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
+  .container {
+    &.outline {
+      &.icon {
+        padding-left: calc(0.75rem - 1px);
+      }
+      &:not(.icon) {
+        padding-left: calc(0.5rem - 1px);
+      }
+      &.closable:not(.inactive) {
+        padding-right: calc(0.25rem - 1px);
+      }
+      &.closable.inactive, &:not(.closable) {
+        padding-right: calc(0.5rem - 1px);
+      }
+      &.icon:not(.closable) {
+        padding-right: calc(0.75rem - 1px);
+      }
+    }
 
-  .container.closable {
-    padding-right: 0.25rem;
+    &:not(.outline) {
+      &.icon {
+        padding-left: 0.75rem;
+      }
+      &:not(.icon) {
+        padding-left: 0.5rem;
+      }
+      &.closable:not(.inactive) {
+        padding-right: 0.25rem;
+      }
+      &.closable.inactive {
+        padding-right: 0.5rem;
+      }
+      &:not(.closable) {
+        &.icon {
+          padding-right: 0.75rem;
+        }
+        &:not(.icon) {
+          padding-right: 0.5rem;
+        }
+      }
+    }
   }
 
+
   .container.primary {
     background-color: var(--theme-color-primary);
     color: var(--theme-chip-primary--color);
@@ -107,8 +142,8 @@ $border-radius: 100px;
   }
 
   .container.outline {
-      border-width: 1px;
-      border-style: solid;
+    border-width: 1px;
+    border-style: solid;
   }
 
   @each $color in $predefined-chips {

packages/core/src/components/chip/test/chip.ct.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { test } from '@utils/test';
+import { expect } from '@playwright/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-chip></ix-chip>`);
+  const datePicker = page.locator('ix-chip');
+  await expect(datePicker).toHaveClass(/hydrated/);
+});
+
+test.describe('chip test', () => {
+  test.beforeEach(async ({ mount }) => {
+    await mount(
+      `
+      <ix-chip>Label</ix-chip>
+      <ix-chip outline>Label</ix-chip>
+      `
+    );
+  });
+
+  test('outline and normal variant should have the same width', async ({
+    page,
+  }) => {
+    await page.waitForSelector('ix-chip');
+
+    const normalChipElement = page.locator('ix-chip').first();
+    const outlineChipElement = page.locator('ix-chip').last();
+
+    const normalChipSize = await normalChipElement.boundingBox();
+    const outlineChipSize = await outlineChipElement.boundingBox();
+
+    expect(normalChipSize.width).toEqual(outlineChipSize.width);
+  });
+});

packages/core/src/components/pill/pill.scss

@@ -27,7 +27,7 @@
   .container {
     height: 100%;
     justify-content: center;
-    padding-right: 0.5rem;
+    padding-right: 0.5rem !important;
   }
 }