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

[CL-160] Rename BadgeType to BadgeVariant (#7244)

Browse Source 
We're establishing a common language for the Component Library. As part of this work we're renaming componentType to variant. Starting with badges.
This commit is contained in:
Oscar Hinton
2023-12-19 19:22:37 +01:00
committed by GitHub
parent 6122dbf96f
commit 017da06f9a
30 changed files with 91 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
export type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
const styles: Record<BadgeTypes, string[]> = {
const styles: Record<BadgeVariant, string[]> = {
primary: ["tw-bg-primary-500"],
secondary: ["tw-bg-text-muted"],
success: ["tw-bg-success-500"],
@@ -11,7 +11,7 @@ const styles: Record<BadgeTypes, string[]> = {
info: ["tw-bg-info-500"],
};
const hoverStyles: Record<BadgeTypes, string[]> = {
const hoverStyles: Record<BadgeVariant, string[]> = {
primary: ["hover:tw-bg-primary-700"],
secondary: ["hover:tw-bg-secondary-700"],
success: ["hover:tw-bg-success-700"],
@@ -44,15 +44,22 @@ export class BadgeDirective {
"focus:tw-ring-offset-2",
"focus:tw-ring-primary-700",
]
.concat(styles[this.badgeType])
.concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
.concat(styles[this.variant])
.concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
.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";
/**
* Variant, sets the background color of the badge.
*/
@Input() variant: BadgeVariant = "primary";
/**
* Truncate long text
*/
@Input() truncate = true;
private hasHoverEffects = false;