test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-11-29 18:48:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(module: tag): incorrect default color and add tests (#2816)

Browse Source 
* Update tag tests and mark a couple parameters as obsolete. Documentation updates.

* Update documentation demos for Tags to remove usage of PresetColor
This commit is contained in:
kooliokey 2022-10-20 01:50:50 -04:00 committed by GitHub
parent 0de1573011
commit b5ad920450
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 76 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/tag/Tag.razor.cs
View File

@ -51,7 +51,9 @@ namespace AntDesign
{
if (_color != value)
{
_color = value;
_color = string.IsNullOrWhiteSpace(value)
? "default"
: value.ToLowerInvariant();
_isPresetColor = IsPresetColor(_color);
_isCustomColor = !_isPresetColor; //if it's not a preset color, we can assume that the input is a HTML5 color or Hex or RGB value
}
@ -59,6 +61,7 @@ namespace AntDesign
}
[Parameter]
[Obsolete($"Use {nameof(Color)} instead by passing the string of the enum value")]
public PresetColor? PresetColor
{
get
@ -85,6 +88,7 @@ namespace AntDesign
public string Icon { get; set; }
[Parameter]
[Obsolete("Parameter is not used and does not affect functionality")]
public bool NoAnimation { get; set; }
/// <summary>
@ -112,11 +116,10 @@ namespace AntDesign
[Parameter]
public bool Visible { get; set; } = true;
private bool _isPresetColor;
private bool _isPresetColor = true;
private bool _isCustomColor;
private bool _closed;
private string _color;
private string _color = "default";
private string _style;
protected override void OnParametersSet()
@ -133,15 +136,11 @@ namespace AntDesign
private static bool IsPresetColor(string color)
{
if (string.IsNullOrEmpty(color))
{
return false;
}
bool result = Regex.IsMatch(color, "^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime|success|processing|error|warning|default)(-inverse)?$");
return result;
return Regex.IsMatch(color, "^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime|success|processing|error|warning|default)(-inverse)?$");
}
private string _prefix = "ant-tag";
private void UpdateClassMap()
{
this.ClassMapper.Add(_prefix)
@ -157,7 +156,7 @@ namespace AntDesign
private string GetStyle()
{
StringBuilder styleBuilder = new StringBuilder();
var styleBuilder = new StringBuilder();
styleBuilder.Append(Style);

2
site/AntDesign.Docs/Demos/Components/Grid/demo/UseBreakpoint.razor
View File

@ -4,7 +4,7 @@
{
if ((int)type <= (int)current)
{
<Tag PresetColor="@PresetColor.Blue">@type</Tag>
<Tag Color="@PresetColor.Blue.ToString()">@type</Tag>
}
}
</GridRow>

2
site/AntDesign.Docs/Demos/Components/PageHeader/demo/Actions.razor
View File

@ -23,7 +23,7 @@
<PageHeaderTitle>Title</PageHeaderTitle>
<PageHeaderSubtitle>This is a subtitle</PageHeaderSubtitle>
<PageHeaderTags>
<Tag PresetColor="@PresetColor.Blue">Running</Tag>
<Tag Color="@PresetColor.Blue.ToString()">Running</Tag>
</PageHeaderTags>
<PageHeaderExtra>
<Button>Operation</Button>

2
site/AntDesign.Docs/Demos/Components/PageHeader/demo/Content.razor
View File

@ -22,7 +22,7 @@
<!--tags-->
<PageHeaderTags>
<Tag PresetColor="@PresetColor.Blue">Running</Tag>
<Tag Color="@PresetColor.Blue.ToString()">Running</Tag>
</PageHeaderTags>
<!--extra-->

26
site/AntDesign.Docs/Demos/Components/Tag/demo/Colorful.razor
View File

@ -1,18 +1,18 @@
<Divider Orientation="left">Presets</Divider>
<div class="tag-colorful-demo">
<Tag PresetColor="@PresetColor.Magenta">magenta</Tag>
<Tag PresetColor="@PresetColor.Pink">pink</Tag>
<Tag PresetColor="@PresetColor.Red">red</Tag>
<Tag PresetColor="@PresetColor.Volcano">volcano</Tag>
<Tag PresetColor="@PresetColor.Orange">orange</Tag>
<Tag PresetColor="@PresetColor.Green">green</Tag>
<Tag PresetColor="@PresetColor.Cyan">cyan</Tag>
<Tag PresetColor="@PresetColor.Blue">blue</Tag>
<Tag PresetColor="@PresetColor.Lime">lime</Tag>
<Tag PresetColor="@PresetColor.GeekBlue">geekblue</Tag>
<Tag PresetColor="@PresetColor.Purple">purple</Tag>
<Tag PresetColor="@PresetColor.Yellow">yellow</Tag>
<Tag PresetColor="@PresetColor.Gold">gold</Tag>
<Tag Color="@PresetColor.Magenta.ToString()">magenta</Tag>
<Tag Color="@PresetColor.Pink.ToString()">pink</Tag>
<Tag Color="@PresetColor.Red.ToString()">red</Tag>
<Tag Color="@PresetColor.Volcano.ToString()">volcano</Tag>
<Tag Color="@PresetColor.Orange.ToString()">orange</Tag>
<Tag Color="@PresetColor.Green.ToString()">green</Tag>
<Tag Color="@PresetColor.Cyan.ToString()">cyan</Tag>
<Tag Color="@PresetColor.Blue.ToString()">blue</Tag>
<Tag Color="@PresetColor.Lime.ToString()">lime</Tag>
<Tag Color="@PresetColor.GeekBlue.ToString()">geekblue</Tag>
<Tag Color="@PresetColor.Purple.ToString()">purple</Tag>
<Tag Color="@PresetColor.Yellow.ToString()">yellow</Tag>
<Tag Color="@PresetColor.Gold.ToString()">gold</Tag>
</div>
<Divider Orientation="left">Inverse</Divider>
<div class="tag-colorful-demo">

3
site/AntDesign.Docs/Demos/Components/Tag/doc/index.en-US.md
View File

@ -22,10 +22,9 @@ Tag for categorizing or markup.
| ChildContent | Contents of the `Tag`| RenderFragment |- |
| Class | Any css class that will be added to tag. Use case: adding animation. | string | - | 0.9
| Closable | Whether the `Tag` can be closed| boolean | false |
| Color | Color of the `Tag` | string | - |
| Color | Color of the `Tag` | string | "default" |
| Icon | Set the icon of the `Tag` | string | - |
| OnClick | Callback executed when the `Tag` is clicked (excluding closing button) | Action | - |
| OnClose | Callback executed when the `Tag` is closed | Action<MouseEventArgs> | - |
| OnClosing | Callback executed when the `Tag` is being closed. Closing can be canceled here. | Action<CloseEventArgs<MouseEventArgs>> | - |
| PresetColor | The preset color of the `Tag` | PresetColor | - |
| Visible | Whether the `Tag` is closed or not | boolean | true |

3
site/AntDesign.Docs/Demos/Components/Tag/doc/index.zh-CN.md
View File

@ -24,10 +24,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
| ChildContent | Contents of the `Tag`| RenderFragment |- |
| Class | Any css class that will be added to tag. Use case: adding animation. | string | - | 0.9
| Closable | 值标签是否可以关闭| boolean |false |
| Color | 预设标签色 | string | - |
| Color | 预设标签色 | string | "default" |
| Icon | 设置图标 | string | - |
| OnClick | Callback executed when the `Tag` is clicked (excluding closing button) | Action | - |
| OnClose | 关闭时的回调 | Action<MouseEventArgs> | - |
| OnClosing | Callback executed when the `Tag` is being closed. Closing can be canceled here. | Action<CloseEventArgs<MouseEventArgs>> | - |
| PresetColor | 标签的预设颜色 | PresetColor | - |
| Visible | 是否显示标签 | boolean |true

64
tests/AntDesign.Tests/Tag/TagTests.razor
View File

@ -4,24 +4,28 @@
public void Renders_basic_tag()
{
var cut = Context.Render(@<AntDesign.Tag>Tag 1</AntDesign.Tag>);
cut.MarkupMatches(@<span class="ant-tag" id:ignore>Tag 1</span>);
cut.MarkupMatches(@<span class="ant-tag ant-tag-default" id:ignore>Tag 1</span>);
}
[Fact]
public void Renders_basic_tag_invisible()
{
var cut = Context.Render(@<AntDesign.Tag Visible="false"> Tag 1</AntDesign.Tag>);
cut.MarkupMatches(@<span class="ant-tag ant-tag-hidden" id:ignore>Tag 1</span>);
cut.MarkupMatches(@<span class="ant-tag ant-tag-default ant-tag-hidden" id:ignore>Tag 1</span>);
}
[Theory]
[InlineData("success")]
[InlineData("processing")]
[InlineData("error")]
public void Renders_predefined_tag(string color)
[InlineData("success", "ant-tag-success")]
[InlineData("processing", "ant-tag-processing")]
[InlineData("error", "ant-tag-error")]
[InlineData("MAGENTA", "ant-tag-magenta")]
[InlineData("blue-inverse", "ant-tag-blue-inverse")]
[InlineData("", "ant-tag-default")]
[InlineData(null, "ant-tag-default")]
public void Renders_predefined_tag(string color, string expectedClass)
{
var cut = Context.Render(@<AntDesign.Tag Color="@color">Tag 1</AntDesign.Tag>);
cut.MarkupMatches(@<span class="ant-tag ant-tag-@color" id:ignore>Tag 1</span>);
cut.MarkupMatches(@<span class="ant-tag @expectedClass" id:ignore>Tag 1</span>);
}
[Fact]
@ -40,16 +44,42 @@
var cut = Context.Render<AntDesign.Tag>(@<AntDesign.Tag Closable OnClosing="onClosing">Tag 1</AntDesign.Tag>);
var icon = cut.Find("span.anticon");
icon.Click();
cut.MarkupMatches(
@<span class="ant-tag" id:ignore >Tag 1
<span role="img" class="anticon anticon-close" id:ignore tabindex="-1" >
<svg focusable="false" width="1em" height="1em" fill="currentColor" style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
<path d:ignore></path>
</svg>
</span>
</span>
);
}
cut.MarkupMatches(@<span class:ignore id:ignore >Tag 1
<span role="img" class="anticon anticon-close" id:ignore tabindex="-1" >
<svg focusable="false" width="1em" height="1em" fill="currentColor" style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
<path d:ignore></path>
</svg>
</span>
</span>
);
}
[Fact]
public void OnClose_gets_called()
{
var called = false;
Action<MouseEventArgs> onClose = value => { called = true; };
var cut = Context.Render<AntDesign.Tag>(@<AntDesign.Tag Closable OnClose="onClose">Tag 1</AntDesign.Tag>);
var icon = cut.Find("span.anticon");
icon.Click();
called.Should().BeTrue();
}
[Fact]
public void OnClick_gets_called()
{
var called = false;
Action onClick = () => { called = true; };
var cut = Context.Render<AntDesign.Tag>(@<AntDesign.Tag Closable OnClick="onClick">Tag 1</AntDesign.Tag>);
cut.Find(".ant-tag").Click();
called.Should().BeTrue();
}
[Fact]
public void Click_on_close_does_not_invoke_OnClick()