Drawer - fixes

Container - rework

src/Connected.Components/Components/Container/Container.razor

@@ -2,6 +2,6 @@
 
 @inherits UIComponent
 
-<div @attributes="CustomAttributes" class="@Classname">
+<div @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
     @ChildContent
 </div>

src/Connected.Components/Components/Container/Container.razor.cs

@@ -1,36 +1,54 @@
-using Connected.Annotations;
+using Connected.Utilities;
-using Connected.Extensions;
-using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
 public partial class Container : UIComponent
 {
-	protected string Classname =>
+
-	new CssBuilder("container")
+	#region Event callbacks
-	  .AddClass($"container-fixed", Fixed)
+	#endregion
-	  .AddClass($"container-maxwidth-{MaxWidth.ToDescription()}", !Fixed)
+
-	  .AddClass(AdditionalClassList)
+	#region Content placeholders
-	.Build();
 
 	/// <summary>
-	/// Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default.
+	/// Child content of component.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Container.Behavior)]
+	public RenderFragment ChildContent { get; set; }
-	public bool Fixed { get; set; } = false;
+
+	#endregion
+
+	#region Styling properties
+	private CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("container")
+			  .AddClass(ClassList);
+		}
+	}
+
+	protected StyleBuilder CompiledStyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(StyleList);
+
+		}
+	}
 
 	/// <summary>
-	/// Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.
+	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Container.Behavior)]
+	public string? ClassList { get; set; }
-	public MaxWidth MaxWidth { get; set; } = MaxWidth.Large;
 
 	/// <summary>
-	/// Child content of component.
+	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Container.Behavior)]
+	public string? StyleList { get; set; }
-	public RenderFragment ChildContent { get; set; }
+
+	#endregion
 }

src/Connected.Components/Components/Drawer/Drawer.razor

@@ -1,7 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<p>@_screenBreakpoint.ToString()</p>
 @if (_screenBreakpoint.ToString().ToLower() != "xs")
 {
     <aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">

src/Connected.Components/Components/Drawer/Drawer.razor.cs

@@ -255,12 +255,12 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 	{
 		get
 		{
-			return new CssBuilder("drawer-overlay mud-overlay-drawer")
+			return new CssBuilder("drawer-overlay")
-	  .AddClass($"drawer-pos-{GetPosition()}")
+			  .AddClass($"drawer-pos-{GetPosition()}")
-	  .AddClass($"drawer-overlay--open", Open)
+			  .AddClass($"drawer-overlay--open", Open)
-	  .AddClass($"drawer-overlay-{Variant.ToDescription()}")
+			  .AddClass($"drawer-overlay-{Variant.ToDescription()}")
-	  .AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
+			  .AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
-	  .AddClass($"drawer-overlay--initial", _initial);
+			  .AddClass($"drawer-overlay--initial", _initial);
 		}
 	}