feat(ui5-button): add badge to ui5-button

[tsanislavgatev]

Implementing the badge concept in theui5-button component.

How to use:

<ui5-button design="Emphasized" icon="employee">Notifications
       <ui5-button-badge design="OverlayText" text="999+" slot="badge"></ui5-button-badge>
</ui5-button>

The badge in ui5-button provides 3 designs: InlineText, OverlayText and AttentionDot looking like:

fixes: #10683

[vladitasev]

Another API idea:

• we don't talk about Top/TopRight(TopEnd) but instead use completely different terms that are independent of top/right: OverlyText (top right), InlineText (right) and AttentionDot
• we don't assume that empty text means "dot"

Variant 1:

• badgeDesign: None (default), OverlayText, InlineText, AttentionDot
• badgeText: string (this property is ignored when badgeDesign is set to Dot or None)

Example:

<ui5-button badge-design="AttentionDot">Messages</ui5-button>
<ui5-button badge-design="InlineText" badge-text="99+">Messages</ui5-button> 
<ui5-button badge-design="OverlayText" badge-text="99+">Messages</ui5-button>

Variant 2:

• badgeDesign: OverlayText, InlineText (default), AttentionDot
• badgeText: string (this property is ignored when badgeDesign is set to AttentionDot)

there is no None option, badgeDesign is InlineText by default, but if there is no badgeText, we show nothing

Same as 1) but there is no None option

Example:

<ui5-button badge-design="AttentionDot">Messages</ui5-button>
<ui5-button badge-text="99+">Messages</ui5-button> <!-- inline by default as it works for cozy/compact -->
<ui5-button badge-text="99+" badge-design="OverlayText">Messages</ui5-button>

Variant 3:

We split the enum.

• attentionDot: boolean
• badgeText: string. This property is ignored when attentionDot is set to true.
• badgeDesign: Overlay, Inline (default). This property is ignored when attentionDot is set to true.

Example:

<ui5-button attention-dot>Messages</ui5-button>
<ui5-button badge-text="99+">Messages</ui5-button> <!-- inline by default as it works for cozy/compact -->
<ui5-button badge-text="99+" badge-design="Overlay">Messages</ui5-button>

Variant 4:

• attentionDot: boolean
• badgeText: string. This property is ignored when attentionDot is set to true.
• badgeTextOverlaid: boolean. This property is ignored when attentionDot is set to true.

Same as 3) but the enum is now a boolean (which however sounds strange)

Example:

<ui5-button attention-dot>Messages</ui5-button>
<ui5-button badge-text="99+">Messages</ui5-button> <!-- inline by default as it works for cozy/compact -->
<ui5-button badge-text="99+" badge-text-overlaid>Messages</ui5-button>

[tsanislavgatev]

add website sample

[vladitasev]

Looks good, I have a few very minor comments.

Let's discuss the idea of making the badge an optional feature tomorrow. We can do it exactly like in ColorPalette - just import the extra template with the <ui5-tag> dynamically.

[vladitasev]

Now that it's a separate component, add it in bundle.common.ts after the Button import.

[dimovpetar]

Approving new part of Tag

[vladitasev]

Here this must be ButtonBadge (but works with Button too, because they both have a text property). We can fix this later in another PR along with something else, do not push again just for this.

[tsanislavgatev]

#10705

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.7.0-rc.2 🎉

The release is available on v2.7.0-rc.2

Your semantic-release bot 📦🚀