From 900886a4d9a7329cb4523396a927013a18dc2810 Mon Sep 17 00:00:00 2001 From: GerardoPM Date: Mon, 7 Mar 2022 16:01:11 -0600 Subject: [PATCH 1/2] euiBadge_41.4.0 --- .../addon/utils/css-mappings/eui-badge.ts | 2 +- .../core/docs/display/badge-demo/demo1.md | 418 ++++++++++++------ site/package.json | 3 +- 3 files changed, 297 insertions(+), 126 deletions(-) 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 6b643be5f..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!'); + } } ``` diff --git a/site/package.json b/site/package.json index d07b8eaa6..4dd8b47ba 100644 --- a/site/package.json +++ b/site/package.json @@ -115,6 +115,7 @@ "edition": "octane" }, "volta": { - "extends": "../package.json" + "extends": "../package.json", + "yarn": "1.22.17" } } From 7d5312dd64d9753cd6bc8081c183e6a30296ae55 Mon Sep 17 00:00:00 2001 From: betocantu93 Date: Fri, 11 Mar 2022 12:53:45 -0600 Subject: [PATCH 2/2] do not extend here --- site/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/package.json b/site/package.json index 450459646..c45b418e7 100644 --- a/site/package.json +++ b/site/package.json @@ -117,7 +117,6 @@ "edition": "octane" }, "volta": { - "extends": "../package.json", - "yarn": "1.22.17" + "extends": "../package.json" } }