Skip to content
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

Jump to bottom

fix: align CardContentControl with material guidance #570

Merged
merged 2 commits into from
May 16, 2023
Merged

fix: align CardContentControl with material guidance #570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d734771
fix: fix card layout issues
kazo0 May 12, 2023
6d5a0eb
chore: refactor test xaml
kazo0 May 16, 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
78 changes: 40 additions & 38 deletions ...kit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/CardContentControlSamplePage.xaml
View file
Open in desktop
kazo0 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -27,30 +27,30 @@
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<!-- Media part -->
<!-- Media part -->
<Image Source="ms-appx:///Assets/Media/LargeMedia.png"
Stretch="Uniform"
MaxHeight="194" />

<StackPanel Grid.Row="1"
Margin="16,14">

<!-- Header part -->
<!-- Header part -->
<TextBlock Text="Elevated card"
MaxLines="1"
Style="{StaticResource MaterialHeadline6}" />

<!-- SubHeader part -->
<!-- SubHeader part -->
<TextBlock Text="With media, supporting text and action buttons"
Margin="0,4,0,12"
MaxLines="2"
Style="{StaticResource MaterialSubtitle1}" />

<!-- Supporting content part -->
<!-- Supporting content part -->
<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
Style="{StaticResource MaterialBody2}" />

<!-- Action buttons part -->
<!-- Action buttons part -->
<StackPanel Margin="0,12,0,0"
Spacing="6"
Orientation="Horizontal">
Expand Down Expand Up @@ -81,30 +81,30 @@
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<!-- Media part -->
<!-- Media part -->
<Image Source="ms-appx:///Assets/Media/LargeMedia.png"
Stretch="Uniform"
MaxHeight="194" />

<StackPanel Grid.Row="1"
Margin="16,14">

<!-- Header part -->
<!-- Header part -->
<TextBlock Text="Elevated card"
MaxLines="1"
Style="{StaticResource MaterialHeadline6}" />

<!-- SubHeader part -->
<!-- SubHeader part -->
<TextBlock Text="With media, supporting text and action buttons"
Margin="0,4,0,12"
MaxLines="2"
Style="{StaticResource MaterialSubtitle1}" />

<!-- Supporting content part -->
<!-- Supporting content part -->
<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
Style="{StaticResource MaterialBody2}" />

<!-- Action buttons part -->
<!-- Action buttons part -->
<StackPanel Margin="0,12,0,0"
Spacing="6"
Orientation="Horizontal">
Expand All @@ -125,14 +125,15 @@
</DataTemplate>
</sample:SamplePageLayout.MaterialTemplate>
<sample:SamplePageLayout.M3MaterialTemplate>
<DataTemplate>
<DataTemplate>
<StackPanel Padding="0,20"
Spacing="20">
<!-- Material M3 Outlined CardContentControl Style -->
<TextBlock Text="Outlined CardContentControl Style"
Style="{StaticResource TitleLarge}" />

<utu:CardContentControl Style="{StaticResource OutlinedCardContentControlStyle}">
<utu:CardContentControl MaxWidth="400"
Style="{StaticResource OutlinedCardContentControlStyle}">
<utu:CardContentControl.ContentTemplate>
<DataTemplate>
<Grid>
Expand All @@ -141,32 +142,31 @@
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<!-- Media part -->
<!-- Media part -->
<Image Source="ms-appx:///Assets/Media/LargeMedia.png"
Stretch="Uniform"
MaxHeight="194" />
Stretch="Uniform" />

<StackPanel Grid.Row="1"
Margin="16">

<!-- Header part -->
<!-- Header part -->
<TextBlock Text="Outlined card"
MaxLines="1"
Style="{StaticResource TitleMedium}" />

<!-- SubHeader part -->
<!-- SubHeader part -->
<TextBlock Text="With media, supporting text and action buttons"
MaxLines="2"
Foreground="{ThemeResource OnSurfaceMediumBrush}"
Style="{StaticResource LabelSmall}" />

<!-- Supporting content part -->
<!-- Supporting content part -->
<TextBlock Margin="0,16"
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
Foreground="{ThemeResource OnSurfaceMediumBrush}"
Style="{ThemeResource BodyMedium}" />
Style="{ThemeResource BodyMedium}" />

<!-- Action buttons part -->
<!-- Action buttons part -->
<StackPanel Spacing="8"
Orientation="Horizontal">
<Button Content="ACTION 1"
Expand All @@ -185,7 +185,9 @@
<TextBlock Text="Filled CardContentControl Style"
Style="{StaticResource TitleLarge}" />

<utu:CardContentControl Style="{StaticResource FilledCardContentControlStyle}">

<utu:CardContentControl MaxWidth="400"
Style="{StaticResource FilledCardContentControlStyle}">
<utu:CardContentControl.ContentTemplate>
<DataTemplate>
<Grid>
Expand All @@ -194,32 +196,32 @@
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<!-- Media part -->
<!-- Media part -->
<Image Source="ms-appx:///Assets/Media/LargeMedia.png"
Stretch="Uniform"
MaxHeight="194" />
Stretch="Uniform" />

