[PM-16102] Increase clickable area for bit-item actions (#12450)

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

@@ -0,0 +1,3 @@
+<span [ngClass]="{ 'tw-truncate tw-block': truncate }">
+  <ng-content></ng-content>
+</span>

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

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 import { FocusableElement } from "../shared/focusable-element";
 
@@ -28,12 +29,14 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
   info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
 };
 
-@Directive({
+@Component({
   selector: "span[bitBadge], a[bitBadge], button[bitBadge]",
-  providers: [{ provide: FocusableElement, useExisting: BadgeDirective }],
+  providers: [{ provide: FocusableElement, useExisting: BadgeComponent }],
+  imports: [CommonModule],
+  templateUrl: "badge.component.html",
   standalone: true,
 })
-export class BadgeDirective implements FocusableElement {
+export class BadgeComponent implements FocusableElement {
   @HostBinding("class") get classList() {
     return [
       "tw-inline-block",
@@ -63,7 +66,7 @@ export class BadgeDirective implements FocusableElement {
     ]
       .concat(styles[this.variant])
       .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
-      .concat(this.truncate ? ["tw-truncate", this.maxWidthClass] : []);
+      .concat(this.truncate ? this.maxWidthClass : []);
   }
   @HostBinding("attr.title") get titleAttr() {
     if (this.title !== undefined) {

libs/components/src/badge/badge.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 
-import { BadgeDirective } from "./badge.directive";
+import { BadgeComponent } from "./badge.component";
 
 @NgModule({
-  imports: [BadgeDirective],
-  exports: [BadgeDirective],
+  imports: [BadgeComponent],
+  exports: [BadgeComponent],
 })
 export class BadgeModule {}

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

@@ -1,14 +1,14 @@
 import { CommonModule } from "@angular/common";
 import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
-import { BadgeDirective } from "./badge.directive";
+import { BadgeComponent } from "./badge.component";
 
 export default {
   title: "Component Library/Badge",
-  component: BadgeDirective,
+  component: BadgeComponent,
   decorators: [
     moduleMetadata({
-      imports: [CommonModule, BadgeDirective],
+      imports: [CommonModule, BadgeComponent],
     }),
   ],
   args: {
@@ -21,9 +21,9 @@ export default {
       url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16956",
     },
   },
-} as Meta<BadgeDirective>;
+} as Meta<BadgeComponent>;
 
-type Story = StoryObj<BadgeDirective>;
+type Story = StoryObj<BadgeComponent>;
 
 export const Variants: Story = {
   render: (args) => ({

libs/components/src/badge/index.ts

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

libs/components/src/item/item-action.component.ts

@@ -8,5 +8,13 @@ import { A11yCellDirective } from "../a11y/a11y-cell.directive";
   imports: [],
   template: `<ng-content></ng-content>`,
   providers: [{ provide: A11yCellDirective, useExisting: ItemActionComponent }],
+  host: {
+    class:
+      /**
+       * `top` and `bottom` units should be kept in sync with `item-content.component.ts`'s y-axis padding.
+       * we want this `:after` element to be the same height as the `item-content`
+       */
+      "[&>button]:tw-relative [&>button:not([bit-item-content])]:after:tw-content-[''] [&>button]:after:tw-absolute [&>button]:after:tw-block bit-compact:[&>button]:after:tw-top-[-0.8rem] bit-compact:[&>button]:after:tw-bottom-[-0.8rem] [&>button]:after:tw-top-[-0.85rem] [&>button]:after:tw-bottom-[-0.85rem] [&>button]:after:tw-right-[-0.25rem] [&>button]:after:tw-left-[-0.25rem]",
+  },
 })
 export class ItemActionComponent extends A11yCellDirective {}

libs/components/src/item/item-content.component.ts

@@ -19,6 +19,10 @@ import { TypographyModule } from "../typography";
   templateUrl: `item-content.component.html`,
   host: {
     class:
+      /**
+       * y-axis padding should be kept in sync with `item-action.component.ts`'s `top` and `bottom` units.
+       * we want this to be the same height as the `item-action`'s `:after` element
+       */
       "fvw-target tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between",
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/components/src/item/item.stories.ts

@@ -70,7 +70,7 @@ export const Default: Story = {
 
         <ng-container slot="end">
           <bit-item-action>
-            <button type="button" bitBadge variant="primary">Auto-fill</button>
+            <button type="button" bitBadge variant="primary">Fill</button>
           </bit-item-action>
           <bit-item-action>
             <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -163,7 +163,7 @@ const multipleActionListTemplate = /*html*/ `
 
       <ng-container slot="end">
         <bit-item-action>
-          <button type="button" bitBadge variant="primary">Auto-fill</button>
+          <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
           <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -182,7 +182,7 @@ const multipleActionListTemplate = /*html*/ `
 
       <ng-container slot="end">
         <bit-item-action>
-          <button type="button" bitBadge variant="primary">Auto-fill</button>
+          <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
           <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -201,7 +201,7 @@ const multipleActionListTemplate = /*html*/ `
 
       <ng-container slot="end">
         <bit-item-action>
-          <button type="button" bitBadge variant="primary">Auto-fill</button>
+          <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
           <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -220,7 +220,7 @@ const multipleActionListTemplate = /*html*/ `
 
       <ng-container slot="end">
         <bit-item-action>
-          <button type="button" bitBadge variant="primary">Auto-fill</button>
+          <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
           <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -239,7 +239,7 @@ const multipleActionListTemplate = /*html*/ `
 
       <ng-container slot="end">
         <bit-item-action>
-          <button type="button" bitBadge variant="primary">Auto-fill</button>
+          <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
           <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -258,7 +258,7 @@ const multipleActionListTemplate = /*html*/ `
 
       <ng-container slot="end">
         <bit-item-action>
-          <button type="button" bitBadge variant="primary">Auto-fill</button>
+          <button type="button" bitBadge variant="primary">Fill</button>
         </bit-item-action>
         <bit-item-action>
           <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -332,14 +332,14 @@ export const SingleActionWithBadge: Story = {
         <bit-item>
           <a bit-item-content href="#">
             Foobar
-            <span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
+            <span bitBadge variant="primary" slot="default-trailing">Fill</span>
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
           </a>
         </bit-item>
         <bit-item>
           <a bit-item-content href="#">
             Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
-            <span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
+            <span bitBadge variant="primary" slot="default-trailing">Fill</span>
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
           </a>
         </bit-item>
@@ -375,7 +375,7 @@ export const VirtualScrolling: Story = {
 
             <ng-container slot="end">
               <bit-item-action>
-                <button type="button" bitBadge variant="primary">Auto-fill</button>
+                <button type="button" bitBadge variant="primary">Fill</button>
               </bit-item-action>
               <bit-item-action>
                 <button type="button" bitIconButton="bwi-clone" size="small"></button>
@@ -405,7 +405,7 @@ export const WithoutBorderRadius: Story = {
 
         <ng-container slot="end">
           <bit-item-action>
-            <button type="button" bitBadge variant="primary">Auto-fill</button>
+            <button type="button" bitBadge variant="primary">Fill</button>
           </bit-item-action>
           <bit-item-action>
             <button type="button" bitIconButton="bwi-clone"></button>