Merge pull request #2391 from kirbydesign/2341-deprecate-standalone-c…

…hip-component Deprecate standalone chip component
kirbydesign · Aug 5, 2022 · 536d352 · 536d352
2 parents 9fb5852 + 9fdf658
commit 536d352
Show file tree

Hide file tree

Showing 11 changed files with 13 additions and 119 deletions.
diff --git a/apps/cookbook/src/app/examples/chip-example/chip-example.component.scss b/apps/cookbook/src/app/examples/chip-example/chip-example.component.scss
diff --git a/apps/cookbook/src/app/examples/chip-example/chip-example.component.ts b/apps/cookbook/src/app/examples/chip-example/chip-example.component.ts
diff --git a/apps/cookbook/src/app/examples/examples.common.ts b/apps/cookbook/src/app/examples/examples.common.ts
@@ -9,7 +9,6 @@ import { ButtonExampleComponent } from './button-example/button-example.componen
 import { CalendarCardExampleComponent } from './calendar-example/calendar-card-example.component';
 import { CalendarExampleComponent } from './calendar-example/calendar-example.component';
 import { CheckboxExampleComponent } from './checkbox-example/checkbox-example.component';
-import { ChipExampleComponent } from './chip-example/chip-example.component';
 import { DividerExampleComponent } from './divider-example/divider-example.component';
 import { EmptyStateExampleComponent } from './empty-state-example/empty-state-example.component';
 import { ExamplesComponent } from './examples.component';
@@ -63,7 +62,6 @@ export const COMPONENT_DECLARATIONS: any[] = [
   FontsExampleComponent,
   SpinnerExampleComponent,
   SegmentedControlExampleComponent,
-  ChipExampleComponent,
   IconExampleComponent,
   CalendarExampleComponent,
   CalendarCardExampleComponent,

diff --git a/apps/cookbook/src/app/examples/examples.routes.ts b/apps/cookbook/src/app/examples/examples.routes.ts
@@ -13,7 +13,6 @@ import { CalendarExampleComponent } from './calendar-example/calendar-example.co
 import { CardExampleComponent } from './card-example/card-example.component';
 import { ChartsExampleComponent } from './charts-example/charts-example.component';
 import { CheckboxExampleComponent } from './checkbox-example/checkbox-example.component';
-import { ChipExampleComponent } from './chip-example/chip-example.component';
 import { EmptyStateExampleComponent } from './empty-state-example/empty-state-example.component';
 import { ExamplesComponent } from './examples.component';
 import { FabSheetExampleComponent } from './fab-sheet-example/fab-sheet-example.component';
@@ -365,10 +364,6 @@ export const routes: Routes = [
     path: 'virtual-scroll-list',
     component: VirtualScrollListExampleComponent,
   },
-  {
-    path: 'chip',
-    component: ChipExampleComponent,
-  },
   {
     path: 'avatar',
     component: AvatarExampleComponent,

diff --git a/apps/cookbook/src/app/examples/segmented-control-example/grouped/grouped.ts b/apps/cookbook/src/app/examples/segmented-control-example/grouped/grouped.ts
@@ -10,11 +10,14 @@ const config = {
     [selectedIndex]="selectedIndex"
     (segmentSelect)="onSegmentSelect($event)"
   ></kirby-segmented-control>
-  <kirby-chip
-    [text]="separateSegment.text"
+  <button
+    kirby-button
+    size="sm"
+    [attentionLevel]="selectedSegment === separateSegment ? '2' : '3'"
     (click)="onSegmentSelect(separateSegment)"
-    [isSelected]="selectedSegment === separateSegment">
-  </kirby-chip>
+  >
+    {{ separateSegment.text }}
+  </button>
 </div>
 <kirby-list [items]="filteredListItems">
   <kirby-item *kirbyListItemTemplate="let item">

diff --git a/apps/cookbook/src/app/showcase/chip-showcase/chip-showcase.component.html b/apps/cookbook/src/app/showcase/chip-showcase/chip-showcase.component.html
diff --git a/apps/cookbook/src/app/showcase/chip-showcase/chip-showcase.component.scss b/apps/cookbook/src/app/showcase/chip-showcase/chip-showcase.component.scss
diff --git a/apps/cookbook/src/app/showcase/chip-showcase/chip-showcase.component.ts b/apps/cookbook/src/app/showcase/chip-showcase/chip-showcase.component.ts
diff --git a/apps/cookbook/src/app/showcase/showcase.common.ts b/apps/cookbook/src/app/showcase/showcase.common.ts
@@ -17,7 +17,6 @@ import { CalendarShowcaseComponent } from './calendar-showcase/calendar-showcase
 import { CardShowcaseComponent } from './card-showcase/card-showcase.component';
 import { ChartShowcaseComponent } from './chart-showcase/chart-showcase.component';
 import { CheckboxShowcaseComponent } from './checkbox-showcase/checkbox-showcase.component';
-import { ChipShowcaseComponent } from './chip-showcase/chip-showcase.component';
 import { ColorsShowcaseComponent } from './colors-showcase/colors-showcase.component';
 import { EmptyStateShowcaseComponent } from './empty-state-showcase/empty-state-showcase.component';
 import { FabSheetShowcaseComponent } from './fab-sheet-showcase/fab-sheet-showcase.component';
@@ -74,7 +73,6 @@ export const COMPONENT_EXPORTS: any[] = [
   SpinnerShowcaseComponent,
   ModalShowcaseComponent,
   SegmentedControlShowcaseComponent,
-  ChipShowcaseComponent,
   BadgeShowcaseComponent,
   IconShowcaseComponent,
   CalendarShowcaseComponent,

diff --git a/apps/cookbook/src/app/showcase/showcase.routes.ts b/apps/cookbook/src/app/showcase/showcase.routes.ts
@@ -15,7 +15,6 @@ import { CalendarShowcaseComponent } from './calendar-showcase/calendar-showcase
 import { CardShowcaseComponent } from './card-showcase/card-showcase.component';
 import { ChartShowcaseComponent } from './chart-showcase/chart-showcase.component';
 import { CheckboxShowcaseComponent } from './checkbox-showcase/checkbox-showcase.component';
-import { ChipShowcaseComponent } from './chip-showcase/chip-showcase.component';
 import { ColorsShowcaseComponent } from './colors-showcase/colors-showcase.component';
 import { DividerShowcaseComponent } from './divider-showcase/divider-showcase.component';
 import { DropdownShowcaseComponent } from './dropdown-showcase/dropdown-showcase.component';
@@ -90,10 +89,6 @@ export const routes: Routes = [
         path: 'slide-button',
         component: SlideButtonShowcaseComponent,
       },
-      {
-        path: 'chip',
-        component: ChipShowcaseComponent,
-      },
       {
         path: 'divider',
         component: DividerShowcaseComponent,

diff --git a/libs/designsystem/src/lib/components/chip/chip.component.ts b/libs/designsystem/src/lib/components/chip/chip.component.ts
@@ -7,6 +7,12 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipComponent {
+  constructor() {
+    console.warn(
+      'DEPRECATION WARNING: `<kirby-chip>` will be removed from the API in Kirby v8. Use the Kirby button component instead.'
+    );
+  }
+
   @Input() text: string;
 
   @Input()