Skip to content

Commit 7e9fdb0

Browse files
ArieldelossantosArieldelossantos
authored
refactor(PasswordBox): add missing lightweight styling keys (#1205)
1 parent d19569b commit 7e9fdb0

File tree

2 files changed

+61
-15
lines changed

2 files changed

+61
-15
lines changed

‎doc/styles/PasswordBox.md

+14
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ FilledPasswordBoxFontFamily|FontFamily|MaterialMediumFontFamily
3838
FilledPasswordBoxFontWeight|String|BodyLargeFontWeight
3939
FilledPasswordBoxFontSize|Double|BodyLargeFontSize
4040
FilledPasswordBoxCharacterSpacing|Int32|BodyLargeCharacterSpacing
41+
FilledPasswordBoxCornerRadius|CornerRadius|4,4,0,0
42+
FilledPasswordBoxMinHeight|Double|56
43+
FilledPasswordBoxBorderHeightPointerOver|Double|2
44+
FilledPasswordBoxBorderHeightFocused|Double|2
45+
FilledPasswordBoxPadding|Thickness|16,4,8,4
4146
OutlinedPasswordBoxBackground|SolidColorBrush|SystemControlTransparentBrush
4247
OutlinedPasswordBoxBackgroundPointerOver|SolidColorBrush|SystemControlTransparentBrush
4348
OutlinedPasswordBoxBackgroundFocused|SolidColorBrush|SystemControlTransparentBrush
@@ -59,3 +64,12 @@ OutlinedPasswordBoxFontFamily|FontFamily|MaterialMediumFontFamily
5964
OutlinedPasswordBoxFontWeight|String|BodyLargeFontWeight
6065
OutlinedPasswordBoxFontSize|Double|BodyLargeFontSize
6166
OutlinedPasswordBoxCharacterSpacing|Int32|BodyLargeCharacterSpacing
67+
OutlinedPasswordBoxCornerRadius|CornerRadius|4
68+
OutlinedPasswordBoxMinHeight|Double|58
69+
OutlinedPasswordBoxBorderPadding|Thickness|1
70+
OutlinedPasswordBoxBorderPaddingPointerOver|Thickness|0
71+
OutlinedPasswordBoxBorderPaddingFocused|Thickness|0
72+
OutlinedPasswordBoxPadding|Thickness|16,4,8,4
73+
OutlinedPasswordBoxBorderThickness|Thickness|1
74+
OutlinedPasswordBoxBorderThicknessPointerOver|Thickness|2
75+
OutlinedPasswordBoxBorderThicknessFocused|Thickness|2

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

+47-15
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,22 @@
8585
<StaticResource x:Key="OutlinedPasswordBoxFontSize" ResourceKey="BodyLargeFontSize" />
8686
<StaticResource x:Key="OutlinedPasswordBoxCharacterSpacing" ResourceKey="BodyLargeCharacterSpacing" />
8787
<!--#endregion-->
88+
89+
<CornerRadius x:Key="OutlinedPasswordBoxCornerRadius">4</CornerRadius>
90+
<x:Double x:Key="OutlinedPasswordBoxMinHeight">58</x:Double>
91+
<Thickness x:Key="OutlinedPasswordBoxBorderPadding">1</Thickness>
92+
<Thickness x:Key="OutlinedPasswordBoxBorderThickness">1</Thickness>
93+
<Thickness x:Key="OutlinedPasswordBoxPadding">16,4,8,4</Thickness>
94+
<Thickness x:Key="OutlinedPasswordBoxBorderThicknessPointerOver">2</Thickness>
95+
<Thickness x:Key="OutlinedPasswordBoxBorderPaddingPointerOver">0</Thickness>
96+
<Thickness x:Key="OutlinedPasswordBoxBorderThicknessFocused">2</Thickness>
97+
<Thickness x:Key="OutlinedPasswordBoxBorderPaddingFocused">0</Thickness>
98+
99+
<CornerRadius x:Key="FilledPasswordBoxCornerRadius">4,4,0,0</CornerRadius>
100+
<x:Double x:Key="FilledPasswordBoxMinHeight">56</x:Double>
101+
<x:Double x:Key="FilledPasswordBoxBorderHeightPointerOver">2</x:Double>
102+
<x:Double x:Key="FilledPasswordBoxBorderHeightFocused">2</x:Double>
103+
<Thickness x:Key="FilledPasswordBoxPadding">16,4,8,4</Thickness>
88104
</ResourceDictionary>
89105
<ResourceDictionary x:Key="Light">
90106
<!--#region Glyph-->
@@ -99,7 +115,7 @@
99115
<StaticResource x:Key="PasswordBoxLeadingIconForeground" ResourceKey="OnSurfaceVariantBrush" />
100116
<StaticResource x:Key="PasswordBoxLeadingIconForegroundDisabled" ResourceKey="OnSurfaceLowBrush" />
101117
<!--#endregion-->
102-
118+
103119
<!--#region MaterialFilledPasswordBoxStyle-->
104120
<StaticResource x:Key="FilledPasswordBoxBackground" ResourceKey="SurfaceVariantBrush" />
105121
<StaticResource x:Key="FilledPasswordBoxBackgroundPointerOver" ResourceKey="OnSurfaceVariantHoverBrush" />
@@ -163,6 +179,22 @@
163179
<StaticResource x:Key="OutlinedPasswordBoxFontSize" ResourceKey="BodyLargeFontSize" />
164180
<StaticResource x:Key="OutlinedPasswordBoxCharacterSpacing" ResourceKey="BodyLargeCharacterSpacing" />
165181
<!--#endregion-->
182+
183+
<CornerRadius x:Key="OutlinedPasswordBoxCornerRadius">4</CornerRadius>
184+
<x:Double x:Key="OutlinedPasswordBoxMinHeight">58</x:Double>
185+
<Thickness x:Key="OutlinedPasswordBoxBorderPadding">1</Thickness>
186+
<Thickness x:Key="OutlinedPasswordBoxBorderThickness">1</Thickness>
187+
<Thickness x:Key="OutlinedPasswordBoxPadding">16,4,8,4</Thickness>
188+
<Thickness x:Key="OutlinedPasswordBoxBorderThicknessPointerOver">2</Thickness>
189+
<Thickness x:Key="OutlinedPasswordBoxBorderPaddingPointerOver">0</Thickness>
190+
<Thickness x:Key="OutlinedPasswordBoxBorderThicknessFocused">2</Thickness>
191+
<Thickness x:Key="OutlinedPasswordBoxBorderPaddingFocused">0</Thickness>
192+
193+
<CornerRadius x:Key="FilledPasswordBoxCornerRadius">4,4,0,0</CornerRadius>
194+
<x:Double x:Key="FilledPasswordBoxMinHeight">56</x:Double>
195+
<x:Double x:Key="FilledPasswordBoxBorderHeightPointerOver">2</x:Double>
196+
<x:Double x:Key="FilledPasswordBoxBorderHeightFocused">2</x:Double>
197+
<Thickness x:Key="FilledPasswordBoxPadding">16,4,8,4</Thickness>
166198
</ResourceDictionary>
167199
</ResourceDictionary.ThemeDictionaries>
168200

@@ -211,9 +243,9 @@
211243
<Setter Property="BorderBrush" Value="{ThemeResource FilledPasswordBoxBorderBrush}" />
212244
<Setter Property="HorizontalContentAlignment" Value="Left" />
213245
<Setter Property="VerticalContentAlignment" Value="Center" />
214-
<Setter Property="CornerRadius" Value="4,4,0,0" />
215-
<Setter Property="Padding" Value="16,4,8,4" />
216-
<Setter Property="MinHeight" Value="58" />
246+
<Setter Property="CornerRadius" Value="{ThemeResource FilledPasswordBoxCornerRadius}" />
247+
<Setter Property="Padding" Value="{ThemeResource FilledPasswordBoxPadding}" />
248+
<Setter Property="MinHeight" Value="{ThemeResource FilledPasswordBoxMinHeight}" />
217249

218250
<!-- Start: Body Large Typo -->
219251
<Setter Property="FontFamily" Value="{ThemeResource FilledPasswordBoxFontFamily}" />
@@ -242,7 +274,7 @@
242274
<Setter Target="ContentElement.Foreground" Value="{ThemeResource FilledPasswordBoxForegroundPointerOver}" />
243275
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource FilledPasswordBoxPlaceholderForegroundPointerOver}" />
244276
<Setter Target="Root.Background" Value="{ThemeResource FilledPasswordBoxBackgroundPointerOver}" />
245-
<Setter Target="NormalBorder.Height" Value="2" />
277+
<Setter Target="NormalBorder.Height" Value="{ThemeResource FilledPasswordBoxBorderHeightPointerOver}" />
246278
</VisualState.Setters>
247279
</VisualState>
248280

