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

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 DatePicker and TimePicker to SmartHint demo page
  • Loading branch information
@nicolaihenriksen
nicolaihenriksen committed Feb 17, 2023
commit 02cc4a643d69d0cd0a7707ea75cef031d2560589
252 changes: 252 additions & 0 deletions MainDemo.Wpf/SmartHint.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,12 @@
<ComboBox x:Name="MaterialDesignFloatingHintComboBoxDefaults" Style="{StaticResource MaterialDesignFloatingHintComboBox}" />
<ComboBox x:Name="MaterialDesignFilledComboBoxDefaults" Style="{StaticResource MaterialDesignFilledComboBox}" />
<ComboBox x:Name="MaterialDesignOutlinedComboBoxDefaults" Style="{StaticResource MaterialDesignOutlinedComboBox}" />
<DatePicker x:Name="MaterialDesignFloatingHintDatePickerDefaults" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
<DatePicker x:Name="MaterialDesignFilledDatePickerDefaults" Style="{StaticResource MaterialDesignFilledDatePicker}" />
<DatePicker x:Name="MaterialDesignOutlinedDatePickerDefaults" Style="{StaticResource MaterialDesignOutlinedDatePicker}" />
<materialDesign:TimePicker x:Name="MaterialDesignFloatingHintTimePickerDefaults" Style="{StaticResource MaterialDesignFloatingHintTimePicker}" />
<materialDesign:TimePicker x:Name="MaterialDesignFilledTimePickerDefaults" Style="{StaticResource MaterialDesignFilledTimePicker}" />
<materialDesign:TimePicker x:Name="MaterialDesignOutlinedTimePickerDefaults" Style="{StaticResource MaterialDesignOutlinedTimePicker}" />
</StackPanel>

<ScrollViewer Grid.Row="2" VerticalAlignment="Top" materialDesign:ScrollViewerAssist.BubbleVerticalScroll="False" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" Margin="0,20,0,0"
Expand Down Expand Up @@ -658,6 +664,252 @@
<ComboBox HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
</Grid>

<!-- DatePicker variants -->
<TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="DatePicker styles" Margin="0,40,0,0" />
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource MaterialDesignFloatingHintDatePicker}">
<Setter Property="materialDesign:TextFieldAssist.HasLeadingIcon" Value="{Binding ShowLeadingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
<Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignFloatingHintDatePickerDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SizeGroupStyleName" />
<ColumnDefinition SharedSizeGroup="SizeGroupLeftAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupCenterAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupRightAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupStretchAlignment" Width="Auto" />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Style="{StaticResource StyleNameIndicator}">MaterialDesignFloatingHintDatePicker</TextBlock>
<smtx:XamlDisplay Grid.Column="1" UniqueKey="datepicker_floating_left">
<DatePicker HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="2" UniqueKey="datepicker_floating_center">
<DatePicker HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="3" UniqueKey="datepicker_floating_right">
<DatePicker HorizontalContentAlignment="Right" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="4" UniqueKey="datepicker_floating_stretch">
<DatePicker HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource MaterialDesignFilledDatePicker}">
<Setter Property="materialDesign:TextFieldAssist.HasLeadingIcon" Value="{Binding ShowLeadingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
<Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignFilledDatePickerDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SizeGroupStyleName" />
<ColumnDefinition SharedSizeGroup="SizeGroupLeftAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupCenterAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupRightAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupStretchAlignment" Width="Auto" />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Style="{StaticResource StyleNameIndicator}">MaterialDesignFilledDatePicker</TextBlock>
<smtx:XamlDisplay Grid.Column="1" UniqueKey="datepicker_filled_left">
<DatePicker HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="2" UniqueKey="datepicker_filled_center">
<DatePicker HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="3" UniqueKey="datepicker_filled_right">
<DatePicker HorizontalContentAlignment="Right" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="4" UniqueKey="datepicker_filled_stretch">
<DatePicker HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource MaterialDesignOutlinedDatePicker}">
<Setter Property="materialDesign:TextFieldAssist.HasLeadingIcon" Value="{Binding ShowLeadingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
<Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignOutlinedDatePickerDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SizeGroupStyleName" />
<ColumnDefinition SharedSizeGroup="SizeGroupLeftAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupCenterAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupRightAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupStretchAlignment" Width="Auto" />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Style="{StaticResource StyleNameIndicator}">MaterialDesignOutlinedDatePicker</TextBlock>
<smtx:XamlDisplay Grid.Column="1" UniqueKey="datepicker_outlined_left">
<DatePicker HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="2" UniqueKey="datepicker_outlined_center">
<DatePicker HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="3" UniqueKey="datepicker_outlined_right">
<DatePicker HorizontalContentAlignment="Right" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="4" UniqueKey="datepicker_outlined_stretch">
<DatePicker HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
</Grid>

