diff --git a/doc/styles/TextBox.md b/doc/styles/TextBox.md index f0fda5cdb..5379ad4f1 100644 --- a/doc/styles/TextBox.md +++ b/doc/styles/TextBox.md @@ -7,7 +7,7 @@ uid: Uno.Themes.Styles.TextBox ## Styles | Style Key | IsDefaultStyle\* | -|------------------------|------------------| +| ---------------------- | ---------------- | | `FilledTextBoxStyle` | | | `OutlinedTextBoxStyle` | True | @@ -15,75 +15,75 @@ IsDefaultStyle\*: Styles in this column will be set as the default implicit styl ## Lightweight Styling -| Key | Type | Value | -|---------------------------------------------------|-------------------|-------------------------------| -| `TextBoxDeleteButtonForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `TextBoxDeleteButtonForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `TextBoxDeleteButtonForegroundPressed` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `TextBoxDeleteButtonForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | -| `TextBoxLeadingIconForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `TextBoxLeadingIconForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | -| `FilledTextBoxBackground` | `SolidColorBrush` | `SurfaceVariantBrush` | -| `FilledTextBoxBackgroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantHoverBrush` | -| `FilledTextBoxBackgroundFocused` | `SolidColorBrush` | `SurfaceVariantBrush` | -| `FilledTextBoxBackgroundDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | -| `FilledTextBoxBorderBrush` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `FilledTextBoxBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` | -| `FilledTextBoxBorderBrushFocused` | `SolidColorBrush` | `PrimaryBrush` | -| `FilledTextBoxBorderBrushDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | -| `FilledTextBoxDeleteButtonForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `FilledTextBoxDeleteButtonForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `FilledTextBoxDeleteButtonForegroundFocused` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `FilledTextBoxDeleteButtonForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | -| `FilledTextBoxForeground` | `SolidColorBrush` | `OnSurfaceBrush` | -| `FilledTextBoxForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` | -| `FilledTextBoxForegroundFocused` | `SolidColorBrush` | `OnSurfaceBrush` | -| `FilledTextBoxForegroundDisabled` | `SolidColorBrush` | `OnSurfaceBrush` | -| `FilledTextBoxForegroundOpacityDisabled` | `Double` | `LowOpacity` | -| `FilledTextBoxPlaceholderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `FilledTextBoxPlaceholderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `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` | -| `OutlinedTextBoxBorderBrushDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | -| `OutlinedTextBoxForeground` | `SolidColorBrush` | `OnSurfaceBrush` | -| `OutlinedTextBoxForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` | -| `OutlinedTextBoxForegroundFocused` | `SolidColorBrush` | `OnSurfaceBrush` | -| `OutlinedTextBoxForegroundDisabled` | `SolidColorBrush` | `OnSurfaceBrush` | -| `OutlinedTextBoxForegroundOpacityDisabled` | `Double` | `LowOpacity` | -| `OutlinedTextBoxPlaceholderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `OutlinedTextBoxPlaceholderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | -| `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` | -| `OutlinedTextBoxCharacterSpacing` | `Int32` | `BodyLargeCharacterSpacing` | -| `FilledTextBoxFontFamily` | `FontFamily` | `BodyLargeFontFamily` | -| `FilledTextBoxFontWeight` | `String` | `BodyLargeFontWeight` | -| `FilledTextBoxFontSize` | `Double` | `BodyLargeFontSize` | -| `FilledTextBoxCharacterSpacing` | `Int32` | `BodyLargeCharacterSpacing` | -| `FilledTextBoxBorderThicknessNormal` | `Double` | `TextBoxOutlinedStrokeHeight` | -| `FilledTextBoxBorderThicknessFocused` | `Double` | `TextBoxFocusStrokeWidth` | -| `MaterialTextBoxClearGlyphWidth` | `Double` | 20 | -| `MaterialTextBoxClearGlyphHeight` | `Double` | 20 | -| `MaterialFilledTextBoxCornerRadius` | `CornerRadius` | 4,4,0,0 | -| `MaterialFilledTextBoxPadding` | `Thickness` | 16,8 | -| `MaterialFilledTextBoxMinHeight` | `Double` | 58 | -| `MaterialFilledTextBoxBorderHeightFocused` | `Double` | 2 | -| `MaterialOutlinedTextBoxBorderThickness` | `Double` | 1 | -| `MaterialOutlinedTextBoxCornerRadius` | `CornerRadius` | 4 | -| `MaterialOutlinedTextBoxPadding` | `Thickness` | 16,8 | -| `MaterialOutlinedTextBoxMinHeight` | `Double` | 56 | -| `MaterialOutlinedTextBoxBorderPadding` | `Thickness` | 1 | -| `MaterialOutlinedTextBoxBorderThicknessFocused` | `Double` | 2 | +| Key | Type | Value | +| --------------------------------------------------- | ----------------- | ----------------------------- | +| `TextBoxDeleteButtonForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `TextBoxDeleteButtonForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `TextBoxDeleteButtonForegroundPressed` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `TextBoxDeleteButtonForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `TextBoxLeadingIconForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `TextBoxLeadingIconForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `FilledTextBoxBackground` | `SolidColorBrush` | `SurfaceVariantBrush` | +| `FilledTextBoxBackgroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantHoverBrush` | +| `FilledTextBoxBackgroundFocused` | `SolidColorBrush` | `SurfaceVariantBrush` | +| `FilledTextBoxBackgroundDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | +| `FilledTextBoxBorderBrush` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `FilledTextBoxBorderBrushPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` | +| `FilledTextBoxBorderBrushFocused` | `SolidColorBrush` | `PrimaryBrush` | +| `FilledTextBoxBorderBrushDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | +| `FilledTextBoxDeleteButtonForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `FilledTextBoxDeleteButtonForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `FilledTextBoxDeleteButtonForegroundFocused` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `FilledTextBoxDeleteButtonForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `FilledTextBoxForeground` | `SolidColorBrush` | `OnSurfaceBrush` | +| `FilledTextBoxForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` | +| `FilledTextBoxForegroundFocused` | `SolidColorBrush` | `OnSurfaceBrush` | +| `FilledTextBoxForegroundDisabled` | `SolidColorBrush` | `OnSurfaceBrush` | +| `FilledTextBoxForegroundOpacityDisabled` | `Double` | `LowOpacity` | +| `FilledTextBoxPlaceholderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `FilledTextBoxPlaceholderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `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` | +| `OutlinedTextBoxBorderBrushDisabled` | `SolidColorBrush` | `OnSurfaceDisabledBrush` | +| `OutlinedTextBoxForeground` | `SolidColorBrush` | `OnSurfaceBrush` | +| `OutlinedTextBoxForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceBrush` | +| `OutlinedTextBoxForegroundFocused` | `SolidColorBrush` | `OnSurfaceBrush` | +| `OutlinedTextBoxForegroundDisabled` | `SolidColorBrush` | `OnSurfaceBrush` | +| `OutlinedTextBoxForegroundOpacityDisabled` | `Double` | `LowOpacity` | +| `OutlinedTextBoxPlaceholderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `OutlinedTextBoxPlaceholderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `OutlinedTextBoxPlaceholderForegroundFocused` | `SolidColorBrush` | `OnSurfaceBrush` | +| `OutlinedTextBoxPlaceholderForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `OutlinedTextBoxHeaderForeground` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `OutlinedTextBoxHeaderForegroundPointerOver` | `SolidColorBrush` | `OnSurfaceVariantBrush` | +| `OutlinedTextBoxHeaderForegroundFocused` | `SolidColorBrush` | `PrimaryBrush` | +| `OutlinedTextBoxHeaderForegroundDisabled` | `SolidColorBrush` | `OnSurfaceLowBrush` | +| `OutlinedTextBoxFontFamily` | `FontFamily` | `MaterialMediumFontFamily` | +| `OutlinedTextBoxFontWeight` | `String` | `BodyLargeFontWeight` | +| `OutlinedTextBoxFontSize` | `Double` | `BodyLargeFontSize` | +| `OutlinedTextBoxCharacterSpacing` | `Int32` | `BodyLargeCharacterSpacing` | +| `FilledTextBoxFontFamily` | `FontFamily` | `MaterialMediumFontFamily` | +| `FilledTextBoxFontWeight` | `String` | `BodyLargeFontWeight` | +| `FilledTextBoxFontSize` | `Double` | `BodyLargeFontSize` | +| `FilledTextBoxCharacterSpacing` | `Int32` | `BodyLargeCharacterSpacing` | +| `FilledTextBoxBorderThicknessNormal` | `Double` | `TextBoxOutlinedStrokeHeight` | +| `FilledTextBoxBorderThicknessFocused` | `Double` | `TextBoxFocusStrokeWidth` | +| `MaterialTextBoxClearGlyphWidth` | `Double` | 20 | +| `MaterialTextBoxClearGlyphHeight` | `Double` | 20 | +| `MaterialFilledTextBoxCornerRadius` | `CornerRadius` | 4,4,0,0 | +| `MaterialFilledTextBoxPadding` | `Thickness` | 16,7 | +| `MaterialFilledTextBoxMinHeight` | `Double` | 58 | +| `MaterialFilledTextBoxBorderHeightFocused` | `Double` | 2 | +| `MaterialOutlinedTextBoxBorderThickness` | `Double` | 1 | +| `MaterialOutlinedTextBoxCornerRadius` | `CornerRadius` | 4 | +| `MaterialOutlinedTextBoxPadding` | `Thickness` | 8 | +| `MaterialOutlinedTextBoxMinHeight` | `Double` | 56 | +| `MaterialOutlinedTextBoxBorderThicknessFocused` | `Double` | 2 | +| `MaterialOutlinedTextBoxBorderThicknessPointerOver` | `Double` | 2 | diff --git a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml index 36ca1cdb0..2fc993bee 100644 --- a/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml +++ b/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml @@ -13,13 +13,13 @@ Expected TextBox behavior: We are going a different route than the Official Material M2/M3 Google samples & the Material doc regarding the fact that the Placeholder will always be visible. (cf. specs discussions here https://github.com/unoplatform/Uno.Themes/issues/974) - + - Without Header/Placeholder: Simple TextBox - + - With placeholder but no header: The placeholder will be displayed where the text is supposed to be until the text is inputted - + - With header but no placeholder: The header will be displayed where the text is supposed to be and will move up when text is inputted - + - With header and placeholder: The header will be displayed at the top, and the placeholder will be displayed where the text is supposed to be until the text is inputted --> @@ -124,11 +124,10 @@ 1 4 - 16,7,14,7 - 16,8 + 8 56 - 1 2 + 2 @@ -233,11 +232,10 @@ 1 4 - 16,7,14,7 - 16,8 + 8 56 - 1 2 + 2 @@ -654,11 +652,7 @@ - - - + @@ -667,48 +661,39 @@ - + - - - + + - - + - - - - - + + @@ -825,7 +810,7 @@ - @@ -834,89 +819,111 @@ - - - + + + Width="20" + Height="20" + HorizontalAlignment="Center" + VerticalAlignment="Center" /> - - - - - + + + + + + + + + + - - - - + + HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" + VerticalAlignment="{TemplateBinding VerticalContentAlignment}" + RenderTransformOrigin="0,0.5" + IsHitTestVisible="False"> - - - - - - - - - - -