diff --git a/projects/igniteui-angular/src/lib/badge/README.md b/projects/igniteui-angular/src/lib/badge/README.md index cd6e11958ac..a342c2e09c6 100644 --- a/projects/igniteui-angular/src/lib/badge/README.md +++ b/projects/igniteui-angular/src/lib/badge/README.md @@ -1,7 +1,7 @@ # igx-badge The **igx-badge** component is an absolutely positioned element that can be used in tandem with other components such as avatars, navigation menus, or anywhere else in an app where some active indication is required. -With the igx-badge you can display active count or an icon in several different predefined styles. +With the igx-badge you can display active count or an icon in several different predefined styles and sizes. A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html) # Usage @@ -14,9 +14,12 @@ A walkthrough of how to get started can be found [here](https://www.infragistics |:----------|:-------------:|:------| | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.| | `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. | +| `dot` | boolean | Set whether the badge is displayed as a minimal dot indicator without any content. Default is `false`. | | `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. | | `value` | string | Set the value to be displayed inside the badge. | | `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. | +| `outlined` | boolean | Set whether the badge should have an outline. Default is `false`. | +| `shape` | string | Set the shape of the badge to either `rounded` or `square`. Default is `rounded`. | # Examples @@ -26,3 +29,18 @@ Using `igx-badge` with the `igx-avatar` component to show active status. ``` + +Using `igx-badge` as a dot indicator for notifications. +```html + + +``` + +Using different badge types. +```html + + + + + +``` diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts b/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts index d6654f0974e..6d398d5e871 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts +++ b/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts @@ -11,7 +11,8 @@ describe('Badge', () => { InitBadgeWithDefaultsComponent, InitBadgeWithIconComponent, IgxBadgeComponent, - InitBadgeWithIconARIAComponent + InitBadgeWithIconARIAComponent, + InitBadgeWithDotComponent ] }).compileComponents(); })); @@ -87,6 +88,26 @@ describe('Badge', () => { const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0]; expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription); }); + + it('Initializes badge with dot property', () => { + const fixture = TestBed.createComponent(InitBadgeWithDotComponent); + fixture.detectChanges(); + const badge = fixture.componentInstance.badge; + + expect(badge.dot).toBeTruthy(); + expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy(); + }); + + it('Initializes success badge as dot', () => { + const fixture = TestBed.createComponent(InitBadgeWithDotComponent); + fixture.detectChanges(); + const badge = fixture.componentInstance.badge; + + expect(badge.type).toBe(IgxBadgeType.SUCCESS); + expect(badge.dot).toBeTruthy(); + expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('.igx-badge--success'))).toBeTruthy(); + }); }); @Component({ @@ -120,3 +141,11 @@ class InitBadgeWithIconComponent { class InitBadgeWithIconARIAComponent { @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent; } + +@Component({ + template: ``, + imports: [IgxBadgeComponent] +}) +class InitBadgeWithDotComponent { + @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent; +} diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts index fe3990d8b12..7d2671b99e4 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.ts +++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts @@ -183,6 +183,20 @@ export class IgxBadgeComponent { @HostBinding('class.igx-badge--outlined') public outlined = false; + /** + * Sets/gets whether the badge is displayed as a dot. + * When true, the badge will be rendered as a minimal 8px indicator without any content. + * Default value is `false`. + * + * @example + * ```html + * + * ``` + */ + @Input({transform: booleanAttribute}) + @HostBinding('class.igx-badge--dot') + public dot = false; + /** * Defines a human-readable, accessor, author-localized description for * the `type` and the `icon` or `value` of the element. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss index 909374bd288..a630908f0f7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss @@ -35,6 +35,10 @@ @extend %igx-badge--error !optional; } + @include m(dot) { + @extend %igx-badge--dot !optional; + } + @include m(outlined) { @extend %igx-badge--outlined !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 02a91673ef0..94044f175bd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -10,7 +10,7 @@ $variant: map.get($theme, '_meta', 'theme'); %igx-badge-display { - --size: #{rem(22px)}; + --size: var(--ig-size, #{rem(22px)}); --_badge-size: var(--size); display: inline-flex; @@ -45,7 +45,8 @@ } %igx-badge--outlined { - box-shadow: inset 0 0 0 rem(if($variant != 'bootstrap', 2px, 1px)) var-get($theme, 'border-color'); + outline: rem(if($variant != 'bootstrap', 2px, 1px)) solid var-get($theme, 'border-color'); + outline-offset: rem(-2px); } %igx-badge--square { @@ -59,18 +60,50 @@ %igx-badge--success { background: color($color: 'success'); + color: white; + + igx-icon { + color: white; + } } %igx-badge--info { background: color($color: 'info'); + color: white; + + igx-icon { + color: white; + } } %igx-badge--warn { background: color($color: 'warn'); + color: white; + + igx-icon { + color: white; + } } %igx-badge--error { background: color($color: 'error'); + color: white; + + igx-icon { + color: white; + } + } + + %igx-badge--dot { + --size: #{rem(8px)}; + min-width: var(--size); + min-height: var(--size); + padding: 0; + + .igx-badge__value, + igx-icon { + display: none; + } } %igx-badge--hidden { diff --git a/src/app/badge/badge.sample.html b/src/app/badge/badge.sample.html index 47e674f1fb3..ed76062ab36 100644 --- a/src/app/badge/badge.sample.html +++ b/src/app/badge/badge.sample.html @@ -1,21 +1,97 @@
-

