Skip to content

Commit c4cf8b7

Browse files
MGREMYMGREMY
committed
feat(badge): add bordered badge
1 parent 5c58cfe commit c4cf8b7

File tree

7 files changed

+97
-9
lines changed

7 files changed

+97
-9
lines changed

‎apps/docs/docs/components/badge/_bordered.component.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<flowbite-badge [hasBorder]="true">Default</flowbite-badge>
2+
<flowbite-badge
3+
[hasBorder]="true"
4+
color="primary">
5+
Primary
6+
</flowbite-badge>
7+
<flowbite-badge
8+
[hasBorder]="true"
9+
color="blue">
10+
Blue
11+
</flowbite-badge>
12+
<flowbite-badge
13+
[hasBorder]="true"
14+
color="red">
15+
Red
16+
</flowbite-badge>
17+
<flowbite-badge
18+
[hasBorder]="true"
19+
color="green">
20+
Green
21+
</flowbite-badge>
22+
<flowbite-badge
23+
[hasBorder]="true"
24+
color="yellow">
25+
Yellow
26+
</flowbite-badge>
27+
<flowbite-badge
28+
[hasBorder]="true"
29+
color="indigo">
30+
Indigo
31+
</flowbite-badge>
32+
<flowbite-badge
33+
[hasBorder]="true"
34+
color="purple">
35+
Purple
36+
</flowbite-badge>
37+
<flowbite-badge
38+
[hasBorder]="true"
39+
color="pink">
40+
Pink
41+
</flowbite-badge>

‎apps/docs/docs/components/badge/_bordered.component.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { BadgeComponent } from 'flowbite-angular/badge';
2+
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
selector: 'flowbite-demo-badge-bordered',
7+
imports: [BadgeComponent],
8+
templateUrl: './_bordered.component.html',
9+
host: {
10+
class: 'flex flex wrap flex-row gap-3',
11+
},
12+
})
13+
export class FlowbiteBorderedComponent {}

‎apps/docs/docs/components/badge/index.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,18 @@ keyword: BadgePage
2626
2727
```
2828

29+
## Bordered badge
30+
31+
{{ NgDocActions.demo('flowbiteBorderedComponent', {container: false}) }}
32+
33+
```angular-html file="./_bordered.component.html" group="bordered" name="html"
34+
35+
```
36+
37+
```angular-ts file="./_bordered.component.ts" group="bordered" name="typescript"
38+
39+
```
40+
2941
## Badge as link
3042

3143
{{ NgDocActions.demo('flowbiteLinkComponent', {container: false}) }}

‎apps/docs/docs/components/badge/ng-doc.page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import ComponentCategory from '../ng-doc.category';
2+
import { FlowbiteBorderedComponent } from './_bordered.component';
23
import { FlowbiteDefaultComponent } from './_default.component';
34
import { FlowbiteIconOnlyComponent } from './_icon-only.component';
45
import { FlowbiteIconComponent } from './_icon.component';
@@ -19,6 +20,7 @@ const badge: NgDocPage = {
1920
order: 3,
2021
demos: {
2122
flowbiteDefaultComponent: FlowbiteDefaultComponent,
23+
flowbiteBorderedComponent: FlowbiteBorderedComponent,
2224
flowbiteIconOnlyComponent: FlowbiteIconOnlyComponent,
2325
flowbiteIconComponent: FlowbiteIconComponent,
2426
flowbiteLargeComponent: FlowbiteLargeComponent,

‎libs/flowbite-angular/badge/badge.component.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ export const FLOWBITE_BADGE_COLOR_DEFAULT_VALUE = new InjectionToken<keyof Badge
1919
'FLOWBITE_BADGE_COLOR_DEFAULT_VALUE'
2020
);
2121

22+
export const FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE = new InjectionToken<boolean>(
23+
'FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE'
24+
);
25+
2226
export const FLOWBITE_BADGE_SIZE_DEFAULT_VALUE = new InjectionToken<keyof BadgeSizes>(
2327
'FLOWBITE_BADGE_SIZE_DEFAULT_VALUE'
2428
);
@@ -40,6 +44,10 @@ export const badgeDefaultValueProvider = makeEnvironmentProviders([
4044
provide: FLOWBITE_BADGE_COLOR_DEFAULT_VALUE,
4145
useValue: 'primary',
4246
},
47+
{
48+
provide: FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE,
49+
useValue: false,
50+
},
4351
{
4452
provide: FLOWBITE_BADGE_SIZE_DEFAULT_VALUE,
4553
useValue: 'xs',
@@ -85,6 +93,10 @@ export class BadgeComponent extends BaseComponent<BadgeClass> {
8593
* @default primary
8694
*/
8795
public color = model(inject(FLOWBITE_BADGE_COLOR_DEFAULT_VALUE));
96+
/**
97+
* Set if the badge has border
98+
*/
99+
public hasBorder = model(inject(FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE));
88100
/**
89101
* Set the badge size
90102
*
@@ -113,6 +125,7 @@ export class BadgeComponent extends BaseComponent<BadgeClass> {
113125
public override fetchClass(): BadgeClass {
114126
return this.themeService.getClasses({
115127
color: this.color(),
128+
hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
116129
size: this.size(),
117130
isIconOnly: booleanToFlowbiteBoolean(this.isIconOnly()),
118131
isPill: booleanToFlowbiteBoolean(this.isPill()),

‎libs/flowbite-angular/badge/badge.theme.service.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export class BadgeThemeService implements FlowbiteThemeService<BadgeProperties>
3131
rootClass: twMerge(
3232
theme.root.base,
3333
theme.root.color[properties.color],
34+
theme.root.hasBorder[properties.hasBorder],
3435
theme.root.size[properties.size],
3536
theme.root.isPill[
3637
properties.isPill == 'enabled' || properties.isIconOnly == 'enabled'

‎libs/flowbite-angular/badge/badge.theme.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface BadgeSizes extends Pick<FlowbiteSizes, 'xs' | 'sm'> {
3333
*/
3434
export interface BadgeProperties {
3535
color: keyof BadgeColors;
36+
hasBorder: keyof FlowbiteBoolean;
3637
size: keyof BadgeSizes;
3738
isIconOnly: keyof FlowbiteBoolean;
3839
isPill: keyof FlowbiteBoolean;
@@ -46,6 +47,7 @@ export interface BadgeProperties {
4647
export interface BadgeTheme {
4748
root: {
4849
base: string;
50+
hasBorder: FlowbiteBoolean;
4951
color: BadgeColors;
5052
size: BadgeSizes;
5153
isPill: FlowbiteBoolean;
@@ -62,19 +64,23 @@ export const badgeTheme: BadgeTheme = createTheme({
6264
base: 'flex h-fit items-center gap-1 font-semibold',
6365
color: {
6466
primary:
65-
'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',
66-
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',
67-
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',
68-
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',
67+
'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',
68+
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',
69+
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',
70+
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',
6971
green:
70-
'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',
72+
'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',
7173
yellow:
72-
'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',
74+
'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',
7375
indigo:
74-
'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',
76+
'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',
7577
purple:
76-
'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',
77-
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',
78+
'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',
79+
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',
80+
},
81+
hasBorder: {
82+
enabled: 'border',
83+
disabled: 'border-0',
7884
},
7985
size: {
8086
xs: 'text-xs p-1',

0 commit comments

Comments
 (0)