Merge pull request #1497 from unoplatform/dev/ks/outline-passwordbox-…

…template-layout fix: MaterialOutlinedPasswordBox content shift
unoplatform · Oct 31, 2024 · 4a89252 · 4a89252
2 parents 2d0bb4d + c03d69e
commit 4a89252
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 50 deletions.
diff --git a/doc/material-migration.md b/doc/material-migration.md
@@ -14,20 +14,23 @@ We have standardized the naming of styles and resource keys. This change aims to
 
 #### Changes to Resource Keys
 
-| Old Resource Key | New Resource Key |
-| ---- | ---- |
-| MaterialTextBoxClearGlyphWidth | TextBoxClearGlyphWidth |
-| MaterialTextBoxClearGlyphHeight | TextBoxClearGlyphHeight |
-| MaterialFilledTextBoxCornerRadius | FilledTextBoxCornerRadius |
-| MaterialFilledTextBoxPadding | FilledTextBoxPadding |
-| MaterialFilledTextBoxMinHeight | FilledTextBoxMinHeight |
-| MaterialFilledTextBoxBorderHeightFocused | FilledTextBoxBorderHeightFocused |
-| MaterialOutlinedTextBoxBorderThickness | OutlinedTextBoxBorderThickness |
-| MaterialOutlinedTextBoxCornerRadius | OutlinedTextBoxCornerRadius |
-| MaterialOutlinedTextBoxPadding | OutlinedTextBoxPadding |
-| MaterialOutlinedTextBoxMinHeight | OutlinedTextBoxMinHeight |
-| MaterialOutlinedTextBoxBorderThicknessFocused | OutlinedTextBoxBorderThicknessFocused |
-| MaterialOutlinedTextBoxBorderThicknessPointerOver | OutlinedTextBoxBorderThicknessPointerOver |
+| Old Resource Key                                  | New Resource Key                                |
+|---------------------------------------------------|-------------------------------------------------|
+| MaterialTextBoxClearGlyphWidth                    | TextBoxClearGlyphWidth                          |
+| MaterialTextBoxClearGlyphHeight                   | TextBoxClearGlyphHeight                         |
+| MaterialFilledTextBoxCornerRadius                 | FilledTextBoxCornerRadius                       |
+| MaterialFilledTextBoxPadding                      | FilledTextBoxPadding                            |
+| MaterialFilledTextBoxMinHeight                    | FilledTextBoxMinHeight                          |
+| MaterialFilledTextBoxBorderHeightFocused          | FilledTextBoxBorderHeightFocused                |
+| MaterialOutlinedTextBoxBorderThickness            | OutlinedTextBoxBorderThickness                  |
+| MaterialOutlinedTextBoxCornerRadius               | OutlinedTextBoxCornerRadius                     |
+| MaterialOutlinedTextBoxPadding                    | OutlinedTextBoxPadding                          |
+| MaterialOutlinedTextBoxMinHeight                  | OutlinedTextBoxMinHeight                        |
+| MaterialOutlinedTextBoxBorderThicknessFocused     | OutlinedTextBoxBorderThicknessFocused           |
+| MaterialOutlinedTextBoxBorderThicknessPointerOver | OutlinedTextBoxBorderThicknessPointerOver       |
+| OutlinedPasswordBoxBorderPadding                  | ***REMOVED***                                   |
+| OutlinedPasswordBoxBorderPaddingPointerOver       | ***REMOVED***                                   |
+| OutlinedPasswordBoxBorderPaddingFocused           | ***REMOVED***                                   |
 
 ### Upgrading to Uno Themes 5.1
 

diff --git a/doc/styles/PasswordBox.md b/doc/styles/PasswordBox.md
@@ -71,10 +71,7 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl
 | `OutlinedPasswordBoxCharacterSpacing`                 | `Int32`           | `BodyLargeCharacterSpacing`                                                                                                                                                                                                                                                                   |
 | `OutlinedPasswordBoxCornerRadius`                     | `CornerRadius`    | 4                                                                                                                                                                                                                                                                                             |
 | `OutlinedPasswordBoxMinHeight`                        | `Double`          | 58                                                                                                                                                                                                                                                                                            |
