From 67bf5b4323c68a6ca7e6292b47c68fe6a3223b56 Mon Sep 17 00:00:00 2001 From: Vicki League Date: Tue, 17 Dec 2024 15:47:45 -0500 Subject: [PATCH 1/2] [PM-16102] Increase clickable area for bit-item actions --- libs/components/src/badge/badge.component.html | 3 +++ .../badge/{badge.directive.ts => badge.component.ts} | 11 ++++++----- libs/components/src/badge/badge.module.ts | 6 +++--- libs/components/src/badge/badge.stories.ts | 10 +++++----- libs/components/src/badge/index.ts | 2 +- libs/components/src/item/item-action.component.ts | 4 ++++ 6 files changed, 22 insertions(+), 14 deletions(-) create mode 100644 libs/components/src/badge/badge.component.html rename libs/components/src/badge/{badge.directive.ts => badge.component.ts} (91%) diff --git a/libs/components/src/badge/badge.component.html b/libs/components/src/badge/badge.component.html new file mode 100644 index 00000000000..6f586ec3523 --- /dev/null +++ b/libs/components/src/badge/badge.component.html @@ -0,0 +1,3 @@ + + + diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.component.ts similarity index 91% rename from libs/components/src/badge/badge.directive.ts rename to libs/components/src/badge/badge.component.ts index f39f8f87639..dc55150a6a5 100644 --- a/libs/components/src/badge/badge.directive.ts +++ b/libs/components/src/badge/badge.component.ts @@ -1,6 +1,6 @@ // 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 { Component, ElementRef, HostBinding, Input } from "@angular/core"; import { FocusableElement } from "../shared/focusable-element"; @@ -28,11 +28,12 @@ const hoverStyles: Record = { 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 }], + templateUrl: "badge.component.html", }) -export class BadgeDirective implements FocusableElement { +export class BadgeComponent implements FocusableElement { @HostBinding("class") get classList() { return [ "tw-inline-block", @@ -62,7 +63,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) { diff --git a/libs/components/src/badge/badge.module.ts b/libs/components/src/badge/badge.module.ts index e1b8292363f..b40b2d7b751 100644 --- a/libs/components/src/badge/badge.module.ts +++ b/libs/components/src/badge/badge.module.ts @@ -1,11 +1,11 @@ import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; -import { BadgeDirective } from "./badge.directive"; +import { BadgeComponent } from "./badge.component"; @NgModule({ imports: [CommonModule], - exports: [BadgeDirective], - declarations: [BadgeDirective], + exports: [BadgeComponent], + declarations: [BadgeComponent], }) export class BadgeModule {} diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts index 6c57bc0cbfb..7f95058f4b8 100644 --- a/libs/components/src/badge/badge.stories.ts +++ b/libs/components/src/badge/badge.stories.ts @@ -1,15 +1,15 @@ 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], - declarations: [BadgeDirective], + declarations: [BadgeComponent], }), ], args: { @@ -22,9 +22,9 @@ export default { url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16956", }, }, -} as Meta; +} as Meta; -type Story = StoryObj; +type Story = StoryObj; export const Variants: Story = { render: (args) => ({ diff --git a/libs/components/src/badge/index.ts b/libs/components/src/badge/index.ts index a8f5babda91..ae19f4df288 100644 --- a/libs/components/src/badge/index.ts +++ b/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"; diff --git a/libs/components/src/item/item-action.component.ts b/libs/components/src/item/item-action.component.ts index 8cabf5c5c23..2424a2bffea 100644 --- a/libs/components/src/item/item-action.component.ts +++ b/libs/components/src/item/item-action.component.ts @@ -8,5 +8,9 @@ import { A11yCellDirective } from "../a11y/a11y-cell.directive"; imports: [], template: ``, providers: [{ provide: A11yCellDirective, useExisting: ItemActionComponent }], + host: { + class: + "[&>button]:tw-relative [&>button:not([bit-item-content])]:before:tw-content-[''] [&>button]:before:tw-absolute [&>button]:before:tw-block [&>button]:before:tw-top-[-0.75rem] [&>button]:before:tw-bottom-[-0.75rem] [&>button]:before:tw-right-[-0.25rem] [&>button]:before:tw-left-[-0.25rem]", + }, }) export class ItemActionComponent extends A11yCellDirective {} From fc4c0eb9804f34ab73c2496ae30f28e809e9410a Mon Sep 17 00:00:00 2001 From: Vicki League Date: Thu, 19 Dec 2024 13:48:18 -0500 Subject: [PATCH 2/2] update :before height and update story --- .../src/item/item-action.component.ts | 6 ++++- .../src/item/item-content.component.ts | 4 ++++ libs/components/src/item/item.stories.ts | 22 +++++++++---------- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/libs/components/src/item/item-action.component.ts b/libs/components/src/item/item-action.component.ts index 2424a2bffea..bbf4338022d 100644 --- a/libs/components/src/item/item-action.component.ts +++ b/libs/components/src/item/item-action.component.ts @@ -10,7 +10,11 @@ import { A11yCellDirective } from "../a11y/a11y-cell.directive"; providers: [{ provide: A11yCellDirective, useExisting: ItemActionComponent }], host: { class: - "[&>button]:tw-relative [&>button:not([bit-item-content])]:before:tw-content-[''] [&>button]:before:tw-absolute [&>button]:before:tw-block [&>button]:before:tw-top-[-0.75rem] [&>button]:before:tw-bottom-[-0.75rem] [&>button]:before:tw-right-[-0.25rem] [&>button]:before:tw-left-[-0.25rem]", + /** + * `top` and `bottom` units should be kept in sync with `item-content.component.ts`'s y-axis padding. + * we want this `:before` element to be the same height as the `item-content` + */ + "[&>button]:tw-relative [&>button:not([bit-item-content])]:before:tw-content-[''] [&>button]:before:tw-absolute [&>button]:before:tw-block bit-compact:[&>button]:before:tw-top-[-0.8rem] bit-compact:[&>button]:before:tw-bottom-[-0.8rem] [&>button]:before:tw-top-[-0.85rem] [&>button]:before:tw-bottom-[-0.85rem] [&>button]:before:tw-right-[-0.25rem] [&>button]:before:tw-left-[-0.25rem]", }, }) export class ItemActionComponent extends A11yCellDirective {} diff --git a/libs/components/src/item/item-content.component.ts b/libs/components/src/item/item-content.component.ts index 824b6a596a0..5e64416d9b5 100644 --- a/libs/components/src/item/item-content.component.ts +++ b/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 `:before` 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, diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts index 675172565f1..5adf9d3c49d 100644 --- a/libs/components/src/item/item.stories.ts +++ b/libs/components/src/item/item.stories.ts @@ -70,7 +70,7 @@ export const Default: Story = { - + @@ -163,7 +163,7 @@ const multipleActionListTemplate = /*html*/ ` - + @@ -182,7 +182,7 @@ const multipleActionListTemplate = /*html*/ ` - + @@ -201,7 +201,7 @@ const multipleActionListTemplate = /*html*/ ` - + @@ -220,7 +220,7 @@ const multipleActionListTemplate = /*html*/ ` - + @@ -239,7 +239,7 @@ const multipleActionListTemplate = /*html*/ ` - + @@ -258,7 +258,7 @@ const multipleActionListTemplate = /*html*/ ` - + @@ -332,14 +332,14 @@ export const SingleActionWithBadge: Story = { Foobar - Auto-fill + Fill Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo! - Auto-fill + Fill @@ -375,7 +375,7 @@ export const VirtualScrolling: Story = { - + @@ -405,7 +405,7 @@ export const WithoutBorderRadius: Story = { - +