@@ -266,7 +298,7 @@
266298
<Setter Target="ContentElement.Foreground" Value="{ThemeResource FilledPasswordBoxForegroundFocused}" />
267299
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource FilledPasswordBoxPlaceholderForegroundFocused}" />
268300
<Setter Target="Root.Background" Value="{ThemeResource FilledPasswordBoxBackgroundFocused}" />
269-
<Setter Target="NormalBorder.Height" Value="2" />
301+
<Setter Target="NormalBorder.Height" Value="{ThemeResource FilledPasswordBoxBorderHeightFocused}" />
270302
</VisualState.Setters>
271303

272304
<Storyboard>
@@ -418,12 +450,12 @@
418450
<Setter Property="Background" Value="{ThemeResource OutlinedPasswordBoxBackground}" />
419451
<Setter Property="Foreground" Value="{ThemeResource OutlinedPasswordBoxForeground}" />
420452
<Setter Property="BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrush}" />
421-
<Setter Property="BorderThickness" Value="1" />
422-
<Setter Property="CornerRadius" Value="4" />
453+
<Setter Property="BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThickness}" />
454+
<Setter Property="CornerRadius" Value="{ThemeResource OutlinedPasswordBoxCornerRadius}" />
423455
<Setter Property="HorizontalContentAlignment" Value="Left" />
424456
<Setter Property="VerticalContentAlignment" Value="Center" />
425-
<Setter Property="Padding" Value="16,4,8,4" />
426-
<Setter Property="MinHeight" Value="56" />
457+
<Setter Property="Padding" Value="{ThemeResource OutlinedPasswordBoxPadding}" />
458+
<Setter Property="MinHeight" Value="{ThemeResource OutlinedPasswordBoxMinHeight}" />
427459

