UI5WebComponents Enablement: Badge Concept

Description

In UI5 Web Components it is necessary to enable the same badge functionality as in UI5 Controls - https://blogs.sap.com/2021/02/04/badge-support-in-ui5-controls/. Please carefully consider how the implentation will work in the enablement context.

Implementation

After discussions, we've come to a common agreement to implement badge support in each component using a slot - #5418, instead of a feature - #5469. Keep in mind that this is just a general guideline.

The slot may accept:

• an overstyled ui5-badge, as implemented for ui5-avatar - https://github.com/SAP/ui5-webcomponents/pull/5418
• a central component made specifically to handle the badge visualization (and possibly animations in the future). Cannot be named ui5-badge as it's taken. Perhaps ui5-badge-enablement is a good name? https://github.com/SAP/ui5-webcomponents/pull/5469
• a custom user-defined span

How to implement:

To implement badge support (e.g. for ui5-button):

1. Define a badge slot:

packages/main/src/Button.js:

slots: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
	/**
	 * Defines the optional badge that will be used.
	 * <b>Note:</b> While the slot allows for custom badges, to achieve the
	 * Fiori design, please use <code>ui5-badge</code> with a text node inside.
	 *
	 * @type 
	 * @slot
	 * @public
	 * @since 1.7.0
	 */
	badge: {
		type: HTMLElement,
	},
}

2. Same as above, for the Handlebars template:

packages/main/src/Button.hbs:

<button>
...
	<slot name="badge"></slot>
...
</button>

3. Use the ::slotted([slot="badge"]) selector to apply styles:

packages/main/src/themes/Button.css:

::slotted([slot="badge"]) {
        padding: 5%;
	min-width: 1rem;
	background: var(--sapContent_BadgeBackground);
	border-color: var(--sapContent_BadgeBackground);
	color: var(--sapContent_BadgeTextColor);
	padding: .25rem;
	border-radius: 1rem;
	justify-content: center;
	font-size: var(--sapFontSmallSize);
	margin-inline-start: 0.25rem;
}

Example usage:

In UI5 Web Components:

<!-- With ui5-badge -->
<ui5-button>
	Press
	<ui5-badge slot="badge">
		<ui5-icon slot="icon" name="accelerated"></ui5-icon>
	</ui5-badge>
</ui5-button>

<!-- With a custom element -->
<ui5-button>
	Press
	<span slot="badge" class="my-custom-badge">5</span>
</ui5-button>

In UI5 Enablement:

<main:Avatar initials="AB">
	<badge>
		<Badge>
			<icon>
				<Icon name="accept" slot="icon" />
			</icon>
		</Badge>
	</Badge>
</main:Avatar>

Implemented components:

• ui5-avatar - #5418
• ui5-button https://github.com/UI5/webcomponents/pull/10642
• ui5-tabcontainer
• ui5-card