bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +00:00
Code Issues Releases Wiki Activity

[AC-1088] Truncating collection names on Groups table (#5236)

Browse Source 
* [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
This commit is contained in:
Rui Tomé
2023-06-12 10:56:03 +01:00
committed by GitHub
parent f436e97c29
commit 0ab982038c
6 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
libs/components/src/badge/badge.directive.ts
View File

@@ -26,11 +26,12 @@ const hoverStyles: Record<BadgeTypes, string[]> = {
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<Element>) {
constructor(private el: ElementRef<HTMLElement>) {
this.hasHoverEffects = el?.nativeElement?.nodeName != "SPAN";
}
}

14
libs/components/src/badge/badge.stories.ts
View File

@@ -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 class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType">Badge</span>
<span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge containing lengthy text</span>
<br><br>
<span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType">Badge</a>
<span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</a>
<br><br>
<span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType">Badge</button>
<span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</button>
`,
}),
};
@@ -72,3 +73,10 @@ export const Info: Story = {
badgeType: "info",
},
};
export const Truncated: Story = {
...Primary,
args: {
truncate: true,
},
};