Skip to content

Cleanup: Aligning hint, helper text and validation error based on padding #3086

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keboo merged 17 commits into from
Feb 19, 2023
Merged

Cleanup: Aligning hint, helper text and validation error based on padding #3086

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7b2d33d
Fix padding issues with DatePicker and TimePicker
nicolaihenriksen Feb 13, 2023
7cc2b97
Extend SmartHint demo page with custom padding and helper text options
nicolaihenriksen Feb 13, 2023
30ced21
Enable toggling validation errors on/off on SmartHint demo page
nicolaihenriksen Feb 13, 2023
fc3cf2a
Add failing UI tests for TextBox
nicolaihenriksen Feb 14, 2023
7bf2082
Add failing UI tests for TextBox with validation error
nicolaihenriksen Feb 14, 2023
cb3350c
Fix positioning of helper text and validation error in TextBox
nicolaihenriksen Feb 14, 2023
f6626b7
Added UI test for PasswordBox (some failing some passing)
nicolaihenriksen Feb 14, 2023
69d6ba2
Fix helper text alignment for PasswordBox with custom padding
nicolaihenriksen Feb 14, 2023
3662cb0
Add UI test for ComboBox
nicolaihenriksen Feb 17, 2023
1057751
Remove wrong usage of TextFieldAssist.TextBoxViewMargin
nicolaihenriksen Feb 17, 2023
02cc4a6
Add DatePicker and TimePicker to SmartHint demo page
nicolaihenriksen Feb 17, 2023
1e1647d
Add failing DatePicker UI tests
nicolaihenriksen Feb 17, 2023
f099401
Fix helper text placement in DatePicker
nicolaihenriksen Feb 17, 2023
876aa85
Add validation error to DatePicker/TimePicker in SmartHint demo page
nicolaihenriksen Feb 17, 2023
68a8ee7
Add failing TimePicker UI tests
nicolaihenriksen Feb 17, 2023
37d2222
Fix helper text placement in TimePicker
nicolaihenriksen Feb 17, 2023
0811b7c
Minor cleanup
nicolaihenriksen Feb 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fix padding issues with DatePicker and TimePicker
  • Loading branch information
@nicolaihenriksen
nicolaihenriksen committed Feb 13, 2023
commit 7b2d33d8050f7bf741f2c65f64df6cbf3143360a
16 changes: 8 additions & 8 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.DatePicker.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,15 @@
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding wpf:TextFieldAssist.TextFieldCornerRadius}"
SnapsToDevicePixels="True">
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="grid"
MinWidth="1"
VerticalAlignment="Center">
VerticalAlignment="Center"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
Expand Down Expand Up @@ -165,7 +166,8 @@
FontSize="{TemplateBinding FontSize}"
HintOpacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}">
UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}">
<wpf:SmartHint.Hint>
<Border x:Name="HintBackgroundBorder"
Background="{TemplateBinding wpf:HintAssist.Background}"
Expand Down Expand Up @@ -255,13 +257,11 @@
</MultiTrigger>
<Trigger Property="wpf:TextFieldAssist.HasFilledTextField" Value="True">
<Setter Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxBackground}" />
<Setter Property="Padding" Value="16,8,12,8" />
<Setter TargetName="HelperTextWrapper" Property="Margin" Value="16,0,0,0" />
</Trigger>
<Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
<Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:DatePickerAssist.OutlinedBorderInactiveThickness)}" />
<Setter Property="Padding" Value="16,16,12,16" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter TargetName="HelperTextWrapper" Property="Margin" Value="16,0,0,0" />
<Setter TargetName="Hint" Property="FloatingOffset">
Expand All @@ -271,7 +271,7 @@
<Binding Path="FontSize" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="(wpf:HintAssist.FloatingScale)" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="(wpf:HintAssist.FloatingOffset)" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="ActualHeight" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Padding" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</Setter.Value>
</Setter>
Expand Down Expand Up @@ -530,12 +530,10 @@
<ControlTemplate.Triggers>
<Trigger Property="wpf:TextFieldAssist.HasFilledTextField" Value="True">
<Setter Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxBackground}" />
<Setter Property="Padding" Value="16,8" />
<Setter Property="wpf:TextFieldAssist.TextBoxViewMargin" Value="{x:Static wpf:Constants.DefaultTextBoxViewMarginEmbedded}" />
</Trigger>
<Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
<Setter Property="Padding" Value="16" />
<Setter Property="wpf:TextFieldAssist.TextBoxViewMargin" Value="{x:Static wpf:Constants.DefaultTextBoxViewMarginEmbedded}" />
</Trigger>
<MultiTrigger>
Expand Down Expand Up @@ -616,13 +614,15 @@
<Setter Property="wpf:TextFieldAssist.HasFilledTextField" Value="True" />
<Setter Property="wpf:TextFieldAssist.TextFieldCornerRadius" Value="4,4,0,0" />
<Setter Property="wpf:TextFieldAssist.UnderlineCornerRadius" Value="0" />
<Setter Property="Padding" Value="16,8" />
</Style>

