Add filter grouping labels for resource filters (#10713)

Co-authored-by: Adam Ratzman <[email protected]>
Co-authored-by: James Newton-King <[email protected]>

Author: 3 people

src/Aspire.Dashboard/Components/Controls/ResourceFilters.razor

@@ -3,30 +3,30 @@
 @inject IStringLocalizer<Dashboard.Resources.Resources> Loc
 
 <FluentStack Orientation="Orientation.Vertical" VerticalGap="15">
-    <div>
-        <h5>@Loc[nameof(Resources.Resources.ResourcesResourceTypesHeader)]</h5>
+    <fieldset class="filter-group">
+        <legend>@Loc[nameof(Resources.Resources.ResourcesResourceTypesHeader)]</legend>
         <SelectResourceOptions
             Id="resource-types"
             Values="ResourceTypes"
             OnAllValuesCheckedChangedAsync="OnAllFilterVisibilityCheckedChangedAsync"
             OnValueVisibilityChangedAsync="OnResourceFilterVisibilityChangedAsync" />
-    </div>
-    <div>
-        <h5>@Loc[nameof(Resources.Resources.ResourcesResourceStatesHeader)]</h5>
+    </fieldset>
+    <fieldset class="filter-group">
+        <legend>@Loc[nameof(Resources.Resources.ResourcesResourceStatesHeader)]</legend>
         <SelectResourceOptions
             Id="resource-states"
             Values="ResourceStates"
             OnAllValuesCheckedChangedAsync="OnAllFilterVisibilityCheckedChangedAsync"
             OnValueVisibilityChangedAsync="OnResourceFilterVisibilityChangedAsync"/>
-    </div>
-    <div>
-        <h5>@Loc[nameof(Resources.Resources.ResourcesDetailsHealthStateProperty)]</h5>
+    </fieldset>
+    <fieldset class="filter-group">
+        <legend>@Loc[nameof(Resources.Resources.ResourcesDetailsHealthStateProperty)]</legend>
         <SelectResourceOptions
             Id="resource-health-states"
             Values="ResourceHealthStates"
             OnAllValuesCheckedChangedAsync="OnAllFilterVisibilityCheckedChangedAsync"
             OnValueVisibilityChangedAsync="OnResourceFilterVisibilityChangedAsync"/>
-    </div>
+    </fieldset>
 </FluentStack>
 
 @code {

src/Aspire.Dashboard/wwwroot/css/app.css

@@ -835,3 +835,8 @@ fluent-tooltip[anchor="dialog_close"] > div {
 .fluent-messagebar-action {
     font-size: var(--type-ramp-minus-1-font-size);
 }
+
+.filter-group > legend {
+    font-size: var(--type-ramp-plus-2-font-size);
+    font-weight: 500;
+}