feat: add lightweight styling to divider (backport #765) (#784)

Co-authored-by: Marc-Antoine Soucy <ma.soucy@nventive.com>
unoplatform · Aug 30, 2023 · 29d1c9a · 29d1c9a
1 parent 9d59ba1
commit 29d1c9a
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 21 deletions.
diff --git a/doc/controls-styles.md b/doc/controls-styles.md
@@ -6,7 +6,7 @@ The `Uno.Toolkit.UI` library adds the following controls:
 - `AutoLayout`: A custom panel used by the [Figma plugin](https://platform.uno/unofigma/) to bridge the gap between Figma and UWP layout implementation.
 - [`Card` and `CardContentControl`](controls/CardAndCardContentControl.md): \[Material control\] Cards contain content and actions that relate information about a subject.
 - [`Chip` and `ChipGroup`](controls/ChipAndChipGroup.md): \[Material control\] Chips are compact elements that represent an input, attribute, or action.
-- `Divider`: \[Material control\] A divider is a thin line that groups content in lists and layouts.
+- [`Divider`](controls/Divider.md): \[Material control\] A divider is a thin line that groups content in lists and layouts.
 - [`DrawerControl`](controls/DrawerControl.md): A container to display additional content, in a hidden pane that can be revealed using a swipe gesture, like a drawer.
 - [`DrawerFlyoutPresenter`](controls/DrawerFlyoutPresenter.md): A specialized `ContentPresenter` to be used in the template of a `FlyoutPresenter` to enable gesture support.
 - [`LoadingView`](controls/LoadingView.md): A control that indicates that the UI is waiting on a task to complete.

diff --git a/doc/controls/Divider.md b/doc/controls/Divider.md
@@ -0,0 +1,40 @@
+---
+uid: Toolkit.Controls.Divider
+---
+# Divider
+A divider is a thin line that groups content in lists and layouts.
+
+## Properties
+Property|Type|Description
+-|-|-
+SubHeader|String|Gets or sets the text of the text below the Divider.
+SubHeaderForeground|Brush|Gets or sets the foreground of the subheader.
+
+### C#
+```csharp
+public partial class Divider : Control
+```
+
+### XAML
+```xml
+xmlns:utu="using:Uno.Toolkit.UI"
+...
+
+content
+<utu:Divider/>
+content
+
+```
+
+## Lightweight Styling
+
+Key|Type|Value
+-|-|-
+DividerForeground|SolidColorBrush|OutlineVariantBrush
+DividerSubHeaderForeground|SolidColorBrush|OnSurfaceLowBrush
+DividerSubHeaderFontFamily|FontFamily|MaterialMediumFontFamily
+DividerSubHeaderFontWeight|FontWeight|BodySmallFontWeight
+DividerSubHeaderFontSize|FontSize|BodySmallFontSize
+DividerSubHeaderCharacterSpacing|CharacterSpacing|BodySmallCharacterSpacing
+DividerSubHeaderMargin|Thickness|0,4,0,0
+DividerHeight|Double|1
diff --git a/doc/lightweight-styling.md b/doc/lightweight-styling.md
@@ -47,6 +47,7 @@ For more information about the lightweight styling resource keys used in each co
 - [Card](controls/CardAndCardContentControl.md#lightweight-styling)
 - [CardContentControl](controls/CardAndCardContentControl.md#lightweight-styling-1)
 - [Chip](controls/ChipAndChipGroup.md#lightweight-styling)
+- [Divider](controls/Divider.md#lightweight-styling)
 - [NavigationBar](controls/NavigationBar.md#lightweight-styling)
 - [TabBar](controls/TabBarAndTabBarItem.md#lightweight-styling)
 

diff --git a/doc/toc.yml b/doc/toc.yml
@@ -28,6 +28,8 @@
       href: controls/CardAndCardContentControl.md
     - name: Chip and ChipGroup
       href: controls/ChipAndChipGroup.md
+    - name: Divider
+      href: controls/Divider.md
     - name: DrawerControl
       href: controls/DrawerControl.md
     - name: DrawerFlyoutPresenter

diff --git a/samples/Directory.Packages.props b/samples/Directory.Packages.props
@@ -23,12 +23,12 @@
 		<PackageVersion Include="SkiaSharp.Views.Uno.WinUI" Version="2.88.5" />
 		<PackageVersion Include="Uno.Core.Extensions.Compatibility" Version="4.0.1" />
 		<PackageVersion Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
-		<PackageVersion Include="Uno.Cupertino" Version="2.7.0-dev.102" />
-		<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.7.0-dev.102" />
+		<PackageVersion Include="Uno.Cupertino" Version="2.8.0-dev.6" />
+		<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.8.0-dev.6" />
 		<PackageVersion Include="Uno.Extensions.Logging.OSLog" Version="1.3.0" />
 		<PackageVersion Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.4.0" />
-		<PackageVersion Include="Uno.Material" Version="2.7.0-dev.102" />
-		<PackageVersion Include="Uno.Material.WinUI" Version="2.7.0-dev.102" />
+		<PackageVersion Include="Uno.Material" Version="2.8.0-dev.6" />
+		<PackageVersion Include="Uno.Material.WinUI" Version="2.8.0-dev.6" />
 		<PackageVersion Include="Uno.UI" Version="4.10.0-dev.85" />
 		<PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="4.5.9" />
 		<PackageVersion Include="Uno.UI.RemoteControl" Version="4.10.0-dev.85" />

diff --git a/src/Directory.Packages.props b/src/Directory.Packages.props
@@ -15,11 +15,11 @@
 		<PackageVersion Include="Uno.Core.Extensions.Collections" Version="4.0.1" />
 		<PackageVersion Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
 		<PackageVersion Include="Uno.Core.Extensions.Logging" Version="4.0.1" />
-		<PackageVersion Include="Uno.Cupertino" Version="2.7.0-dev.102" />
-		<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.7.0-dev.102" />
+		<PackageVersion Include="Uno.Cupertino" Version="2.8.0-dev.6" />
+		<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.8.0-dev.6" />
 		<PackageVersion Include="Uno.SourceGenerationTasks" Version="4.2.0" />
-		<PackageVersion Include="Uno.Material" Version="2.7.0-dev.102" />
-		<PackageVersion Include="Uno.Material.WinUI" Version="2.7.0-dev.102" />
+		<PackageVersion Include="Uno.Material" Version="2.8.0-dev.6" />
+		<PackageVersion Include="Uno.Material.WinUI" Version="2.8.0-dev.6" />
 		<PackageVersion Include="Uno.UI" Version="4.7.37" />
 		<PackageVersion Include="Uno.WinUI" Version="4.7.37" />
 		<PackageVersion Include="Uno.XamlMerge.Task" Version="1.1.0-dev.12" />

diff --git a/src/library/Uno.Toolkit.Material/Styles/Controls/v2/Divider.xaml b/src/library/Uno.Toolkit.Material/Styles/Controls/v2/Divider.xaml
@@ -2,15 +2,39 @@
 					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 					xmlns:utu="using:Uno.Toolkit.UI">
 
-	<x:Double x:Key="MaterialDividerHeight">1</x:Double>
 
-	<Style x:Key="MaterialDividerStyle"
-		   TargetType="utu:Divider">
+	<ResourceDictionary.ThemeDictionaries>
+		<ResourceDictionary x:Key="Default">
+			<StaticResource x:Key="DividerForeground" ResourceKey="OutlineVariantBrush" />
+			<StaticResource x:Key="DividerSubHeaderForeground" ResourceKey="OnSurfaceLowBrush" />
 
-		<Setter Property="Foreground"
-				Value="{ThemeResource OnSurfaceFocusedBrush}" />
-		<Setter Property="SubHeaderForeground"
-				Value="{ThemeResource OnSurfaceLowBrush}" />
+			<StaticResource x:Key="DividerSubHeaderFontFamily" ResourceKey="MaterialMediumFontFamily" />
+			<StaticResource x:Key="DividerSubHeaderFontWeight" ResourceKey="BodySmallFontWeight" />
+			<StaticResource x:Key="DividerSubHeaderFontSize" ResourceKey="BodySmallFontSize" />
+			<StaticResource x:Key="DividerSubHeaderCharacterSpacing" ResourceKey="BodySmallCharacterSpacing" />
+
+			<Thickness x:Key="DividerSubHeaderMargin">0,4,0,0</Thickness>
+			<x:Double x:Key="DividerHeight">1</x:Double>
+		</ResourceDictionary>
+		<ResourceDictionary x:Key="Light">
+			<StaticResource x:Key="DividerForeground" ResourceKey="OutlineVariantBrush" />
+			<StaticResource x:Key="DividerSubHeaderForeground" ResourceKey="OnSurfaceLowBrush" />
+
+			<StaticResource x:Key="DividerSubHeaderFontFamily" ResourceKey="MaterialMediumFontFamily" />
+			<StaticResource x:Key="DividerSubHeaderFontWeight" ResourceKey="BodySmallFontWeight" />
+			<StaticResource x:Key="DividerSubHeaderFontSize" ResourceKey="BodySmallFontSize" />
+			<StaticResource x:Key="DividerSubHeaderCharacterSpacing" ResourceKey="BodySmallCharacterSpacing" />
+
+			<Thickness x:Key="DividerSubHeaderMargin">0,4,0,0</Thickness>
+			<x:Double x:Key="DividerHeight">1</x:Double>
+		</ResourceDictionary>
+	</ResourceDictionary.ThemeDictionaries>
+
+
+	<Style x:Key="MaterialDividerStyle" TargetType="utu:Divider">
+
+		<Setter Property="Foreground" Value="{ThemeResource DividerForeground}" />
+		<Setter Property="SubHeaderForeground" Value="{ThemeResource DividerSubHeaderForeground}" />
 
 		<Setter Property="Template">
 			<Setter.Value>
@@ -21,21 +45,23 @@
 							<RowDefinition Height="Auto" />
 						</Grid.RowDefinitions>
 
-						<Rectangle Fill="{TemplateBinding Foreground}"
-								   Height="{StaticResource MaterialDividerHeight}" />
+						<Rectangle Fill="{TemplateBinding Foreground}" Height="{ThemeResource DividerHeight}" />
 
 						<TextBlock Text="{TemplateBinding SubHeader}"
 								   Visibility="{Binding SubHeader, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed}"
-								   Style="{StaticResource BodySmall}"
+								   FontFamily="{ThemeResource DividerSubHeaderFontFamily}"
+								   FontWeight="{ThemeResource DividerSubHeaderFontWeight}"
+								   CharacterSpacing="{ThemeResource DividerSubHeaderCharacterSpacing}"
+								   FontSize="{ThemeResource DividerSubHeaderFontSize}"
 								   Foreground="{TemplateBinding SubHeaderForeground}"
-								   Margin="0,4,0,0"
+								   Margin="{ThemeResource DividerSubHeaderMargin}"
 								   Grid.Row="1" />
 					</Grid>
 				</ControlTemplate>
 			</Setter.Value>
 		</Setter>
 	</Style>
-	
+
 	<Style x:Key="MaterialDefaultDividerStyle"
 		   TargetType="utu:Divider"
 		   BasedOn="{StaticResource MaterialDividerStyle}" />