Skip to content

Skeleton work #626

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

Merged
vnbaaij merged 4 commits into from
Aug 18, 2023
Merged

Skeleton work #626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8dd41fe
Skeleton: Add Width, Height, Visible
vnbaaij Aug 18, 2023
a7ca1cf
Set FluentSkeleton Shape default
vnbaaij Aug 18, 2023
bafb59c
Merge branch 'new-components' into users/vnbaaij/skeleton
vnbaaij Aug 18, 2023
191346d
Merge branch 'new-components' into users/vnbaaij/skeleton
vnbaaij Aug 18, 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
15 changes: 15 additions & 0 deletions examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions examples/Demo/Shared/Pages/Skeleton/Examples/SkeletonElementBlocks.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
 <FluentCard class="card-padding">
<FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="SkeletonShape.Circle"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; width: 75px; height: 30px; margin-top: 20px;margin-bottom: 10px;" Shape="SkeletonShape.Rect"></FluentSkeleton>
<FluentSkeleton Shape="SkeletonShape.Circle"></FluentSkeleton>
<FluentSkeleton Style="margin-top: 10px" Height="10px;"></FluentSkeleton>
<FluentSkeleton Style="margin-top: 10px" Height="10px;"></FluentSkeleton>
<FluentSkeleton Style="margin-top: 10px" Height="10px;"></FluentSkeleton>
<FluentSkeleton Style="margin-top: 20px;margin-bottom: 10px;" Width="75px" Height="30px"></FluentSkeleton>
</FluentCard>


2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/Skeleton/Examples/SkeletonInlineSVG.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<FluentCard>
<FluentSkeleton style="border-radius: 4px; width: 500px; height: 250px;" Shape="SkeletonShape.Rect" Shimmer="true">
<FluentSkeleton Width="500px" Height="250px" Shimmer="true">
<svg style="position: absolute; left: 0; top: 0;" id="pattern" width="100%" height="100%">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
Expand Down
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Pages/Skeleton/Examples/SkeletonPatternSVG.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<FluentCard>
<FluentSkeleton style="border-radius: 4px; width: 500px; height: 250px;"
Shape="SkeletonShape.Rect"
<FluentSkeleton Width="500px"
Height="250px"
Pattern="https://static.fast.design/assets/skeleton-test-pattern.svg"
Shimmer="true"></FluentSkeleton>
</FluentCard>
24 changes: 9 additions & 15 deletions examples/Demo/Shared/Pages/Skeleton/Examples/SkeletonShimmer.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
<FluentCard class="card-padding">
<FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="SkeletonShape.Circle" Shimmer="true"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
<FluentSkeleton style="
border-radius: 4px;
width: 75px;
height: 30px;
margin-top: 20px;
margin-bottom: 10px;
"
Shape="SkeletonShape.Rect"
Shimmer="true"></FluentSkeleton>
</FluentCard>
<div>
<FluentCard Class="card-padding">
<FluentSkeleton Shape="SkeletonShape.Circle" Shimmer="true"></FluentSkeleton>
<FluentSkeleton Height="10px" Shimmer="true"></FluentSkeleton>
<FluentSkeleton Height="10px" Shimmer="true"></FluentSkeleton>
<FluentSkeleton Height="10px" Shimmer="true"></FluentSkeleton>
<FluentSkeleton Width="75px" Height="30px" Shimmer="true"></FluentSkeleton>
</FluentCard>
</div>
8 changes: 8 additions & 0 deletions examples/Demo/Shared/Pages/Skeleton/Examples/SkeletonShimmer.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
::deep .card-padding fluent-skeleton:not(:first-child) {
margin-top: 10px;
}

::deep .card-padding fluent-skeleton:last-child {
margin-top: 20px;
margin-bottom: 10px;
}
8 changes: 6 additions & 2 deletions examples/Demo/Shared/Pages/Skeleton/SkeletonPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,13 @@
<h2>Examples</h2>

