diff --git a/packages/core/addon/utils/css-mappings/eui-badge.ts b/packages/core/addon/utils/css-mappings/eui-badge.ts index 7b364d584..4daefd72d 100644 --- a/packages/core/addon/utils/css-mappings/eui-badge.ts +++ b/packages/core/addon/utils/css-mappings/eui-badge.ts @@ -8,7 +8,7 @@ export const VIS_COLORS = euiPaletteColorBlindBehindText(); export const colorToHexMap = { default: '#d3dae6', primary: VIS_COLORS[1], - secondary: VIS_COLORS[0], + success: VIS_COLORS[0], accent: VIS_COLORS[2], warning: VIS_COLORS[5], danger: VIS_COLORS[9] diff --git a/packages/core/docs/display/badge-demo/demo1.md b/packages/core/docs/display/badge-demo/demo1.md index d4aa3dfc2..09f8cba3f 100644 --- a/packages/core/docs/display/badge-demo/demo1.md +++ b/packages/core/docs/display/badge-demo/demo1.md @@ -1,157 +1,322 @@ # Demo ```hbs template - - Star Wars Lore - - - Darth Vader - - - - Hello - - - Danger! - - - Custom color - - - Clickable - - - Click Text Only! - - - Click Icon Only! - - - Icon left or right + + + Accepted color names + + + + default + + + hollow + + + primary + + + success + + + accent + + + danger + + + warning + + + + Custom color examples + + + + + #DDD + + + #AAA + + + #666 + + + #333 + + + #BADA55 + + + #FCF7BC + + + #FEA27F + + + #FFA500 + + + #0000FF + + + + + Disabled state + + + + Click me to disable this guy + + + I am + {{if this.disabled 'disabled' 'enabled!'}} + + + + Click on the Dot icon to turn the lightsaber on! + + + 0===|*|==| + + + ---------------------------------------------------------- + + + + + Badge with Icon + + + +

+ Badges can use icons on the left and right (default) sides. +

+ + + + + Star Wars Lore + + + + Darth Vader + + + + + + + Badge with onClick events - - On your left! - - - On your right! - - - Icon Only + + +

+ Badges can have onClick events applied to the badge itself or the icon + within the badge. The latter option is useful for when you might use badges + in other components (like a tag system with autocomplete where you need + close events). +

+ + + + + + Clickable + + + Click Text Only! + + + Click Icon Only! + + + + + + Badge for health status - - - - Disabled + +

+ Badges can work as health status indicators in places where there are a lot + of repeated statuses, e.g. in tables. +

+ + + + + + + Healthy + + + Warning + + + Critical + + + Unknown + + + + + Badge with href - - Click me to disable this guy - - - I am - {{if this.disabled "disabled" "enabled!"}} - - - - Click on the Dot icon to turn the lightsaber on! + + +

+ Badges can also be made to render anchor tags by passing an href. +

- - 0===|*|==| - - - ---------------------------------------------------------- - - - - Notification Badge + + + + Star Wars Lore + + + + Darth Vader + + + + + Beta badge type - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - - Beta Badge - + + + + + + + + + + + + + + + + + + + + + + + + + + Beta badges will also line up nicely with titles + + + + Clickable beta badges + + + + + + + + Beta badge type - - - + + + 1 + + + 4 + + + + Badge Group - - + + + - + Example of a good ol' badge group item 1 - + Example of a good ol' badge group item 2 - + Example of a good ol' badge group item 3 - + Example of a good ol' badge group item 4 Example of a good ol' badge group item 5 @@ -159,16 +324,17 @@ Example of a good ol' badge group item 6 + ``` ```js component @@ -199,5 +365,9 @@ export default class DemoIconComponent extends Component { clickBadge() { alert('BADGE TEXT clicked!'); } + @action + clickBetaBadge() { + alert('Beta Badge clicked!'); + } } ```