From 924b9e993db8b619cee86b79c6f905224aed17ed Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 6 Oct 2023 14:50:40 +0200 Subject: [PATCH 1/2] FluentCard: Add AreaRestricted parameter, update docs, tests and examples --- .../Demo/Shared/Pages/Card/CardPage.razor | 18 +++- .../Card/Examples/CardAreaRestricted.razor | 35 ++++++++ .../Pages/Card/Examples/CardDefault.razor | 89 +------------------ .../Pages/Card/Examples/CardDefault.razor.css | 4 + .../Pages/Card/Examples/CardStyling.razor | 84 +++++++++++++++++ src/Core/Components/Card/FluentCard.razor | 2 +- src/Core/Components/Card/FluentCard.razor.cs | 12 +++ ...FluentCard_NotAreaRestricted.verified.html | 2 + ...eaRestricted_AdditionalStyle.verified.html | 2 + tests/Core/Card/FluentCardTests.cs | 29 ++++++ 10 files changed, 186 insertions(+), 91 deletions(-) create mode 100644 examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor create mode 100644 examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css create mode 100644 examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor create mode 100644 tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html create mode 100644 tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html diff --git a/examples/Demo/Shared/Pages/Card/CardPage.razor b/examples/Demo/Shared/Pages/Card/CardPage.razor index 8a5f0d9d21..56e336705f 100644 --- a/examples/Demo/Shared/Pages/Card/CardPage.razor +++ b/examples/Demo/Shared/Pages/Card/CardPage.razor @@ -29,8 +29,22 @@

The <FluentCard> component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.

<FluentCard> wraps the <fluent-card> element, a web component implementation of a card leveraging the Fluent UI design system.

- +

Examples

- + + + + +

+ By default a card restricts it's content to the card area. This means, for exmple, that if you have a select list with a lot of items, the list will be cut off at the bottom of the card. + You can override this behavior by setting the AreaRestricted property to false. +

+ + + + + +

API Documentation

+ \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor b/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor new file mode 100644 index 0000000000..0be60cd908 --- /dev/null +++ b/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor @@ -0,0 +1,35 @@ +@inject DataSource Data + + + +

This card's content is restricted to it's area. Open the select list below to see the result

+ + + + + +

This card's content is not restricted to it's area. Open the select list below to see the result

