Skip to content

Commit

Permalink
add style prioritizer, button styles to include a loader
Browse files Browse the repository at this point in the history
  • Loading branch information
codymullins committed Apr 1, 2024
1 parent 819dde8 commit 859bab1
Show file tree
Hide file tree
Showing 9 changed files with 224 additions and 166 deletions.
8 changes: 4 additions & 4 deletions src/Pure.Blazor.Components/Buttons/ButtonStyles.cs
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ public class ButtonStyles
private const string DangerOutlineButton = "border-red-400 text-gray-800 hover:border-red-400";
private const string SuccessOutlineButton = "border-green-400 text-gray-800 hover:border-green-400";

private const string PrimarySubtleButton = "bg-transparent hover:text-brand-900 text-brand-800";
private const string DangerSubtleButton = "bg-transparent hover:bg-red-800 text-gray-100";
private const string SuccessSubtleButton = "bg-transparent hover:bg-green-900 text-gray-100";
private const string PrimarySubtleButton = "bg-transparent hover:text-brand-900 hover:bg-gray-100 text-brand-800";
private const string DangerSubtleButton = "bg-transparent hover:bg-red-800/20 text-gray-100";
private const string SuccessSubtleButton = "bg-transparent hover:bg-green-900/20 text-gray-100";

public readonly Dictionary<PureSize, string> Sizes = new()
{
Expand Down Expand Up @@ -64,5 +64,5 @@ public class ButtonStyles
};

public string Base =>
"inline-flex justify-center rounded-sm md:rounded-xs text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600 border border-transparent";
"inline-flex justify-center items-center gap-1 rounded-sm md:rounded-xs text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600 border border-transparent";
}
60 changes: 44 additions & 16 deletions src/Pure.Blazor.Components/Buttons/PureButton.razor
Original file line number Diff line number Diff line change
@@ -1,18 +1,46 @@
@inherits PureButtonBase

<button
@attributes="InputAttributes"
class="@InternalCss @Styles"
disabled="@Disabled"
@onmousedown="() => Pressed = true"
@onmouseup="() => Pressed = false"
@onclick="OnClicked">
@if (ChildContent != null)
{
@ChildContent
}
else
{
@Text
}
</button>
@if (Loading)
{
<button
type="button"
@attributes="InputAttributes"
class="@InternalCss @Styles">
<PureIcon Type="IconOpenCircle" Animate="PureAnimate.Spin" Size="PureSize.Small"></PureIcon>
@if (LoadingText is not null)
{
@LoadingText
}
else
{
if (ChildContent is not null)
{
@ChildContent
}
else
{
@Text
}
}

</button>
}
else
{
<button
@attributes="InputAttributes"
class="@InternalCss @Styles"
disabled="@Disabled"
@onmousedown="() => Pressed = true"
@onmouseup="() => Pressed = false"
@onclick="OnClicked">
@if (ChildContent is not null)
{
@ChildContent
}
else
{
@Text
}
</button>
}
18 changes: 14 additions & 4 deletions src/Pure.Blazor.Components/Buttons/PureButtonBase.cs
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,17 @@ public class PureButtonBase : PureComponent

[Parameter] public Accent Accent { get; set; }

[Parameter] public bool Loading { get; set; }
/// <summary>
/// Indicate the button is in a loading state
/// </summary>
[Parameter]
public bool Loading { get; set; }

/// <summary>
/// Optional text to display when the button is loading.
/// </summary>
[Parameter]
public string? LoadingText { get; set; }

/// <summary>
/// Displays simple text on the button.
Expand Down Expand Up @@ -48,7 +58,7 @@ protected void OnClicked(MouseEventArgs e)
OnClick.InvokeAsync();
}

protected virtual string BuildCss() => Theme != Theme.Off
? $"{PureStyles.Button.Base} {PureStyles.Button.Variants[Variant][Accent]} {PureStyles.Button.Sizes[Size]}"
: "";
protected new virtual string BuildCss() =>
ApplyStyle(
$"{PureStyles.Button.Base} {PureStyles.Button.Variants[Variant][Accent]} {PureStyles.Button.Sizes[Size]}");
}
27 changes: 27 additions & 0 deletions src/Pure.Blazor.Components/Common/Css/SegmentBenchmarks.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using BenchmarkDotNet.Attributes;

namespace Pure.Blazor.Components.Common.Css;

