From 0ab982038cc62edc8532e19b4b52613078b1327b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Tom=C3=A9?= <108268980+r-tome@users.noreply.github.com> Date: Mon, 12 Jun 2023 10:56:03 +0100 Subject: [PATCH] [AC-1088] Truncating collection names on Groups table (#5236) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [AC-1088] Set no-wrap to 'select all' column on groups table * [AC-1088] Using EllipsisPipe on GroupsComponent to truncate group names * [AC-1088] Reverted using no-wrap on column header * [AC-1088] Removed truncateCollectionNames * [AC-1088] Added 'truncate' option to badge and badge-list components * [AC-1088] Truncating collection names on groups component * [AC-1088] Marked EllipsisPipe as deprecated * [AC-1088] Removed EllipsisPipe from GroupsComponent * [AC-1088] Added badge truncate to storybook stories * [AC-1088] Setting badge css requirements for truncate * [AC-1088] Added storybook stories for truncated badges * [AC-1088] Set badges truncate default value to true * [AC-1088] Set badges to use class tw-inline-block and tw-align-text-top * [AC-1088] Set title on each badge list item if truncated * [AC-1088] Set title on badge if truncated * [AC-1088] Removed duplicate truncate on badge-list component * [AC-1088] Swapped setting badge title from ngAfterContentInit to HostBinding * [AC-1088] Configured badge stories to have the truncate option * [AC-1088] Fixed badges tooltip to not include commas added for screen readers on badge lists * [AC-1088] Added lengthy text to single badge on storybook * [AC-1088] In badge-list moved the commas out from the badges * [AC-1088] Removed irrelevant comment and moved the text align class next to other font classes --- libs/angular/src/platform/pipes/ellipsis.pipe.ts | 3 +++ .../src/badge-list/badge-list.component.html | 8 +++++--- .../src/badge-list/badge-list.component.ts | 1 + .../src/badge-list/badge-list.stories.ts | 14 +++++++++++++- libs/components/src/badge/badge.directive.ts | 12 +++++++++--- libs/components/src/badge/badge.stories.ts | 14 +++++++++++--- 6 files changed, 42 insertions(+), 10 deletions(-) diff --git a/libs/angular/src/platform/pipes/ellipsis.pipe.ts b/libs/angular/src/platform/pipes/ellipsis.pipe.ts index 081dba11ab..dd271f9462 100644 --- a/libs/angular/src/platform/pipes/ellipsis.pipe.ts +++ b/libs/angular/src/platform/pipes/ellipsis.pipe.ts @@ -3,6 +3,9 @@ import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "ellipsis", }) +/** + * @deprecated Use the tailwind class 'tw-truncate' instead + */ export class EllipsisPipe implements PipeTransform { transform(value: string, limit = 25, completeWords = false, ellipsis = "...") { if (value.length <= limit) { diff --git a/libs/components/src/badge-list/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html index cd0310d889..3e429b9430 100644 --- a/libs/components/src/badge-list/badge-list.component.html +++ b/libs/components/src/badge-list/badge-list.component.html @@ -1,8 +1,10 @@
- - {{ item }} + + + {{ item }} + , - + {{ "plusNMore" | i18n : (items.length - filteredItems.length).toString() }} diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts index 09cbfb9d97..64deae21b9 100644 --- a/libs/components/src/badge-list/badge-list.component.ts +++ b/libs/components/src/badge-list/badge-list.component.ts @@ -14,6 +14,7 @@ export class BadgeListComponent implements OnChanges { @Input() badgeType: BadgeTypes = "primary"; @Input() items: string[] = []; + @Input() truncate = true; @Input() get maxItems(): number | undefined { diff --git a/libs/components/src/badge-list/badge-list.stories.ts b/libs/components/src/badge-list/badge-list.stories.ts index 1c4536c1f9..92e9e14875 100644 --- a/libs/components/src/badge-list/badge-list.stories.ts +++ b/libs/components/src/badge-list/badge-list.stories.ts @@ -29,6 +29,7 @@ export default { ], args: { badgeType: "primary", + truncate: false, }, parameters: { design: { @@ -44,7 +45,7 @@ export const Default: Story = { render: (args) => ({ props: args, template: ` - + `, }), @@ -52,5 +53,16 @@ export const Default: Story = { badgeType: "info", maxItems: 3, items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"], + truncate: false, + }, +}; + +export const Truncated: Story = { + ...Default, + args: { + badgeType: "info", + maxItems: 3, + items: ["Badge 1", "Badge 2 containing lengthy text", "Badge 3", "Badge 4", "Badge 5"], + truncate: true, }, }; diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts index e8c771c48c..14dc96edd5 100644 --- a/libs/components/src/badge/badge.directive.ts +++ b/libs/components/src/badge/badge.directive.ts @@ -26,11 +26,12 @@ const hoverStyles: Record = { export class BadgeDirective { @HostBinding("class") get classList() { return [ - "tw-inline", + "tw-inline-block", "tw-py-0.5", "tw-px-1.5", "tw-font-bold", "tw-text-center", + "tw-align-text-top", "!tw-text-contrast", "tw-rounded", "tw-border-none", @@ -44,14 +45,19 @@ export class BadgeDirective { "focus:tw-ring-primary-700", ] .concat(styles[this.badgeType]) - .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : []); + .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : []) + .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"; + @Input() truncate = true; private hasHoverEffects = false; - constructor(el: ElementRef) { + constructor(private el: ElementRef) { this.hasHoverEffects = el?.nativeElement?.nodeName != "SPAN"; } } diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts index 2efe5450d0..5912250e0e 100644 --- a/libs/components/src/badge/badge.stories.ts +++ b/libs/components/src/badge/badge.stories.ts @@ -14,6 +14,7 @@ export default { ], args: { badgeType: "primary", + truncate: false, }, parameters: { design: { @@ -29,11 +30,11 @@ export const Primary: Story = { render: (args) => ({ props: args, template: ` - Span Badge + Span Badge containing lengthy text

- Link Badge + Link Badge

- Button + Button `, }), }; @@ -72,3 +73,10 @@ export const Info: Story = { badgeType: "info", }, }; + +export const Truncated: Story = { + ...Primary, + args: { + truncate: true, + }, +};