-| `OutlinedPasswordBoxBorderPadding`                    | `Thickness`       | 1                                                                                                                                                                                                                                                                                             |
-| `OutlinedPasswordBoxBorderPaddingPointerOver`         | `Thickness`       | 0                                                                                                                                                                                                                                                                                             |
-| `OutlinedPasswordBoxBorderPaddingFocused`             | `Thickness`       | 0                                                                                                                                                                                                                                                                                             |
 | `OutlinedPasswordBoxPadding`                          | `Thickness`       | 16,4,8,4                                                                                                                                                                                                                                                                                      |
 | `OutlinedPasswordBoxBorderThickness`                  | `Thickness`       | 1                                                                                                                                                                                                                                                                                             |
-| `OutlinedPasswordBoxBorderThicknessPointerOver`       | `Thickness`       | 2                                                                                                                                                                                                                                                                                             |
+| `OutlinedPasswordBoxBorderThicknessPointerOver`       | `Thickness`       | 1                                                                                                                                                                                                                                                                                             |
 | `OutlinedPasswordBoxBorderThicknessFocused`           | `Thickness`       | 2                                                                                                                                                                                                                                                                                             |
diff --git a/src/library/Uno.Material/Styles/Controls/v2/PasswordBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/PasswordBox.xaml
@@ -89,13 +89,10 @@
 
 			<CornerRadius x:Key="OutlinedPasswordBoxCornerRadius">4</CornerRadius>
 			<x:Double x:Key="OutlinedPasswordBoxMinHeight">58</x:Double>
-			<Thickness x:Key="OutlinedPasswordBoxBorderPadding">1</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxBorderThickness">1</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxPadding">16,4,8,4</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessPointerOver">1</Thickness>
-			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingPointerOver">1</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessFocused">2</Thickness>
-			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingFocused">1</Thickness>
 
 			<CornerRadius x:Key="FilledPasswordBoxCornerRadius">4,4,0,0</CornerRadius>
 			<x:Double x:Key="FilledPasswordBoxMinHeight">56</x:Double>
@@ -183,13 +180,10 @@
 
 			<CornerRadius x:Key="OutlinedPasswordBoxCornerRadius">4</CornerRadius>
 			<x:Double x:Key="OutlinedPasswordBoxMinHeight">58</x:Double>
-			<Thickness x:Key="OutlinedPasswordBoxBorderPadding">1</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxBorderThickness">1</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxPadding">16,4,8,4</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessPointerOver">1</Thickness>
-			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingPointerOver">1</Thickness>
 			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessFocused">2</Thickness>
-			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingFocused">1</Thickness>
 
 			<CornerRadius x:Key="FilledPasswordBoxCornerRadius">4,4,0,0</CornerRadius>
 			<x:Double x:Key="FilledPasswordBoxMinHeight">56</x:Double>
@@ -471,49 +465,42 @@
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="PasswordBox">
-					<Border x:Name="RootBorder"
-							BorderBrush="{TemplateBinding BorderBrush}"
-							BorderThickness="{TemplateBinding BorderThickness}"
-							CornerRadius="{TemplateBinding CornerRadius}"
-							Padding="{ThemeResource OutlinedPasswordBoxBorderPadding}">
-
+					<Grid>
 						<VisualStateManager.VisualStateGroups>
 							<VisualStateGroup x:Name="CommonStates">
 								<VisualState x:Name="Normal" />
 
 								<VisualState x:Name="PointerOver">
 									<VisualState.Setters>
-										<Setter Target="RootBorder.BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrushPointerOver}" />
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxForegroundPointerOver}" />
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxPlaceholderForegroundPointerOver}" />
 										<Setter Target="Root.Background" Value="{ThemeResource OutlinedPasswordBoxBackgroundPointerOver}" />
-										<Setter Target="RootBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessPointerOver}" />
-										<Setter Target="RootBorder.Padding" Value="{ThemeResource OutlinedPasswordBoxBorderPaddingPointerOver}" />
+										<Setter Target="BorderBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessPointerOver}" />
+										<Setter Target="BorderBorder.BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrushPointerOver}" />
 									</VisualState.Setters>
 								</VisualState>
 
 								<VisualState x:Name="Pressed" />
 
 								<VisualState x:Name="Disabled">
 									<VisualState.Setters>
-										<Setter Target="RootBorder.BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrushDisabled}" />
 										<!-- In this case the opacity is not applied to the brush directly - known issue for ContentElement -->
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxForegroundDisabled}" />
 										<Setter Target="ContentElement.Opacity" Value="{ThemeResource OutlinedPasswordBoxForegroundOpacityDisabled}" />
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxPlaceholderForegroundDisabled}" />
 										<Setter Target="Root.Background" Value="{ThemeResource OutlinedPasswordBoxBackgroundDisabled}" />
 										<Setter Target="IconPresenter.Foreground" Value="{ThemeResource PasswordBoxLeadingIconForegroundDisabled}" />
