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.

Sign up for GitHub

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

[35422] Rating: Remove Sketch and Adobe XD references #876

Open
wants to merge 1 commit into
base: vNext
Choose a base branch
from
Open

[35422] Rating: Remove Sketch and Adobe XD references #876

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 3 additions & 20 deletions en/components/rating.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Rating - Design System Component
_description: The Rating component lets users apply a rating to an item or experience, such as an image, a forum post, an item for sale in a marketplace, and more.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Ignite UI for Angular, Angular, Angular Design System, Design Kits for Angular, Figma HTML
---

# Rating
Expand All @@ -27,33 +27,16 @@ After detaching, you may increase the number of the rating icons by duplicating

To reduce the number of rating icons, there is no need to detach the component. You can simply hide the unnecessary icons from the Layers panel.

## Using the Rating in Sketch

The Rating component in Sketch shares almost the same building elements as in Figma, including a Label and Value section, and comes with five rating icons by default. If more rating icons are needed, the component needs to be detached by right-clicking on it and selecting `Detach from Symbol` from the contextual menu. Once detached, you should see the following layers:

| Layer | Use |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| 🚫 metadata | A special locked layer starting with a prohibited icon. This layer is required by the code generation and you should avoid deleting or modifying it. |
| Label | Text layer that can be changed or hidden if not needed |
| Value | Contains all the rating icons |

In order to increase or decrese the number of rating icons, you should use the `Detach from Symbol` option again over the `Value` symbol and then by duplicating or deleting any of the rating icons, that already exist, you will be able to achive the desired amount of icons.

## Using the Rating in Adobe XD

> [!NOTE]
> WIP: Currently, we don't support the Rating component in Adobe XD.

## Interaction States

In Figma, when inserted, the Rating component is always enabled by default. You can disable it from the properties panel, while in Sketch, the Rating can be inserted in an enabled or disabled state.
In Figma, when inserted, the Rating component is always enabled by default. You can disable it from the properties panel.

<img class="responsive-img" src="../images/rating_enabled_empty-state.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/rating_disabled_empty-state.png" srcset="../images/[email protected] 2x" />

## State

The Rating component has an `Empty State` and it can be switched on and off from a boolean property in Figma. In addition, there is a `Value` property in Figma, which is the opposite of the `Empty State` and allows you to select the fulfillment of the Value from predefined options from 0 to 5 (supporting half star as well). In Sketch this can be achieved easily with ~Symbol Overrides.
The Rating component has an `Empty State` and it can be switched on and off from a boolean property in Figma. In addition, there is a `Value` property in Figma, which is the opposite of the `Empty State` and allows you to select the fulfillment of the Value from predefined options from 0 to 5 (supporting half star as well).

<img class="responsive-img" src="../images/rating_enabled_empty-state.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/rating_value2.5.png" srcset="../images/[email protected] 2x" />
Expand Down
Loading