From 61510df5e83a65ea19616c7c5fdd9e6a7d8d362b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89rik=20Lima?= <114886335+eriklimakc@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:14:08 -0300 Subject: [PATCH] feat: Introducing Header and Placeholder (#1014) Co-authored-by: agneszitte --- doc/styles/TextBox.md | 16 +- src/library/Directory.Packages.props | 30 +- .../FromTextBoxEmptyStringToValueConverter.cs | 66 ++++ .../Styles/Controls/v2/TextBox.xaml | 295 +++++++++++++----- src/samples/Directory.Packages.props | 22 +- .../Content/Controls/TextBoxSamplePage.xaml | 51 ++- 6 files changed, 359 insertions(+), 121 deletions(-) create mode 100644 src/library/Uno.Material/Converters/FromTextBoxEmptyStringToValueConverter.cs diff --git a/doc/styles/TextBox.md b/doc/styles/TextBox.md index 74e78cce0..f0fda5cdb 100644 --- a/doc/styles/TextBox.md +++ b/doc/styles/TextBox.md @@ -42,8 +42,12 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl | `FilledTextBoxForegroundOpacityDisabled` | `Double` | `LowOpacity` | | `FilledTextBoxPlaceholderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | | `FilledTextBoxPlaceholderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `FilledTextBoxPlaceholderForegroundFocused` | `SolidColorBrush` | `PrimaryBrush` | +| `FilledTextBoxPlaceholderForegroundFocused` | `SolidColorBrush` | `OnSurfaceBrush` | | `FilledTextBoxPlaceholderForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `FilledTextBoxHeaderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `FilledTextBoxHeaderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `FilledTextBoxHeaderForegroundFocused` | `SolidColorBrush` | `PrimaryBrush` | +| `FilledTextBoxHeaderForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | | `OutlinedTextBoxBorderBrush` | `SolidColorBrush` | `OutlineBrush` | | `OutlinedTextBoxBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` | | `OutlinedTextBoxBorderBrushFocused` | `SolidColorBrush` | `PrimaryBrush` | @@ -55,8 +59,12 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl | `OutlinedTextBoxForegroundOpacityDisabled` | `Double` | `LowOpacity` | | `OutlinedTextBoxPlaceholderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | | `OutlinedTextBoxPlaceholderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `OutlinedTextBoxPlaceholderForegroundFocused` | `SolidColorBrush` | `PrimaryBrush` | +| `OutlinedTextBoxPlaceholderForegroundFocused` | `SolidColorBrush` | `OnSurfaceBrush` | | `OutlinedTextBoxPlaceholderForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `OutlinedTextBoxHeaderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `OutlinedTextBoxHeaderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `OutlinedTextBoxHeaderForegroundFocused` | `SolidColorBrush` | `PrimaryBrush` | +| `OutlinedTextBoxHeaderForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | | `OutlinedTextBoxFontFamily` | `FontFamily` | `BodyLargeFontFamily` | | `OutlinedTextBoxFontWeight` | `String` | `BodyLargeFontWeight` | | `OutlinedTextBoxFontSize` | `Double` | `BodyLargeFontSize` | @@ -70,12 +78,12 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl | `MaterialTextBoxClearGlyphWidth` | `Double` | 20 | | `MaterialTextBoxClearGlyphHeight` | `Double` | 20 | | `MaterialFilledTextBoxCornerRadius` | `CornerRadius` | 4,4,0,0 | -| `MaterialFilledTextBoxPadding` | `Thickness` | 16,7 | +| `MaterialFilledTextBoxPadding` | `Thickness` | 16,8 | | `MaterialFilledTextBoxMinHeight` | `Double` | 58 | | `MaterialFilledTextBoxBorderHeightFocused` | `Double` | 2 | | `MaterialOutlinedTextBoxBorderThickness` | `Double` | 1 | | `MaterialOutlinedTextBoxCornerRadius` | `CornerRadius` | 4 | -| `MaterialOutlinedTextBoxPadding` | `Thickness` | 16,7,14,7 | +| `MaterialOutlinedTextBoxPadding` | `Thickness` | 16,8 | | `MaterialOutlinedTextBoxMinHeight` | `Double` | 56 | | `MaterialOutlinedTextBoxBorderPadding` | `Thickness` | 1 | | `MaterialOutlinedTextBoxBorderThicknessFocused` | `Double` | 2 | diff --git a/src/library/Directory.Packages.props b/src/library/Directory.Packages.props index fe4dbaa06..7f420d747 100644 --- a/src/library/Directory.Packages.props +++ b/src/library/Directory.Packages.props @@ -1,23 +1,23 @@ - - true + + true <_Uno_XamlMerge_Task_Version>1.1.0-dev.12 - + - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/src/library/Uno.Material/Converters/FromTextBoxEmptyStringToValueConverter.cs b/src/library/Uno.Material/Converters/FromTextBoxEmptyStringToValueConverter.cs new file mode 100644 index 000000000..6c5cad7aa --- /dev/null +++ b/src/library/Uno.Material/Converters/FromTextBoxEmptyStringToValueConverter.cs @@ -0,0 +1,66 @@ +using System; +using System.Collections.Generic; +using System.Text; + +#if WinUI +using Microsoft.UI.Xaml.Controls; +using Microsoft.UI.Xaml.Data; +#else +using Windows.UI.Xaml.Controls; +using Windows.UI.Xaml.Data; +#endif + +namespace Uno.Material +{ + public class FromTextBoxEmptyStringToValueConverter : IValueConverter + { + public object NoHeaderAndNoPlaceholderValue { get; set; } + + public object HeaderOnlyValue { get; set; } + + public object HeaderOnlyWithTextValue { get; set; } + + public object PlaceholderOnlyValue { get; set; } + + public object HeaderAndPlaceholderValue { get; set; } + + public object Convert(object value, Type targetType, object parameter, string language) + { + var textBox = value as TextBox; + + if (textBox is not null) + { + var noHeader = !(textBox.Header is string str1) || string.IsNullOrEmpty(str1); + var noPlaceholder = !(textBox.PlaceholderText is string str2) || string.IsNullOrEmpty(str2); + var noText = string.IsNullOrEmpty(textBox.Text); + + if (!noHeader && !noPlaceholder) + { + return HeaderAndPlaceholderValue; + } + else if (!noHeader && noPlaceholder) + { + if (!noText) + { + return HeaderOnlyWithTextValue; + } + + return HeaderOnlyValue; + } + else if (noHeader && !noPlaceholder) + { + return PlaceholderOnlyValue; + } + + return NoHeaderAndNoPlaceholderValue; + } + + return NoHeaderAndNoPlaceholderValue; + } + + public object ConvertBack(object value, Type targetType, object parameter, string language) + { + throw new NotSupportedException(); + } + } +} diff --git a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml index 9e15122a2..9772f245e 100644 --- a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml +++ b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml @@ -8,10 +8,49 @@ xmlns:ut="using:Uno.Themes" mc:Ignorable="d macos"> + + - + + + + + + + M14.9482 6.46442L13.534 5.05021L9.99849 8.58574L6.46296 5.05021L5.04874 6.46442L8.58428 9.99995L5.04874 13.5355L6.46296 14.9497L9.99849 11.4142L13.534 14.9497L14.9482 13.5355L11.4127 9.99995L14.9482 6.46442ZM17.0696 2.92889C13.1663 -0.974342 6.83065 -0.974342 2.92742 2.92889C-0.975807 6.83212 -0.975807 13.1678 2.92742 17.071C6.83065 20.9743 13.1663 20.9743 17.0696 17.071C20.9728 13.1678 20.9728 6.83212 17.0696 2.92889ZM4.34164 15.6568C1.22329 12.5385 1.22329 7.46144 4.34164 4.3431C7.45998 1.22476 12.537 1.22476 15.6553 4.3431C18.7737 7.46144 18.7737 12.5385 15.6553 15.6568C12.537 18.7752 7.45998 18.7752 4.34164 15.6568Z @@ -55,8 +94,13 @@ - + + + + + + @@ -74,8 +118,13 @@ - + + + + + + @@ -100,7 +149,7 @@ 4,4,0,0 16,7 - 16 + 16,8 58 2 @@ -109,7 +158,7 @@ 1 4 16,7,14,7 - 16,16,14,16 + 16,8 56 1 2 @@ -154,8 +203,13 @@ - + + + + + + @@ -173,8 +227,13 @@ - + + + + + + @@ -199,7 +258,7 @@ 4,4,0,0 16,7 - 16 + 16,8 58 2 @@ -208,7 +267,7 @@ 1 4 16,7,14,7 - 16,16,14,16 + 16,8 56 1 2 @@ -297,15 +356,32 @@ - + + + + + + + + + + + + + + + + + + @@ -318,6 +394,7 @@ + @@ -327,6 +404,7 @@ + @@ -334,65 +412,55 @@ - + - - - - - - - - - - - - - - - - - - + To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" /> + - - - - + - - - - + + + + + + + + - + @@ -401,13 +469,12 @@ - + + + + + + + + + + + @@ -527,12 +615,30 @@ - + + + + + + + + + + + + + + + + + + + @@ -544,6 +650,7 @@ + @@ -554,59 +661,57 @@ + - - - - - - - - - - - - + - + + - + To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource FocusedPlaceholderContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" /> + - - - - - - - - + + + + + + + + + + Margin="{TemplateBinding Padding}"> @@ -615,18 +720,16 @@ - + + VerticalAlignment="{TemplateBinding VerticalContentAlignment}" + Visibility="{Binding Path=(ut:ControlExtensions.Icon), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource NullToCollapsedConverter}, FallbackValue=Collapsed, TargetNullValue=Collapsed}" /> @@ -650,15 +754,34 @@ + + + + + + + + + + + diff --git a/src/samples/Directory.Packages.props b/src/samples/Directory.Packages.props index 9c988975e..590fcdef6 100644 --- a/src/samples/Directory.Packages.props +++ b/src/samples/Directory.Packages.props @@ -23,21 +23,21 @@ - - - - - - + + + + + + - - - - - + + + + + diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml index 217d4f52b..a6659e121 100644 --- a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml +++ b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/TextBoxSamplePage.xaml @@ -18,7 +18,9 @@ - + @@ -106,16 +108,36 @@ + + - + + + + + + + + + + + + + + - @@ -129,15 +151,34 @@ + + - + + + + + + + + + + + + @@ -184,7 +225,7 @@ - +