TextBox and PasswordBox Font styles are incorrect

[NVLudwig]

Current behavior

TextBox and PasswordBox currently use BodyMedium ressource. This causes font overrides to fail as the Figma file uses BodyLarge in line with current Material specs

Expected behavior

TextBox and PasswordBox should use BodyLarge ressource

How to reproduce it (as minimally and precisely as possible)

Try and apply a font override by selecting and editing the font style for a TextBox or PasswordBox

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

• iOS
• Android
• WebAssembly
• UWP
• MacOS

Anything else we need to know?

All text input controls probably have this issue AutoSuggest etc

[kazo0]

@NVLudwig

I believe they are already using BodyLarge typography values:

Uno.Themes/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml

Lines 82 to 89 in aab5b0d

	<StaticResource x:Key="OutlinedTextBoxFontFamily" ResourceKey="BodyLargeFontFamily" />
	<StaticResource x:Key="OutlinedTextBoxFontWeight" ResourceKey="BodyLargeFontWeight" />
	<StaticResource x:Key="OutlinedTextBoxFontSize" ResourceKey="BodyLargeFontSize" />
	<StaticResource x:Key="OutlinedTextBoxCharacterSpacing" ResourceKey="BodyLargeCharacterSpacing" />
	<StaticResource x:Key="FilledTextBoxFontFamily" ResourceKey="BodyLargeFontFamily" />
	<StaticResource x:Key="FilledTextBoxFontWeight" ResourceKey="BodyLargeFontWeight" />
	<StaticResource x:Key="FilledTextBoxFontSize" ResourceKey="BodyLargeFontSize" />

https://platform.uno/docs/articles/external/uno.themes/doc/styles/TextBox.html

Uno.Themes/src/library/Uno.Material/Styles/Controls/v2/PasswordBox.xaml

Lines 53 to 56 in aab5b0d

	<StaticResource x:Key="FilledPasswordBoxFontFamily" ResourceKey="BodyLargeFontFamily" />
	<StaticResource x:Key="FilledPasswordBoxFontWeight" ResourceKey="BodyLargeFontWeight" />
	<StaticResource x:Key="FilledPasswordBoxFontSize" ResourceKey="BodyLargeFontSize" />
	<StaticResource x:Key="FilledPasswordBoxCharacterSpacing" ResourceKey="BodyLargeCharacterSpacing" />

https://platform.uno/docs/articles/external/uno.themes/doc/styles/PasswordBox.html

[NVLudwig]

hmmm...something is wrong: in Figma if I override the fontFamily for BodyMedium the render in the plugin of a textbox gets updated with the desired override. But if I override BodyLarge no change is applyed in the plugin preview. this is what led us to assume themes was not off...what else can this be then? CC @carldebilly

[kazo0]

This is the problem I was mentioning before where we have intermediary aliases for the typography resources for some controls so overriding the origin resource won't affect aliases of that resource so we need to be referencing them directly

[carldebilly]

@kazo0, the override is working correctly... it's just not connect to the right resource.

Right now, in Figma, the FontFamily used for the TextBox is BodyLarge but overriding it doesn't affect the TextBox. But if we change the BodyMedium FontFamily, it will affect the TextBox.

That means the Material TextBox is wrongly connected to the BodyMedium resource when it should be connected to the BodyLarge one.

[kazo0]

@carldebilly / @NVLudwig

Not sure I'm understanding, If I override the BodyLargeFontFamily to Ribeye, it is reflected in the TextBox, no?

[NVLudwig]

Not working here in Prod desktop with the following

Uno Figma Plugin v3.0.2
Uno.UI v5.1.56
Uno.Themes v4.1.1
Uno.Toolkit.WinUI v5.1.7
Uno.Extensions v4.0.5

And not working in QA desktop either
Uno Figma Plugin v3.1.0-dev.66
Uno.UI v5.2.7
Uno.Themes v5.0.1
Uno.Toolkit.WinUI v6.0.2
Uno.Extensions v4.1.1

[carldebilly]

Ooohh @kazo0 is right! We were confusing the Label (Empty placeholder) with the content.

So that's ok, it works :-) But it looks like some variants in Figma are not using the right text style for labels.

[kazo0]

Ahh, I see. Yeah because technically the "Label" when the field is empty is the header label just scaled up/down. Once this PR is finally unblocked, we can address this and use the proper font typography resource for the header/placeholder separately.

[carldebilly]

Temporary solution:

• Use "Body Large" for the placeholder instead of relying on "Body Medium" as of right now
• Adjust the scaling factor to mimick the "body small" when used as a the label (while waiting for the PR to fix label vs placeholder)