Repository navigation
feat(ui): adopt outlined input boxes with primary resource label and inline tooltip - #684
Conversation
…inline tooltip TAG=agy
There was a problem hiding this comment.
Code Review
This pull request refactors the smart resource finder UI to use a fieldset-legend outlined box design for the amount input and resource type select dropdowns, while renaming the 'Dominant' resource label to 'Primary resource'. Feedback focuses on critical accessibility improvements, such as restoring programmatic label associations for screen readers using ARIA attributes and making the help icon keyboard-focusable. Additionally, CSS adjustments are suggested to prevent layout overflow and ensure cross-browser rendering consistency.
…inder outlined inputs TAG=agy
…e button aria-label TAG=agy
…or outlined inputs TAG=agy
There was a problem hiding this comment.
LGTM! Verified the outlined fieldset notch styling, keyboard accessibility/tooltips, and updated CDK test harness coverage. All unit and visual screenshot tests pass cleanly.
Summary
Redesigns the Resource Observability Dashboard (ROD) Smart Resource Finder inputs to use outlined container boxes with integrated floating legend labels and right-aligned helper tooltip:
This was driven by the conversation with our UX Designer.
Motivation & Context
Aligns the Smart Resource Finder UI with modern Material outlined form fields, cleanly displaying labels across multiple resource rows while making the "Primary resource" role and its associated velocity tooltip immediately intuitive.
Key Changes
cmd/ui/app/resource_dashboard/components/smart_resource_finder/smart_resource_finder.ng.html):<label>and<input>groups with semantic<fieldset class="outlined-box">and<legend class="box-legend">.Primary resource *on index 0 andResource type *on index > 0.[matTooltip]inside the primary resource selector box on the right.cmd/ui/app/resource_dashboard/components/smart_resource_finder/smart_resource_finder.scss):smart_resource_finder_harness.ts,smart_resource_finder_test.ts):Verification & Testing
bazel test //cmd/ui:ui_unit_tests(PASSED in 40.1s).npx playwright test(3/3 screenshot tests passed).Screenshots
TAG=agy
CONV=acf882de-1561-404c-ba2e-ae0940451165