Skip to content

Commit

Permalink
fix: align CardContentControl with material guidance (#570)
Browse files Browse the repository at this point in the history 
* fix: fix card layout issues
  • Loading branch information
@kazo0
kazo0 committed May 16, 2023
1 parent 0aafec1 commit 0aace1e
Show file tree
Hide file tree
Showing 3 changed files with 391 additions and 340 deletions.
78 changes: 40 additions & 38 deletions ...kit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/CardContentControlSamplePage.xaml
View file
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"
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
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

0 comments on commit 0aace1e

Please sign in to comment.