From e5895f7d5076406769b516967137ba58f3567935 Mon Sep 17 00:00:00 2001 From: TeodorTaushanov Date: Tue, 9 Jan 2024 15:58:05 +0200 Subject: [PATCH] feat(ui5-badge): add different design types (#7564) * feat(ui5-badge): add different design types --- packages/main/src/Badge.hbs | 31 +- packages/main/src/Badge.ts | 167 +++++- .../main/src/i18n/messagebundle.properties | 20 +- packages/main/src/themes/Badge.css | 544 ++++++++++++++++-- .../main/src/themes/base/Badge-parameters.css | 109 +++- .../themes/sap_horizon/Badge-parameters.css | 8 +- .../sap_horizon_dark/Badge-parameters.css | 8 +- .../sap_horizon_hcb/Badge-parameters.css | 113 +++- .../sap_horizon_hcw/Badge-parameters.css | 110 +++- packages/main/src/types/BadgeDesign.ts | 69 +++ packages/main/test/pages/Badge.html | 128 ++++- packages/main/test/pages/Badge.js | 68 +++ packages/main/test/pages/styles/Badge.css | 12 +- packages/main/test/specs/Badge.spec.js | 40 ++ .../_stories/main/Badge/Badge.stories.ts | 122 +++- packages/theming/css-vars-usage.json | 150 +++++ 16 files changed, 1578 insertions(+), 121 deletions(-) create mode 100644 packages/main/src/types/BadgeDesign.ts create mode 100644 packages/main/test/pages/Badge.js diff --git a/packages/main/src/Badge.hbs b/packages/main/src/Badge.hbs index dfa26c9a76b1..9ee8eac0104a 100644 --- a/packages/main/src/Badge.hbs +++ b/packages/main/src/Badge.hbs @@ -1,9 +1,30 @@ -
- +{{#if interactive}} + +{{else}} +
+ {{> content}} +
+{{/if}} +{{#*inline "content"}} + + {{#if this._semanticIconName}} + + {{/if}} + {{badgeDescription}} {{#if hasText}} - + {{/if}} +{{/inline}} + + + - {{badgeDescription}} -
diff --git a/packages/main/src/Badge.ts b/packages/main/src/Badge.ts index 3e7374a0cf23..efc97decf861 100644 --- a/packages/main/src/Badge.ts +++ b/packages/main/src/Badge.ts @@ -1,16 +1,32 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js"; - +import Icon from "./Icon.js"; +import "@ui5/webcomponents-icons/dist/sys-help-2.js"; +import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; +import "@ui5/webcomponents-icons/dist/error.js"; +import "@ui5/webcomponents-icons/dist/alert.js"; +import "@ui5/webcomponents-icons/dist/information.js"; +import WrappingType from "./types/WrappingType.js"; +import BadgeDesign from "./types/BadgeDesign.js"; // Template import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js"; -import { BADGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; +import { + BADGE_DESCRIPTION_BADGE, + BADGE_DESCRIPTION_TAG, + BADGE_ROLE_DESCRIPTION, + BADGE_ERROR, + BADGE_WARNING, + BADGE_SUCCESS, + BADGE_INFORMATION, +} from "./generated/i18n/i18n-defaults.js"; // Styles import badgeCss from "./generated/themes/Badge.css.js"; @@ -19,14 +35,15 @@ import badgeCss from "./generated/themes/Badge.css.js"; * @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.). + * The ui5-badge is a component which serves + * the purpose to attract the user attention to some piece + * of information (state, quantity, condition, etc.). + * It can contain icon and text information, and its design can be chosen from specific design types. * *

Usage Guidelines

* * *

ES6 Module Import

@@ -47,8 +64,31 @@ import badgeCss from "./generated/themes/Badge.css.js"; renderer: litRender, template: BadgeTemplate, styles: badgeCss, + dependencies: [ + Icon, + ], }) + +/** + * Fired when the user clicks on an interactive badge. + * Note: The event will be fired if the interactive property is true + * @event sap.ui.webc.main.Badge#click + * @public + * @since 1.20 + */ +@event("click") class Badge extends UI5Element { + /** + * Defines the design type of the component. + * @type {string} + * @name sap.ui.webc.main.Badge.prototype.design + * @defaultvalue "Set3" + * @public + * @since 1.20 + */ + @property({ defaultValue: BadgeDesign.Set3 }) + design!: `${BadgeDesign}`; + /** * Defines the color scheme of the component. * There are 10 predefined schemes. @@ -63,6 +103,44 @@ class Badge extends UI5Element { @property({ defaultValue: "1" }) colorScheme!: string; + /** + * Defines if the default state icon is shown. + * @type {boolean} + * @name sap.ui.webc.main.Badge.prototype.hideStateIcon + * @defaultValue false + * @public + * @since 1.20 + */ + @property({ type: Boolean }) + hideStateIcon!: boolean; + + /** + * Defines if the component is interactive (focusable and pressable). + *
Note: The badge cannot be interactive + * when design property is BadgeDesign.Set3 + * @type {boolean} + * @name sap.ui.webc.main.Badge.prototype.interactive + * @defaultValue false + * @public + * @since 1.20 + */ + @property({ type: Boolean }) + interactive!: boolean; + + /** + * Defines how the text of a component will be displayed when there is not enough space. + *
Note: For option "Normal" the text will wrap and the + * words will not be broken based on hyphenation. + * + * @name sap.ui.webc.main.Badge.prototype.wrappingType + * @type {sap.ui.webc.main.types.WrappingType} + * @defaultvalue "None" + * @public + * @since 1.20 + */ + @property({ type: WrappingType, defaultValue: WrappingType.None }) + wrappingType!: `${WrappingType}`; + /** * Defines if the badge has an icon. * @private @@ -77,6 +155,13 @@ class Badge extends UI5Element { @property({ type: Boolean }) _iconOnly!: boolean; + /** + * Defines if the badge has "Tag" design type. + * @private + */ + @property({ type: Boolean }) + _isTagDesign!: boolean; + /** * Defines the text of the component. *
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. @@ -107,8 +192,28 @@ class Badge extends UI5Element { } onBeforeRendering() { - this._hasIcon = this.hasIcon; + this._hasIcon = this.hasIcon || !!this._semanticIconName; this._iconOnly = this.iconOnly; + this._isTagDesign = this.design !== BadgeDesign.Set3; + } + + get _roleDescription() { + return Badge.i18nBundle.getText(BADGE_ROLE_DESCRIPTION); + } + + get _valueState() { + switch (this.design) { + case BadgeDesign.Positive: + return Badge.i18nBundle.getText(BADGE_SUCCESS); + case BadgeDesign.Negative: + return Badge.i18nBundle.getText(BADGE_ERROR); + case BadgeDesign.Critical: + return Badge.i18nBundle.getText(BADGE_WARNING); + case BadgeDesign.Information: + return Badge.i18nBundle.getText(BADGE_INFORMATION); + } + + return undefined; } get hasText() { @@ -123,8 +228,52 @@ class Badge extends UI5Element { return this.hasIcon && !this.hasText; } + get _title() { + return this.title || undefined; + } + get badgeDescription() { - return Badge.i18nBundle.getText(BADGE_DESCRIPTION); + if (this.interactive) { + return undefined; + } + + if (this.design === BadgeDesign.Set3) { + return Badge.i18nBundle.getText(BADGE_DESCRIPTION_BADGE); + } + + const valueState = this._valueState; + let description = Badge.i18nBundle.getText(BADGE_DESCRIPTION_TAG); + + if (valueState) { + description = `${description} ${valueState}`; + } + + return description; + } + + get _semanticIconName() { + if (this.hideStateIcon || this.hasIcon) { + return null; + } + + switch (this.design) { + case BadgeDesign.Neutral: + return "sys-help-2"; + case BadgeDesign.Positive: + return "sys-enter-2"; + case BadgeDesign.Negative: + return "error"; + case BadgeDesign.Critical: + return "alert"; + case BadgeDesign.Information: + return "information"; + default: + return null; + } + } + + _onclick() { + this.fireEvent("click"); } } diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 08e68ddcee3e..80fa051ddd7f 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -32,7 +32,25 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=Conjoined avatars. AVATAR_GROUP_MOVE=Press ARROW keys to move. #XACT: ARIA announcement for the badge -BADGE_DESCRIPTION=Badge +BADGE_DESCRIPTION_BADGE=Badge + +#XACT: ARIA announcement for the badge with "Tag" design +BADGE_DESCRIPTION_TAG=Tag + +#XACT: ARIA announcement for the roledescription attribute +BADGE_ROLE_DESCRIPTION=Tag button + +#XACT: ARIA announcement for the "Error" state +BADGE_ERROR=Error + +#XACT: ARIA announcement for the "Warning" state +BADGE_WARNING=Warning + +#XACT: ARIA announcement for the "Success" state +BADGE_SUCCESS=Success + +#XACT: ARIA announcement for the "Information" state +BADGE_INFORMATION=Information #XACT: position (current and max. value) of a Breadcrumb item which should be announced by screenreaders BREADCRUMB_ITEM_POS={0} of {1} diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css index 0f923580e9f1..1f20d0fcfd44 100644 --- a/packages/main/src/themes/Badge.css +++ b/packages/main/src/themes/Badge.css @@ -2,130 +2,596 @@ :host(:not([hidden])) { display: inline-block; - vertical-align: top; - height: var(--_ui5-badge-height); - min-width: 1.125em; - max-width: 100%; - padding-inline: var(--_ui5-badge-padding-inline); - border: var(--_ui5-badge-border); - border-color: var(--_ui5-badge-default-border-color); - background: var(--_ui5-badge-default-background); - color: var(--_ui5-badge-default-color); - border-radius: var(--_ui5-badge-border-radius); - box-sizing: border-box; +} + +:host { + font-size: var(--_ui5-badge-font-size); font-family: var(--_ui5-badge-font); font-weight: var(--_ui5-badge-font-weight); - font-size: var(--_ui5-badge-font-size); - text-align: center; letter-spacing: var(--_ui5-badge-letter-spacing); } +:host([_is-tag-design]) { + font-family: var(--sapFontBoldFamily); + font-size: var(--sapFontSmallSize); +} + .ui5-badge-root { display: flex; align-items: center; + justify-content: center; width: 100%; - height: 100%; + min-width: 1.125em; + max-width: 100%; + min-height: var(--_ui5-badge-height); + height: var(--_ui5-badge-height); box-sizing: border-box; - pointer-events: none; + padding: 0 var(--_ui5-badge-padding-inline); + border: var(--_ui5-badge-border); + border-radius: var(--_ui5-badge-border-radius); + white-space: nowrap; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; +} + +:host([_is-tag-design]) .ui5-badge-root { + padding: 0 0.25rem; + border: 0.0625rem solid; + border-radius: var(--sapButton_BorderCornerRadius); +} + +:host([_is-tag-design][interactive]) .ui5-badge-root:active { + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([interactive]) .ui5-badge-root { + cursor: pointer; +} + +:host([interactive]) .ui5-badge-root:focus { + outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); + outline-offset: 1px; +} + +:host([wrapping-type="Normal"]) .ui5-badge-root { + white-space: normal; + height: auto; +} + +:host([_icon-only]) .ui5-badge-root { + padding-inline: var(--_ui5-badge-padding-inline-icon-only); } .ui5-badge-text { - width: 100%; + text-transform: var(--_ui5-badge-text-transform); + text-align: start; + pointer-events: none; overflow: hidden; - white-space: nowrap; - font-weight: inherit; text-overflow: ellipsis; - text-transform: var(--_ui5-badge-text-transform); - letter-spacing: inherit; - font-size: inherit; } -:host([_icon-only]) { - padding-inline: var(--_ui5-badge-padding-inline-icon-only); +:host([_has-icon]) .ui5-badge-text { + padding-inline-start: var(--_ui5-badge-icon-gap); } +[ui5-icon], ::slotted([ui5-icon]) { - width: 0.75em; - height: 0.75em; - min-width: 0.75em; - min-height: 0.75em; + width: 0.75rem; + min-width: 0.75rem; + height: var(--_ui5-badge-height); + min-height: var(--_ui5-badge-height); color: inherit; + pointer-events: none; } -:host([_has-icon]) .ui5-badge-text { - padding-inline-start: var(--_ui5-badge-icon-gap); +:host([wrapping-type="Normal"]) [ui5-icon], +:host([wrapping-type="Normal"]) ::slotted([ui5-icon]) { + align-self: flex-start; } +/* Set3 (BTP) Design Type */ + /* Scheme 1 */ -:host([color-scheme="1"]) { +.ui5-badge-root { background-color: var(--ui5-badge-color-scheme-1-background); border-color: var(--ui5-badge-color-scheme-1-border); color: var(--ui5-badge-color-scheme-1-color); } /* Scheme 2 */ -:host([color-scheme="2"]) { +:host([color-scheme="2"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-2-background); border-color: var(--ui5-badge-color-scheme-2-border); color: var(--ui5-badge-color-scheme-2-color); } /* Scheme 3 */ -:host([color-scheme="3"]) { +:host([color-scheme="3"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-3-background); border-color: var(--ui5-badge-color-scheme-3-border); color: var(--ui5-badge-color-scheme-3-color); } /* Scheme 4 */ -:host([color-scheme="4"]) { +:host([color-scheme="4"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-4-background); border-color: var(--ui5-badge-color-scheme-4-border); color: var(--ui5-badge-color-scheme-4-color); } /* Scheme 5 */ -:host([color-scheme="5"]) { +:host([color-scheme="5"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-5-background); border-color: var(--ui5-badge-color-scheme-5-border); color: var(--ui5-badge-color-scheme-5-color); } /* Scheme 6 */ -:host([color-scheme="6"]) { +:host([color-scheme="6"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-6-background); border-color: var(--ui5-badge-color-scheme-6-border); color: var(--ui5-badge-color-scheme-6-color); } /* Scheme 7 */ -:host([color-scheme="7"]) { +:host([color-scheme="7"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-7-background); border-color: var(--ui5-badge-color-scheme-7-border); color: var(--ui5-badge-color-scheme-7-color); } /* Scheme 8 */ -:host([color-scheme="8"]) { +:host([color-scheme="8"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-8-background); border-color: var(--ui5-badge-color-scheme-8-border); color: var(--ui5-badge-color-scheme-8-color); } /* Scheme 9 */ -:host([color-scheme="9"]) { +:host([color-scheme="9"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-9-background); border-color: var(--ui5-badge-color-scheme-9-border); color: var(--ui5-badge-color-scheme-9-color); } /* Scheme 10 */ -:host([color-scheme="10"]) { +:host([color-scheme="10"]) .ui5-badge-root { background-color: var(--ui5-badge-color-scheme-10-background); border-color: var(--ui5-badge-color-scheme-10-border); color: var(--ui5-badge-color-scheme-10-color); } +/* Value State Design Types */ +:host([design="Neutral"]) .ui5-badge-root { + background-color: var(--sapNeutralBackground); + border-color: var(--sapNeutralBorderColor); + color: var(--sapTextColor); + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([interactive][design="Neutral"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Neutral_Hover_Background); + border-color: var(--sapButton_Neutral_Hover_BorderColor); + color: var(--sapButton_Neutral_Hover_TextColor); +} + +:host([interactive][design="Neutral"]) .ui5-badge-root:active { + background-color: var(--sapButton_Neutral_Active_Background); + border-color: var(--sapButton_Neutral_Active_BorderColor); + color: var(--sapButton_Active_TextColor); +} + +:host([design="Positive"]) .ui5-badge-root { + background-color: var(--sapButton_Success_Background); + border-color: var(--sapButton_Success_BorderColor); + color: var(--sapButton_Success_TextColor); + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([interactive][design="Positive"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Success_Hover_Background); + border-color: var(--sapButton_Success_Hover_BorderColor); + color: var(--sapButton_Success_Hover_TextColor); +} + +:host([interactive][design="Positive"]) .ui5-badge-root:active { + background-color: var(--sapButton_Success_Active_Background); + border-color: var(--sapButton_Success_Active_BorderColor); + color: var(--sapButton_Accept_Selected_TextColor); +} + +:host([design="Negative"]) .ui5-badge-root { + background-color: var(--sapButton_Negative_Background); + border-color: var(--sapButton_Negative_BorderColor); + color: var(--sapButton_Negative_TextColor); + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([interactive][design="Negative"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Negative_Hover_Background); + border-color: var(--sapButton_Negative_Hover_BorderColor); + color: var(--sapButton_Negative_Hover_TextColor); +} + +:host([interactive][design="Negative"]) .ui5-badge-root:active { + background-color: var(--sapButton_Negative_Active_Background); + border-color: var(--sapButton_Negative_Active_BorderColor); + color: var(--sapButton_Reject_Selected_TextColor); +} + +:host([design="Critical"]) .ui5-badge-root { + background-color: var(--sapButton_Critical_Background); + border-color: var(--sapButton_Critical_BorderColor); + color: var(--sapButton_Critical_TextColor); + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([interactive][design="Critical"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Critical_Hover_Background); + border-color: var(--sapButton_Critical_Hover_BorderColor); + color: var(--sapButton_Critical_Hover_TextColor); +} + +:host([interactive][design="Critical"]) .ui5-badge-root:active { + background-color: var(--sapButton_Critical_Active_Background); + border-color: var(--sapButton_Critical_Active_BorderColor); + color: var(--sapButton_Attention_Selected_TextColor); +} + +:host([design="Information"]) .ui5-badge-root { + background-color: var(--sapButton_Information_Background); + border-color: var(--sapButton_Information_BorderColor); + color: var(--sapButton_Information_TextColor); + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([interactive][design="Information"]) .ui5-badge-root:hover { + background-color: var(--sapButton_Information_Hover_Background); + border-color: var(--sapButton_Information_Hover_BorderColor); + color: var(--sapButton_Information_Hover_TextColor); +} + +:host([interactive][design="Information"]) .ui5-badge-root:active { + background-color: var(--sapButton_Information_Active_Background); + border-color: var(--sapButton_Information_Active_BorderColor); + color: var(--sapButton_Selected_TextColor); +} + +/* Set1 Design Type */ + +:host([design="Set1"]) .ui5-badge-root { + text-shadow: var(--ui5-badge-contrast-text-shadow); +} + +:host([design="Set1"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_1_Background); + border-color: var(--sapIndicationColor_1_BorderColor); + color: var(--sapIndicationColor_1_TextColor); +} + +:host([interactive][design="Set1"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_1_Hover_Background); +} + +:host([interactive][design="Set1"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_1_Active_Background); + border-color: var(--sapIndicationColor_1_Active_BorderColor); + color: var(--sapIndicationColor_1_Active_TextColor); +} + +:host([design="Set1"][color-scheme="2"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_2_Background); + border-color: var(--sapIndicationColor_2_BorderColor); + color: var(--sapIndicationColor_2_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="2"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_2_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="2"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_2_Active_Background); + border-color: var(--sapIndicationColor_2_Active_BorderColor); + color: var(--sapIndicationColor_2_Active_TextColor); +} + +:host([design="Set1"][color-scheme="3"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_3_Background); + border-color: var(--sapIndicationColor_3_BorderColor); + color: var(--sapIndicationColor_3_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="3"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_3_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="3"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_3_Active_Background); + border-color: var(--sapIndicationColor_3_Active_BorderColor); + color: var(--sapIndicationColor_3_Active_TextColor); +} + +:host([design="Set1"][color-scheme="4"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_4_Background); + border-color: var(--sapIndicationColor_4_BorderColor); + color: var(--sapIndicationColor_4_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="4"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_4_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="4"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_4_Active_Background); + border-color: var(--sapIndicationColor_4_Active_BorderColor); + color: var(--sapIndicationColor_4_Active_TextColor); +} + +:host([design="Set1"][color-scheme="5"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_5_Background); + border-color: var(--sapIndicationColor_5_BorderColor); + color: var(--sapIndicationColor_5_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="5"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_5_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="5"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_5_Active_Background); + border-color: var(--sapIndicationColor_5_Active_BorderColor); + color: var(--sapIndicationColor_5_Active_TextColor); +} + +:host([design="Set1"][color-scheme="6"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_6_Background); + border-color: var(--sapIndicationColor_6_BorderColor); + color: var(--sapIndicationColor_6_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="6"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_6_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="6"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_6_Active_Background); + border-color: var(--sapIndicationColor_6_Active_BorderColor); + color: var(--sapIndicationColor_6_Active_TextColor); +} + +:host([design="Set1"][color-scheme="7"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_7_Background); + border-color: var(--sapIndicationColor_7_BorderColor); + color: var(--sapIndicationColor_7_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="7"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_7_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="7"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_7_Active_Background); + border-color: var(--sapIndicationColor_7_Active_BorderColor); + color: var(--sapIndicationColor_7_Active_TextColor); +} + +:host([design="Set1"][color-scheme="8"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_8_Background); + border-color: var(--sapIndicationColor_8_BorderColor); + color: var(--sapIndicationColor_8_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="8"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_8_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="8"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_8_Active_Background); + border-color: var(--sapIndicationColor_8_Active_BorderColor); + color: var(--sapIndicationColor_8_Active_TextColor); +} + +:host([design="Set1"][color-scheme="9"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_9_Background); + border-color: var(--sapIndicationColor_9_BorderColor); + color: var(--sapIndicationColor_9_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="9"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_9_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="9"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_9_Active_Background); + border-color: var(--sapIndicationColor_9_Active_BorderColor); + color: var(--sapIndicationColor_9_Active_TextColor); +} + +:host([design="Set1"][color-scheme="10"]) .ui5-badge-root { + background-color: var(--sapIndicationColor_10_Background); + border-color: var(--sapIndicationColor_10_BorderColor); + color: var(--sapIndicationColor_10_TextColor); +} + +:host([interactive][design="Set1"][color-scheme="10"]) .ui5-badge-root:hover { + background-color: var(--sapIndicationColor_10_Hover_Background); +} + +:host([interactive][design="Set1"][color-scheme="10"]) .ui5-badge-root:active { + background-color: var(--sapIndicationColor_10_Active_Background); + border-color: var(--sapIndicationColor_10_Active_BorderColor); + color: var(--sapIndicationColor_10_Active_TextColor); +} + +/* Set2 Design Type */ + +:host([design="Set2"]) .ui5-badge-root { + text-shadow: var(--ui5-badge-text-shadow); +} + +:host([design="Set2"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-1-background); + border-color: var(--ui5-badge-set2-color-scheme-1-border); + color: var(--ui5-badge-set2-color-scheme-1-color); +} + +:host([interactive][design="Set2"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-1-hover-background); +} + +:host([interactive][design="Set2"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-1-active-background); + border-color: var(--ui5-badge-set2-color-scheme-1-active-border); + color: var(--ui5-badge-set2-color-scheme-1-active-color); +} + +:host([design="Set2"][color-scheme="2"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-2-background); + border-color: var(--ui5-badge-set2-color-scheme-2-border); + color: var(--ui5-badge-set2-color-scheme-2-color); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-2-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-2-active-background); + border-color: var(--ui5-badge-set2-color-scheme-2-active-border); + color: var(--ui5-badge-set2-color-scheme-2-active-color); +} + +:host([design="Set2"][color-scheme="3"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-3-background); + border-color: var(--ui5-badge-set2-color-scheme-3-border); + color: var(--ui5-badge-set2-color-scheme-3-color); +} + +:host([interactive][design="Set2"][color-scheme="3"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-3-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="3"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-3-active-background); + border-color: var(--ui5-badge-set2-color-scheme-3-active-border); + color: var(--ui5-badge-set2-color-scheme-3-active-color); +} + +:host([design="Set2"][color-scheme="4"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-4-background); + border-color: var(--ui5-badge-set2-color-scheme-4-border); + color: var(--ui5-badge-set2-color-scheme-4-color); +} + +:host([interactive][design="Set2"][color-scheme="4"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-4-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="4"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-4-active-background); + border-color: var(--ui5-badge-set2-color-scheme-4-active-border); + color: var(--ui5-badge-set2-color-scheme-4-active-color); +} + +:host([design="Set2"][color-scheme="5"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-5-background); + border-color: var(--ui5-badge-set2-color-scheme-5-border); + color: var(--ui5-badge-set2-color-scheme-5-color); +} + +:host([interactive][design="Set2"][color-scheme="5"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-5-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="5"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-5-active-background); + border-color: var(--ui5-badge-set2-color-scheme-5-active-border); + color: var(--ui5-badge-set2-color-scheme-5-active-color); +} + +:host([design="Set2"][color-scheme="6"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-6-background); + border-color: var(--ui5-badge-set2-color-scheme-6-border); + color: var(--ui5-badge-set2-color-scheme-6-color); +} + +:host([interactive][design="Set2"][color-scheme="6"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-6-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="6"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-6-active-background); + border-color: var(--ui5-badge-set2-color-scheme-6-active-border); + color: var(--ui5-badge-set2-color-scheme-6-active-color); +} + +:host([design="Set2"][color-scheme="7"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-7-background); + border-color: var(--ui5-badge-set2-color-scheme-7-border); + color: var(--ui5-badge-set2-color-scheme-7-color); +} + +:host([interactive][design="Set2"][color-scheme="7"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-7-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="7"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-7-active-background); + border-color: var(--ui5-badge-set2-color-scheme-7-active-border); + color: var(--ui5-badge-set2-color-scheme-7-active-color); +} + +:host([design="Set2"][color-scheme="8"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-8-background); + border-color: var(--ui5-badge-set2-color-scheme-8-border); + color: var(--ui5-badge-set2-color-scheme-8-color); +} + +:host([interactive][design="Set2"][color-scheme="8"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-8-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="8"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-8-active-background); + border-color: var(--ui5-badge-set2-color-scheme-8-active-border); + color: var(--ui5-badge-set2-color-scheme-8-active-color); +} + +:host([design="Set2"][color-scheme="9"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-9-background); + border-color: var(--ui5-badge-set2-color-scheme-9-border); + color: var(--ui5-badge-set2-color-scheme-9-color); +} + +:host([interactive][design="Set2"][color-scheme="10"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-10-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="10"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-10-active-background); + border-color: var(--ui5-badge-set2-color-scheme-10-active-border); + color: var(--ui5-badge-set2-color-scheme-10-active-color); +} + +:host([design="Set2"][color-scheme="10"]) .ui5-badge-root { + background-color: var(--ui5-badge-set2-color-scheme-10-background); + border-color: var(--ui5-badge-set2-color-scheme-10-border); + color: var(--ui5-badge-set2-color-scheme-10-color); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:hover { + background-color: var(--ui5-badge-set2-color-scheme-2-hover-background); +} + +:host([interactive][design="Set2"][color-scheme="2"]) .ui5-badge-root:active { + background-color: var(--ui5-badge-set2-color-scheme-2-active-background); + border-color: var(--ui5-badge-set2-color-scheme-2-active-border); + color: var(--ui5-badge-set2-color-scheme-2-active-color); +} + /* ---Slotted Badges--- */ /* [ui5-avatar] - Badge icon styles */ /* Make icon take full width minus padding. diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css index ba669253b7aa..3ccfd5bca8b1 100644 --- a/packages/main/src/themes/base/Badge-parameters.css +++ b/packages/main/src/themes/base/Badge-parameters.css @@ -5,15 +5,16 @@ --_ui5-badge-padding-inline: 0.3125em; --_ui5-badge-padding-inline-icon-only: 0.1875rem; --_ui5-badge-text-transform: uppercase; + --_ui5-badge-icon-height: 0.75em; --_ui5-badge-icon-gap: 0.125rem; --_ui5-badge-font-size: var(--sapFontSmallSize); --_ui5-badge-font: "72override", var(--sapFontFamily); --_ui5-badge-font-weight: bold; - --_ui5-badge-default-border-color: var(--ui5-badge-color-scheme-1-border); - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: 0.0125em; + --ui5-badge-text-shadow: var(--sapContent_TextShadow); + --ui5-badge-contrast-text-shadow: var(--sapContent_ContrastTextShadow); + --ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1); --ui5-badge-color-scheme-1-border: var(--sapAccentColor1); --ui5-badge-color-scheme-1-color: var(--sapTextColor); @@ -53,4 +54,106 @@ --ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9); --ui5-badge-color-scheme-10-border: var(--sapAccentColor9); --ui5-badge-color-scheme-10-color: var(--sapTextColor); + + /* set 2 */ + + --ui5-badge-set2-color-scheme-1-color: var(--sapIndicationColor_1); + --ui5-badge-set2-color-scheme-1-background: var(--sapIndicationColor_1b); + --ui5-badge-set2-color-scheme-1-border: var(--sapIndicationColor_1b_BorderColor); + + --ui5-badge-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1b_Hover_Background); + + --ui5-badge-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor); + --ui5-badge-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background); + --ui5-badge-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor); + + --ui5-badge-set2-color-scheme-2-color: var(--sapIndicationColor_2); + --ui5-badge-set2-color-scheme-2-background: var(--sapIndicationColor_2b); + --ui5-badge-set2-color-scheme-2-border: var(--sapIndicationColor_2b_BorderColor); + + --ui5-badge-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2b_Hover_Background); + + --ui5-badge-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor); + --ui5-badge-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background); + --ui5-badge-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor); + + --ui5-badge-set2-color-scheme-3-color: var(--sapIndicationColor_3); + --ui5-badge-set2-color-scheme-3-background: var(--sapIndicationColor_3b); + --ui5-badge-set2-color-scheme-3-border: var(--sapIndicationColor_3b_BorderColor); + + --ui5-badge-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3b_Hover_Background); + + --ui5-badge-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor); + --ui5-badge-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background); + --ui5-badge-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor); + + --ui5-badge-set2-color-scheme-4-color: var(--sapIndicationColor_4); + --ui5-badge-set2-color-scheme-4-background: var(--sapIndicationColor_4b); + --ui5-badge-set2-color-scheme-4-border: var(--sapIndicationColor_4b_BorderColor); + + --ui5-badge-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4b_Hover_Background); + + --ui5-badge-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor); + --ui5-badge-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background); + --ui5-badge-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor); + + --ui5-badge-set2-color-scheme-5-color: var(--sapIndicationColor_5); + --ui5-badge-set2-color-scheme-5-background: var(--sapIndicationColor_5b); + --ui5-badge-set2-color-scheme-5-border: var(--sapIndicationColor_5b_BorderColor); + + --ui5-badge-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5b_Hover_Background); + + --ui5-badge-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor); + --ui5-badge-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background); + --ui5-badge-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor); + + --ui5-badge-set2-color-scheme-6-color: var(--sapIndicationColor_6); + --ui5-badge-set2-color-scheme-6-background: var(--sapIndicationColor_6b); + --ui5-badge-set2-color-scheme-6-border: var(--sapIndicationColor_6b_BorderColor); + + --ui5-badge-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6b_Hover_Background); + + --ui5-badge-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor); + --ui5-badge-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background); + --ui5-badge-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor); + + --ui5-badge-set2-color-scheme-7-color: var(--sapIndicationColor_7); + --ui5-badge-set2-color-scheme-7-background: var(--sapIndicationColor_7b); + --ui5-badge-set2-color-scheme-7-border: var(--sapIndicationColor_7b_BorderColor); + + --ui5-badge-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7b_Hover_Background); + + --ui5-badge-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor); + --ui5-badge-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background); + --ui5-badge-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor); + + --ui5-badge-set2-color-scheme-8-color: var(--sapIndicationColor_8); + --ui5-badge-set2-color-scheme-8-background: var(--sapIndicationColor_8b); + --ui5-badge-set2-color-scheme-8-border: var(--sapIndicationColor_8b_BorderColor); + + --ui5-badge-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8b_Hover_Background); + + --ui5-badge-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor); + --ui5-badge-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background); + --ui5-badge-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor); + + --ui5-badge-set2-color-scheme-9-color: var(--sapIndicationColor_9); + --ui5-badge-set2-color-scheme-9-background: var(--sapIndicationColor_9b); + --ui5-badge-set2-color-scheme-9-border: var(--sapIndicationColor_9b_BorderColor); + + --ui5-badge-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9b_Hover_Background); + + --ui5-badge-set2-color-scheme-9-active-color: var(--sapIndicationColor_9_Active_TextColor); + --ui5-badge-set2-color-scheme-9-active-background: var(--sapIndicationColor_9_Active_Background); + --ui5-badge-set2-color-scheme-9-active-border: var(--sapIndicationColor_9_Active_BorderColor); + + --ui5-badge-set2-color-scheme-10-color: var(--sapIndicationColor_10); + --ui5-badge-set2-color-scheme-10-background: var(--sapIndicationColor_10b); + --ui5-badge-set2-color-scheme-10-border: var(--sapIndicationColor_10b_BorderColor); + + --ui5-badge-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10b_Hover_Background); + + --ui5-badge-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor); + --ui5-badge-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background); + --ui5-badge-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Badge-parameters.css b/packages/main/src/themes/sap_horizon/Badge-parameters.css index 17d61f820921..de8d20cd8165 100644 --- a/packages/main/src/themes/sap_horizon/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon/Badge-parameters.css @@ -5,15 +5,13 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; - --_ui5-badge-default-border-color: transparent; - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: var(--sapAvatar_1_Background); diff --git a/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css b/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css index 17d61f820921..de8d20cd8165 100644 --- a/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css @@ -5,15 +5,13 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; - --_ui5-badge-default-border-color: transparent; - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; --ui5-badge-color-scheme-1-background: var(--sapAvatar_1_Background); diff --git a/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css index e0482082825e..9cbe96dfc221 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css @@ -5,17 +5,18 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; - --_ui5-badge-default-border-color: transparent; - --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); - --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; + --ui5-badge-text-shadow: none; + --ui5-badge-contrast-text-shadow: none; + --ui5-badge-color-scheme-1-background: #362401; --ui5-badge-color-scheme-1-color: #FDA503; @@ -45,4 +46,106 @@ --ui5-badge-color-scheme-10-background: #1C2834; --ui5-badge-color-scheme-10-color: #A9BACB; + + /* set 2 */ + + --ui5-badge-set2-color-scheme-1-color: var(--sapIndicationColor_1_TextColor); + --ui5-badge-set2-color-scheme-1-background: var(--sapIndicationColor_1_Background); + --ui5-badge-set2-color-scheme-1-border: var(--sapIndicationColor_1_BorderColor); + + --ui5-badge-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1_Hover_Background); + + --ui5-badge-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor); + --ui5-badge-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background); + --ui5-badge-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor); + + --ui5-badge-set2-color-scheme-2-color: var(--sapIndicationColor_2_TextColor); + --ui5-badge-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background); + --ui5-badge-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor); + + --ui5-badge-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2b_Hover_Background); + + --ui5-badge-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor); + --ui5-badge-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background); + --ui5-badge-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor); + + --ui5-badge-set2-color-scheme-3-color: var(--sapIndicationColor_3_TextColor); + --ui5-badge-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background); + --ui5-badge-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor); + + --ui5-badge-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3b_Hover_Background); + + --ui5-badge-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor); + --ui5-badge-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background); + --ui5-badge-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor); + + --ui5-badge-set2-color-scheme-4-color: var(--sapIndicationColor_4_TextColor); + --ui5-badge-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background); + --ui5-badge-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor); + + --ui5-badge-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4b_Hover_Background); + + --ui5-badge-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor); + --ui5-badge-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background); + --ui5-badge-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor); + + --ui5-badge-set2-color-scheme-5-color: var(--sapIndicationColor_5_TextColor); + --ui5-badge-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background); + --ui5-badge-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor); + + --ui5-badge-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5b_Hover_Background); + + --ui5-badge-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor); + --ui5-badge-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background); + --ui5-badge-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor); + + --ui5-badge-set2-color-scheme-6-color: var(--sapIndicationColor_6_TextColor); + --ui5-badge-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background); + --ui5-badge-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor); + + --ui5-badge-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6b_Hover_Background); + + --ui5-badge-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor); + --ui5-badge-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background); + --ui5-badge-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor); + + --ui5-badge-set2-color-scheme-7-color: var(--sapIndicationColor_7_TextColor); + --ui5-badge-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background); + --ui5-badge-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor); + + --ui5-badge-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7b_Hover_Background); + + --ui5-badge-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor); + --ui5-badge-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background); + --ui5-badge-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor); + + --ui5-badge-set2-color-scheme-8-color: var(--sapIndicationColor_8_TextColor); + --ui5-badge-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background); + --ui5-badge-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor); + + --ui5-badge-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8b_Hover_Background); + + --ui5-badge-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor); + --ui5-badge-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background); + --ui5-badge-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor); + + --ui5-badge-set2-color-scheme-9-color: var(--sapIndicationColor_9_TextColor); + --ui5-badge-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background); + --ui5-badge-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor); + + --ui5-badge-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9b_Hover_Background); + + --ui5-badge-set2-color-scheme-9-active-color: var(--sapIndicationColor_9_Active_TextColor); + --ui5-badge-set2-color-scheme-9-active-background: var(--sapIndicationColor_9_Active_Background); + --ui5-badge-set2-color-scheme-9-active-border: var(--sapIndicationColor_9_Active_BorderColor); + + --ui5-badge-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor); + --ui5-badge-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background); + --ui5-badge-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor); + + --ui5-badge-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10b_Hover_Background); + + --ui5-badge-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor); + --ui5-badge-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background); + --ui5-badge-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css index 3177531bae69..2d5166fe8685 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css @@ -5,17 +5,21 @@ --_ui5-badge-border: none; --_ui5-badge-border-radius: 0.25rem; --_ui5-badge-padding-inline: 0.375em; - --_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline); + --_ui5-badge-padding-inline-icon-only: 0.313rem; --_ui5-badge-text-transform: none; + --_ui5-badge-icon-height: 1rem; --_ui5-badge-icon-gap: 0.25rem; --_ui5-badge-font-size: var(--sapFontSize); - --_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily); + --_ui5-badge-font: var(--sapFontSemiboldDuplexFamily); --_ui5-badge-font-weight: normal; --_ui5-badge-default-border-color: transparent; --_ui5-badge-default-background: var(--ui5-badge-color-scheme-1-background); --_ui5-badge-default-color: var(--ui5-badge-color-scheme-1-color); --_ui5-badge-letter-spacing: normal; + --ui5-badge-text-shadow: none; + --ui5-badge-contrast-text-shadow: none; + --ui5-badge-color-scheme-1-background: #FFC218; --ui5-badge-color-scheme-1-color: #5F2900; @@ -45,4 +49,106 @@ --ui5-badge-color-scheme-10-background: #C5CDD3; --ui5-badge-color-scheme-10-color: #2C3A48; + + /* set 2 */ + + --ui5-badge-set2-color-scheme-1-color: var(--sapIndicationColor_1_TextColor); + --ui5-badge-set2-color-scheme-1-background: var(--sapIndicationColor_1_Background); + --ui5-badge-set2-color-scheme-1-border: var(--sapIndicationColor_1_BorderColor); + + --ui5-badge-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1_Hover_Background); + + --ui5-badge-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor); + --ui5-badge-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background); + --ui5-badge-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor); + + --ui5-badge-set2-color-scheme-2-color: var(--sapIndicationColor_2_TextColor); + --ui5-badge-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background); + --ui5-badge-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor); + + --ui5-badge-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2b_Hover_Background); + + --ui5-badge-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor); + --ui5-badge-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background); + --ui5-badge-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor); + + --ui5-badge-set2-color-scheme-3-color: var(--sapIndicationColor_3_TextColor); + --ui5-badge-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background); + --ui5-badge-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor); + + --ui5-badge-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3b_Hover_Background); + + --ui5-badge-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor); + --ui5-badge-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background); + --ui5-badge-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor); + + --ui5-badge-set2-color-scheme-4-color: var(--sapIndicationColor_4_TextColor); + --ui5-badge-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background); + --ui5-badge-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor); + + --ui5-badge-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4b_Hover_Background); + + --ui5-badge-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor); + --ui5-badge-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background); + --ui5-badge-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor); + + --ui5-badge-set2-color-scheme-5-color: var(--sapIndicationColor_5_TextColor); + --ui5-badge-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background); + --ui5-badge-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor); + + --ui5-badge-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5b_Hover_Background); + + --ui5-badge-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor); + --ui5-badge-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background); + --ui5-badge-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor); + + --ui5-badge-set2-color-scheme-6-color: var(--sapIndicationColor_6_TextColor); + --ui5-badge-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background); + --ui5-badge-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor); + + --ui5-badge-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6b_Hover_Background); + + --ui5-badge-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor); + --ui5-badge-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background); + --ui5-badge-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor); + + --ui5-badge-set2-color-scheme-7-color: var(--sapIndicationColor_7_TextColor); + --ui5-badge-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background); + --ui5-badge-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor); + + --ui5-badge-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7b_Hover_Background); + + --ui5-badge-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor); + --ui5-badge-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background); + --ui5-badge-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor); + + --ui5-badge-set2-color-scheme-8-color: var(--sapIndicationColor_8_TextColor); + --ui5-badge-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background); + --ui5-badge-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor); + + --ui5-badge-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8b_Hover_Background); + + --ui5-badge-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor); + --ui5-badge-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background); + --ui5-badge-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor); + + --ui5-badge-set2-color-scheme-9-color: var(--sapIndicationColor_9_TextColor); + --ui5-badge-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background); + --ui5-badge-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor); + + --ui5-badge-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9b_Hover_Background); + + --ui5-badge-set2-color-scheme-9-active-color: var(--sapIndicationColor_9_Active_TextColor); + --ui5-badge-set2-color-scheme-9-active-background: var(--sapIndicationColor_9_Active_Background); + --ui5-badge-set2-color-scheme-9-active-border: var(--sapIndicationColor_9_Active_BorderColor); + + --ui5-badge-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor); + --ui5-badge-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background); + --ui5-badge-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor); + + --ui5-badge-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10b_Hover_Background); + + --ui5-badge-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor); + --ui5-badge-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background); + --ui5-badge-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/types/BadgeDesign.ts b/packages/main/src/types/BadgeDesign.ts new file mode 100644 index 000000000000..ab00706b0e20 --- /dev/null +++ b/packages/main/src/types/BadgeDesign.ts @@ -0,0 +1,69 @@ +/** + * Defines badge design types. + * + * @readonly + * @enum {string} + * @public + * @author SAP SE + * @alias sap.ui.webc.main.types.BadgeDesign + */ +enum BadgeDesign { + /** + * Set1 of generic indication colors that are intended for industry-specific use cases + * @public + * @type {Set1} + */ + Set1 = "Set1", + + /** + * Set2 of generic indication colors that are intended for industry-specific use cases + * @public + * @type {Set2} + */ + Set2 = "Set2", + + /** + * Set3 of generic indication colors that are + * intended for industry-specific use cases. Used in SAP BTP design system. + * @public + * @type {Set3} + */ + Set3 = "Set3", + + /** + * Neutral design + * @public + * @type {Neutral} + */ + Neutral = "Neutral", + + /** + * Information design + * @public + * @type {Information} + */ + Information = "Information", + + /** + * Positive design + * @public + * @type {Positive} + */ + Positive = "Positive", + + /** + * Negative design + * @public + * @type {Negative} + */ + Negative = "Negative", + + /** + * Critical design + * @public + * @type {Warning} + */ + Critical = "Critical", +} + +export default BadgeDesign; diff --git a/packages/main/test/pages/Badge.html b/packages/main/test/pages/Badge.html index 8873e89e6ed9..a0e8cc61f4d5 100644 --- a/packages/main/test/pages/Badge.html +++ b/packages/main/test/pages/Badge.html @@ -15,33 +15,34 @@ + - + + Badges +
-

