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:
@@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user