Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-rating-indicator): introduce tooltip property #7687

Merged
merged 2 commits into from
Oct 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/main/src/RatingIndicator.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
@focusout="{{_onfocusout}}"
@click="{{_onclick}}"
@keydown="{{_onkeydown}}"
title="{{tooltip}}"
title="{{ratingTooltip}}"
aria-label="{{_ariaLabel}}"
>
<ul class="ui5-rating-indicator-list"
Expand Down
16 changes: 14 additions & 2 deletions packages/main/src/RatingIndicator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,18 @@ class RatingIndicator extends UI5Element {
@property({ type: Boolean })
required!: boolean;

/**
* Defines the tooltip of the component.
*
* @type {string}
* @name sap.ui.webc.main.RatingIndicator.prototype.tooltip
* @defaultvalue ""
* @public
* @since 1.19.0
*/
@property()
tooltip!: string;

/**
* @private
*/
Expand Down Expand Up @@ -315,8 +327,8 @@ class RatingIndicator extends UI5Element {
return this.disabled ? "-1" : tabindex || "0";
}

get tooltip() {
return this.getAttribute("title") || this.defaultTooltip;
get ratingTooltip() {
return this.tooltip || this.defaultTooltip;
}

get defaultTooltip() {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/pages/RatingIndicator.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ <h3>disabled</h3>
<br>

<h3>RatingIndicator with title</h3>
<ui5-rating-indicator id="rating-indicator-title" title="Test" accessible-name="Hello World"></ui5-rating-indicator>
<ui5-rating-indicator id="rating-indicator-title" tooltip="Test" accessible-name="Hello World"></ui5-rating-indicator>
<br>
<br>
<br>
Expand Down
4 changes: 2 additions & 2 deletions packages/main/test/specs/RatingIndicator.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,11 +116,11 @@ describe("Rating Indicator general interaction", () => {
assert.strictEqual(await ratingIndicatorList.getAttribute("aria-hidden"), "true", "aria-hidden is set");
});

it("Tests ACC attrs - title attribute provided", async () => {
it("Tests ACC attrs - tooltip property", async () => {
const ratingIndicator = await browser.$("#rating-indicator-title").shadow$(".ui5-rating-indicator-root");
const TOOLTIP = "Test";

assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The title attribute is rendered in the inner div as well.");
assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The tooltip property is rendered as a title in the inner div.");
});

it("Tests ACC attrs - required property add aria-description", async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const Template: UI5StoryArgs<RatingIndicator, StoryArgsSlots> = (args) => html`
?disabled="${ifDefined(args.disabled)}"
?readonly="${ifDefined(args.readonly)}"
?required="${ifDefined(args.required)}"
tooltip="${ifDefined(args.tooltip)}"
accessible-name="${ifDefined(args.accessibleName)}"
accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
></ui5-rating-indicator>`;
Expand Down