<StackPanel Grid.Row="1"
Margin="16">

<!-- Header part -->
<!-- Header part -->
<TextBlock Text="Filled card"
MaxLines="1"
Style="{StaticResource TitleMedium}" />

<!-- SubHeader part -->
<!-- SubHeader part -->
<TextBlock Text="With media, supporting text and action buttons"
MaxLines="2"
Foreground="{ThemeResource OnSurfaceMediumBrush}"
Style="{StaticResource LabelSmall}" />

<!-- Supporting content part -->
<!-- Supporting content part -->
<TextBlock Margin="0,16"
TextWrapping="WrapWholeWords"
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
Foreground="{ThemeResource OnSurfaceMediumBrush}"
Style="{ThemeResource BodyMedium}" />
Style="{ThemeResource BodyMedium}" />

<!-- Action buttons part -->
<!-- Action buttons part -->
<StackPanel Spacing="8"
Orientation="Horizontal">
<Button Content="ACTION 1"
Expand All @@ -238,7 +240,8 @@
<TextBlock Text="Elevated CardContentControl Style"
Style="{StaticResource TitleLarge}" />

<utu:CardContentControl Style="{StaticResource ElevatedCardContentControlStyle}">
<utu:CardContentControl MaxWidth="400"
Style="{StaticResource ElevatedCardContentControlStyle}">
<utu:CardContentControl.ContentTemplate>
<DataTemplate>
<Grid>
Expand All @@ -247,32 +250,31 @@
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<!-- Media part -->
<!-- Media part -->
<Image Source="ms-appx:///Assets/Media/LargeMedia.png"
kazo0 marked this conversation as resolved.
Show resolved Hide resolved
Stretch="Uniform"
MaxHeight="194" />
Stretch="Uniform" />

<StackPanel Grid.Row="1"
Margin="16">

<!-- Header part -->
<!-- Header part -->
<TextBlock Text="Elevated card"
MaxLines="1"
Style="{StaticResource TitleMedium}" />

<!-- SubHeader part -->
<!-- SubHeader part -->
<TextBlock Text="With media, supporting text and action buttons"
MaxLines="2"
Foreground="{ThemeResource OnSurfaceMediumBrush}"
Style="{StaticResource LabelSmall}" />

<!-- Supporting content part -->
<!-- Supporting content part -->
<TextBlock Margin="0,16"
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
Foreground="{ThemeResource OnSurfaceMediumBrush}"
Style="{ThemeResource BodyMedium}" />
Style="{ThemeResource BodyMedium}" />

<!-- Action buttons part -->
<!-- Action buttons part -->
<StackPanel Spacing="8"
Orientation="Horizontal">
<Button Content="ACTION 1"
Expand Down
78 changes: 78 additions & 0 deletions src/Uno.Toolkit.RuntimeTests/Tests/CardContentControlTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Uno.Toolkit.RuntimeTests.Extensions;
using Uno.Toolkit.RuntimeTests.Helpers;
using Uno.Toolkit.UI;
using Uno.UI.RuntimeTests;
using Uno.UI.Extensions;
using Windows.Foundation;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation.Metadata;

#if IS_WINUI
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml;
using Microsoft.UI;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Media.Imaging;
#else
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml;
using Windows.UI;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
#endif

namespace Uno.Toolkit.RuntimeTests.Tests
{
[TestClass]
[RunsOnUIThread]
internal class CardContentControlTests
{
[TestMethod]
[RequiresFullWindow]
public async Task Should_Hug_Content()
{
var rootGrid = XamlHelper.LoadXaml<Grid>("""
<Grid Width="500" Height="500">
<utu:CardContentControl Padding="0" x:Name="MyCard" Style="{StaticResource FilledCardContentControlStyle}">
<Grid Background="Red" Height="200" Width="200" />
</utu:CardContentControl>
</Grid>
""");


var card = (CardContentControl)rootGrid.FindName("MyCard");

await UnitTestUIContentHelperEx.SetContentAndWait(rootGrid);

Assert.AreEqual(200d, card.ActualWidth);
Assert.AreEqual(200d, card.ActualHeight);
}

[TestMethod]
[RequiresFullWindow]
[DataRow("FilledCardContentControlStyle")]
[DataRow("OutlinedCardContentControlStyle")]
public async Task Only_Elevated_Has_Margin(string cardStyle)
{
var rootGrid = XamlHelper.LoadXaml<Grid>($$"""
<Grid>
<utu:CardContentControl Padding="0" x:Name="MyCard" Style="{StaticResource {{cardStyle}}}">
<Grid Background="Red" Height="200" Width="200" />
</utu:CardContentControl>
</Grid>
""");

var card = (CardContentControl)rootGrid.FindName("MyCard");

await UnitTestUIContentHelperEx.SetContentAndWait(rootGrid);

Assert.AreEqual(default, card.Margin);
}
}
}
Loading