Refactor the alert component

All styling properties and classes have been removed in favor of named
subcomponents. Any and all component styling should be through classes.
features/nuget_autobuild
Matija Koželj 2 years ago
parent 3b6045c3e1
commit 88710e4e3b

@ -6,12 +6,12 @@
class="@CompiledClassList"
@attributes="CustomAttributes"
@onclick="Clicked">
<div class="@CompiledAlignmentClassList">
<div name="alert-content">
@if (GlyphVisible)
{
<div class="alert-icon alert-icon-left">
<Icon Glyph="@CustomGlyph" />
<Icon Glyph="@Glyph" />
</div>
}

@ -6,18 +6,6 @@ namespace Connected.Components;
public partial class Alert : UIComponent
{
/// <summary>
/// Defines the classlist used in aligning the alert content internally.
/// </summary>
private CssBuilder CompiledAlignmentClassList
{
get
{
return new CssBuilder("alert-position")
.AddClass($"justify-sm-{HorizontalAlignment.GetAbsolute(RightToLeft)}");
}
}
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
@ -27,9 +15,6 @@ public partial class Alert : UIComponent
{
return new CssBuilder("alert")
.AddClass($"alert-{Variant}-{Severity}")
.AddClass($"dense", Dense)
.AddClass($"square", Square)
.AddClass($"elevation-{Elevation}")
.AddClass(ClassList);
}
}
@ -64,16 +49,10 @@ public partial class Alert : UIComponent
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
/// </summary>
[Parameter]
public string CustomGlyph { get; set; } = default!;
public string Glyph { get; set; } = default!;
#endregion
#region Styling properties
/// <summary>
/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
/// </summary>
[Parameter]
public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Start;
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
@ -86,18 +65,6 @@ public partial class Alert : UIComponent
[Parameter]
public bool CloseGlyphVisible { get; set; }
/// <summary>
/// If true, compact padding will be used.
/// </summary>
[Parameter]
public bool Dense { get; set; }
/// <summary>
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
/// </summary>
[Parameter]
public int Elevation { set; get; } = 0;
/// <summary>
/// If true, no alert glyph will be used.
/// </summary>
@ -107,6 +74,7 @@ public partial class Alert : UIComponent
/// <summary>
/// Specifies the control's display style
/// </summary>
//TODO: Implement in DOM
[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }
@ -116,12 +84,6 @@ public partial class Alert : UIComponent
[Parameter]
public Severity Severity { get; set; } = Severity.Normal;
/// <summary>
/// If true, rounded corners are disabled.
/// </summary>
[Parameter]
public bool Square { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
@ -131,10 +93,10 @@ public partial class Alert : UIComponent
protected override void OnParametersSet()
{
if (!string.IsNullOrEmpty(CustomGlyph))
if (!string.IsNullOrEmpty(Glyph))
return;
CustomGlyph = GetGlyphForSeverity(Severity);
Glyph = GetGlyphForSeverity(Severity);
}
private string GetGlyphForSeverity(Severity severity)

Loading…
Cancel
Save