feat(ui5-rating-indicator): custom rating icon implemantation #12985
Conversation
BGSOFUIRILA-4212
restore deleted files
|
🚀 Deployed on https://pr-12985--ui5-webcomponents-preview.netlify.app |
| <br> | ||
|
|
||
| <h3>Custom Icons - Hearts (readonly)</h3> | ||
| <ui5-rating-indicator id="rating-hearts-readonly" value="2.5" icon="heart" unselected-icon="heart-2" readonly></ui5-rating-indicator> |
There was a problem hiding this comment.
I noticed that if we remove unselected-icon here, RatingIndicator still change the icon to heart for unselected (unselected-icon does nothing). This happens only in readonly and disabled.
| * @since 2.20 | ||
| */ | ||
| @property() | ||
| icon?: string; |
There was a problem hiding this comment.
I would suggest to use same naming as in the controls - iconSelected, iconUnselected
| * @since 2.20 | ||
| */ | ||
| @property() | ||
| unselectedIcon?: string; |
There was a problem hiding this comment.
Half icon looks strange with custom icons because the way it was implemented is that icons go on top of one another:
It is not mentions in the spec but maybe is good idea to discuss with it with the team
| }); | ||
|
|
||
| it("should use custom icon for unselected items when readonly", () => { | ||
| cy.mount(<RatingIndicator value={2} max={5} icon="heart" unselectedIcon="heart-2" readonly></RatingIndicator>); |
There was a problem hiding this comment.
This test is not working for custom unselectedIcon
| }); | ||
|
|
||
| it("should use custom icon for unselected items when disabled", () => { | ||
| cy.mount(<RatingIndicator value={2} max={5} icon="heart" unselectedIcon="heart-2" disabled></RatingIndicator>); |
| return ( | ||
| <li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel"> | ||
| <Icon data-ui5-value={star.index} name={favorite} /> | ||
| <Icon data-ui5-value={star.index} name={this.effectiveIcon} /> |
There was a problem hiding this comment.
We need to use the UNselected icon as the is only for unselected.
| </div> | ||
| </li> | ||
| ); | ||
| } if (this.readonly) { |
There was a problem hiding this comment.
We can add || this.disabled and delete the condition for disabled as they are the same with readonly
| return ( | ||
| <li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel"> | ||
| <Icon data-ui5-value={star.index} name={favorite} /> | ||
| <Icon data-ui5-value={star.index} name={this.effectiveIcon} /> |
BGSOFUIRILA-4212