Badges

- This is an info label
- Required Required Required
- Hello world
- you are right
- Solution provided
- Available
- Required
- Required
- Required
- IN WAREHOUSE
-
- -
- - Default color + Custom Badges + + Default color truncate truncate truncate - - Done +
+ + bigger width - +
+ + Noninteractive + +
+ + Interactive + +
+ +
In Process @@ -54,13 +55,98 @@

Badges

Pending + same line +
+ + Pending + + + P wrapping-type="true" + + + wrapping-type="true" + + + Some long text with more lines text wrapping-type="true" + + + + +
+
+ Set 1 +
+
+
+
+ Set 2 +
+
+
+
+ Set 3 +
+
+
+
+ Value states +
+ + Neutral + + + Information + + + Positive + + + Negative + + + Critical + +
+
+ + Neutral - No icon + + + Information - No icon + + + Positive - No icon + + + Negative - No icon + + + Critical - No icon + +
+
+ + Neutral - Custom icon + + + Information - Custom icon + + + Positive - Custom icon + + + Negative - Custom icon + + + Critical - Custom icon + +
- diff --git a/packages/main/test/pages/Badge.js b/packages/main/test/pages/Badge.js new file mode 100644 index 000000000000..18e47bf61cac --- /dev/null +++ b/packages/main/test/pages/Badge.js @@ -0,0 +1,68 @@ +function initializeBadges() { + const colorSchemes = [ + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + "10" + ]; + + const designTypes = [ + "Set1", + "Set2", + "Set3", + "None", + "Success", + "Warning", + "Error", + "Information" + ]; + + const clickEvent = (e) => { + console.error("clicked"); + }; + + document.querySelector("#checkboxId").addEventListener("change", e => { + document.querySelectorAll("ui5-badge").forEach((item) => { + item.interactive = e.currentTarget.checked; + + if (item.interactive) { + item.addEventListener("click", clickEvent); + } else { + item.removeEventListener("click", clickEvent); + } + }) + }); + + const set1Content = document.querySelector("#set1Content"); + colorSchemes.forEach((value) => { + set1Content.insertAdjacentHTML("beforeend", `Set 1 - Value - ${value}`); + set1Content.insertAdjacentHTML("beforeend", `Set 1 - Value - ${value}`); + + set1Content.insertAdjacentHTML("beforeend", "

"); + }); + + const set2Content = document.querySelector("#set2Content"); + colorSchemes.forEach((value) => { + set2Content.insertAdjacentHTML("beforeend", `Set 2 - Value - ${value}`); + set2Content.insertAdjacentHTML("beforeend", `Set 2 - Value - ${value}`); + + set2Content.insertAdjacentHTML("beforeend", "

"); + }); + + const set3Content = document.querySelector("#set3Content"); + colorSchemes.forEach((value) => { + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + set3Content.insertAdjacentHTML("beforeend", `Set 3 - Value - ${value}`); + + set3Content.insertAdjacentHTML("beforeend", "

"); + }); +} \ No newline at end of file diff --git a/packages/main/test/pages/styles/Badge.css b/packages/main/test/pages/styles/Badge.css index b330c28a389b..d92af6fd99f5 100644 --- a/packages/main/test/pages/styles/Badge.css +++ b/packages/main/test/pages/styles/Badge.css @@ -6,10 +6,20 @@ body { .group { padding: 1rem; } -.gaps > * { + +.gaps .ui5-badge, +.gaps ui5-badge { margin-bottom: 0.5rem; + margin-right: 0.5rem; +} + +.width300px { + width: 300px; } +.width200px { + width: 200px; +} .badge1auto { background-color: var(--sapBackgroundColor); diff --git a/packages/main/test/specs/Badge.spec.js b/packages/main/test/specs/Badge.spec.js index 704edc9f9afa..2c77cdc65416 100644 --- a/packages/main/test/specs/Badge.spec.js +++ b/packages/main/test/specs/Badge.spec.js @@ -5,6 +5,46 @@ describe("Badge rendering", async () => { await browser.url(`test/pages/Badge.html`); }); + it("rendering", async () => { + let badgeRoot = await browser.$("#badgeWithTextAndIcon").shadow$(".ui5-badge-root"); + assert.strictEqual(await badgeRoot.getTagName(), "div", "badge root tag is 'div'."); + + badgeRoot = await browser.$("#interactiveBadge").shadow$(".ui5-badge-root"); + assert.strictEqual(await badgeRoot.getTagName(), "button", "badge root tag is 'button'."); + + let roleDescription = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_ROLE_DESCRIPTION)); + }); + + assert.strictEqual(await badgeRoot.getAttribute("aria-roledescription"), roleDescription, "aria-roledescription is set correctly"); + + let descriptionSuccess = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_SUCCESS)); + }); + + assert.strictEqual(await badgeRoot.getAttribute("aria-description"), descriptionSuccess, "aria-description is set correctly"); + + let badgeHiddenText = await browser.$("#noninteractiveBadge").shadow$(".ui5-hidden-text"); + + let descriptionTag = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_DESCRIPTION_TAG)); + }); + + assert.strictEqual(await badgeHiddenText.getText(), `${descriptionTag} ${descriptionSuccess}`, "hidden text is correct"); + + badgeHiddenText = await browser.$("#badgeWithTextAndIcon").shadow$(".ui5-hidden-text"); + + let descriptionBadge = await browser.executeAsync(done => { + const sn = document.getElementById("badgeWithTextAndIcon"); + done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.BADGE_DESCRIPTION_BADGE)); + }); + + assert.strictEqual(await badgeHiddenText.getText(), descriptionBadge, "hidden text is correct"); + }); + it("tests that label is rendered if there is text content", async () => { const badgeLabel = await browser.$("#badgeWithTextAndIcon").shadow$(".ui5-badge-text"); diff --git a/packages/playground/_stories/main/Badge/Badge.stories.ts b/packages/playground/_stories/main/Badge/Badge.stories.ts index ef3fc4cf6ee1..ce8da3890d8f 100644 --- a/packages/playground/_stories/main/Badge/Badge.stories.ts +++ b/packages/playground/_stories/main/Badge/Badge.stories.ts @@ -7,6 +7,8 @@ import type { StoryArgsSlots } from "./argTypes.js"; import type { UI5StoryArgs } from "../../../types.js"; import { DocsPage } from "../../../.storybook/docs"; import type Badge from "@ui5/webcomponents/dist/Badge.js"; +import BadgeDesign from "@ui5/webcomponents/dist/types/BadgeDesign.js"; +import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js"; const component = "ui5-badge"; @@ -24,7 +26,11 @@ export default { const Template: UI5StoryArgs = (args) => { return html` ${unsafeHTML(args.icon)} @@ -35,42 +41,108 @@ const Template: UI5StoryArgs = (args) => { export const Basic = Template.bind({}); Basic.args = { colorScheme: "6", - icon: ``, - default: "Pending" + default: "Badge Text" }; -export const Truncating = Template.bind({}); -Truncating.args = { - default: "This would truncate as it is too long", - style: "width: 200px", +export const Interactive = Template.bind({}); +Interactive.args = { + design: BadgeDesign.Positive, + interactive: true, + default: "Success" }; -const getIconHTML = (name: string): string => ``; -const AllColorSchemesBadges = [ - { icon: getIconHTML("accept"), default: "" }, - { icon: getIconHTML("sap-ui5"), default: "" }, - { icon: getIconHTML("add-equipment"), default: "In progress" }, - { icon: getIconHTML("lab"), default: "" }, - { icon: getIconHTML("email-read"), default: "" }, - { icon: "", default: "Pending" }, - { icon: getIconHTML("lightbulb"), default: "New idea" }, - { icon: getIconHTML("locked"), default: "Locked" }, - { icon: getIconHTML("flight"), default: "En route" }, - { icon: "", default: "Archived" }, +export const WrappingTypes = Template.bind({}); +WrappingTypes.decorators = [ + (story, {args}) => { + return html` +
+ ${story({ + args: { + ...args, + default: args.default || "This would truncate as it is too long", + wrappingType: args.wrappingType || WrappingType.None, + style: "width: 200px" + } + })} + ${story({ + args: { + ...args, + default: args.default || "This would wrap as it is too long", + wrappingType: args.wrappingType || WrappingType.Normal, + style: "width: 200px" + } + })} +
`; + }, +]; + +export const Designs = Template.bind({}); +Designs.decorators = [ + (story, ctx) => { + return html` +
+ ${[BadgeDesign.Neutral, BadgeDesign.Information, BadgeDesign.Positive, BadgeDesign.Negative, BadgeDesign.Critical, BadgeDesign.Set1, BadgeDesign.Set2, BadgeDesign.Set3].map((value) => { + return story({ + args: { + design: ctx.args.design || value, + default: ctx.args.default || value, + } + }); + })} +
`; + } +]; + +export const Set1 = Template.bind({}); +Set1.decorators = [ + (story, ctx) => { + return html` +
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => { + return story({ + args: { + design: ctx.args.design || BadgeDesign.Set1, + colorScheme: ctx.args.colorScheme || value.toString(), + default: ctx.args.default || "Color Scheme " + value, + } + }); + })} +
`; + } +]; + +export const Set2 = Template.bind({}); +Set2.decorators = [ + (story, ctx) => { + return html` +
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => { + return story({ + args: { + design: ctx.args.design || BadgeDesign.Set2, + colorScheme: ctx.args.colorScheme || value.toString(), + default: ctx.args.default || "Color Scheme " + value, + } + }); + })} +
`; + } ]; -export const AllColorSchemes = Template.bind({}); -AllColorSchemes.decorators = [ +export const Set3 = Template.bind({}); +Set3.decorators = [ (story, ctx) => { return html` - ${AllColorSchemesBadges.map((badge, i) => { +
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => { return story({ args: { - colorScheme: ctx.args.colorScheme || (i + 1).toString(), - icon: ctx.args.icon || badge.icon, - default: ctx.args.default || badge.default, + design: ctx.args.design || BadgeDesign.Set3, + colorScheme: ctx.args.colorScheme || value.toString(), + default: ctx.args.default || "Color Scheme " + value, } }); - })}`; + })} +
`; } ]; \ No newline at end of file diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json index e7c1f3b4f0a1..4d2043e68a38 100644 --- a/packages/theming/css-vars-usage.json +++ b/packages/theming/css-vars-usage.json @@ -78,6 +78,14 @@ "--sapButton_BorderColor", "--sapButton_BorderCornerRadius", "--sapButton_BorderWidth", + "--sapButton_Critical_Active_Background", + "--sapButton_Critical_Active_BorderColor", + "--sapButton_Critical_Background", + "--sapButton_Critical_BorderColor", + "--sapButton_Critical_Hover_Background", + "--sapButton_Critical_Hover_BorderColor", + "--sapButton_Critical_Hover_TextColor", + "--sapButton_Critical_TextColor", "--sapButton_Emphasized_Active_Background", "--sapButton_Emphasized_Active_BorderColor", "--sapButton_Emphasized_Active_TextColor", @@ -111,6 +119,14 @@ "--sapButton_Hover_Background", "--sapButton_Hover_BorderColor", "--sapButton_Hover_TextColor", + "--sapButton_Information_Active_Background", + "--sapButton_Information_Active_BorderColor", + "--sapButton_Information_Background", + "--sapButton_Information_BorderColor", + "--sapButton_Information_Hover_Background", + "--sapButton_Information_Hover_BorderColor", + "--sapButton_Information_Hover_TextColor", + "--sapButton_Information_TextColor", "--sapButton_Lite_Active_Background", "--sapButton_Lite_Active_BorderColor", "--sapButton_Lite_Background", @@ -119,7 +135,20 @@ "--sapButton_Lite_Hover_BorderColor", "--sapButton_Lite_Hover_TextColor", "--sapButton_Lite_TextColor", + "--sapButton_Negative_Active_Background", + "--sapButton_Negative_Active_BorderColor", + "--sapButton_Negative_Background", + "--sapButton_Negative_BorderColor", + "--sapButton_Negative_Hover_Background", + "--sapButton_Negative_Hover_BorderColor", + "--sapButton_Negative_Hover_TextColor", + "--sapButton_Negative_TextColor", + "--sapButton_Neutral_Active_Background", + "--sapButton_Neutral_Active_BorderColor", "--sapButton_Neutral_Background", + "--sapButton_Neutral_Hover_Background", + "--sapButton_Neutral_Hover_BorderColor", + "--sapButton_Neutral_Hover_TextColor", "--sapButton_Reject_Active_Background", "--sapButton_Reject_Active_BorderColor", "--sapButton_Reject_Active_TextColor", @@ -139,6 +168,14 @@ "--sapButton_Selected_Hover_Background", "--sapButton_Selected_Hover_BorderColor", "--sapButton_Selected_TextColor", + "--sapButton_Success_Active_Background", + "--sapButton_Success_Active_BorderColor", + "--sapButton_Success_Background", + "--sapButton_Success_BorderColor", + "--sapButton_Success_Hover_Background", + "--sapButton_Success_Hover_BorderColor", + "--sapButton_Success_Hover_TextColor", + "--sapButton_Success_TextColor", "--sapButton_TextColor", "--sapButton_TokenBackground", "--sapButton_TokenBorderColor", @@ -166,6 +203,7 @@ "--sapContent_ContrastIconColor", "--sapContent_ContrastShadowColor", "--sapContent_ContrastTextColor", + "--sapContent_ContrastTextShadow", "--sapContent_Critical_Shadow", "--sapContent_DisabledOpacity", "--sapContent_DisabledTextColor", @@ -298,6 +336,116 @@ "--sapIllus_PatternHighlight", "--sapIllus_PatternShadow", "--sapIllus_StrokeDetailColor", + "--sapIndicationColor_1", + "--sapIndicationColor_1_Active_Background", + "--sapIndicationColor_1_Active_BorderColor", + "--sapIndicationColor_1_Active_TextColor", + "--sapIndicationColor_1_Background", + "--sapIndicationColor_1_BorderColor", + "--sapIndicationColor_1_Hover_Background", + "--sapIndicationColor_1_TextColor", + "--sapIndicationColor_1b", + "--sapIndicationColor_1b_BorderColor", + "--sapIndicationColor_1b_Hover_Background", + "--sapIndicationColor_2", + "--sapIndicationColor_2_Active_Background", + "--sapIndicationColor_2_Active_BorderColor", + "--sapIndicationColor_2_Active_TextColor", + "--sapIndicationColor_2_Background", + "--sapIndicationColor_2_BorderColor", + "--sapIndicationColor_2_Hover_Background", + "--sapIndicationColor_2_TextColor", + "--sapIndicationColor_2b", + "--sapIndicationColor_2b_BorderColor", + "--sapIndicationColor_2b_Hover_Background", + "--sapIndicationColor_3", + "--sapIndicationColor_3_Active_Background", + "--sapIndicationColor_3_Active_BorderColor", + "--sapIndicationColor_3_Active_TextColor", + "--sapIndicationColor_3_Background", + "--sapIndicationColor_3_BorderColor", + "--sapIndicationColor_3_Hover_Background", + "--sapIndicationColor_3_TextColor", + "--sapIndicationColor_3b", + "--sapIndicationColor_3b_BorderColor", + "--sapIndicationColor_3b_Hover_Background", + "--sapIndicationColor_4", + "--sapIndicationColor_4_Active_Background", + "--sapIndicationColor_4_Active_BorderColor", + "--sapIndicationColor_4_Active_TextColor", + "--sapIndicationColor_4_Background", + "--sapIndicationColor_4_BorderColor", + "--sapIndicationColor_4_Hover_Background", + "--sapIndicationColor_4_TextColor", + "--sapIndicationColor_4b", + "--sapIndicationColor_4b_BorderColor", + "--sapIndicationColor_4b_Hover_Background", + "--sapIndicationColor_5", + "--sapIndicationColor_5_Active_Background", + "--sapIndicationColor_5_Active_BorderColor", + "--sapIndicationColor_5_Active_TextColor", + "--sapIndicationColor_5_Background", + "--sapIndicationColor_5_BorderColor", + "--sapIndicationColor_5_Hover_Background", + "--sapIndicationColor_5_TextColor", + "--sapIndicationColor_5b", + "--sapIndicationColor_5b_BorderColor", + "--sapIndicationColor_5b_Hover_Background", + "--sapIndicationColor_6", + "--sapIndicationColor_6_Active_Background", + "--sapIndicationColor_6_Active_BorderColor", + "--sapIndicationColor_6_Active_TextColor", + "--sapIndicationColor_6_Background", + "--sapIndicationColor_6_BorderColor", + "--sapIndicationColor_6_Hover_Background", + "--sapIndicationColor_6_TextColor", + "--sapIndicationColor_6b", + "--sapIndicationColor_6b_BorderColor", + "--sapIndicationColor_6b_Hover_Background", + "--sapIndicationColor_7", + "--sapIndicationColor_7_Active_Background", + "--sapIndicationColor_7_Active_BorderColor", + "--sapIndicationColor_7_Active_TextColor", + "--sapIndicationColor_7_Background", + "--sapIndicationColor_7_BorderColor", + "--sapIndicationColor_7_Hover_Background", + "--sapIndicationColor_7_TextColor", + "--sapIndicationColor_7b", + "--sapIndicationColor_7b_BorderColor", + "--sapIndicationColor_7b_Hover_Background", + "--sapIndicationColor_8", + "--sapIndicationColor_8_Active_Background", + "--sapIndicationColor_8_Active_BorderColor", + "--sapIndicationColor_8_Active_TextColor", + "--sapIndicationColor_8_Background", + "--sapIndicationColor_8_BorderColor", + "--sapIndicationColor_8_Hover_Background", + "--sapIndicationColor_8_TextColor", + "--sapIndicationColor_8b", + "--sapIndicationColor_8b_BorderColor", + "--sapIndicationColor_8b_Hover_Background", + "--sapIndicationColor_9", + "--sapIndicationColor_9_Active_Background", + "--sapIndicationColor_9_Active_BorderColor", + "--sapIndicationColor_9_Active_TextColor", + "--sapIndicationColor_9_Background", + "--sapIndicationColor_9_BorderColor", + "--sapIndicationColor_9_Hover_Background", + "--sapIndicationColor_9_TextColor", + "--sapIndicationColor_9b", + "--sapIndicationColor_9b_BorderColor", + "--sapIndicationColor_9b_Hover_Background", + "--sapIndicationColor_10", + "--sapIndicationColor_10_Active_Background", + "--sapIndicationColor_10_Active_BorderColor", + "--sapIndicationColor_10_Active_TextColor", + "--sapIndicationColor_10_Background", + "--sapIndicationColor_10_BorderColor", + "--sapIndicationColor_10_Hover_Background", + "--sapIndicationColor_10_TextColor", + "--sapIndicationColor_10b", + "--sapIndicationColor_10b_BorderColor", + "--sapIndicationColor_10b_Hover_Background", "--sapInformationBackground", "--sapInformationBorderColor", "--sapInformativeElementColor", @@ -351,6 +499,8 @@ "--sapNegativeColor", "--sapNegativeElementColor", "--sapNegativeTextColor", + "--sapNeutralBackground", + "--sapNeutralBorderColor", "--sapNeutralColor", "--sapNeutralElementColor", "--sapNeutralTextColor",