428460
<!-- Start: Body Large Typo -->
429461
<Setter Property="FontFamily" Value="{ThemeResource OutlinedPasswordBoxFontFamily}" />
@@ -442,7 +474,7 @@
442474
BorderBrush="{TemplateBinding BorderBrush}"
443475
BorderThickness="{TemplateBinding BorderThickness}"
444476
CornerRadius="{TemplateBinding CornerRadius}"
445-
Padding="1">
477+
Padding="{ThemeResource OutlinedPasswordBoxBorderPadding}">
446478

447479
<VisualStateManager.VisualStateGroups>
448480
<VisualStateGroup x:Name="CommonStates">
@@ -454,8 +486,8 @@
454486
<Setter Target="ContentElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxForegroundPointerOver}" />
455487
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxPlaceholderForegroundPointerOver}" />
456488
<Setter Target="Root.Background" Value="{ThemeResource OutlinedPasswordBoxBackgroundPointerOver}" />
457-
<Setter Target="RootBorder.BorderThickness" Value="2" />
458-
<Setter Target="RootBorder.Padding" Value="0" />
489+
<Setter Target="RootBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessPointerOver}" />
490+
<Setter Target="RootBorder.Padding" Value="{ThemeResource OutlinedPasswordBoxBorderPaddingPointerOver}" />
459491
</VisualState.Setters>
460492
</VisualState>
461493

@@ -479,8 +511,8 @@
479511
<Setter Target="ContentElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxForegroundFocused}" />
480512
<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxPlaceholderForegroundFocused}" />
481513
<Setter Target="Root.Background" Value="{ThemeResource OutlinedPasswordBoxBackgroundFocused}" />
482-
<Setter Target="RootBorder.BorderThickness" Value="2" />
483-
<Setter Target="RootBorder.Padding" Value="0" />
514+
<Setter Target="RootBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessFocused}" />
515+
<Setter Target="RootBorder.Padding" Value="{ThemeResource OutlinedPasswordBoxBorderPaddingFocused}" />
484516
</VisualState.Setters>
485517
</VisualState>
486518
</VisualStateGroup>

0 commit comments

Comments
 (0)