+										<Setter Target="BorderBorder.BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrushDisabled}" />
 									</VisualState.Setters>
 								</VisualState>
 
 								<VisualState x:Name="Focused">
 									<VisualState.Setters>
-										<Setter Target="RootBorder.BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrushFocused}" />
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxForegroundFocused}" />
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxPlaceholderForegroundFocused}" />
 										<Setter Target="Root.Background" Value="{ThemeResource OutlinedPasswordBoxBackgroundFocused}" />
-										<Setter Target="RootBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessFocused}" />
-										<Setter Target="RootBorder.Padding" Value="{ThemeResource OutlinedPasswordBoxBorderPaddingFocused}" />
+										<Setter Target="BorderBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessFocused}" />
+										<Setter Target="BorderBorder.BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrushFocused}" />
 									</VisualState.Setters>
 								</VisualState>
 							</VisualStateGroup>
@@ -568,6 +555,7 @@
 							</VisualStateGroup>
 						</VisualStateManager.VisualStateGroups>
 
+						<!-- Content Grid -->
 						<Grid x:Name="Root"
 							  Padding="{TemplateBinding Padding}"
 							  Background="{TemplateBinding Background}">
@@ -577,7 +565,9 @@
 								<ColumnDefinition Width="Auto" />
 							</Grid.ColumnDefinitions>
 
+							<!-- IconPresenter -->
 							<ContentPresenter x:Name="IconPresenter"
+											  Grid.Column="0"
 											  MinWidth="25"
 											  MaxWidth="34"
 											  MaxHeight="34"
@@ -588,6 +578,7 @@
 											  Content="{Binding Path=(ut:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}}"
 											  Visibility="{Binding Path=(ut:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource NullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" />
 
+							<!-- ContentElement -->
 							<ScrollViewer x:Name="ContentElement"
 										  Grid.Column="1"
 										  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -606,6 +597,7 @@
 								</ScrollViewer.RenderTransform>
 							</ScrollViewer>
 
+							<!-- PlaceholderElement -->
 							<TextBlock x:Name="PlaceholderElement"
 									   Grid.Column="1"
 									   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -619,6 +611,7 @@
 								</TextBlock.RenderTransform>
 							</TextBlock>
 
+							<!-- RevealButton -->
 							<Button x:Name="RevealButton"
 									Grid.Column="2"
 									MinWidth="34"
@@ -629,7 +622,15 @@
 									Style="{StaticResource MaterialRevealButtonStyle}"
 									Visibility="Collapsed" />
 						</Grid>
-					</Border>
+						<!--
+							In Figma design, border thickness doesn't push its inner content like on xaml.
+							So we are putting the border as an overlay here. To keep the rest of the measurements/values identical to Figma.
+						-->
+						<Border x:Name="BorderBorder"
+								BorderBrush="{TemplateBinding BorderBrush}"
+								BorderThickness="{TemplateBinding BorderThickness}"
+								CornerRadius="{TemplateBinding CornerRadius}" />
+					</Grid>
 				</ControlTemplate>
 			</Setter.Value>
 		</Setter>

diff --git a/src/library/Uno.Themes.WinUI.Markup/Theme/PasswordBox.cs b/src/library/Uno.Themes.WinUI.Markup/Theme/PasswordBox.cs
@@ -155,18 +155,6 @@ public static partial class BorderBrush
 					public static ThemeResourceKey<Brush> Focused => new("OutlinedPasswordBoxBorderBrushFocused");
 				}
 
-				public static partial class BorderPadding
-				{
-					[ResourceKeyDefinition(typeof(Thickness), "OutlinedPasswordBoxBorderPadding")]
-					public static ThemeResourceKey<Thickness> Default => new("OutlinedPasswordBoxBorderPadding");
-
-					[ResourceKeyDefinition(typeof(Thickness), "OutlinedPasswordBoxBorderPaddingPointerOver")]
-					public static ThemeResourceKey<Thickness> PointerOver => new("OutlinedPasswordBoxBorderPaddingPointerOver");
-
-					[ResourceKeyDefinition(typeof(Thickness), "OutlinedPasswordBoxBorderPaddingFocused")]
-					public static ThemeResourceKey<Thickness> Focused => new("OutlinedPasswordBoxBorderPaddingFocused");
-				}
-
 				public static partial class BorderThickness
 				{
 					[ResourceKeyDefinition(typeof(Thickness), "OutlinedPasswordBoxBorderThickness")]