Spec for Tab Sizing #4104

cinnamon-msft · 2020-01-03T19:12:55Z

Summary of the Pull Request

This is the spec for #597

I am proposing the tabWidthMode feature be added first, then tabWidthMin and tabWidthMax be added in a later release.

References

PR: #3876

PR Checklist

Closes #xxx
CLA signed. If not, go over here and sign the CLA
Tests added/passed
Requires documentation to be updated
I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #xxx

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

doc/specs/#597 - Tab Sizing.md

zadjii-msft

I agree that even should probably be equal, but otherwise this looks good.

leonMSFT

Just one clarifying question, otherwise looks good!

doc/specs/#597 - Tab Sizing.md

miniksa

I mean, it sounds straightforward to me. I don't think it's really high on the priority list of things for us to add, but if you believe there's sufficient motivation... you're the PM so I'm not going to stand in the way.

My comments are non-blocking.

miniksa · 2020-01-06T23:24:14Z

doc/specs/#597 - Tab Sizing.md

+In addition to `tabWidthMode`, the following global properties will also be available:
+
+* `tabWidthMin`
+    * Accepts an integer


Hopefully they're unsigned integers. Negative minimum and maximum width? Oh boy.

miniksa · 2020-01-06T23:24:57Z

doc/specs/#597 - Tab Sizing.md

+    * Accepts an integer
+    * Value correlates to the minimum amount of pixels the tab width can be
+    * If value is less than the width of the icon, the minimum width will be the width of the icon
+    * If value is greater than the width of the tab bar, the maximum width will be the width of the tab bar


Isn't it somewhat weird to say the minimum width of your tab will consume the ENTIRE tab bar? Does that mean with 2 tabs you instantly get the arrows because each tab is an entire width?

zadjii-msft · 2020-01-07T19:03:54Z

I realize this is the endgame of the spec, and you've got the signoffs - but is there any way you could maybe enumerate a couple settings examples and how bit the tabs end up being? Case(s) in point:

{
    "tabWidthMode": "equal",
    "tabWidthMax": 300,
    "tabWidthMin": 400
}

and

{
    "tabWidthMode": "equal"
}

What happens with one tab in the second case?

What about the following:

{
    "tabWidthMode": "titleLength"
}

If my tab title is excessively long, will "the system-defined minimum width" cut off my tab title?

DHowett-MSFT · 2020-01-07T19:12:40Z

Working through my thoughts. I’ll review this when I’m at my desk.

DHowett-MSFT

I'm still curious about my questions from the original PR.

this isn't a width, it is a width mode
should we ditch the names equal and sizeToContent? We inherited them from the tab control, but are they right for our users?
should we eventually support a multi-state width syntax?
- $min - $max, so I could specify 10-300
- 300 would be shorthand for 300-300 (fixed width)
- 300-auto would be min=300, max = undefined
- auto would be shorthand for auto-auto
- the default would be auto (the same behavior as today)

Also, do our users need so many knobs? Can we just expose a single tabWidth that is fit or shrink or expand or 300? It seems like we're popping out 3 settings when one would do.

How would the settings UI look for this? Would there be one dropdown and two different sliders?

Tab Width Mode
[ Equal       v ]

Tab Minimum Width
-[]-------------- 30

Tab Maximum Width
-------------[]-- 350

it seems . . . cumbersome.

DHowett-MSFT · 2020-01-07T20:06:20Z

doc/specs/#597 - Tab Sizing.md

+* `equal`
+    * All tabs are equal in width
+    * If the tab bar has filled, tabs will shrink as additional tabs are added
+    * Utilizes the `equal` setting from WinUI's TabView


How big is equal if I do not specify sizes?

DHowett-MSFT · 2020-01-07T20:07:22Z

doc/specs/#597 - Tab Sizing.md

+
+* `tabWidthMin`
+    * Accepts an integer
+    * Value correlates to the minimum amount of pixels the tab width can be


Does the value correlate with the # of pixels, or is it just literally the # of pixels? Using correlation here is unusual.

DHowett-MSFT · 2020-01-07T20:07:31Z

doc/specs/#597 - Tab Sizing.md