<Style x:Key="MaterialDesignOutlinedDatePicker"
TargetType="{x:Type DatePicker}"
BasedOn="{StaticResource MaterialDesignFloatingHintDatePicker}">
<Setter Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
<Setter Property="wpf:TextFieldAssist.TextFieldCornerRadius" Value="4" />
<Setter Property="Padding" Value="16" />
</Style>

</ResourceDictionary>
16 changes: 8 additions & 8 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TimePicker.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,15 @@
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding wpf:TextFieldAssist.TextFieldCornerRadius}"
SnapsToDevicePixels="True">
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="grid"
MinWidth="1"
VerticalAlignment="Center">
VerticalAlignment="Center"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
Expand Down Expand Up @@ -162,7 +163,8 @@
FontSize="{TemplateBinding FontSize}"
HintOpacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
HintProxy="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:HintProxyFabricConverter.Instance}}"
UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}">
UseFloating="{TemplateBinding wpf:HintAssist.IsFloating}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}">
<wpf:SmartHint.Hint>
<Border x:Name="HintBackgroundBorder"
Background="{TemplateBinding wpf:HintAssist.Background}"
Expand Down Expand Up @@ -251,13 +253,11 @@
</MultiTrigger>
<Trigger Property="wpf:TextFieldAssist.HasFilledTextField" Value="True">
<Setter Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxBackground}" />
<Setter Property="Padding" Value="16,8,12,8" />
<Setter TargetName="HelperTextWrapper" Property="Margin" Value="16,0,0,0" />
</Trigger>
<Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
<Setter Property="BorderThickness" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:TimePickerAssist.OutlinedBorderInactiveThickness)}" />
<Setter Property="Padding" Value="16,16,12,16" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter TargetName="HelperTextWrapper" Property="Margin" Value="16,0,0,0" />
<Setter TargetName="Hint" Property="FloatingOffset">
Expand All @@ -267,7 +267,7 @@
<Binding Path="FontSize" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="(wpf:HintAssist.FloatingScale)" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="(wpf:HintAssist.FloatingOffset)" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="ActualHeight" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Padding" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</Setter.Value>
</Setter>
Expand Down Expand Up @@ -539,12 +539,10 @@
<ControlTemplate.Triggers>
<Trigger Property="wpf:TextFieldAssist.HasFilledTextField" Value="True">
<Setter Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxBackground}" />
<Setter Property="Padding" Value="16,8" />
<Setter Property="wpf:TextFieldAssist.TextBoxViewMargin" Value="{x:Static wpf:Constants.DefaultTextBoxViewMarginEmbedded}" />
</Trigger>
<Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
<Setter Property="Padding" Value="16" />
<Setter Property="wpf:TextFieldAssist.TextBoxViewMargin" Value="{x:Static wpf:Constants.DefaultTextBoxViewMarginEmbedded}" />
</Trigger>
<MultiTrigger>
Expand Down Expand Up @@ -615,13 +613,15 @@
<Setter Property="wpf:TextFieldAssist.HasFilledTextField" Value="True" />
<Setter Property="wpf:TextFieldAssist.TextFieldCornerRadius" Value="4,4,0,0" />
<Setter Property="wpf:TextFieldAssist.UnderlineCornerRadius" Value="0" />
<Setter Property="Padding" Value="16,8" />
</Style>

<Style x:Key="MaterialDesignOutlinedTimePicker"
TargetType="{x:Type wpf:TimePicker}"
BasedOn="{StaticResource MaterialDesignFloatingHintTimePicker}">
<Setter Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />
<Setter Property="wpf:TextFieldAssist.TextFieldCornerRadius" Value="4" />
<Setter Property="Padding" Value="16" />
</Style>

</ResourceDictionary>