Angular Badge

- -
- - - bluetooth - +

Angular Badge - Interactive

+
+
+ + With Value +
+
+ + bluetooth + + With Icon +
+
+ + + bluetooth + + On Avatar +
+
+ +

Dot Badges

+
+
+ + Primary Dot +
+
+ + Info Dot +
+
+ + Success Dot +
+
+ + Warning Dot +
+
+ + Error Dot +
+
+ + Outlined Dot +
+
+ + + Dot on Avatar +
+
+ +

Type Variants

+
+
+ + Primary +
+
+ + Info +
+
+ + Success +
+
+ + Warning +
+
+ + Error +
diff --git a/src/app/badge/badge.sample.scss b/src/app/badge/badge.sample.scss index 85f3261b048..692a4eca183 100644 --- a/src/app/badge/badge.sample.scss +++ b/src/app/badge/badge.sample.scss @@ -1,16 +1,52 @@ .wrapper { display: grid; grid-template-columns: repeat(2, 1fr); + gap: 48px; + padding: 24px; } .badges { - place-items: center; - display: grid; - grid-template-columns: subgrid; + place-items: start; + display: flex; + flex-direction: column; gap: 24px; } +.sample-title { + margin: 16px 0 8px 0; + font-size: 18px; + font-weight: 600; +} + +.badge-examples { + display: flex; + flex-wrap: wrap; + gap: 32px; + align-items: center; +} + +.badge-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + position: relative; + + span { + font-size: 12px; + color: #666; + margin-top: 4px; + } +} + .avatar-sample { display: flex; align-items: center; + position: relative; + + igx-badge { + position: absolute; + top: -4px; + right: -4px; + } } diff --git a/src/app/badge/badge.sample.ts b/src/app/badge/badge.sample.ts index f8bcb45c90a..b2f466206af 100644 --- a/src/app/badge/badge.sample.ts +++ b/src/app/badge/badge.sample.ts @@ -56,6 +56,12 @@ export class BadgeSampleComponent { type: 'boolean', defaultValue: false } + }, + dot: { + control: { + type: 'boolean', + defaultValue: false + } } }; @@ -83,7 +89,7 @@ export class BadgeSampleComponent { info: 'info', success: 'success', warning: 'warning', - error: 'danger', + error: 'danger' }) );