fix(core/pill): fix custom outline variant and add variant examples (#…

…968)

packages/angular-test-app/src/app/app-routing.module.ts

@@ -82,6 +82,7 @@ import Modal from 'src/preview-examples/modal-by-template';
 import ModalSizes from 'src/preview-examples/modal-sizes';
 import Pagination from 'src/preview-examples/pagination';
 import Pill from 'src/preview-examples/pill';
+import PillVariants from 'src/preview-examples/pill-variants';
 import PopoverNews from 'src/preview-examples/popover-news';
 import PushCard from 'src/preview-examples/push-card';
 import Radiobutton from 'src/preview-examples/radio-button';
@@ -306,6 +307,7 @@ const routes: Routes = [
       { path: 'message-bar', component: MessageBar },
       { path: 'pagination', component: Pagination },
       { path: 'pill', component: Pill },
+      { path: 'pill-variants', component: PillVariants },
       { path: 'popover-news', component: PopoverNews },
       { path: 'radio-button', component: Radiobutton },
       { path: 'select-editable', component: SelectEditable },

packages/angular-test-app/src/app/app.module.ts

@@ -90,6 +90,7 @@ import Modal from 'src/preview-examples/modal-by-template';
 import ModalSizes from 'src/preview-examples/modal-sizes';
 import Pagination from 'src/preview-examples/pagination';
 import Pill from 'src/preview-examples/pill';
+import PillVariants from 'src/preview-examples/pill-variants';
 import PopoverNews from 'src/preview-examples/popover-news';
 import PushCard from 'src/preview-examples/push-card';
 import Radiobutton from 'src/preview-examples/radio-button';
@@ -195,6 +196,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     MessageBar,
     Pagination,
     Pill,
+    PillVariants,
     PopoverNews,
     Radiobutton,
     SelectEditable,

packages/angular-test-app/src/preview-examples/pill-variants.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <ix-layout-grid>
+      <ix-row>
+        <ix-col>
+          <ix-pill variant="primary" icon="info"> Primary </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill variant="primary" icon="info" outline> Primary </ix-pill>
+        </ix-col>
+      </ix-row>
+
+      <ix-row>
+        <ix-col>
+          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill variant="alarm" icon="info" outline> Alarm </ix-pill>
+        </ix-col>
+      </ix-row>
+
+      <ix-row>
+        <ix-col>
+          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill variant="critical" icon="info" outline> Critical </ix-pill>
+        </ix-col>
+      </ix-row>
+
+      <ix-row>
+        <ix-col>
+          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill variant="warning" icon="info" outline> Warning </ix-pill>
+        </ix-col>
+      </ix-row>
+
+      <ix-row>
+        <ix-col>
+          <ix-pill variant="success" icon="info"> Success </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill variant="success" icon="info" outline> Success </ix-pill>
+        </ix-col>
+      </ix-row>
+
+      <ix-row>
+        <ix-col>
+          <ix-pill variant="info" icon="info"> Info </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill variant="info" icon="info" outline> Info </ix-pill>
+        </ix-col>
+      </ix-row>
+
+      <ix-row>
+        <ix-col>
+          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill variant="neutral" icon="info" outline> Neutral </ix-pill>
+        </ix-col>
+      </ix-row>
+
+      <ix-row>
+        <ix-col>
+          <ix-pill
+            variant="custom"
+            color="color-soft-text"
+            background="purple"
+            icon="info"
+          >
+            Custom
+          </ix-pill>
+        </ix-col>
+        <ix-col>
+          <ix-pill
+            variant="custom"
+            color="color-soft-text"
+            background="purple"
+            icon="info"
+            outline
+          >
+            Custom
+          </ix-pill>
+        </ix-col>
+      </ix-row>
+    </ix-layout-grid>
+  `,
+  styles: ['ix-pill { min-width: 7rem; }'],
+})
+export default class Pill {}

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

@@ -106,6 +106,11 @@ $border-radius: 100px;
     }
   }
 
+  .container.outline {
+      border-width: 1px;
+      border-style: solid;
+  }
+
   @each $color in $predefined-chips {
     .container.#{$color} {
       color: var(--theme-color-#{$color}--contrast);
@@ -160,7 +165,7 @@ $border-radius: 100px;
 
       &.outline {
         color: var(--theme-chip-outline--color);
-        border: solid 1px var(--theme-color-#{$color});
+        border-color: var(--theme-color-#{$color});
 
         @if $interaction {
           &:hover::after {

packages/core/src/components/chip/chip.tsx

@@ -136,6 +136,7 @@ export class Chip {
             primary: this.variant === 'primary',
             success: this.variant === 'success',
             warning: this.variant === 'warning',
+            custom: this.variant === 'custom',
             closable: this.closable,
             icon: !!this.icon,
           }}

packages/core/src/components/pill/pill.tsx

@@ -91,6 +91,7 @@ export class Pill {
             primary: this.variant === 'primary',
             success: this.variant === 'success',
             warning: this.variant === 'warning',
+            custom: this.variant === 'custom',
             closable: false,
             icon: !!this.icon,
           }}

packages/core/src/tests/chip/basic/index.html

@@ -34,7 +34,7 @@
         Primary
       </ix-chip>
 
-      <ix-chip variant="critical" closable outline> Alarm </ix-chip>
+      <ix-chip variant="critical" closable outline> Critical </ix-chip>
       <ix-chip variant="alarm" icon="print"> Alarm with icon </ix-chip>
       <ix-chip
         variant="alarm"
@@ -56,18 +56,6 @@
       >
         Alarm
       </ix-chip>
-      <ix-chip
-        background="purple"
-        color="green"
-        variant="custom"
-        icon="print"
-        style="width: 10rem"
-        closable
-        onClose="{console.log}"
-        onClick="{console.log}"
-      >
-        Custom
-      </ix-chip>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

packages/core/src/tests/pill/basic/index.html

@@ -28,7 +28,7 @@
         Primary
       </ix-pill>
 
-      <ix-pill variant="critical" outline> Alarm </ix-pill>
+      <ix-pill variant="critical" outline> Critical </ix-pill>
       <ix-pill variant="alarm" icon="print"> Alarm with icon </ix-pill>
       <ix-pill
         variant="alarm"
@@ -44,15 +44,27 @@
         style="width: 10rem"
         onClose="{console.log}"
       >
-        Alarm
+        Warning
+      </ix-pill>
+      <ix-pill
+        background="purple"
+        color="green"
+        variant="custom"
+        icon="print"
+        style="width: 10rem"
+        onClose="{console.log}"
+      >
+        Custom
       </ix-pill>
+
       <ix-pill
         background="purple"
         color="green"
         variant="custom"
         icon="print"
         style="width: 10rem"
         onClose="{console.log}"
+        outline
       >
         Custom
       </ix-pill>
@@ -77,7 +89,7 @@
         Primary
       </ix-pill>
 
-      <ix-pill align-left variant="critical" outline> Alarm </ix-pill>
+      <ix-pill align-left variant="critical" outline> Critical </ix-pill>
       <ix-pill align-left variant="alarm" icon="print">
         Alarm with icon
       </ix-pill>
@@ -110,6 +122,19 @@
       >
         Custom
       </ix-pill>
+
+      <ix-pill
+        align-left
+        background="purple"
+        color="green"
+        variant="custom"
+        icon="print"
+        style="width: 10rem"
+        onClose="{console.log}"
+        outline
+      >
+        Custom
+      </ix-pill>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

packages/documentation/docs/controls/pill.md

@@ -8,6 +8,11 @@ import SourceReactPill from './../auto-generated/previews/react/pill.md';
 import SourceAngularPill from './../auto-generated/previews/angular/pill.ts.md';
 import SourceVuePill from './../auto-generated/previews/vue/pill.md';
 
+import SourcePillVariants from './../auto-generated/previews/web-component/pill-variants.md';
+import SourceAngularPillVariants from './../auto-generated/previews/angular/pill-variants.ts.md';
+import SourceReactPillVariants from './../auto-generated/previews/react/pill-variants.md';
+import SourceVuePillVariants from './../auto-generated/previews/vue/pill-variants.md';
+
 # Pill
 
 ## Usage
@@ -22,6 +27,17 @@ frameworks={{
 }}>
 </Playground>
 
+## Variants
+<Playground
+name="pill-variants" height="24rem"
+frameworks={{
+  angular: SourceAngularPillVariants,
+  javascript: SourcePillVariants,
+  react: SourceReactPillVariants,
+  vue: SourceVuePillVariants
+}}>
+</Playground>
+
 ## Properties
 
 ### Props