Open
Conversation
- Set cursor on LuentAppBarItem
- Fix overflow issue with list of apps example
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
|
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request refactors the AppBar component's sizing system to use CSS variables instead of hardcoded values, making the layout more maintainable and consistent. The changes introduce a new --appbar-item-padding CSS variable and adjust demo container dimensions to accommodate the updated item heights. Additionally, it adds a unique ID generation mechanism for custom AppBar items.
Changes:
- Introduced
--appbar-item-paddingCSS variable replacing hardcoded 20px padding value, changing item heights from 48px to 58px (with default 68px size) - Updated demo container heights across multiple example files to reflect the new item dimensions
- Added automatic unique ID generation to FluentCustomAppBarItem instances via constructor initialization
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/Core/Components/AppBar/FluentAppBar.razor.css |
Added --appbar-item-padding variable and updated height calculation to use it; added cursor: pointer style |
src/Core/Components/AppBar/FluentAppBarItem.razor.cs |
Updated StyleValue calculation to use new CSS variable for min-height in vertical orientation |
examples/Demo/.../AppBarDefault.razor |
Adjusted horizontal container height from 68px to 78px |
examples/Demo/.../AppBarSmallIcons.razor |
Adjusted horizontal container height from 58px to 68px and vertical height from 300px to 270px |
examples/Demo/.../AppBarClick.razor |
Increased container height from 270px to 320px |
examples/Demo/.../AppBarFromListOfApps.razor |
Added @page directive for debug routing, increased container height from 270px to 320px, and added constructor to FluentCustomAppBarItem for unique ID generation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...emo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarFromListOfApps.razor
Outdated
Show resolved
Hide resolved
...emo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarFromListOfApps.razor
Show resolved
Hide resolved
10 tasks
Contributor
…ustment (#4567) * Initial plan * Rename --appbar-item-padding to --appbar-item-height-adjustment Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com> * Remove accidentally committed build artifact with backslash path Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix #4559
This pull request makes several adjustments to the AppBar component and its demo examples to improve layout consistency and maintainability. The main focus is on standardizing sizing and padding through CSS variables, updating example component dimensions, and ensuring unique IDs for custom AppBar items.
AppBar CSS and Layout Improvements:
--appbar-item-paddingand updated the calculation of AppBar item heights to use this variable, improving maintainability and consistency in sizing. (src/Core/Components/AppBar/FluentAppBar.razor.css) [1] [2]StyleValueproperty inFluentAppBarItem.razor.csto use the new--appbar-item-paddingvariable for vertical orientation, ensuring alignment with CSS changes. (src/Core/Components/AppBar/FluentAppBarItem.razor.cs)Demo Example Adjustments:
AppBarClick.razor,AppBarFromListOfApps.razor) for better visual consistency and to accommodate the updated sizing. [1] [2]AppBarDefault.razorandAppBarSmallIcons.razorto reflect the new standard heights and provide a more consistent demo experience. [1] [2]Component Functionality:
FluentCustomAppBarItemreceives a uniqueIdupon instantiation, improving reliability when rendering lists of custom items. (AppBarFromListOfApps.razor)