-
Notifications
You must be signed in to change notification settings - Fork 418
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add visible labels to resource select component and filter dialog #3727
Add visible labels to resource select component and filter dialog #3727
Conversation
@JamesNK I just want to confirm that !important is necessary since fluentui-blazor uses a class and attribute selector (.fluent-input-label[attribute])? If not, do you know how to avoid !important here? |
Making the selector That misalignment feels like its a bug in the library, though, since we're just using the Label attribute of the FluentSelect component and its generating the rest. @vnbaaij thoughts on that? |
In the Fluent 2 guides (https://fluent2.microsoft.design/components/web/react/field/usage#layout) no colons are used for labels. I would rather remove them instead of adding them. |
Going with the Fluent 2 desing, we assume the label is placed above the component it belongs to. We need that margin-bottom to prevent things from getting too cramped: What I started doing based on this issue, was adding a |
…lect, change console logs no selection to say (None)
…everywhere, simplify
4dd6032
to
dcac549
Compare
@adamint sorry, but I don't understand what exactly is the issue now (going on these screenshots). Can you clarify? |
@JamesNK as well |
Changed both @JamesNK |
# Conflicts: # src/Aspire.Dashboard/Resources/ControlsStrings.Designer.cs # src/Aspire.Dashboard/wwwroot/css/app.css
Fixes #3396, we need to have visible labels for interactive components. We also had several kinds of All/None options, so I standardized these into (All) and (None)
I added labels to the inputs in FilterDialog and made them the same width.
The resource select also has a label to its left.
I removed the label to the right of the resource select on the console log page when there is no resource selected, as it just mentioned that there was no resource selected, which is redundant with the select's (None) selected text.
Microsoft Reviewers: Open in CodeFlow