<!-- TimePicker variants -->
<TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="TimePicker styles" Margin="0,40,0,0" />
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type materialDesign:TimePicker}" BasedOn="{StaticResource MaterialDesignFloatingHintTimePicker}">
<Setter Property="materialDesign:TextFieldAssist.HasLeadingIcon" Value="{Binding ShowLeadingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
<Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignFloatingHintTimePickerDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SizeGroupStyleName" />
<ColumnDefinition SharedSizeGroup="SizeGroupLeftAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupCenterAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupRightAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupStretchAlignment" Width="Auto" />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Style="{StaticResource StyleNameIndicator}">MaterialDesignFloatingHintTimePicker</TextBlock>
<smtx:XamlDisplay Grid.Column="1" UniqueKey="timepicker_floating_left">
<materialDesign:TimePicker HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="2" UniqueKey="timepicker_floating_center">
<materialDesign:TimePicker HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="3" UniqueKey="timepicker_floating_right">
<materialDesign:TimePicker HorizontalContentAlignment="Right" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="4" UniqueKey="timepicker_floating_stretch">
<materialDesign:TimePicker HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type materialDesign:TimePicker}" BasedOn="{StaticResource MaterialDesignFilledTimePicker}">
<Setter Property="materialDesign:TextFieldAssist.HasLeadingIcon" Value="{Binding ShowLeadingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
<Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignFilledTimePickerDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SizeGroupStyleName" />
<ColumnDefinition SharedSizeGroup="SizeGroupLeftAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupCenterAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupRightAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupStretchAlignment" Width="Auto" />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Style="{StaticResource StyleNameIndicator}">MaterialDesignFilledTimePicker</TextBlock>
<smtx:XamlDisplay Grid.Column="1" UniqueKey="timepicker_filled_left">
<materialDesign:TimePicker HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="2" UniqueKey="timepicker_filled_center">
<materialDesign:TimePicker HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="3" UniqueKey="timepicker_filled_right">
<materialDesign:TimePicker HorizontalContentAlignment="Right" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="4" UniqueKey="timepicker_filled_stretch">
<materialDesign:TimePicker HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type materialDesign:TimePicker}" BasedOn="{StaticResource MaterialDesignOutlinedTimePicker}">
<Setter Property="materialDesign:TextFieldAssist.HasLeadingIcon" Value="{Binding ShowLeadingIcon}" />
<Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
<Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
<Setter Property="Padding">
<Setter.Value>
<MultiBinding Converter="{StaticResource CustomPaddingConverter}">
<Binding ElementName="MaterialDesignOutlinedTimePickerDefaults" Path="Padding" />
<Binding Path="ApplyCustomPadding" />
<Binding Path="SelectedCustomPadding" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SizeGroupStyleName" />
<ColumnDefinition SharedSizeGroup="SizeGroupLeftAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupCenterAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupRightAlignment" Width="Auto" />
<ColumnDefinition SharedSizeGroup="SizeGroupStretchAlignment" Width="Auto" />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Style="{StaticResource StyleNameIndicator}">MaterialDesignOutlinedTimePicker</TextBlock>
<smtx:XamlDisplay Grid.Column="1" UniqueKey="timepicker_outlined_left">
<materialDesign:TimePicker HorizontalContentAlignment="Left" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="2" UniqueKey="timepicker_outlined_center">
<materialDesign:TimePicker HorizontalContentAlignment="Center" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="3" UniqueKey="timepicker_outlined_right">
<materialDesign:TimePicker HorizontalContentAlignment="Right" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Grid.Column="4" UniqueKey="timepicker_outlined_stretch">
<materialDesign:TimePicker HorizontalContentAlignment="Stretch" />
</smtx:XamlDisplay>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
Expand Down