Skip to content

MudTabs: Added property to reduce minimum width of a tab#5662

Closed
MS-Hayden wants to merge 1 commit intoMudBlazor:devfrom
MS-Hayden:AddNoMinimumWidthTabsProperty
Closed

MudTabs: Added property to reduce minimum width of a tab#5662
MS-Hayden wants to merge 1 commit intoMudBlazor:devfrom
MS-Hayden:AddNoMinimumWidthTabsProperty

Conversation

@MS-Hayden
Copy link

@MS-Hayden MS-Hayden commented Nov 4, 2022

Description

Adds a property NoMinimumWidth to fit more tabs in a smaller space, as demoed below.

Resolves #5323

How Has This Been Tested?

Added a unit test and tested visually.

Types of changes

  • New feature (non-breaking change which adds functionality)

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.

@codecov
Copy link

codecov bot commented Nov 4, 2022

Codecov Report

Base: 91.63% // Head: 91.62% // Decreases project coverage by -0.01% ⚠️

Coverage data is based on head (c5a240b) compared to base (9b71321).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #5662      +/-   ##
==========================================
- Coverage   91.63%   91.62%   -0.02%     
==========================================
  Files         379      379              
  Lines       14889    14882       -7     
==========================================
- Hits        13644    13635       -9     
- Misses       1245     1247       +2     
Impacted Files Coverage Δ
src/MudBlazor/Components/Tabs/MudTabs.razor.cs 97.29% <100.00%> (+0.01%) ⬆️
...MudBlazor/Components/DataGrid/MudDataGrid.razor.cs 86.53% <0.00%> (-0.73%) ⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@MS-Hayden MS-Hayden changed the title Added property to reduce minimum width of a tab MudTabs: Added property to reduce minimum width of a tab Nov 4, 2022
@mikes-gh mikes-gh added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library API change Modifies the public API surface labels Nov 15, 2022
@mikes-gh
Copy link
Contributor

mikes-gh commented Dec 10, 2022

@MS-Hayden Thanks for the PR. Re the API I think having MinimumWidth as a prop might be good API.
We can default it to 160px
You can set it to 0 no minimum width
You can set it to a denser uniform width say 80px since some ppl might want uniform tab widths
Conceptually negative props are slightly less readable.

@mikes-gh
Copy link
Contributor

mikes-gh commented Dec 10, 2022

Ok before you start let me discuss with team @MudBlazor/core-team
The question is do we ask ppl to use css or is this a common case where style should be available via API?

@MS-Hayden
Copy link
Author

Ok before you start let me discuss with team @MudBlazor/core-team
The question is do we ask ppl to use css or is this a common case where style should be available via API?

Righto, I'll wait for the word.

My argument is the the current minimum is very wide, forcing tab scrolling in nearly every situation I personally use it for and does not reflect the margin density you get in nearly all other components.

Maybe it would be better to make Margin.Dense option for consistency with other components and really go to town on getting the sizing down closer to what you might see in Chrome Tabs.

@henon
Copy link
Contributor

henon commented Dec 10, 2022

MinimumWidth would be much better than NoMinimumWidth

@mikes-gh
Copy link
Contributor

mikes-gh commented Dec 10, 2022

OK lets go with MinimumWidth. Dense in this case is quite subjective so lets let the user chose the width.

@MS-Hayden
Copy link
Author

Closing this as I am now doing it on my personal account, not work account, and also will name the branch and PR something better with visual examples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

API change Modifies the public API surface enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudTab - Dense and width

3 participants