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.
There was a problem hiding this comment.
Yes, currently there is no display-only mode in the ui5-rating-indicator component and the read-only and disabled icons are displayed as display-only ones.
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
There was a problem hiding this comment.
We can discuss it, but in my opinion it is also outside the scope of introducing a custom rating indicator icon backlog item.
| 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.
There was a problem hiding this comment.
Not in the scope of the custom icon implementation. There is a reason that the read-only is implemeted as it is - there is no 'display only' property yet in this component so the read-only property is visualised as display-only.
| </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
There was a problem hiding this comment.
I would prefer to leave the structure as it is, because the disabled property is not implemented according to the specification and it is possible that we will have to adjust it in the near future
apply code review feedback
…P/ui5-webcomponents into rating-indicator-custom-icons
BGSOFUIRILA-4212