rename, add menu, update styling

libs/components/src/chip-select/chip-select.component.ts

@@ -1,15 +1,16 @@
 import { BooleanInput, coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, QueryList, ContentChildren } from "@angular/core";
 
 import { ButtonModule } from "../button";
 import { IconButtonModule } from "../icon-button";
+import { MenuItemDirective, MenuModule } from "../menu";
 
 @Component({
   selector: "bit-chip",
-  templateUrl: "chip.template.html",
+  templateUrl: "chip-select.template.html",
   standalone: true,
-  imports: [CommonModule, ButtonModule, IconButtonModule],
+  imports: [CommonModule, ButtonModule, IconButtonModule, MenuModule],
 })
 export class ChipComponent {
   @Input()
@@ -20,5 +21,14 @@ export class ChipComponent {
     this._selected = coerceBooleanProperty(value);
   }
 
+  @ContentChildren(MenuItemDirective, { descendants: true })
+  menuItems: QueryList<MenuItemDirective>;
+
   private _selected = false;
+
+  clear(e: Event) {
+    //eslint-disable-next-line
+    console.log("hi");
+    e.stopPropagation();
+  }
 }

libs/components/src/chip-select/chip-select.stories.ts

@@ -1,13 +1,15 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
-import { ChipComponent } from "./chip.component";
+import { MenuModule } from "../menu";
+
+import { ChipComponent } from "./chip-select.component";
 
 export default {
   title: "Component Library/Chip",
   component: ChipComponent,
   decorators: [
     moduleMetadata({
-      imports: [],
+      imports: [MenuModule],
       providers: [],
     }),
   ],
@@ -22,11 +24,19 @@ export const Default: Story = {
       <bit-chip>
         <i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
         Label
+        <ng-container slot="menuItems">
+          <a href="#" bitMenuItem>Anchor link</a>
+          <a href="#" bitMenuItem>Another link</a>
+        </ng-container>
       </bit-chip>
 
       <bit-chip selected>
         <i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
         Label
+        <ng-container slot="menuItems">
+          <a href="#" bitMenuItem>Anchor link</a>
+          <a href="#" bitMenuItem>Another link</a>
+        </ng-container>
       </bit-chip>
     `,
   }),

libs/components/src/chip-select/chip-select.template.html

@@ -0,0 +1,27 @@
+<button
+  type="button"
+  class="tw-border tw-border-solid tw-rounded-3xl tw-border-text-muted tw-px-3 tw-py-1.5 tw-inline-flex tw-gap-1.5 tw-items-center focus-visible:tw-ring focus-visible:tw-ring-offset-1 focus-visible:tw-ring-primary-700 focus-visible:tw-z-10"
+  [ngClass]="selected ? 'tw-bg-text-muted tw-text-contrast hover:tw-bg-secondary-700' : 'tw-bg-background tw-text-muted hover:tw-bg-black/5'"
+  aria-expanded="false"
+  aria-controls="listbox-id"
+  buttonType="secondary"
+  [bitMenuTriggerFor]="chipSelectMenu"
+>
+  <span class="tw-pr-1">
+    <ng-content select="[slot=start]"></ng-content>
+  </span>
+  <ng-content></ng-content>
+  <button
+    *ngIf="selected"
+    bitIconButton="bwi-close"
+    buttonType="contrast"
+    size="small"
+    type="button"
+    class="tw-rounded-3xl before:tw-rounded-3xl tw-text-sm"
+    (click)="clear($event)"
+  ></button>
+  <i *ngIf="!selected" class="bwi bwi-angle-down tw-mt-1 tw-p-1"></i>
+</button>
+<bit-menu #chipSelectMenu>
+  <ng-content select="[slot=menuItems]"></ng-content>
+</bit-menu>

libs/components/src/chip/chip.template.html

@@ -1,14 +0,0 @@
-<button
-  bitButton
-  type="button"
-  aria-expanded="false"
-  aria-controls="listbox-id"
-  buttonType="secondary"
->
-  <span class="tw-pr-1">
-    <ng-content select="[slot=start]"></ng-content>
-  </span>
-  <ng-content></ng-content>
-  <button *ngIf="selected" bitIconButton="bwi-close" size="small" type="button"></button>
-  <button *ngIf="!selected" bitIconButton="bwi-angle-down" size="small" type="button"></button>
-</button>