Skip to content

[dev-v5] Update the FluentLayout component #3743

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

Merged
merged 24 commits into from
May 2, 2025

Conversation

dvoituron
Copy link
Collaborator

@dvoituron dvoituron commented May 1, 2025

[dev-v5] Update the FluentLayout component

  • Use a @container CSS rule to switch between the mobile and desktop view.
  • Add a parameter MobileBreakdownWidth do allow customization of this "switch".
  • Add an event OnBreakpointEnter to detect when this switch mode occurs.
  • Use the fluent-drawer component to display a animated panel when the user click on the hamburger button.
  • The dev can customize this "drawer" pane to set another content, different from the "Menu" panel (by default, the Menu content will be used)
  • Add a MenuDeferredLoading parameter to render the menu or the drawer only when the correct view (mobile vs desktop) is active. If not (by default), for static rendering, the both will be rendered (and duplicated if the drawer content is the menu content)
  • Update the height to height: 100dvh to be more compatible with Mobiles.
  • Add a CssBuilder.MinifyCss method to minify the specified online CSS string.

Documentation updated.

Unit Tests

image

@dvoituron dvoituron requested a review from vnbaaij as a code owner May 1, 2025 15:26
@dvoituron dvoituron added the v5 For the next major version label May 1, 2025
Copy link

github-actions bot commented May 1, 2025

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

Copy link

github-actions bot commented May 1, 2025

Summary - Unit Tests Code Coverage

Summary
Generated on: 05/02/2025 - 13:25:15
Coverage date: 05/02/2025 - 13:25:05
Parser: Cobertura
Assemblies: 1
Classes: 127
Files: 167
Line coverage: 99.4% (3240 of 3257)
Covered lines: 3240
Uncovered lines: 17
Coverable lines: 3257
Total lines: 13968
Branch coverage: 93.4% (1802 of 1929)
Covered branches: 1802
Total branches: 1929
Method coverage: Feature is only available for sponsors
Tag: 3444_14796084119

Coverage

Microsoft.FluentUI.AspNetCore.Components - 99.4%
Name Line Branch
Microsoft.FluentUI.AspNetCore.Components 99.4% 93.4%
Microsoft.FluentUI.AspNetCore.Components.AccordionItemEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.AdditionalAttributesExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.CachedServices 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DateTimeProvider 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DateTimeProviderContext 95.6% 92.8%
Microsoft.FluentUI.AspNetCore.Components.DefaultStyles 100%
Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox.FluentMessageBox 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs 100% 92.8%
Microsoft.FluentUI.AspNetCore.Components.DialogInstance 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptions 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooter 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooterAction 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsHeader 100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult`1 100%
Microsoft.FluentUI.AspNetCore.Components.DialogService 98.9% 81.4%
Microsoft.FluentUI.AspNetCore.Components.DialogToggleEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.DropdownEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.DateTimeExtensions 100% 92%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FieldSizeExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FileSizeConverter 100%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordion 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem 100% 95%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchorButton 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentAvatar 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBadge 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton 98.4% 90.6%
Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCompoundButton 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge 100% 96.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDialog 97.4% 89.7%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody 100% 91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogInstance 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider 100% 80%
Microsoft.FluentUI.AspNetCore.Components.FluentDivider 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentField 100% 96.5%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldCondition 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionItem 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionOptions 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldExtensions 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldParameterSelector 100% 98.7%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid 100% 90%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentHighlighter 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1 100% 95%
Microsoft.FluentUI.AspNetCore.Components.FluentImage 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1 93.7% 43.7%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFile 100% 93.3%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileBuffer 100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileErrorEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputImmediateBase`1 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentJSModule 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel 100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout 100% 88.8%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutHamburger 100% 96.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutItem 100% 91%
Microsoft.FluentUI.AspNetCore.Components.FluentLink 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentListBase`1 98.4% 92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerExtensions 100%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerInternal 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenu 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton 100% 71.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuItem 100% 90.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuList 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitter 100% 91.8%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterPane 100% 89.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterResizeEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentOption 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressBar 100% 95.4%
Microsoft.FluentUI.AspNetCore.Components.FluentProviders 100%
Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1 100% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioContext 100% 75%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentRatingDisplay 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceBase`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceProviderException`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSpacer 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSpinner 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSplitButton 100%
Microsoft.FluentUI.AspNetCore.Components.FluentStack 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentStatus 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSwitch 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentTab 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentTabs 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentText 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentTextArea 100% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentTextInput 100% 78.5%
Microsoft.FluentUI.AspNetCore.Components.FluentToggleButton 100% 91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltip 100% 95%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltipProvider 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FreeOptionOutput 100%
Microsoft.FluentUI.AspNetCore.Components.HighlighterSplitter 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Icon 100% 89.4%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage 100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo 100%
Microsoft.FluentUI.AspNetCore.Components.IFluentLocalizer 100% 100%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1 100%
Microsoft.FluentUI.AspNetCore.Components.LayoutHamburgerEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.LibraryTooltipOptions 100%
Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource 100% 100%
Microsoft.FluentUI.AspNetCore.Components.MenuItemEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.MessageBoxOptions 100%
Microsoft.FluentUI.AspNetCore.Components.Migration.AppearanceExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Migration.FluentInputAppearanceExt
ensions
100% 100%
Microsoft.FluentUI.AspNetCore.Components.Migration.TooltipPositionExtension 100% 100%
Microsoft.FluentUI.AspNetCore.Components.ProgressFileDetails 100%
Microsoft.FluentUI.AspNetCore.Components.ServiceProviderExtensions 100%
Microsoft.FluentUI.AspNetCore.Components.SpacingExtensions 100% 97.2%
Microsoft.FluentUI.AspNetCore.Components.TabChangeEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.TooltipEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.UploadedFileDetails 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.AddTag 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Identifier 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.IdentifierContext 100% 75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder 100% 92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InternalDebounce.Dispatc
herTimerExtensions
82.9% 68.7%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder 100% 100%
Microsoft.FluentUI.AspNetCore.Components.ZIndex 100%

@dvoituron dvoituron enabled auto-merge (squash) May 1, 2025 15:49
@dvoituron dvoituron merged commit 54f2686 into dev-v5 May 2, 2025
4 checks passed
@dvoituron dvoituron deleted the users/dvoituron/dev-v5/update-layout branch May 2, 2025 13:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v5 For the next major version
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants