-
Notifications
You must be signed in to change notification settings - Fork 7
feat(badge): Add CSS-based sizing, dot badge type, and improved outline implementation #1889
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
src/components/badge/badge.ts
Outdated
* @attr | ||
*/ | ||
@property({ reflect: true }) | ||
public size: BadgeSize = 'medium'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@copilot The size comes from igniteui-theming dependency and is not set as an input attribute.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated to use CSS-based sizing from the theming system. The size is now controlled via the --ig-size
CSS variable instead of a component attribute. Commit: ...
src/components/types.ts
Outdated
//#region component-specific | ||
export type AvatarShape = 'square' | 'circle' | 'rounded'; | ||
export type BadgeShape = 'rounded' | 'square'; | ||
export type BadgeSize = 'small' | 'medium' | 'large'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Badge size is set in css and comes from igniteui-theming
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed the BadgeSize
type. Sizing is now purely CSS-based using the theming system's --ig-size
variable and calculated --is-small
, --is-medium
, --is-large
properties. Commit: ...
Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Overview
This PR enhances the
igc-badge
component with CSS-based sizing using the theming system, a dot badge type for minimal indicators, and an improved outline implementation that follows WCAG AA accessibility standards. These changes align with the latest design handoff and provide more flexibility for badge usage across all four themes (Material, Bootstrap, Fluent, Indigo).New Features
1. CSS-Based Sizing
Badge sizing is now controlled through the theming system using CSS custom properties instead of a component attribute. This follows the established pattern where sizing comes from the
igniteui-theming
dependency.Three size variants are available:
Usage:
2. Dot Badge Type
Introduced a new
dot
boolean attribute for rendering minimal badges without content - perfect for notification indicators and status dots:The dot badge:
3. Improved Outline Implementation
Refactored the outline rendering to use CSS
outline
property instead ofbox-shadow: inset
, ensuring the outline is rendered outside the badge without affecting its internal size or content:Key improvements:
outline
withoutline-offset: -2px
for proper positioningTechnical Changes
API Updates
New Properties:
dot: boolean
- Renders minimal dot badge without content (default: false)Styling Enhancements
Sizing controlled via theming system using
--ig-size
CSS variableCSS custom properties calculated based on
--is-small
,--is-medium
,--is-large
:--_badge-font-size
- Font size based on badge size--_badge-icon-size
- Icon size based on badge size--_badge-padding
- Inline padding based on badge sizeImproved slotted icon sizing to respect badge size variants
Outline implementation uses CSS outline instead of box-shadow for cleaner rendering
All color variants properly styled for outlined badges with appropriate contrast
Theme Support
All changes are compatible with and tested across:
Testing
Accessibility
Breaking Changes
None. All changes are backward compatible. The default size matches the previous badge dimensions (medium/22px).
Related Issue
Fixes #1888
Original prompt
Fixes #1888
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.