-
Notifications
You must be signed in to change notification settings - Fork 377
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Rating] Refactorization for Accessibility features (#2322)
* Refactorization Rating component * Fix Unit Tests * Add Unit Tests * Add Accessibility (need to update Unit Tests) * Fix Unit Tests * Update Unit Tests * Update OnHoveredValueChanged to OnHoverValueChanged
- Loading branch information
Showing
14 changed files
with
421 additions
and
377 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
examples/Demo/Shared/Pages/Rating/Examples/RatingCustomization.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <h4>Example</h4> | ||
|
|
||
| <FluentStack VerticalAlignment="VerticalAlignment.Center" Style="margin-left: 32px;"> | ||
| <FluentRating Max="@_maxValue" | ||
| @bind-Value="@_value" | ||
| IconFilled="@_iconFilled" | ||
| IconOutline="@_iconOutline" | ||
| ReadOnly="@_readOnly" | ||
| IconColor="@_iconColor" | ||
| Disabled="@_disabled" , | ||
| AllowReset="@_allowReset" /> | ||
|
|
||
| <FluentLabel>Value: @_value</FluentLabel> | ||
| </FluentStack> | ||
|
|
||
| <hr /> | ||
|
|
||
| <FluentStack HorizontalGap="100"> | ||
| <div> | ||
| <FluentSelect Label="ReadOnly" | ||
| @bind-SelectedOption="@_readOnly" | ||
| Style="@FixedWidth" | ||
| Items="@(new[] { true, false })" /> | ||
|
|
||
| <FluentSelect Label="AllowReset" | ||
| @bind-SelectedOption="@_allowReset" | ||
| Style="@FixedWidth" | ||
| Items="@(new[] { true, false })" /> | ||
|
|
||
| <FluentSelect Label="Disabled" | ||
| @bind-SelectedOption="@_disabled" | ||
| Style="@FixedWidth" | ||
| Items="@(new[] { true, false })" /> | ||
| </div> | ||
| <div> | ||
| <FluentNumberField TValue="int" | ||
| Label="Max Value" | ||
| Style="@FixedWidth" | ||
| Min="1" | ||
| Max="20" | ||
| @bind-Value="@_maxValue" /> | ||
|
|
||
| <FluentSelect Label="Color" | ||
| @bind-SelectedOption="@_iconColor" | ||
| Style="@FixedWidth" | ||
| Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))" | ||
| OptionValue="@(i => i.ToAttributeValue())" /> | ||
|
|
||
| <FluentSelect Label="Icons" | ||
| TOption="string" | ||
| SelectedOptionChanged="@SetIcon" | ||
| Style="@FixedWidth" | ||
| Items="IconsName" /> | ||
| </div> | ||
| </FluentStack> | ||
|
|
||
| @code | ||
| { | ||
| readonly string FixedWidth = "max-width: 100px; min-width: 100px; margin: 10px;"; | ||
| readonly List<string> IconsName = ["Heart", "Star", "Alert", "PersonCircle"]; | ||
| readonly Icon[] IconsFilled = new Icon[] | ||
| { | ||
| new Icons.Filled.Size20.Heart(), | ||
| new Icons.Filled.Size20.Star(), | ||
| new Icons.Filled.Size20.Alert(), | ||
| new Icons.Filled.Size20.PersonCircle(), | ||
| }; | ||
| readonly Icon[] IconsOutline = new Icon[] | ||
| { | ||
| new Icons.Regular.Size20.Heart(), | ||
| new Icons.Regular.Size20.Star(), | ||
| new Icons.Regular.Size20.Alert(), | ||
| new Icons.Regular.Size20.PersonCircle(), | ||
| }; | ||
|
|
||
| bool _readOnly = false; | ||
| bool _disabled = false; | ||
| bool _allowReset = false; | ||
| int _maxValue = 10; | ||
| int _value = 2; | ||
| Color _iconColor = Color.Error; | ||
|
|
||
| Icon _iconFilled = new Icons.Filled.Size20.Star(); | ||
| Icon _iconOutline = new Icons.Regular.Size20.Star(); | ||
|
|
||
|
|
||
| void SetIcon(string? name) | ||
| { | ||
| var index = name is null ? 0 : IconsName.IndexOf(name); | ||
|
|
||
| _iconFilled = IconsFilled[index]; | ||
| _iconOutline = IconsOutline[index]; | ||
| } | ||
|
|
||
| protected override void OnParametersSet() => SetIcon(null); | ||
| } |
28 changes: 27 additions & 1 deletion
28
examples/Demo/Shared/Pages/Rating/Examples/RatingDefault.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,28 @@ | ||
|
|
||
| <FluentRating MaxValue="10" Value="5" Label="Test"/> | ||
| <FluentStack VerticalAlignment="VerticalAlignment.Center"> | ||
| <FluentRating Max="5" | ||
| @bind-Value="@SelectedValue" | ||
| OnHoverValueChanged="@(i => HoverValue = i)" /> | ||
| <FluentLabel>@LabelText</FluentLabel> | ||
| </FluentStack> | ||
|
|
||
| <FluentButton Appearance="Appearance.Lightweight" | ||
| OnClick="@((e) => SelectedValue = 0)"> | ||
| Clear Rating | ||
| </FluentButton> | ||
|
|
||
| @code | ||
| { | ||
| int SelectedValue = 0; | ||
| int? HoverValue = null; | ||
|
|
||
| private string LabelText => (HoverValue ?? SelectedValue) switch | ||
| { | ||
| 1 => "Very bad", | ||
| 2 => "Bad", | ||
| 3 => "Sufficient", | ||
| 4 => "Good", | ||
| 5 => "Awesome!", | ||
| _ => "Rate our product!" | ||
| }; | ||
| } |
38 changes: 0 additions & 38 deletions
38
examples/Demo/Shared/Pages/Rating/Examples/RatingEvent.razor
This file was deleted.
Oops, something went wrong.
69 changes: 0 additions & 69 deletions
69
examples/Demo/Shared/Pages/Rating/Examples/RatingExample.razor
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.