+    * Accepts an integer
+    * Value correlates to the minimum amount of pixels the tab width can be
+    * If value is less than the width of the icon, the minimum width will be the width of the icon
+    * If value is greater than the width of the tab bar, the maximum width will be the width of the tab bar


Why must we impose such a restriction/

DHowett-MSFT · 2020-01-07T20:07:37Z

doc/specs/#597 - Tab Sizing.md

+    * Value correlates to the minimum amount of pixels the tab width can be
+    * If value is less than the width of the icon, the minimum width will be the width of the icon
+    * If value is greater than the width of the tab bar, the maximum width will be the width of the tab bar
+    * If not set, the tab will have the system-defined minimum width


DHowett-MSFT · 2020-01-07T20:07:42Z

doc/specs/#597 - Tab Sizing.md

+
+* `tabWidthMax`
+    * Accepts an integer
+    * Value correlates to the maximum amount of pixels the tab width can be


does it correlatE?

DHowett-MSFT · 2020-01-07T20:07:51Z

doc/specs/#597 - Tab Sizing.md

+    * If not set, the tab will have the system-defined minimum width
+
+* `tabWidthMax`
+    * Accepts an integer


Can I not specify infinite?

DHowett-MSFT · 2020-01-07T20:07:55Z

doc/specs/#597 - Tab Sizing.md

+    * Value correlates to the maximum amount of pixels the tab width can be
+    * If value is less than the width of the icon, the minimum width will be the width of the icon
+    * If value is greater than the width of the tab bar, the maximum width will be the width of the tab bar
+    * If not set, the tab will have the system-defined maximum width


After a bit of testing, looks like XAML doesn't set a max width for us:

We should keep this behavior as default (aka 'infinite').

EDIT: ok, theoretically I could keep going but I'm just assuming there's no max width...

DHowett-MSFT · 2020-01-07T20:08:12Z

doc/specs/#597 - Tab Sizing.md

+    * Accepts an integer
+    * Value correlates to the maximum amount of pixels the tab width can be
+    * If value is less than the width of the icon, the minimum width will be the width of the icon
+    * If value is greater than the width of the tab bar, the maximum width will be the width of the tab bar


I beg to differ. Why can't I have the maximum width be truly insane if I want it to?

It's a maximum.

DHowett-MSFT · 2020-01-07T20:08:32Z

doc/specs/#597 - Tab Sizing.md

+    * If value is less than the width of the icon, the minimum width will be the width of the icon
+    * If value is greater than the width of the tab bar, the maximum width will be the width of the tab bar
+    * If not set, the tab will have the system-defined maximum width
+


what if min>max?

DHowett-MSFT · 2020-01-07T20:10:04Z

doc/specs/#597 - Tab Sizing.md

