Closes #16276

Overview

This PR implements comprehensive enhancements to the igx-badge component based on the latest design handoff specifications. The changes introduce a dot property for minimal badge indicators, improved outline rendering, and accessibility improvements to ensure WCAG AA compliance across all themes.

Key Changes

1. Dot Property

Introduced a new boolean dot property that works with any badge type for status indicators:

<igx-badge dot type="success"></igx-badge>
<igx-badge dot outlined type="error"></igx-badge>

• Added dot as a boolean input property
• Fixed 8px minimal badge without any content
• Works with all badge types (primary, info, success, warning, error)
• Automatically hides value and icon content when dot is enabled
• Supports outlined style for additional visual flexibility

2. Improved Outline Implementation

Replaced the border-based outline with a proper CSS outline that doesn't affect internal sizing:

Before: box-shadow: inset 0 0 0 2px var(--border-color)
After: outline: 2px solid var(--border-color); outline-offset: -2px

This approach ensures the outline is rendered outside the badge content area without affecting padding or internal element positioning. Theme-specific outline widths are maintained (2px for Material/Fluent/Indigo, 1px for Bootstrap).

3. WCAG AA Accessibility Improvements

Updated foreground colors for colored badge variants to meet WCAG AA contrast requirements:

%igx-badge--success {
    background: color($color: 'success');
    color: white;  // Ensures proper contrast
    
    igx-icon {
        color: white;  // Icon contrast
    }
}

All colored badge types (info, success, warning, error) now use white text and icons to ensure proper contrast ratios.

4. CSS Variable-Driven Sizing

Badge sizing is now controlled entirely by CSS variables from the igniteui-theming dependency:

• Uses --ig-size CSS variable for size control
• No component-level size input property
• Sizes are defined in the igniteui-theming repository and consumed via theme tokens
• Consistent with the architectural pattern used across other components

5. Theme Compatibility

All enhancements work consistently across all 4 themes:

• Material
• Fluent
• Bootstrap
• Indigo

API Changes

New Dot Property

@Input({transform: booleanAttribute})
@HostBinding('class.igx-badge--dot')
public dot = false;

Sample Application

Enhanced the badge sample with comprehensive examples:

• Interactive badge configuration with property panel including dot toggle
• Dot badge demonstrations with all badge types
• Complete type variant showcase
• Avatar integration examples

Testing

• ✅ Added unit tests for dot property functionality
• ✅ Tests verify dot works with different badge types
• ✅ Build verification successful
• ✅ Linter validation passed

Breaking Changes

None. All changes are backward compatible. Existing badge implementations continue to work unchanged, with new features being opt-in via properties.

Documentation

• Updated README with new API documentation
• Added usage examples for dot property with different types
• Enhanced sample application with visual demonstrations

Fixes #16276

Fixes #16276

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.