1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 16:23:44 +00:00

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

* [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

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,
},
};