+
+## UI/UX Design
+
+[This tweet](https://twitter.com/cinnamon_msft/status/1203094776117022720) displays how the `equal` and `titleLength` values behave for the `tabWidthMode` property.


Please move the screenshot from the tweet into the spec itself. Twitter is not a durable data store.

Note that animations are painful, it'd be nicer if the individual frames were split out and labeled :-)

cinnamon-msft · 2020-01-08T23:56:20Z

Given that the comments are only about the "tabWidthMin" and "tabWidthMax" properties, are we okay with approving #3876 which only implements "tabWidthMode" and addressing the min/max preferences later? We can leave this spec open until everything is resolved :)

carlos-zamora · 2020-05-28T22:47:03Z

doc/specs/#597 - Tab Sizing.md

+    * Value correlates to the maximum amount of pixels the tab width can be
+    * If value is less than the width of the icon, the minimum width will be the width of the icon
+    * If value is greater than the width of the tab bar, the maximum width will be the width of the tab bar
+    * If not set, the tab will have the system-defined maximum width


After a bit of testing, looks like XAML doesn't set a max width for us:

We should keep this behavior as default (aka 'infinite').

EDIT: ok, theoretically I could keep going but I'm just assuming there's no max width...

carlos-zamora · 2020-05-28T22:49:30Z

doc/specs/#597 - Tab Sizing.md

+
+### Accessibility
+
+This feature could impact accessibility if the tab title isn't stored within the metadata of the tab. If the tab width is the width of the icon, then the title isn't visible. The tab title will have to be accessibile by a screen reader.


The tab title is stored in the tab XAML element itself so you don't have to worry about accessibility. Even for low-vision users, the tooltip serves as a way to display the full tab title.

zadjii-msft · 2020-06-01T18:58:24Z

Hey so this spec got to 3 sign-offs, but since @DHowett-MSFT is now @DHowett, it's not technically blocked on his review anymore. We should probably leave this open till we get hist check on it too.

miniksa · 2021-02-09T17:05:16Z

This has been hanging out a long time. I asked @DHowett this morning and he said "just merge it". I think it's sufficient for now and we can make a future PR if this needs to evolve further.

initial commit

76f2794

cinnamon-msft added Issue-Docs It's a documentation issue that really should be on MicrosoftDocs/Console-Docs Area-Settings Issues related to settings and customizability, for console or terminal labels Jan 3, 2020

cinnamon-msft requested a review from a team January 3, 2020 19:12

cinnamon-msft mentioned this pull request Jan 3, 2020

Add tab width modes: equal and titleLength #3876

Merged

rkeithhill reviewed Jan 3, 2020

View reviewed changes

doc/specs/#597 - Tab Sizing.md Outdated Show resolved Hide resolved

zadjii-msft reviewed Jan 3, 2020

View reviewed changes

change even to equal

b7a0da7

rkeithhill approved these changes Jan 4, 2020

View reviewed changes

zadjii-msft approved these changes Jan 6, 2020

View reviewed changes

zadjii-msft requested review from carlos-zamora, DHowett-MSFT, leonMSFT and miniksa January 6, 2020 11:54

leonMSFT approved these changes Jan 6, 2020

View reviewed changes

doc/specs/#597 - Tab Sizing.md Show resolved Hide resolved

cinnamon-msft added the Needs-Second It's a PR that needs another sign-off label Jan 6, 2020

miniksa approved these changes Jan 6, 2020

View reviewed changes

DHowett-MSFT suggested changes Jan 7, 2020

View reviewed changes

ghost added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Jan 7, 2020

ghost removed the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Jan 8, 2020

carlos-zamora reviewed May 28, 2020

View reviewed changes

microsoft-github-updates bot changed the base branch from master to main October 22, 2020 00:27

ghost requested review from DHowett and PankajBhojwani October 22, 2020 00:28

miniksa merged commit cad7954 into main Feb 9, 2021

DHowett deleted the cinnamon/tab-sizing-spec branch October 26, 2021 17:00

zadjii-msft mentioned this pull request Apr 20, 2023

More complete tab sizing configurations #597

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Spec for Tab Sizing #4104

Spec for Tab Sizing #4104

cinnamon-msft commented Jan 3, 2020

zadjii-msft left a comment

leonMSFT left a comment

miniksa left a comment

miniksa Jan 6, 2020

miniksa Jan 6, 2020

zadjii-msft commented Jan 7, 2020

DHowett-MSFT commented Jan 7, 2020

DHowett-MSFT left a comment

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

carlos-zamora May 28, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

DHowett-MSFT Jan 7, 2020

jsoref Mar 26, 2020

cinnamon-msft commented Jan 8, 2020

carlos-zamora May 28, 2020

carlos-zamora May 28, 2020

zadjii-msft commented Jun 1, 2020

miniksa commented Feb 9, 2021


		## UI/UX Design

		[This tweet](https://twitter.com/cinnamon_msft/status/1203094776117022720) displays how the `equal` and `titleLength` values behave for the `tabWidthMode` property.


		### Accessibility

		This feature could impact accessibility if the tab title isn't stored within the metadata of the tab. If the tab width is the width of the icon, then the title isn't visible. The tab title will have to be accessibile by a screen reader.

Spec for Tab Sizing #4104

Spec for Tab Sizing #4104

Conversation

cinnamon-msft commented Jan 3, 2020

Summary of the Pull Request

References

PR Checklist

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

zadjii-msft left a comment

Choose a reason for hiding this comment

leonMSFT left a comment

Choose a reason for hiding this comment

miniksa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zadjii-msft commented Jan 7, 2020

DHowett-MSFT commented Jan 7, 2020

DHowett-MSFT left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cinnamon-msft commented Jan 8, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zadjii-msft commented Jun 1, 2020

miniksa commented Feb 9, 2021