<fluent-design-system-provider background-color="#f7f7f7" use-defaults>
<DemoSection Title="Used as element blocks" Component="@typeof(SkeletonElementBlocks)"></DemoSection>
<DemoSection Title="Element blocks" Component="@typeof(SkeletonElementBlocks)"></DemoSection>

<DemoSection Title="Used as element blocks with shimmer effect element" Component="@typeof(SkeletonShimmer)"></DemoSection>
<DemoSection Title="Element blocks with shimmer effect" Component="@typeof(SkeletonShimmer)" CollocatedFiles="@(new [] {"css"})">
<p>
This example uses an isolated CSS file to define margins.
</p>
</DemoSection>

<DemoSection Title="Using SVG via Pattern attribute" Component="@typeof(SkeletonPatternSVG)"></DemoSection>

Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/SplashScreen/SplashScreenPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
</Description>
</DemoSection>

<DemoSection Title="Custom splash screen" Component="@typeof(DialogSplashScreenCustom)" AdditionalFiles="@(new [] {"CustomSplashScreen.razor"})">
<DemoSection Title="Custom splash screen" Component="@typeof(DialogSplashScreenCustom)" AdditionalFiles="@(new [] {"CustomSplashScreen.razor", "CustomSplashScreen.razor.css"})">
<Description>
The custom example shows a splash screen that uses a customized layout.
See the <code>CustomSplashScreen</code> razor file to see how that can be done.
Expand Down
23 changes: 13 additions & 10 deletions src/Core/Components/Skeleton/FluentSkeleton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
@namespace Microsoft.Fast.Components.FluentUI
@inherits FluentComponentBase
<fluent-skeleton @ref=Element
class="@Class"
style="@Style"
fill=@Fill
shape="@Shape.ToAttributeValue()"
pattern="@Pattern"
shimmer="@Shimmer"
@attributes="AdditionalAttributes">
@ChildContent
</fluent-skeleton>
@if (Visible)
{
<fluent-skeleton @ref=Element
class="@ClassValue"
style="@StyleValue"
fill=@Fill
shape="@Shape.ToAttributeValue()"
pattern="@Pattern"
shimmer="@Shimmer"
@attributes="AdditionalAttributes">
@ChildContent
</fluent-skeleton>
}
30 changes: 29 additions & 1 deletion src/Core/Components/Skeleton/FluentSkeleton.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
using Microsoft.AspNetCore.Components;
using Microsoft.Fast.Components.FluentUI.Utilities;

namespace Microsoft.Fast.Components.FluentUI;

public partial class FluentSkeleton : FluentComponentBase
{
protected string? ClassValue => new CssBuilder(Class)
.Build();

protected string? StyleValue => new StyleBuilder().AddStyle(Style)
.AddStyle("width", Width, () => !string.IsNullOrWhiteSpace(Width))
.AddStyle("height", Height, () => !string.IsNullOrWhiteSpace(Height))
.Build();


/// <summary>
/// Indicates the Skeleton should have a filled style.
/// </summary>
Expand All @@ -14,7 +24,7 @@ public partial class FluentSkeleton : FluentComponentBase
/// Gets or sets the shape of the skeleton. See <see cref="FluentUI.SkeletonShape"/>
/// </summary>
[Parameter]
public SkeletonShape? Shape { get; set; }
public SkeletonShape? Shape { get; set; } = SkeletonShape.Rect;

/// <summary>
/// Gets or sets the skeleton pattern
Expand All @@ -28,6 +38,24 @@ public partial class FluentSkeleton : FluentComponentBase
[Parameter]
public bool? Shimmer { get; set; }

/// <summary>
/// Gets or sets the width of the skeleton
/// </summary>
[Parameter]
public string Width { get; set; } = "50px";

/// <summary>
/// Gets or sets the height of the skeleton
/// </summary>
[Parameter]
public string Height { get; set; } = "50px";

/// <summary>
/// Gets or sets whether the skeleton is visible
/// </summary>
[Parameter]
public bool Visible { get; set; } = true;

/// <summary>
/// Gets or sets the content to be rendered inside the component.
/// </summary>
Expand Down