diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index ed809be12355..2fd27cfdc2d9 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -12,6 +12,7 @@ import Islamic from "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js"; import Japanese from "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js"; import Persian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js"; +import Badge from "./dist/Badge.js"; import BusyIndicator from "./dist/BusyIndicator.js"; import Button from "./dist/Button.js"; import CheckBox from "./dist/CheckBox.js"; diff --git a/packages/main/src/Badge.hbs b/packages/main/src/Badge.hbs new file mode 100644 index 000000000000..e5041f2892b5 --- /dev/null +++ b/packages/main/src/Badge.hbs @@ -0,0 +1,7 @@ +
+ + + {{#if hasText}} + + {{/if}} +
\ No newline at end of file diff --git a/packages/main/src/Badge.js b/packages/main/src/Badge.js new file mode 100644 index 000000000000..0c1bd33c57f0 --- /dev/null +++ b/packages/main/src/Badge.js @@ -0,0 +1,130 @@ +import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; +import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; +import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js"; +import Icon from "./Icon.js"; + +// Template +import BadgeRenderer from "./build/compiled/BadgeRenderer.lit.js"; + +// Styles +import badgeCss from "./themes/Badge.css.js"; + +// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) +import "./ThemePropertiesProvider.js"; + +/** + * @public + */ +const metadata = { + tag: "ui5-badge", + properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */ { + + /** + * Defines the color scheme of the ui5-badge. + * There are 10 predefined schemes. Each scheme applies different values for the background-color> and border-color. + * To use one you can set a number from "1" to "10". + *

+ * Note: color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme. + * @type {string} + * @defaultvalue "" + * @public + */ + colorScheme: { + type: String, + }, + }, + slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ { + /** + * Defines the text of the ui5-badge. + *
Note: Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. + * + * @type {Node[]} + * @slot + * @public + */ + text: { + type: Node, + multiple: true, + }, + + /** + * Defines the ui5-icon to be displayed in the ui5-badge. + * + * @type {Icon} + * @slot + * @public + */ + icon: { + type: Icon, + }, + + }, + defaultSlot: "text", + renderer: BadgeRenderer, +}; + +/** + * @class + *

Overview

+ * + * The ui5-badge is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes. + * It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.). + * + *

Usage Guidelines

+ * + * + *

ES6 Module Import

+ * + * import "@ui5/webcomponents/dist/Badge"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.Badge + * @extends sap.ui.webcomponents.base.UI5Element + * @tagname ui5-badge + * @since 0.12.0 + * @public + */ +class Badge extends UI5Element { + static get metadata() { + return metadata; + } + + static get renderer() { + return BadgeRenderer; + } + + static get styles() { + return badgeCss; + } + + onBeforeRendering() { + if (this.hasIcon) { + this.setAttribute("__has-icon", ""); + } else { + this.removeAttribute("__has-icon"); + } + } + + get hasText() { + return !!this.textContent.trim().length; + } + + get hasIcon() { + return !!this.icon; + } + + get rtl() { + return getEffectiveRTL() ? "rtl" : undefined; + } +} + +Bootstrap.boot().then(_ => { + Badge.define(); +}); + +export default Badge; diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css new file mode 100644 index 000000000000..b4641daff574 --- /dev/null +++ b/packages/main/src/themes/Badge.css @@ -0,0 +1,194 @@ +:host(ui5-badge:not([hidden])) { + display: inline-flex; + height: 1.125rem; + min-width: 1.125rem; + max-width: 100%; + padding: 0 0.625rem; + color: var(--sapUiBaseText); + background: var(--sapUiGroupContentBackground); + border: solid 1px var(--sapUiGroupContentBorderColor); + border-radius: 1.125rem; + box-sizing: border-box; + font-size: var(--sapMFontSmallSize); + text-align: center; +} + +/* Bagde with Icon */ +:host(ui5-badge[__has-icon]) { + padding: 0 0.3125rem; +} + +:host(ui5-badge[__has-icon]) .ui5-badge-text { + padding-left: 0.1875rem; +} + +/* RTL */ +:host(ui5-badge[__has-icon]) .ui5-badge-wrapper[rtl] .ui5-badge-text { + padding-right: 0.1875rem; +} + +/* Scheme 1 */ +:host(ui5-badge[color-scheme="1"]) { + background-color: var(--ui5-badge-bg-color-scheme-1); + border-color: var(--ui5-badge-border-color-scheme-1); +} + +/* Scheme 2 */ +:host(ui5-badge[color-scheme="2"]) { + background-color: var(--ui5-badge-bg-color-scheme-2); + border-color: var(--ui5-badge-border-color-scheme-2); +} + +/* Scheme 3 */ +:host(ui5-badge[color-scheme="3"]) { + background-color: var(--ui5-badge-bg-color-scheme-3); + border-color: var(--ui5-badge-border-color-scheme-3); +} + +/* Scheme 4 */ +:host(ui5-badge[color-scheme="4"]) { + background-color: var(--ui5-badge-bg-color-scheme-4); + border-color: var(--ui5-badge-border-color-scheme-4); +} + +/* Scheme 5 */ +:host(ui5-badge[color-scheme="5"]) { + background-color: var(--ui5-badge-bg-color-scheme-5); + border-color: var(--ui5-badge-border-color-scheme-5); +} + +/* Scheme 6 */ +:host(ui5-badge[color-scheme="6"]) { + background-color: var(--ui5-badge-bg-color-scheme-6); + border-color: var(--ui5-badge-border-color-scheme-6); +} + +/* Scheme 7 */ +:host(ui5-badge[color-scheme="7"]) { + background-color: var(--ui5-badge-bg-color-scheme-7); + border-color: var(--ui5-badge-border-color-scheme-7); +} + +/* Scheme 8 */ +:host(ui5-badge[color-scheme="8"]) { + background-color: var(--ui5-badge-bg-color-scheme-8); + border-color: var(--ui5-badge-border-color-scheme-8); +} + +/* Scheme 9 */ +:host(ui5-badge[color-scheme="9"]) { + background-color: var(--ui5-badge-bg-color-scheme-9); + border-color: var(--ui5-badge-border-color-scheme-9); +} + +/* Scheme 10 */ +:host(ui5-badge[color-scheme="10"]) { + background-color: var(--ui5-badge-bg-color-scheme-10); + border-color: var(--ui5-badge-border-color-scheme-10); +} + +.ui5-badge-wrapper { + display: inline-flex; + align-items: center; + width: 100%; + box-sizing: border-box; +} + +.ui5-badge-text { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-transform: uppercase; + letter-spacing: 0.0125rem; +} + +/* ================================== */ +/* ======= IE pair of styles ======== */ +/* ================================== */ +ui5-badge:not([hidden]) { + display: inline-flex; + height: 1.125rem; + min-width: 1.125rem; + max-width: 100%; + padding: 0 0.625rem; + color: var(--sapUiBaseText); + background: var(--sapUiGroupContentBackground); + border: solid 1px var(--sapUiGroupContentBorderColor); + border-radius: 1.125rem; + box-sizing: border-box; + font-size: var(--sapMFontSmallSize); + text-align: center; +} + +ui5-badge[__has-icon] { + padding: 0 0.3125rem; +} + +ui5-badge[__has-icon] .ui5-badge-text { + padding-left: 0.1875rem; +} + +ui5-badge[__has-icon] .ui5-badge-wrapper[rtl] .ui5-badge-text { + padding-right: 0.1875rem; +} + +/* Scheme 1 */ +ui5-badge[color-scheme="1"] { + background-color: var(--ui5-badge-bg-color-scheme-1); + border-color: var(--ui5-badge-border-color-scheme-1); +} + +/* Scheme 2 */ +ui5-badge[color-scheme="2"] { + background-color: var(--ui5-badge-bg-color-scheme-2); + border-color: var(--ui5-badge-border-color-scheme-2); +} + +/* Scheme 3 */ +ui5-badge[color-scheme="3"] { + background-color: var(--ui5-badge-bg-color-scheme-3); + border-color: var(--ui5-badge-border-color-scheme-3); +} + +/* Scheme 4 */ +ui5-badge[color-scheme="4"] { + background-color: var(--ui5-badge-bg-color-scheme-4); + border-color: var(--ui5-badge-border-color-scheme-4); +} + +/* Scheme 5 */ +ui5-badge[color-scheme="5"] { + background-color: var(--ui5-badge-bg-color-scheme-5); + border-color: var(--ui5-badge-border-color-scheme-5); +} + +/* Scheme 6 */ +ui5-badge[color-scheme="6"] { + background-color: var(--ui5-badge-bg-color-scheme-6); + border-color: var(--ui5-badge-border-color-scheme-6); +} + +/* Scheme 7 */ +ui5-badge[color-scheme="7"] { + background-color: var(--ui5-badge-bg-color-scheme-7); + border-color: var(--ui5-badge-border-color-scheme-7); +} + +/* Scheme 8 */ +ui5-badge[color-scheme="8"] { + background-color: var(--ui5-badge-bg-color-scheme-8); + border-color: var(--ui5-badge-border-color-scheme-8); +} + +/* Scheme 9 */ +ui5-badge[color-scheme="9"] { + background-color: var(--ui5-badge-bg-color-scheme-9); + border-color: var(--ui5-badge-border-color-scheme-9); +} + +/* Scheme 10 */ +ui5-badge[color-scheme="10"] { + background-color: var(--ui5-badge-bg-color-scheme-10); + border-color: var(--ui5-badge-border-color-scheme-10); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css new file mode 100644 index 000000000000..7c33c6d6959b --- /dev/null +++ b/packages/main/src/themes/base/Badge-parameters.css @@ -0,0 +1,22 @@ +:root { + --ui5-badge-bg-color-scheme-1: var(--sapUiAccent1Lighten50); + --ui5-badge-border-color-scheme-1: var(--sapUiAccent1); + --ui5-badge-bg-color-scheme-2: var(--sapUiAccent2Lighten40); + --ui5-badge-border-color-scheme-2: var(--sapUiAccent2); + --ui5-badge-bg-color-scheme-3: var(--sapUiAccent3Lighten46); + --ui5-badge-border-color-scheme-3: var(--sapUiAccent3); + --ui5-badge-bg-color-scheme-4:var(--sapUiAccent4Lighten46); + --ui5-badge-border-color-scheme-4: var(--sapUiAccent4); + --ui5-badge-bg-color-scheme-5: var(--sapUiAccent5Lighten32); + --ui5-badge-border-color-scheme-5: var(--sapUiAccent5); + --ui5-badge-bg-color-scheme-6: var(--sapUiAccent6Lighten52); + --ui5-badge-border-color-scheme-6: var(--sapUiAccent6); + --ui5-badge-bg-color-scheme-7: var(--sapUiAccent7Lighten64); + --ui5-badge-border-color-scheme-7: var(--sapUiAccent7); + --ui5-badge-bg-color-scheme-8: var(--sapUiAccent8Lighten61); + --ui5-badge-border-color-scheme-8: var(--sapUiAccent8); + --ui5-badge-bg-color-scheme-9: var(--sapUiAccent9Lighten37); + --ui5-badge-border-color-scheme-9: var(--sapUiAccent9); + --ui5-badge-bg-color-scheme-10: var(--sapUiAccent10Lighten37); + --ui5-badge-border-color-scheme-10: var(--sapUiAccent10); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/component-derived-colors.js b/packages/main/src/themes/base/component-derived-colors.js index 3f8f5110bad4..fcc5d426dec5 100644 --- a/packages/main/src/themes/base/component-derived-colors.js +++ b/packages/main/src/themes/base/component-derived-colors.js @@ -31,6 +31,16 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur "--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5), "--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5), "--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10), + "--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50), + "--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40), + "--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46), + "--sapUiAccent4Lighten46": () => lighten("--sapUiAccent4", 46), + "--sapUiAccent5Lighten32": () => lighten("--sapUiAccent5", 32), + "--sapUiAccent6Lighten52": () => lighten("--sapUiAccent6", 52), + "--sapUiAccent7Lighten64": () => lighten("--sapUiAccent7", 64), + "--sapUiAccent8Lighten61": () => lighten("--sapUiAccent8", 61), + "--sapUiAccent9Lighten37": () => lighten("--sapUiAccent9", 37), + "--sapUiAccent10Lighten37": () => lighten("--sapUiAccent10", 37), }; return derivations; diff --git a/packages/main/src/themes/sap_belize/Badge-parameters.css b/packages/main/src/themes/sap_belize/Badge-parameters.css new file mode 100644 index 000000000000..ee6aa94a3cfd --- /dev/null +++ b/packages/main/src/themes/sap_belize/Badge-parameters.css @@ -0,0 +1,2 @@ + +@import "../base/Badge-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/base-parameters.css b/packages/main/src/themes/sap_belize/base-parameters.css index ab6a0c671502..5980e7d3ea3a 100644 --- a/packages/main/src/themes/sap_belize/base-parameters.css +++ b/packages/main/src/themes/sap_belize/base-parameters.css @@ -20,6 +20,9 @@ --sapAccentColor6: #0092d1; --sapAccentColor7: #1a9898; --sapAccentColor8: #759421; + --sapAccentColor9: #925ace; + --sapAccentColor10: #647987; + --sapBrandColor: var(--sapPrimary2); --sapHighlightColor: var(--sapBrandColor); --sapBaseColor: var(--sapPrimary3); diff --git a/packages/main/src/themes/sap_belize/global-parameters.css b/packages/main/src/themes/sap_belize/global-parameters.css index 1b4cffad76c1..8fd97981df2b 100644 --- a/packages/main/src/themes/sap_belize/global-parameters.css +++ b/packages/main/src/themes/sap_belize/global-parameters.css @@ -156,6 +156,8 @@ --sapUiAccent6: var(--sapAccentColor6); --sapUiAccent7: var(--sapAccentColor7); --sapUiAccent8: var(--sapAccentColor8); + --sapUiAccent9: var(--sapAccentColor9); + --sapUiAccent10: var(--sapAccentColor10); /* ===================================== */ /* Semantic Colors */ /* ===================================== */ diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index a25da154c9c6..cf5fe46467d1 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -1,6 +1,7 @@ @import "./base-parameters.css"; @import "./global-parameters.css"; +@import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "./BusyIndicator-parameters.css"; @import "./Popover-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css b/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css new file mode 100644 index 000000000000..4afe9c1714f8 --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcb/Badge-parameters.css @@ -0,0 +1,25 @@ + +@import "../base/Badge-parameters.css"; + +:root { + --ui5-badge-bg-color-scheme-1: var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-1: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-2: var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-2: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-3: var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-3: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-4:var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-4: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-5: var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-5: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-6:var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-6: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-7:var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-7: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-8: var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-8: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-9: var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-9: var(--sapUiGroupContentBorderColor); + --ui5-badge-bg-color-scheme-10: var(--sapUiGroupContentBackground); + --ui5-badge-border-color-scheme-10: var(--sapUiGroupContentBorderColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/base-parameters.css b/packages/main/src/themes/sap_belize_hcb/base-parameters.css index d2ff022baaaf..adb5459f2582 100644 --- a/packages/main/src/themes/sap_belize_hcb/base-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/base-parameters.css @@ -40,6 +40,9 @@ --sapAccentColor6: #6bd3ff; --sapAccentColor7: #7fc6c6; --sapAccentColor8: #b2e484; + --sapAccentColor9: #b995e0; + --sapAccentColor10: #b0bcc5; + /* Semantic Background Colors */ --sapErrorBackground: var(--sapHC_StandardBackground); --sapWarningBackground: var(--sapHC_StandardBackground); diff --git a/packages/main/src/themes/sap_belize_hcb/global-parameters.css b/packages/main/src/themes/sap_belize_hcb/global-parameters.css index ad9f00519c03..edc750a75676 100644 --- a/packages/main/src/themes/sap_belize_hcb/global-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/global-parameters.css @@ -155,6 +155,8 @@ --sapUiAccent6: var(--sapAccentColor6); --sapUiAccent7: var(--sapAccentColor7); --sapUiAccent8: var(--sapAccentColor8); + --sapUiAccent9: var(--sapAccentColor9); + --sapUiAccent10: var(--sapAccentColor10); --sapUiErrorBG: var(--sapErrorBackground); --sapUiWarningBG: var(--sapWarningBackground); diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index 5b5c276bfaf1..74090ddd823d 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -1,6 +1,7 @@ @import "./base-parameters.css"; @import "./global-parameters.css"; +@import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "./BusyIndicator-parameters.css"; @import "./CalendarHeader-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/Badge-parameters.css b/packages/main/src/themes/sap_fiori_3/Badge-parameters.css new file mode 100644 index 000000000000..ee6aa94a3cfd --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3/Badge-parameters.css @@ -0,0 +1,2 @@ + +@import "../base/Badge-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/base-parameters.css b/packages/main/src/themes/sap_fiori_3/base-parameters.css index bcf55cfabb3b..3117c422c963 100644 --- a/packages/main/src/themes/sap_fiori_3/base-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/base-parameters.css @@ -22,16 +22,16 @@ --sapPrimary6: #32363a; --sapPrimary7: #6a6d70; - --sapAccentColor1: #e38b16; - --sapAccentColor2: #dc7474; + --sapAccentColor1: #d08014; + --sapAccentColor2: #d04343; --sapAccentColor3: #db1f77; --sapAccentColor4: #c0399f; --sapAccentColor5: #6367de; - --sapAccentColor6: #5899da; - --sapAccentColor7: #13a4b4; + --sapAccentColor6: #286eb4; + --sapAccentColor7: #0f828f; --sapAccentColor8: #7ca10c; - --sapAccentColor9: #925ace; - --sapAccentColor10: #8497a4; + --sapAccentColor9: #925ace; + --sapAccentColor10: #647987; --sapErrorBorderColor: var(--sapNegativeColor); --sapWarningBorderColor: var(--sapCriticalColor); diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index 2ae269bc7854..6b8f85d0ee31 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -1,6 +1,7 @@ @import "./base-parameters.css"; @import "./global-parameters.css"; +@import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "./BusyIndicator-parameters.css"; @import "./Card-parameters.css"; diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Badge.html b/packages/main/test/sap/ui/webcomponents/main/pages/Badge.html new file mode 100644 index 000000000000..5ee98fd387e4 --- /dev/null +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Badge.html @@ -0,0 +1,76 @@ + + + + + + + + Badge + + + + + + + + + + + + + + +
+

Badges

+ This is a info label
+ Required Required Required
+ Hello world
+ Damn you are right
+ Solution provided
+ Available
+ Required
+ Required
+ Required
+ IN WAREHOUSE
+ + + done + + + + + + in process + + + + + + + + + pending + + + + + + + +
+ + + \ No newline at end of file diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Components.html b/packages/main/test/sap/ui/webcomponents/main/pages/Components.html index d2067d7a561e..b709230cb265 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Components.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Components.html @@ -37,6 +37,7 @@ + diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Badge.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Badge.sample.html new file mode 100644 index 000000000000..d58ac4f92475 --- /dev/null +++ b/packages/main/test/sap/ui/webcomponents/main/samples/Badge.sample.html @@ -0,0 +1,137 @@ + + + + + <ui5-badge> + + + + + + + + + + + + + + + + + + + + + +
+

Badge

+
+ +
+
+ +
<ui5-badge>
+ +
+

Basic Badge

+
+ available 1 + required 2 + 3K + bug 4 + in process 5 + in warehouse 6 + 7$ + solution provided 8 + pending release 9 + customer action 10 + This would truncate as it is too long +
+ 

+<ui5-badge color-scheme="1">available 1</ui5-badge>
+<ui5-badge color-scheme="2">required 2</ui5-badge>
+<ui5-badge color-scheme="3">3</ui5-badge>
+<ui5-badge color-scheme="4">bug 4</ui5-badge>
+<ui5-badge color-scheme="5">in process 5</ui5-badge>
+<ui5-badge color-scheme="6">in warehouse 6</ui5-badge>
+<ui5-badge color-scheme="7">7</ui5-badge>
+<ui5-badge color-scheme="8">solution provided 8</ui5-badge>
+<ui5-badge color-scheme="9">pending release 9</ui5-badge>
+<ui5-badge color-scheme="10">customer action 10</ui5-badge>
+<ui5-badge style="width:200px;">This would truncate as it is too long</ui5-badge>
+
+
+ +
+

Badge with Icon

+
+ + done + + + + + + in process + + + + + + + + + pending + + + + + + + +
+ 

+<ui5-badge color-scheme="1">
+	<ui5-icon src="sap-icon://accept" slot="icon"></ui5-icon>done
+</ui5-badge>
+<ui5-badge color-scheme="2">
+	<ui5-icon src="sap-icon://sap-ui5" slot="icon"></ui5-icon>
+</ui5-badge>
+<ui5-badge color-scheme="3">
+	<ui5-icon src="sap-icon://add-equipment" slot="icon"></ui5-icon>in process
+</ui5-badge>
+<ui5-badge color-scheme="4">
+	<ui5-icon src="sap-icon://lab" slot="icon"></ui5-icon>
+</ui5-badge>
+<ui5-badge color-scheme="5">
+	<ui5-icon src="sap-icon://email-read" slot="icon"></ui5-icon>
+</ui5-badge>
+<ui5-badge color-scheme="6">
+	<ui5-icon src="sap-icon://pending" slot="icon"></ui5-icon>pending
+</ui5-badge>
+<ui5-badge color-scheme="7">
+	<ui5-icon src="sap-icon://lightbulb" slot="icon"></ui5-icon>
+</ui5-badge>
+<ui5-badge color-scheme="8">
+	<ui5-icon src="sap-icon://locked" slot="icon"></ui5-icon>
+</ui5-badge>
+
+
+ + + + + + + diff --git a/packages/main/test/specs/Badge.spec.js b/packages/main/test/specs/Badge.spec.js new file mode 100644 index 000000000000..bf3f0424ffce --- /dev/null +++ b/packages/main/test/specs/Badge.spec.js @@ -0,0 +1,12 @@ +const assert = require("assert"); + +describe("Badge rendering", () => { + browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/Badge.html"); + + it("tests label not rendered if not text content", () => { + + const badgeLabel = browser.findElementDeep("#badgeIconOnly >>> .ui5-badge-text"); + + assert.ok(badgeLabel, "bagde label tag not rendered."); + }); +}); \ No newline at end of file diff --git a/packages/main/test/specs/Components.spec.js b/packages/main/test/specs/Components.spec.js index 8d989f891284..0536abbcd417 100644 --- a/packages/main/test/specs/Components.spec.js +++ b/packages/main/test/specs/Components.spec.js @@ -75,6 +75,7 @@ describe("General assertions", () => { it("tests components with 'hidden' property are not visible", () => { [ + browser.$("#badge2"), browser.$("#busyIndicator2"), browser.$("#btn2"), browser.$("#card2"), diff --git a/packages/playground/webapp/model/models.js b/packages/playground/webapp/model/models.js index a42095cb5847..9bfcfff51c48 100644 --- a/packages/playground/webapp/model/models.js +++ b/packages/playground/webapp/model/models.js @@ -84,8 +84,8 @@ sap.ui.define([ discoverSamples: function (oModel) { var newComponents = [ // Add new components here - "MultiComboBox", - "BusyIndicator" + "Badge", + "BusyIndicator", ]; return jQuery.ajax({ url: getRealBaseURI() + "/resources/sap/ui/webcomponents/main/playground.json"