diff --git a/src/Pure.Blazor.Components/Essentials/PureLabel.razor b/src/Pure.Blazor.Components/Essentials/PureLabel.razor index 6dd0cc3..847baa9 100644 --- a/src/Pure.Blazor.Components/Essentials/PureLabel.razor +++ b/src/Pure.Blazor.Components/Essentials/PureLabel.razor @@ -1,5 +1,5 @@ @inherits PureComponent -<div class="@ApplyStyle("font-semibold")">@ChildContent</div> +<label for="@For" class="@ApplyStyle("font-medium text-sm font-gray-900") @AccessibilityStyles">@ChildContent</label> @code { @@ -7,5 +7,12 @@ // touch target should be at least 24px // make it the same here since this field is often combined with <PureLink> // https://www.w3.org/WAI/WCAG21/Understanding/touch-target-size.html - private string AccessibilityStyles => "inline-block py-1"; + private string AccessibilityStyles => "inline-block leading-7"; + + /// <summary> + /// The ID of the content that this label is associated with. + /// </summary> + [Parameter] + public string? For { get; set; } + } diff --git a/src/Pure.Blazor.Components/Layout/PureTabButton.razor b/src/Pure.Blazor.Components/Layout/PureTabButton.razor index 25bb7bc..602f60c 100644 --- a/src/Pure.Blazor.Components/Layout/PureTabButton.razor +++ b/src/Pure.Blazor.Components/Layout/PureTabButton.razor @@ -1,20 +1,21 @@ @using System.Text -<a @onclick="OnClick" class="@(InternalCss) sm:px-6 py-1 text-sm w-1/2 sm:w-auto justify-center sm:justify-start inline-flex items-center"> +@inherits PureComponent +<a @onclick="OnClick" class="@ApplyStyle(InternalCss)"> <!-- todo: icon --> @Title </a> + @code { - [Parameter] - public string Title { get; set; } = string.Empty; + private const string BaseCss = "w-1/2 sm:w-auto justify-center sm:justify-start inline-flex items-center"; + [Parameter] public string Title { get; set; } = string.Empty; + + [Parameter] public bool IsActive { get; set; } - [Parameter] - public bool IsActive { get; set; } + [Parameter] public TabVariant Variant { get; set; } - [Parameter] - public TabVariant Variant { get; set; } + [Parameter] public PureSize Size { get; set; } - [Parameter] - public EventCallback<MouseEventArgs> OnClick { get; set; } + [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; } private string InternalCss { get; set; } = string.Empty; @@ -22,12 +23,29 @@ { base.OnParametersSet(); - InternalCss = BuildCss(); + BuildCss(); } - public string BuildCss() + protected override void BuildCss() { - var builder = new StringBuilder(); + var builder = new StringBuilder(BaseCss); + + switch (Size) + { + case PureSize.ExtraSmall: + case PureSize.Small: + builder.Append(" sm:px-6 py-1 text-xs"); + break; + case PureSize.Medium: + builder.Append(" sm:px-6 px-3 py-2 text-sm"); + break; + case PureSize.ExtraLarge: + case PureSize.Large: + builder.Append(" sm:px-6 px-4 py-3 text-lg"); + break; + default: + throw new ArgumentOutOfRangeException(); + } switch (Variant) { @@ -48,6 +66,7 @@ throw new ArgumentOutOfRangeException(); } - return builder.ToString(); + InternalCss = builder.ToString(); } + } diff --git a/src/Pure.Blazor.Components/Layout/PureTabs.razor b/src/Pure.Blazor.Components/Layout/PureTabs.razor index 55c7b8e..ce562be 100644 --- a/src/Pure.Blazor.Components/Layout/PureTabs.razor +++ b/src/Pure.Blazor.Components/Layout/PureTabs.razor @@ -1,10 +1,11 @@ -<CascadingValue Value="this"> - <section class="text-gray-900 body-font"> - <div class="container mx-auto flex flex-wrap flex-col"> - <div class="flex mx-auto flex-wrap w-full border-b border-neutral-200"> +@inherits PureComponent +<CascadingValue Value="this"> + <section class="@ApplyStyle("text-gray-900 body-font")"> + <div class="@ApplyStyle("container mx-auto flex flex-wrap flex-col")"> + <div class="@ApplyStyle("flex mx-auto flex-wrap w-full border-b border-neutral-200")"> @foreach (var tab in Tabs) { - <PureTabButton Title="@tab.Title" IsActive="@(CurrentTab == tab)" OnClick="() => ChangeTab(tab)" Variant="Variant" /> + <PureTabButton Title="@tab.Title" IsActive="@(CurrentTab == tab)" Size="Size" OnClick="() => ChangeTab(tab)" Variant="Variant"/> } </div> @@ -16,35 +17,23 @@ </CascadingValue> @code { - // [Text(TextColor.Gray100)] - // [Border(BorderColor.Brand400)] - // [Background(BackgroundColor.Brand300)] - // public string? defaultButtonCss; + [Parameter] public EventCallback OnChanging { get; set; } - // [Text(TextColor.Gray, 900)] // or [Text(TextColor.Gray, Shade = 900)] - // [Border(BorderColor.Brand)] - // [Background(BackgroundColor.Gray, 100)] - // public string? secondaryButtonCss; + [Parameter] public TabVariant Variant { get; set; } - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter] - public EventCallback OnChanging { get; set; } - - [Parameter] - public TabVariant Variant { get; set; } + [Parameter] public PureSize Size { get; set; } = PureSize.Medium; public PureTabContent? CurrentTab { get; set; } - private string InternalCss { get; set; } + private string InternalCss { get; set; } = ""; - internal List<PureTabContent> Tabs { get; set; } = new List<PureTabContent>(); + internal List<PureTabContent> Tabs { get; set; } = new(); + protected override void OnParametersSet() { base.OnParametersSet(); - InternalCss = BuildCss(); + BuildCss(); } internal void ChangeTab(PureTabContent tab) @@ -55,9 +44,8 @@ CurrentTab = tab; } - public string BuildCss() + protected override void BuildCss() { - return ""; } internal void AddTab(PureTabContent tab) @@ -71,4 +59,5 @@ StateHasChanged(); } + }