feat: add lightweight styling to divider (#765)

(cherry picked from commit cd6b89a) # Conflicts: # samples/Directory.Packages.props # src/Directory.Packages.props
unoplatform · Aug 30, 2023 · 2b01d37 · 2b01d37
1 parent e6ec431
commit 2b01d37
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 13 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
@@ -1,4 +1,5 @@
 <Project ToolsVersion="15.0">
+<<<<<<< HEAD
 	<PropertyGroup>
 		<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
 	</PropertyGroup>
@@ -51,3 +52,59 @@
 		<PackageVersion Include="Microsoft.CodeAnalysis.NetAnalyzers" Version="7.0.4-preview1.23354.4" />
 	</ItemGroup>
 </Project>
+=======
+  <PropertyGroup>
+    <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageVersion Include="Microsoft.CodeAnalysis.NetAnalyzers" Version="7.0.0-preview1.22518.1" />
+    <PackageVersion Include="Microsoft.Extensions.Logging" Version="5.0.0" />
+    <PackageVersion Include="Microsoft.Extensions.Logging.Console" Version="5.0.0" />
+    <PackageVersion Include="Microsoft.Extensions.Logging.Debug" Version="5.0.0" />
+    <PackageVersion Include="Microsoft.Net.Compilers.Toolset" Version="4.7.0-2.final" />
+    <!--
+			If, in the same solution, you are referencing a project that uses https://github.com/onovotny/MSBuildSdkExtras,
+			you need to make sure that the version provided here matches https://github.com/novotnyllc/MSBuildSdkExtras/blob/main/Source/MSBuild.Sdk.Extras/DefaultItems/ImplicitPackages.targets#L11.
+			This is not an issue when libraries are referenced through nuget packages. See https://github.com/unoplatform/uno/issues/446 for more details.
+		-->
+    <PackageVersion Include="Microsoft.NETCore.UniversalWindowsPlatform" Version="6.2.12" />
+    <PackageVersion Include="Microsoft.UI.Xaml" Version="2.8.5" />
+    <PackageVersion Include="Microsoft.Windows.Compatibility" Version="5.0.1" />
+    <PackageVersion Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.755" />
+    <PackageVersion Include="Microsoft.WindowsAppSDK" Version="1.1.5" />
+    <PackageVersion Include="SkiaSharp.Skottie" Version="2.88.5" />
+    <PackageVersion Include="SkiaSharp.Views" Version="2.88.5" />
+    <PackageVersion Include="SkiaSharp.Views.Uno" Version="2.88.5" />
+    <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="3.0.0-dev.352" />
+    <PackageVersion Include="Uno.Cupertino.WinUI" Version="3.0.0-dev.336" />
+    <PackageVersion Include="Uno.Extensions.Logging.OSLog" Version="1.4.0" />
+    <PackageVersion Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.4.0" />
+    <PackageVersion Include="Uno.Material" Version="3.0.0-dev.352" />
+    <PackageVersion Include="Uno.Material.WinUI" Version="3.0.0-dev.352" />
+    <PackageVersion Include="Uno.UI" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="4.5.9" />
+    <PackageVersion Include="Uno.UI.RemoteControl" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.UI.Skia.Gtk" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.UI.Skia.Wpf" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.UI.WebAssembly" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.UniversalImageLoader" Version="1.9.36" />
+    <PackageVersion Include="Uno.Wasm.Bootstrap" Version="7.0.20" />
+    <PackageVersion Include="Uno.Wasm.Bootstrap.DevServer" Version="7.0.20" />
+    <PackageVersion Include="Uno.WinUI" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.WinUI.RemoteControl" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.WinUI.Skia.Gtk" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.WinUI.WebAssembly" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Xamarin.Android.Support.CustomTabs" Version="28.0.0.3" />
+    <!-- Required to avoid warnings in 1.9.0.1 of Android.Material - https://github.com/xamarin/AndroidX/issues/727 -->
+    <PackageVersion Include="Xamarin.AndroidX.Annotation" Version="1.6.0.3" />
+    <PackageVersion Include="Xamarin.AndroidX.Browser" Version="1.4.0.2" />
+    <PackageVersion Include="Xamarin.AndroidX.Lifecycle.LiveData" Version="2.3.1.1" />
+    <PackageVersion Include="Xamarin.Google.Android.Material" Version="1.4.0.4" />
+    <PackageVersion Include="Xamarin.Jetbrains.Annotations" Version="23.0.0.4" />
+    <PackageVersion Include="Xamarin.TestCloud.Agent" Version="0.23.2" />
+  </ItemGroup>
+</Project>
+>>>>>>> cd6b89a (feat: add lightweight styling to divider (#765))
diff --git a/src/Directory.Packages.props b/src/Directory.Packages.props
@@ -1,4 +1,5 @@
 <Project ToolsVersion="15.0">
+<<<<<<< HEAD
 	<PropertyGroup>
 		<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
 	</PropertyGroup>
@@ -41,3 +42,48 @@
 		<PackageVersion Include="Microsoft.CodeAnalysis.NetAnalyzers" Version="7.0.4-preview1.23354.4" />
 	</ItemGroup>
 </Project>
+=======
+  <PropertyGroup>
+    <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageVersion Include="Microsoft.SourceLink.GitHub" Version="1.0.0" />
+    <PackageVersion Include="Microsoft.UI.Xaml" Version="2.7.1" />
+    <PackageVersion Include="Microsoft.WindowsAppSDK" Version="1.1.5" />
+    <PackageVersion Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.755" />
+    <PackageVersion Include="SkiaSharp" Version="2.88.5" />
+    <PackageVersion Include="SkiaSharp.NativeAssets.Linux" Version="2.88.5" />
+    <PackageVersion Include="SkiaSharp.Views.Uno" Version="2.88.5" />
+    <PackageVersion Include="SkiaSharp.Views.WinUI" Version="2.88.5" />
+    <PackageVersion Include="SkiaSharp.Views.Uno.WinUI" Version="2.88.5" />
+    <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="3.0.0-dev.352" />
+    <PackageVersion Include="Uno.Cupertino.WinUI" Version="3.0.0-dev.352" />
+    <PackageVersion Include="Uno.Extensions.Markup.Generators" Version="1.0.0-dev.166" />
+    <PackageVersion Include="Uno.SourceGenerationTasks" Version="4.2.0" />
+    <PackageVersion Include="Uno.WinUI.Markup" Version="4.8.0-dev.43" />
+    <PackageVersion Include="Uno.Material" Version="3.0.0-dev.352" />
+    <PackageVersion Include="Uno.Material.WinUI" Version="3.0.0-dev.352" />
+    <PackageVersion Include="Uno.UI" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.WinUI" Version="5.0.0-dev.1728" />
+    <PackageVersion Include="Uno.XamlMerge.Task" Version="1.1.0-dev.12" />
+    <PackageVersion Include="FluentAssertions" Version="5.10.3" />
+    <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.4.1" />
+    <PackageVersion Include="Newtonsoft.Json" Version="13.0.1" />
+    <PackageVersion Include="NUnit" Version="3.13.3" />
+    <PackageVersion Include="NUnit3TestAdapter" Version="4.3.1" />
+    <PackageVersion Include="NunitXml.TestLogger" Version="3.0.131" />
+    <PackageVersion Include="Uno.UI.RuntimeTests.Engine" Version="0.14.0-dev.54" />
+    <PackageVersion Include="Uno.UITest" Version="1.1.0-dev.59" />
+    <PackageVersion Include="Uno.UITest.Helpers" Version="1.1.0-dev.59" />
+    <PackageVersion Include="Uno.UITest.Selenium" Version="1.1.0-dev.59" />
+    <PackageVersion Include="Uno.UITest.Xamarin" Version="1.1.0-dev.59" />
+    <PackageVersion Include="Xamarin.UITest" Version="4.1.4" />
+    <PackageVersion Include="MSTest.TestFramework" Version="2.1.2" />
+    <PackageVersion Include="Microsoft.Net.Compilers.Toolset" Version="4.7.0-2.final" />
+    <PackageVersion Include="Microsoft.CodeAnalysis.NetAnalyzers" Version="7.0.0-preview1.22518.1" />
+  </ItemGroup>
+</Project>
+>>>>>>> cd6b89a (feat: add lightweight styling to divider (#765))
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}" />