Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-08 19:18:02 +01:00
Code Issues Projects Releases Wiki Activity

[PM-2014] fix: badge alignment not applying properly

Browse Source
This commit is contained in:
Andreas Coroiu 2023-08-28 11:39:19 +02:00
parent f52890d8b9
commit ec9c972e24
No known key found for this signature in database
GPG Key ID: E70B5FFC81DFEC1A
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,19 @@ const hoverStyles: Record<BadgeTypes, string[]> = {
info: ["hover:tw-bg-info-700"],
};
const textAlignment = {
baseline: "tw-align-baseline",
sub: "tw-align-sub",
super: "tw-align-super",
textTop: "tw-align-text-top",
textBottom: "tw-align-text-bottom",
middle: "tw-align-middle",
top: "tw-align-top",
bottom: "tw-align-bottom",
};
type TextAlignment = keyof typeof textAlignment;
@Directive({
selector: "span[bitBadge], a[bitBadge], button[bitBadge]",
})
@ -31,6 +44,7 @@ export class BadgeDirective {
"tw-px-1.5",
"tw-font-bold",
"tw-text-center",
textAlignment[this.align],
"!tw-text-contrast",
"tw-rounded",
"tw-border-none",
@ -45,8 +59,7 @@ export class BadgeDirective {
]
.concat(styles[this.badgeType])
.concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
.concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : [])
.concat([`tw-align-${this.align}`]);
.concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
}
@HostBinding("attr.title") get title() {
return this.truncate ? this.el.nativeElement.textContent.trim() : null;
@ -54,7 +67,7 @@ export class BadgeDirective {
@Input() badgeType: BadgeTypes = "primary";
@Input() truncate = true;
@Input() align = "text-top";
@Input() align: TextAlignment = "textTop";
private hasHoverEffects = false;

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

@ -15,7 +15,7 @@ export default {
args: {
badgeType: "primary",
truncate: false,
align: "text-top",
align: "textTop",
},
parameters: {
design: {