+ + + + + +@code +{ + Person? SelectedPersonART, SelectedPersonARF; + string? SelectedValueART, SelectedValueARF; +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor index c5e8b35b11..89b641d537 100644 --- a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor +++ b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor @@ -1,88 +1 @@ -
- Custom size using CSS - - - -
-

Dark

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Tinted neutral-palette-source, dark container

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Tinted neutral-palette-source, dark

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Tinted neutral-palette-source, dark

- Accent - Stealth - Outline - Lightweight -
- -
-

Tinted neutral-palette-source, nested, dark

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Custom card-fill-color

- Accent - Stealth - Outline - Lightweight -

- Note the stealth buttons have a slight fill, which is because the card-fill-color is explicit, but the stealth - recipe gets its value from the neutral palette which has been created based on the card-fill-color, but does not - contain that exact color. -

-
- - - - -
-

Accent and neutral color by DSP

- Accent - Neutral - Stealth - Outline - Lightweight -
- - -
\ No newline at end of file +Custom size (400x400) using CSS \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css new file mode 100644 index 0000000000..53ce1c9fca --- /dev/null +++ b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css @@ -0,0 +1,4 @@ +my-custom-styling { + width: 400px; + height: 400px; +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor b/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor new file mode 100644 index 0000000000..4c551632c1 --- /dev/null +++ b/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor @@ -0,0 +1,84 @@ + + +
+

Dark

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Tinted neutral-palette-source, dark container

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Tinted neutral-palette-source, dark

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Tinted neutral-palette-source, dark

+ Accent + Stealth + Outline + Lightweight +
+ +
+

Tinted neutral-palette-source, nested, dark

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Custom card-fill-color

+ Accent + Stealth + Outline + Lightweight +

+ Note the stealth buttons have a slight fill, which is because the card-fill-color is explicit, but the stealth + recipe gets its value from the neutral palette which has been created based on the card-fill-color, but does not + contain that exact color. +

+
+ + + + +
+

Accent and neutral color by FluentDesignSystemProvider

+ Accent + Neutral + Stealth + Outline + Lightweight +
+ + \ No newline at end of file diff --git a/src/Core/Components/Card/FluentCard.razor b/src/Core/Components/Card/FluentCard.razor index 87b4d6ff27..317d8744cc 100644 --- a/src/Core/Components/Card/FluentCard.razor +++ b/src/Core/Components/Card/FluentCard.razor @@ -2,7 +2,7 @@ @inherits FluentComponentBase @ChildContent diff --git a/src/Core/Components/Card/FluentCard.razor.cs b/src/Core/Components/Card/FluentCard.razor.cs index 54c437a27a..8964458af2 100644 --- a/src/Core/Components/Card/FluentCard.razor.cs +++ b/src/Core/Components/Card/FluentCard.razor.cs @@ -1,9 +1,21 @@ using Microsoft.AspNetCore.Components; +using Microsoft.Fast.Components.FluentUI.Utilities; namespace Microsoft.Fast.Components.FluentUI; public partial class FluentCard { + protected string? StyleValue => new StyleBuilder(Style) + .AddStyle("content-visibility", "visible", !AreaRestricted) + .AddStyle("contain", "style", !AreaRestricted) + .Build(); + + /// + /// By default, content in the card is restricted to the area of the card itself. + /// If you want content to be able to overflow the card, set this property to false. + [Parameter] + public bool AreaRestricted { get; set; } = true; + /// /// Gets or sets the content to be rendered inside the component. /// diff --git a/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html new file mode 100644 index 0000000000..c21abd29f8 --- /dev/null +++ b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html @@ -0,0 +1,2 @@ + +childcontent \ No newline at end of file diff --git a/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html new file mode 100644 index 0000000000..c6687b37f2 --- /dev/null +++ b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html @@ -0,0 +1,2 @@ + +childcontent \ No newline at end of file diff --git a/tests/Core/Card/FluentCardTests.cs b/tests/Core/Card/FluentCardTests.cs index 68e50f2c18..4253794696 100644 --- a/tests/Core/Card/FluentCardTests.cs +++ b/tests/Core/Card/FluentCardTests.cs @@ -18,6 +18,35 @@ public void FluentCard_Default() cut.Verify(); } + [Fact] + public void FluentCard_NotAreaRestricted() + { + // Arrange && Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.AreaRestricted, false); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCard_NotAreaRestricted_AdditionalStyle() + { + // Arrange && Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.AreaRestricted, false); + parameters.Add(p => p.Style, "background-color: red"); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + [Fact] public void FluentCard_AdditionalCssClass() { From 5caf3d2fd954d555696e26d5596d9563e1c7a401 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 6 Oct 2023 17:23:15 +0200 Subject: [PATCH 2/2] Update FluentCard.razor.cs Add missing end-summary tag --- src/Core/Components/Card/FluentCard.razor.cs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Core/Components/Card/FluentCard.razor.cs b/src/Core/Components/Card/FluentCard.razor.cs index 8964458af2..30936a6af6 100644 --- a/src/Core/Components/Card/FluentCard.razor.cs +++ b/src/Core/Components/Card/FluentCard.razor.cs @@ -13,6 +13,7 @@ public partial class FluentCard /// /// By default, content in the card is restricted to the area of the card itself. /// If you want content to be able to overflow the card, set this property to false. + /// [Parameter] public bool AreaRestricted { get; set; } = true; @@ -21,4 +22,4 @@ public partial class FluentCard /// [Parameter] public RenderFragment? ChildContent { get; set; } -} \ No newline at end of file +}