[CL-160] Rename BadgeType to BadgeVariant (#7244)

We're establishing a common language for the Component Library. As part of this work we're renaming componentType to variant. Starting with badges.

libs/components/src/badge-list/badge-list.component.html

@@ -1,11 +1,11 @@
 <div class="tw-inline-flex tw-gap-2">
   <ng-container *ngFor="let item of filteredItems; let last = last">
-    <span bitBadge [badgeType]="badgeType" [truncate]="truncate">
+    <span bitBadge [variant]="variant" [truncate]="truncate">
       {{ item }}
     </span>
     <span class="tw-sr-only" *ngIf="!last || isFiltered">, </span>
   </ng-container>
-  <span *ngIf="isFiltered" bitBadge [badgeType]="badgeType">
+  <span *ngIf="isFiltered" bitBadge [variant]="variant">
     {{ "plusNMore" | i18n: (items.length - filteredItems.length).toString() }}
   </span>
 </div>

libs/components/src/badge-list/badge-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges } from "@angular/core";
 
-import { BadgeTypes } from "../badge";
+import { BadgeVariant } from "../badge";
 
 @Component({
   selector: "bit-badge-list",
@@ -12,7 +12,7 @@ export class BadgeListComponent implements OnChanges {
   protected filteredItems: string[] = [];
   protected isFiltered = false;
 
-  @Input() badgeType: BadgeTypes = "primary";
+  @Input() variant: BadgeVariant = "primary";
   @Input() items: string[] = [];
   @Input() truncate = true;
 

libs/components/src/badge-list/badge-list.stories.ts

@@ -28,7 +28,7 @@ export default {
     }),
   ],
   args: {
-    badgeType: "primary",
+    variant: "primary",
     truncate: false,
   },
   parameters: {
@@ -45,12 +45,12 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <bit-badge-list [badgeType]="badgeType" [maxItems]="maxItems" [items]="items" [truncate]="truncate"></bit-badge-list>
+      <bit-badge-list [variant]="variant" [maxItems]="maxItems" [items]="items" [truncate]="truncate"></bit-badge-list>
     `,
   }),
 
   args: {
-    badgeType: "info",
+    variant: "info",
     maxItems: 3,
     items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"],
     truncate: false,
@@ -60,7 +60,7 @@ export const Default: Story = {
 export const Truncated: Story = {
   ...Default,
   args: {
-    badgeType: "info",
+    variant: "info",
     maxItems: 3,
     items: ["Badge 1", "Badge 2 containing lengthy text", "Badge 3", "Badge 4", "Badge 5"],
     truncate: true,

libs/components/src/badge/badge.directive.ts

@@ -1,8 +1,8 @@
 import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
 
-export type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
 
-const styles: Record<BadgeTypes, string[]> = {
+const styles: Record<BadgeVariant, string[]> = {
   primary: ["tw-bg-primary-500"],
   secondary: ["tw-bg-text-muted"],
   success: ["tw-bg-success-500"],
@@ -11,7 +11,7 @@ const styles: Record<BadgeTypes, string[]> = {
   info: ["tw-bg-info-500"],
 };
 
-const hoverStyles: Record<BadgeTypes, string[]> = {
+const hoverStyles: Record<BadgeVariant, string[]> = {
   primary: ["hover:tw-bg-primary-700"],
   secondary: ["hover:tw-bg-secondary-700"],
   success: ["hover:tw-bg-success-700"],
@@ -44,15 +44,22 @@ export class BadgeDirective {
       "focus:tw-ring-offset-2",
       "focus:tw-ring-primary-700",
     ]
-      .concat(styles[this.badgeType])
-      .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
+      .concat(styles[this.variant])
+      .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
       .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
   }
   @HostBinding("attr.title") get title() {
     return this.truncate ? this.el.nativeElement.textContent.trim() : null;
   }
 
-  @Input() badgeType: BadgeTypes = "primary";
+  /**
+   * Variant, sets the background color of the badge.
+   */
+  @Input() variant: BadgeVariant = "primary";
+
+  /**
+   * Truncate long text
+   */
   @Input() truncate = true;
 
   private hasHoverEffects = false;

libs/components/src/badge/badge.stories.ts

@@ -13,7 +13,7 @@ export default {
     }),
   ],
   args: {
-    badgeType: "primary",
+    variant: "primary",
     truncate: false,
   },
   parameters: {
@@ -30,11 +30,11 @@ export const Primary: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge containing lengthy text</span>
+      <span class="tw-text-main">Span </span><span bitBadge [variant]="variant" [truncate]="truncate">Badge containing lengthy text</span>
       <br><br>
-      <span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</a>
+      <span class="tw-text-main">Link </span><a href="#" bitBadge [variant]="variant" [truncate]="truncate">Badge</a>
       <br><br>
-      <span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</button>
+      <span class="tw-text-main">Button </span><button bitBadge [variant]="variant" [truncate]="truncate">Badge</button>
     `,
   }),
 };
@@ -42,35 +42,35 @@ export const Primary: Story = {
 export const Secondary: Story = {
   ...Primary,
   args: {
-    badgeType: "secondary",
+    variant: "secondary",
   },
 };
 
 export const Success: Story = {
   ...Primary,
   args: {
-    badgeType: "success",
+    variant: "success",
   },
 };
 
 export const Danger: Story = {
   ...Primary,
   args: {
-    badgeType: "danger",
+    variant: "danger",
   },
 };
 
 export const Warning: Story = {
   ...Primary,
   args: {
-    badgeType: "warning",
+    variant: "warning",
   },
 };
 
 export const Info: Story = {
   ...Primary,
   args: {
-    badgeType: "info",
+    variant: "info",
   },
 };
 

libs/components/src/badge/index.ts

@@ -1,2 +1,2 @@
-export { BadgeDirective, BadgeTypes } from "./badge.directive";
+export { BadgeDirective, BadgeVariant } from "./badge.directive";
 export * from "./badge.module";

libs/components/src/multi-select/multi-select.component.html

@@ -26,7 +26,7 @@
     <button
       type="button"
       bitBadge
-      badgeType="primary"
+      variant="primary"
       class="tw-mr-1 disabled:tw-border-0"
       [disabled]="disabled"
       (click)="clear(item)"

libs/components/src/toggle-group/toggle-group.stories.ts

@@ -33,17 +33,17 @@ export const Default: Story = {
     template: `
       <bit-toggle-group [(selected)]="selected" aria-label="People list filter">
         <bit-toggle value="all">
-          All <span bitBadge badgeType="info">3</span>
+          All <span bitBadge variant="info">3</span>
         </bit-toggle>
-  
+
         <bit-toggle value="invited">
           Invited
         </bit-toggle>
-  
+
         <bit-toggle value="accepted">
-          Accepted <span bitBadge badgeType="info">2</span>
+          Accepted <span bitBadge variant="info">2</span>
         </bit-toggle>
-  
+
         <bit-toggle value="deactivated">
           Deactivated
         </bit-toggle>