From c4cf8b74a8ad410fd97c389a96052ed7436a2d85 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Thu, 19 Dec 2024 11:18:58 +0100 Subject: [PATCH 1/2] feat(badge): add bordered badge --- .../components/badge/_bordered.component.html | 41 +++++++++++++++++++ .../components/badge/_bordered.component.ts | 13 ++++++ apps/docs/docs/components/badge/index.md | 12 ++++++ .../docs/docs/components/badge/ng-doc.page.ts | 2 + .../flowbite-angular/badge/badge.component.ts | 13 ++++++ .../badge/badge.theme.service.ts | 1 + libs/flowbite-angular/badge/badge.theme.ts | 24 +++++++---- 7 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 apps/docs/docs/components/badge/_bordered.component.html create mode 100644 apps/docs/docs/components/badge/_bordered.component.ts diff --git a/apps/docs/docs/components/badge/_bordered.component.html b/apps/docs/docs/components/badge/_bordered.component.html new file mode 100644 index 00000000..221f17da --- /dev/null +++ b/apps/docs/docs/components/badge/_bordered.component.html @@ -0,0 +1,41 @@ +Default + + Primary + + + Blue + + + Red + + + Green + + + Yellow + + + Indigo + + + Purple + + + Pink + diff --git a/apps/docs/docs/components/badge/_bordered.component.ts b/apps/docs/docs/components/badge/_bordered.component.ts new file mode 100644 index 00000000..523012ac --- /dev/null +++ b/apps/docs/docs/components/badge/_bordered.component.ts @@ -0,0 +1,13 @@ +import { BadgeComponent } from 'flowbite-angular/badge'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-badge-bordered', + imports: [BadgeComponent], + templateUrl: './_bordered.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteBorderedComponent {} diff --git a/apps/docs/docs/components/badge/index.md b/apps/docs/docs/components/badge/index.md index 3fdab710..7f456e43 100644 --- a/apps/docs/docs/components/badge/index.md +++ b/apps/docs/docs/components/badge/index.md @@ -26,6 +26,18 @@ keyword: BadgePage ``` +## Bordered badge + +{{ NgDocActions.demo('flowbiteBorderedComponent', {container: false}) }} + +```angular-html file="./_bordered.component.html" group="bordered" name="html" + +``` + +```angular-ts file="./_bordered.component.ts" group="bordered" name="typescript" + +``` + ## Badge as link {{ NgDocActions.demo('flowbiteLinkComponent', {container: false}) }} diff --git a/apps/docs/docs/components/badge/ng-doc.page.ts b/apps/docs/docs/components/badge/ng-doc.page.ts index b760e13c..24a9eb74 100644 --- a/apps/docs/docs/components/badge/ng-doc.page.ts +++ b/apps/docs/docs/components/badge/ng-doc.page.ts @@ -1,4 +1,5 @@ import ComponentCategory from '../ng-doc.category'; +import { FlowbiteBorderedComponent } from './_bordered.component'; import { FlowbiteDefaultComponent } from './_default.component'; import { FlowbiteIconOnlyComponent } from './_icon-only.component'; import { FlowbiteIconComponent } from './_icon.component'; @@ -19,6 +20,7 @@ const badge: NgDocPage = { order: 3, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, + flowbiteBorderedComponent: FlowbiteBorderedComponent, flowbiteIconOnlyComponent: FlowbiteIconOnlyComponent, flowbiteIconComponent: FlowbiteIconComponent, flowbiteLargeComponent: FlowbiteLargeComponent, diff --git a/libs/flowbite-angular/badge/badge.component.ts b/libs/flowbite-angular/badge/badge.component.ts index d6eb80dc..9ef5b4c7 100644 --- a/libs/flowbite-angular/badge/badge.component.ts +++ b/libs/flowbite-angular/badge/badge.component.ts @@ -19,6 +19,10 @@ export const FLOWBITE_BADGE_COLOR_DEFAULT_VALUE = new InjectionToken( + 'FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE' +); + export const FLOWBITE_BADGE_SIZE_DEFAULT_VALUE = new InjectionToken( 'FLOWBITE_BADGE_SIZE_DEFAULT_VALUE' ); @@ -40,6 +44,10 @@ export const badgeDefaultValueProvider = makeEnvironmentProviders([ provide: FLOWBITE_BADGE_COLOR_DEFAULT_VALUE, useValue: 'primary', }, + { + provide: FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE, + useValue: false, + }, { provide: FLOWBITE_BADGE_SIZE_DEFAULT_VALUE, useValue: 'xs', @@ -85,6 +93,10 @@ export class BadgeComponent extends BaseComponent { * @default primary */ public color = model(inject(FLOWBITE_BADGE_COLOR_DEFAULT_VALUE)); + /** + * Set if the badge has border + */ + public hasBorder = model(inject(FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE)); /** * Set the badge size * @@ -113,6 +125,7 @@ export class BadgeComponent extends BaseComponent { public override fetchClass(): BadgeClass { return this.themeService.getClasses({ color: this.color(), + hasBorder: booleanToFlowbiteBoolean(this.hasBorder()), size: this.size(), isIconOnly: booleanToFlowbiteBoolean(this.isIconOnly()), isPill: booleanToFlowbiteBoolean(this.isPill()), diff --git a/libs/flowbite-angular/badge/badge.theme.service.ts b/libs/flowbite-angular/badge/badge.theme.service.ts index 81251ede..8870781b 100644 --- a/libs/flowbite-angular/badge/badge.theme.service.ts +++ b/libs/flowbite-angular/badge/badge.theme.service.ts @@ -31,6 +31,7 @@ export class BadgeThemeService implements FlowbiteThemeService rootClass: twMerge( theme.root.base, theme.root.color[properties.color], + theme.root.hasBorder[properties.hasBorder], theme.root.size[properties.size], theme.root.isPill[ properties.isPill == 'enabled' || properties.isIconOnly == 'enabled' diff --git a/libs/flowbite-angular/badge/badge.theme.ts b/libs/flowbite-angular/badge/badge.theme.ts index d9975184..ee6dc1c3 100644 --- a/libs/flowbite-angular/badge/badge.theme.ts +++ b/libs/flowbite-angular/badge/badge.theme.ts @@ -33,6 +33,7 @@ export interface BadgeSizes extends Pick { */ export interface BadgeProperties { color: keyof BadgeColors; + hasBorder: keyof FlowbiteBoolean; size: keyof BadgeSizes; isIconOnly: keyof FlowbiteBoolean; isPill: keyof FlowbiteBoolean; @@ -46,6 +47,7 @@ export interface BadgeProperties { export interface BadgeTheme { root: { base: string; + hasBorder: FlowbiteBoolean; color: BadgeColors; size: BadgeSizes; isPill: FlowbiteBoolean; @@ -62,19 +64,23 @@ export const badgeTheme: BadgeTheme = createTheme({ base: 'flex h-fit items-center gap-1 font-semibold', color: { primary: - 'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-300 group-hover:bg-primary-200 dark:group-hover:bg-primary-600', - dark: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600', - blue: 'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300', - red: 'bg-red-100 dark:bg-red-200 text-red-800 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300', + 'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-300 group-hover:bg-primary-200 dark:group-hover:bg-primary-600 border-primary-300 dark:border-primary-800', + dark: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600 border-gray-300 dark:border-gray-600', + blue: 'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300 border-blue-300 dark:border-blue-800', + red: 'bg-red-100 dark:bg-red-200 text-red-800 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300 border-red-300 dark:border-red-800', green: - 'bg-green-100 dark:bg-green-200 text-green-800 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300', + 'bg-green-100 dark:bg-green-200 text-green-800 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300 border-green-300 dark:border-green-800', yellow: - 'bg-yellow-100 dark:bg-yellow-200 text-yellow-800 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300', + 'bg-yellow-100 dark:bg-yellow-200 text-yellow-800 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300 border-yellow-300 dark:border-yellow-800', indigo: - 'bg-indigo-100 dark:bg-indigo-200 text-indigo-800 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300', + 'bg-indigo-100 dark:bg-indigo-200 text-indigo-800 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300 border-indigo-300 dark:border-indigo-800', purple: - 'bg-purple-100 dark:bg-purple-200 text-purple-800 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300', - pink: 'bg-pink-100 dark:bg-pink-200 text-pink-800 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300', + 'bg-purple-100 dark:bg-purple-200 text-purple-800 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300 border-purple-300 dark:border-purple-800', + pink: 'bg-pink-100 dark:bg-pink-200 text-pink-800 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300 border-pink-300 dark:border-pink-800', + }, + hasBorder: { + enabled: 'border', + disabled: 'border-0', }, size: { xs: 'text-xs p-1', From adfebeb62c6c778d9fa66404ab7c802324d41760 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Thu, 19 Dec 2024 11:31:13 +0100 Subject: [PATCH 2/2] docs(badge): fix type in class --- apps/docs/docs/components/badge/_bordered.component.ts | 2 +- apps/docs/docs/components/badge/_default.component.ts | 2 +- apps/docs/docs/components/badge/_icon-only.component.ts | 2 +- apps/docs/docs/components/badge/_icon.component.ts | 2 +- apps/docs/docs/components/badge/_large.component.ts | 2 +- apps/docs/docs/components/badge/_link.component.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/docs/docs/components/badge/_bordered.component.ts b/apps/docs/docs/components/badge/_bordered.component.ts index 523012ac..da23a785 100644 --- a/apps/docs/docs/components/badge/_bordered.component.ts +++ b/apps/docs/docs/components/badge/_bordered.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [BadgeComponent], templateUrl: './_bordered.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteBorderedComponent {} diff --git a/apps/docs/docs/components/badge/_default.component.ts b/apps/docs/docs/components/badge/_default.component.ts index 1a8dfe35..f04c964a 100644 --- a/apps/docs/docs/components/badge/_default.component.ts +++ b/apps/docs/docs/components/badge/_default.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [BadgeComponent], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/badge/_icon-only.component.ts b/apps/docs/docs/components/badge/_icon-only.component.ts index 0500f85a..042e7445 100644 --- a/apps/docs/docs/components/badge/_icon-only.component.ts +++ b/apps/docs/docs/components/badge/_icon-only.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [BadgeComponent, IconComponent], templateUrl: './_icon-only.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteIconOnlyComponent {} diff --git a/apps/docs/docs/components/badge/_icon.component.ts b/apps/docs/docs/components/badge/_icon.component.ts index a47e767e..f03a9b2e 100644 --- a/apps/docs/docs/components/badge/_icon.component.ts +++ b/apps/docs/docs/components/badge/_icon.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [BadgeComponent, IconComponent], templateUrl: './_icon.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/badge/_large.component.ts b/apps/docs/docs/components/badge/_large.component.ts index 4dbf2b97..39d9547f 100644 --- a/apps/docs/docs/components/badge/_large.component.ts +++ b/apps/docs/docs/components/badge/_large.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [BadgeComponent], templateUrl: './_large.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteLargeComponent {} diff --git a/apps/docs/docs/components/badge/_link.component.ts b/apps/docs/docs/components/badge/_link.component.ts index 678e4fd5..852c8be1 100644 --- a/apps/docs/docs/components/badge/_link.component.ts +++ b/apps/docs/docs/components/badge/_link.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [BadgeComponent, FlowbiteRouterLinkDirective], templateUrl: './_link.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteLinkComponent {}