Skip to content

New Component: Add MudFlexBreak component for forcing flex items onto a new line#8748

Merged
henon merged 4 commits intoMudBlazor:devfrom
danielchalmers:grid-break
Apr 22, 2024
Merged

New Component: Add MudFlexBreak component for forcing flex items onto a new line#8748
henon merged 4 commits intoMudBlazor:devfrom
danielchalmers:grid-break

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented Apr 19, 2024

Description

Resolves #6712 by adding a MudFlexBreak component that can be used in any flexbox layout, such as MudGrid or MudStack, in order to force items onto the next line, similar to <br>.

It's very simple to add because we already use flexbox in the grid.

How Has This Been Tested?

visually

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Grid

image

Stack
image

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

Implements MudBlazor#6712 by adding a `MudGridBreak` component that can be used in the MudGrid in order to force items onto the next line.

It's very simple to add because we already use flexbox in the grid.
@github-actions github-actions bot added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Apr 19, 2024
@codecov
Copy link

codecov bot commented Apr 19, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.08%. Comparing base (28bc599) to head (84f74fb).
Report is 87 commits behind head on dev.

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #8748      +/-   ##
==========================================
+ Coverage   89.82%   90.08%   +0.25%     
==========================================
  Files         412      420       +8     
  Lines       11878    12178     +300     
  Branches     2364     2396      +32     
==========================================
+ Hits        10670    10971     +301     
+ Misses        681      667      -14     
- Partials      527      540      +13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

@jperson2000 jperson2000 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks good to me! Nice work with nameof()

@ScarletKuro ScarletKuro requested a review from henon April 19, 2024 17:09
@henon
Copy link
Contributor

henon commented Apr 20, 2024

@danielchalmers This will even work with other flex-based components such as MudStack right? If so we'll want a more generic name such as MudBreakFlex or MudFlexBreak or simply MudBreak

@ScarletKuro
Copy link
Member

I also forgot to mention that we probably should add xml comments to Classname. Unless we want to add extra work for @jperson2000

@danielchalmers danielchalmers changed the title MudGrid: Add MudGridBreak component Add MudFlexBreak component for forcing flex items onto a new line Apr 20, 2024
@danielchalmers
Copy link
Member Author

@ScarletKuro @henon Take a look now

@henon
Copy link
Contributor

henon commented Apr 20, 2024

Stack
image

Nice example ❤️

@henon henon added new component Proposal or addition of a new component (apply this instead of enhancement) and removed PR: needs review labels Apr 20, 2024
@henon henon changed the title Add MudFlexBreak component for forcing flex items onto a new line New Component: Add MudFlexBreak component for forcing flex items onto a new line Apr 22, 2024
@henon henon merged commit 67a3f89 into MudBlazor:dev Apr 22, 2024
@henon
Copy link
Contributor

henon commented Apr 22, 2024

Thanks!

@danielchalmers danielchalmers deleted the grid-break branch April 22, 2024 16:32
biegehydra pushed a commit to biegehydra/MudBlazor that referenced this pull request Apr 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library new component Proposal or addition of a new component (apply this instead of enhancement)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudGrid: Add MudGridBreak component

4 participants