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
Prev Previous commit
Next Next commit
Add UI test for ComboBox
  • Loading branch information
@nicolaihenriksen
nicolaihenriksen committed Feb 17, 2023
commit 3662cb07a35b48a865ece87a88df006c378fbe24
91 changes: 91 additions & 0 deletions MaterialDesignThemes.UITests/WPF/ComboBoxes/ComboBoxTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using System.ComponentModel;
using MaterialDesignThemes.UITests.WPF.TextBoxes;

namespace MaterialDesignThemes.UITests.WPF.ComboBoxes;

Expand Down Expand Up @@ -166,4 +167,94 @@ public async Task OnEditableComboBox_ClickInTextArea_FocusesTextBox()

recorder.Success();
}

[Theory]
[InlineData("MaterialDesignFloatingHintComboBox", null)]
[InlineData("MaterialDesignFloatingHintComboBox", 5)]
[InlineData("MaterialDesignFloatingHintComboBox", 20)]
[InlineData("MaterialDesignFilledComboBox", null)]
[InlineData("MaterialDesignFilledComboBox", 5)]
[InlineData("MaterialDesignFilledComboBox", 20)]
[InlineData("MaterialDesignOutlinedComboBox", null)]
[InlineData("MaterialDesignOutlinedComboBox", 5)]
[InlineData("MaterialDesignOutlinedComboBox", 20)]
public async Task ComboBox_WithHintAndHelperText_RespectsPadding(string styleName, int? padding)
{
await using var recorder = new TestRecorder(App);

// FIXME: Tolerance needed because TextFieldAssist.TextBoxViewMargin is in play and slightly modifies the hint text placement in certain cases.
double tolerance = 1.5;

string styleAttribute = $"Style=\"{{StaticResource {styleName}}}\"";
string paddingAttribute = padding.HasValue ? $"Padding=\"{padding.Value}\"" : string.Empty;

var comboBox = await LoadXaml<ComboBox>($@"
<ComboBox {styleAttribute} {paddingAttribute}
materialDesign:HintAssist.Hint=""Hint text""
materialDesign:HintAssist.HelperText=""Helper text""
Width=""200"" VerticalAlignment=""Center"" HorizontalAlignment=""Center"" />
");

var contentHost = await comboBox.GetElement<ScrollViewer>("PART_ContentHost");
var hint = await comboBox.GetElement<SmartHint>("Hint");
var helperText = await comboBox.GetElement<TextBlock>("HelperTextTextBlock");

Rect? contentHostCoordinates = await contentHost.GetCoordinates();
Rect? hintCoordinates = await hint.GetCoordinates();
Rect? helperTextCoordinates = await helperText.GetCoordinates();

Assert.InRange(Math.Abs(contentHostCoordinates.Value.Left - hintCoordinates.Value.Left), 0, tolerance);
Assert.InRange(Math.Abs(contentHostCoordinates.Value.Left - helperTextCoordinates.Value.Left), 0, tolerance);

recorder.Success();
}

[Theory]
[InlineData("MaterialDesignFloatingHintComboBox", null)]
[InlineData("MaterialDesignFloatingHintComboBox", 5)]
[InlineData("MaterialDesignFloatingHintComboBox", 20)]
[InlineData("MaterialDesignFilledComboBox", null)]
[InlineData("MaterialDesignFilledComboBox", 5)]
[InlineData("MaterialDesignFilledComboBox", 20)]
[InlineData("MaterialDesignOutlinedComboBox", null)]
[InlineData("MaterialDesignOutlinedComboBox", 5)]
[InlineData("MaterialDesignOutlinedComboBox", 20)]
public async Task ComboBox_WithHintAndValidationError_RespectsPadding(string styleName, int? padding)
{
await using var recorder = new TestRecorder(App);

// FIXME: Tolerance needed because TextFieldAssist.TextBoxViewMargin is in play and slightly modifies the hint text placement in certain cases.
double tolerance = 1.5;

string styleAttribute = $"Style=\"{{StaticResource {styleName}}}\"";
string paddingAttribute = padding.HasValue ? $"Padding=\"{padding.Value}\"" : string.Empty;

var comboBox = await LoadXaml<ComboBox>($@"
<ComboBox {styleAttribute} {paddingAttribute}
materialDesign:HintAssist.Hint=""Hint text""
materialDesign:HintAssist.HelperText=""Helper text""
Width=""200"" VerticalAlignment=""Center"" HorizontalAlignment=""Center"">
<ComboBox.Text>
<Binding RelativeSource=""{{RelativeSource Self}}"" Path=""Tag"" UpdateSourceTrigger=""PropertyChanged"">
<Binding.ValidationRules>
<local:NotEmptyValidationRule ValidatesOnTargetUpdated=""True""/>
</Binding.ValidationRules>
</Binding>
</ComboBox.Text>
</ComboBox>
", ("local", typeof(NotEmptyValidationRule)));

var contentHost = await comboBox.GetElement<ScrollViewer>("PART_ContentHost");
var hint = await comboBox.GetElement<SmartHint>("Hint");
var errorViewer = await comboBox.GetElement<Border>("DefaultErrorViewer");

Rect? contentHostCoordinates = await contentHost.GetCoordinates();
Rect? hintCoordinates = await hint.GetCoordinates();
Rect? errorViewerCoordinates = await errorViewer.GetCoordinates();

Assert.InRange(Math.Abs(contentHostCoordinates.Value.Left - hintCoordinates.Value.Left), 0, tolerance);
Assert.InRange(Math.Abs(contentHostCoordinates.Value.Left - errorViewerCoordinates.Value.Left), 0, tolerance);

recorder.Success();
}
}
10 changes: 3 additions & 7 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ComboBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
<converters:FloatingHintOffsetCalculationConverter x:Key="FloatingHintOffsetCalculationConverter" />
<converters:ComboBoxClearButtonMarginConverter x:Key="ComboBoxClearButtonMarginConverter" />
<converters:DoubleToThicknessConverter x:Key="DoubleToThicknessConverter" />
<converters:ThicknessCloneConverter x:Key="HelperTextMarginConverter" CloneEdges="Left" />

<system:Double x:Key="PopupContentPresenterExtend">4</system:Double>
<system:Double x:Key="PopupTopBottomMargin">8</system:Double>
Expand Down Expand Up @@ -363,7 +364,6 @@

<wpf:SmartHint x:Name="Hint"
Grid.Column="1"
Margin="{TemplateBinding wpf:TextFieldAssist.TextBoxViewMargin}"
FloatingOffset="{TemplateBinding wpf:HintAssist.FloatingOffset}"
FloatingScale="{TemplateBinding wpf:HintAssist.FloatingScale}"
FontFamily="{TemplateBinding wpf:HintAssist.FontFamily}"
Expand Down Expand Up @@ -400,8 +400,8 @@
CornerRadius="{TemplateBinding wpf:TextFieldAssist.UnderlineCornerRadius}"
IsActive="{Binding ElementName=PART_EditableTextBox, Path=IsKeyboardFocused}"
Visibility="{TemplateBinding wpf:TextFieldAssist.DecorationVisibility}" />
<Canvas x:Name="HelperTextWrapper" VerticalAlignment="Bottom">
<TextBlock Canvas.Top="2"
<Canvas x:Name="HelperTextWrapper" VerticalAlignment="Bottom" Margin="{TemplateBinding Padding, Converter={StaticResource HelperTextMarginConverter}}">
<TextBlock x:Name="HelperTextTextBlock" Canvas.Top="2"
MaxWidth="{Binding ActualWidth, ElementName=toggleButton}"
FontSize="{TemplateBinding wpf:HintAssist.HelperTextFontSize}"
Opacity="{TemplateBinding wpf:HintAssist.HintOpacity}"
Expand Down Expand Up @@ -480,11 +480,7 @@
</Grid>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="wpf:TextFieldAssist.HasFilledTextField" Value="True">
<Setter TargetName="HelperTextWrapper" Property="Margin" Value="16,0,0,0" />
</Trigger>
<Trigger Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True">
<Setter TargetName="HelperTextWrapper" Property="Margin" Value="16,0,0,0" />
<Setter TargetName="Hint" Property="FloatingOffset">
<Setter.Value>
<MultiBinding Converter="{StaticResource FloatingHintOffsetCalculationConverter}">
Expand Down