[CL-221] Add chip-select component (#9021)

---------

Co-authored-by: William Martin <contact@willmartian.com>

libs/components/src/menu/menu-item.component.html

@@ -0,0 +1,11 @@
+<div class="tw-flex tw-w-full tw-justify-between tw-items-center tw-gap-2">
+  <span class="tw-flex tw-gap-2 tw-items-center tw-overflow-hidden">
+    <span #startSlot [ngClass]="{ 'tw-hidden': startSlot.childElementCount === 0 }">
+      <ng-content select="[slot=start]"></ng-content>
+    </span>
+    <span class="tw-truncate"><ng-content></ng-content></span>
+  </span>
+  <span #endSlot [ngClass]="{ 'tw-hidden': endSlot.childElementCount === 0 }">
+    <ng-content select="[slot=end]"></ng-content>
+  </span>
+</div>

libs/components/src/menu/menu-item.directive.ts

@@ -1,12 +1,14 @@
 import { FocusableOption } from "@angular/cdk/a11y";
-import { Directive, ElementRef, HostBinding } from "@angular/core";
+import { Component, ElementRef, HostBinding } from "@angular/core";
 
-@Directive({
+@Component({
   selector: "[bitMenuItem]",
+  templateUrl: "menu-item.component.html",
 })
 export class MenuItemDirective implements FocusableOption {
   @HostBinding("class") classList = [
     "tw-block",
+    "tw-w-full",
     "tw-py-1",
     "tw-px-4",
     "!tw-text-main",
@@ -24,6 +26,9 @@ export class MenuItemDirective implements FocusableOption {
     "focus-visible:tw-ring-primary-700",
     "active:!tw-ring-0",
     "active:!tw-ring-offset-0",
+    "disabled:!tw-text-muted",
+    "disabled:hover:tw-bg-background",
+    "disabled:tw-cursor-not-allowed",
   ];
   @HostBinding("attr.role") role = "menuitem";
   @HostBinding("tabIndex") tabIndex = "-1";

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -16,13 +16,16 @@ import { MenuComponent } from "./menu.component";
 
 @Directive({
   selector: "[bitMenuTriggerFor]",
+  exportAs: "menuTrigger",
 })
 export class MenuTriggerForDirective implements OnDestroy {
   @HostBinding("attr.aria-expanded") isOpen = false;
   @HostBinding("attr.aria-haspopup") get hasPopup(): "menu" | "dialog" {
     return this.menu?.ariaRole || "menu";
   }
-  @HostBinding("attr.role") role = "button";
+  @HostBinding("attr.role")
+  @Input()
+  role = "button";
 
   @Input("bitMenuTriggerFor") menu: MenuComponent;
 

libs/components/src/menu/menu.mdx

@@ -10,7 +10,26 @@ Menus are used to help organize related options. Menus are most often used for i
 tables.
 
 <Story of={stories.ClosedMenu} />
-<Controls />
+
+<br />
+
+## Slots
+
+`bitMenuItem` supports the following slots:
+
+| Slot           | Description                                         |
+| -------------- | --------------------------------------------------- |
+| default        | primary text or arbitrary content                   |
+| `slot="start"` | commonly an icon or avatar; before the default slot |
+| `slot="end"`   | commonly an icon; after the default slot            |
+
+```html
+<button type="button" bitMenuItem>
+  <i class="bwi bwi-key" slot="start"></i>
+  Menu item with icons
+  <i class="bwi bwi-angle-right" slot="end"></i>
+</button>
+```
 
 ## Accessibility
 

libs/components/src/menu/menu.stories.ts

@@ -35,13 +35,21 @@ type Story = StoryObj<MenuTriggerForDirective>;
 export const OpenMenu: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-menu #myMenu="menuComponent">
         <a href="#" bitMenuItem>Anchor link</a>
         <a href="#" bitMenuItem>Another link</a>
         <button type="button" bitMenuItem>Button</button>
         <bit-menu-divider></bit-menu-divider>
-        <button type="button" bitMenuItem>Button after divider</button>
+        <button type="button" bitMenuItem>
+          <i class="bwi bwi-key" slot="start"></i>
+          Button with icons
+          <i class="bwi bwi-angle-right" slot="end"></i>
+        </button>
+        <button type="button" bitMenuItem disabled>
+          <i class="bwi bwi-clone" slot="start"></i>
+          Disabled button
+        </button>
       </bit-menu>
   
       <div class="tw-h-40">
@@ -55,7 +63,7 @@ export const OpenMenu: Story = {
 export const ClosedMenu: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <div class="tw-h-40">
         <button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
       </div>
@@ -65,7 +73,15 @@ export const ClosedMenu: Story = {
         <a href="#" bitMenuItem>Another link</a>
         <button type="button" bitMenuItem>Button</button>
         <bit-menu-divider></bit-menu-divider>
-        <button type="button" bitMenuItem>Button after divider</button>
+        <button type="button" bitMenuItem>
+          <i class="bwi bwi-key" slot="start"></i>
+          Button with icons
+          <i class="bwi bwi-angle-right" slot="end"></i>
+        </button>
+        <button type="button" bitMenuItem disabled>
+          <i class="bwi bwi-clone" slot="start"></i>
+          Disabled button
+        </button>
       </bit-menu>`,
   }),
 };