public class SegmentBenchmarks
{
[Benchmark(Baseline = true)]
public void NoSeparator() => "foo".Segment(':');

[Benchmark]
public void Single() => "bg-gray-100".Segment('-');

[Benchmark]
public void OnlySeparators() => "foo:bar:baz".Segment(':');

[Benchmark]
public void Parens() => "a:(b:c):d".Segment(':');

[Benchmark]
public void Brackets() => "a:[b:c]:d".Segment(':');

[Benchmark]
public void CurlyBraces() => "a:{b:c}:d".Segment(':');

[Benchmark]
public void Var() => "var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)".Segment(',');
}
52 changes: 52 additions & 0 deletions src/Pure.Blazor.Components/Common/Css/Segmentor.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
namespace Pure.Blazor.Components.Common.Css;

public static class Segmentor
{
public static Stack<string> Segment(this string input, char separator)
{
var closingBracketStack = new Stack<char>();
var parts = new Stack<string>();
var lastPos = 0;

for (var idx = 0; idx < input.Length; idx++)
{
var charValue = input[idx];

if (closingBracketStack.Count == 0 && charValue == separator)
{
parts.Push(input.Substring(lastPos, idx - lastPos));
lastPos = idx + 1;
continue;
}

switch (charValue)
{
case '\\':
idx += 1;
break;
case '(':
closingBracketStack.Push(')');
break;
case '[':
closingBracketStack.Push(']');
break;
case '{':
closingBracketStack.Push('}');
break;
case ')':
case ']':
case '}':
if (closingBracketStack.Count > 0 && charValue == closingBracketStack.Peek())
{
closingBracketStack.Pop();
}

break;
}
}

parts.Push(input[lastPos..]);

return parts;
}
}
112 changes: 0 additions & 112 deletions src/Pure.Blazor.Components/Common/Css/StylePrioritizer.cs
Original file line number Diff line number Diff line change
Expand Up @@ -79,116 +79,4 @@ public string PrioritizeStyles(string defaultStyles, string userStyles)
ArrayPool<char>.Shared.Return(buffer);
}
}
// public string PrioritizeStyles(string defaultStyles, string userStyles)
// {
// var pool = ArrayPool<char>.Shared;
// var userStylesArray = userStyles.Split(' ');
// var userStylesDict = userStylesArray.ToDictionary(GetKeyFromStyle, s => s);
// var defaultStylesArray = defaultStyles.Split(' ');
// var finalStyles = new List<string>();
//
// foreach (var style in defaultStylesArray)
// {
// var defaultStyleKey = GetKeyFromStyle(style);
// if (userStylesDict.TryGetValue(defaultStyleKey, out var userStyle))
// {
// finalStyles.Add(userStyle);
// }
// else
// {
// finalStyles.Add(style);
// }
// }
//
// foreach (var userStyle in userStylesDict.Values)
// {
// if (!finalStyles.Contains(userStyle))
// {
// finalStyles.Add(userStyle);
// }
// }
//
// var result = string.Join(' ', finalStyles);
//
// // Return the arrays to the pool
// pool.Return(userStylesArray);
// pool.Return(defaultStylesArray);
//
// return result;
// }
}

public class SegmentBenchmarks
{
[Benchmark(Baseline = true)]
public void NoSeparator() => "foo".Segment(':');

[Benchmark]
public void Single() => "bg-gray-100".Segment('-');

[Benchmark]
public void OnlySeparators() => "foo:bar:baz".Segment(':');

[Benchmark]
public void Parens() => "a:(b:c):d".Segment(':');

[Benchmark]
public void Brackets() => "a:[b:c]:d".Segment(':');

[Benchmark]
public void CurlyBraces() => "a:{b:c}:d".Segment(':');

[Benchmark]
public void Var() => "var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)".Segment(',');
}

public static class Segmentor
{
public static Stack<string> Segment(this string input, char separator)
{
var closingBracketStack = new Stack<char>();
var parts = new Stack<string>();
var lastPos = 0;

for (var idx = 0; idx < input.Length; idx++)
{
var charValue = input[idx];

if (closingBracketStack.Count == 0 && charValue == separator)
{
parts.Push(input.Substring(lastPos, idx - lastPos));
lastPos = idx + 1;
continue;
}

switch (charValue)
{
case '\\':
idx += 1;
break;
case '(':
closingBracketStack.Push(')');
break;
case '[':
closingBracketStack.Push(']');
break;
case '{':
closingBracketStack.Push('}');
break;
case ')':
case ']':
case '}':
if (closingBracketStack.Count > 0 && charValue == closingBracketStack.Peek())
{
closingBracketStack.Pop();
}

break;
}
}

parts.Push(input[lastPos..]);

return parts;
}
}
8 changes: 4 additions & 4 deletions src/Pure.Blazor.Components/Icons/PureIcon.razor
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
fill="@strokeFill"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
stroke-width="@strokeWidth"
stroke="@strokeColor"
class="@InternalCss @Css">
@Markup
@markupString
</svg>
Loading

0 comments on commit 859bab1

Please sign in to comment.