FluentCard: Add AreaRestricted parameter (#830)

* FluentCard: Add AreaRestricted parameter, update docs, tests and examples
microsoft · Oct 6, 2023 · 4096ada · 4096ada
1 parent 497ee86
commit 4096ada
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 92 deletions.
diff --git a/examples/Demo/Shared/Pages/Card/CardPage.razor b/examples/Demo/Shared/Pages/Card/CardPage.razor
@@ -29,8 +29,22 @@
 
 <p>The <code>&lt;FluentCard&gt;</code> 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.</p>
 <p><code>&lt;FluentCard&gt;</code> wraps the <code>&lt;fluent-card&gt;</code> element, a web component implementation of a card leveraging the Fluent UI design system.</p>
-<ApiDocumentation Component="typeof(FluentCard)" />
+
 
 <h2>Examples</h2>
 
-<DemoSection Title="Card examples" Component="@typeof(CardDefault)"></DemoSection>
+<DemoSection Title="Card example" Component="@typeof(CardDefault)" CollocatedFiles="@(new[] { "css" })"></DemoSection>
+
+<DemoSection Title="Area restricted examples" Component="@typeof(CardAreaRestricted)">
+    <Description>
+        <p> 
+            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 <code>AreaRestricted</code> property to <code>false</code>.
+        </p>
+    </Description>
+</DemoSection>
+
+<DemoSection Title="Styling examples" Component="@typeof(CardStyling)"></DemoSection>
+
+<h2>API Documentation</h2>
+<ApiDocumentation Component="typeof(FluentCard)" />
diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor b/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor
@@ -0,0 +1,35 @@
+@inject DataSource Data
+
+<FluentStack>
+    <FluentCard Style="width: 300px;">
+        <p>This card's content is restricted to it's area. Open the select list below to see the result</p>
+        <label for="people-listbox">Select a person</label>
+        <FluentSelect TOption="Person"
+                      Items="@Data.People.WithVeryLongName()"
+                      Id="people-listbox"
+                      Width="200px"
+                      OptionValue="@(p => p.PersonId.ToString())"
+                      OptionText="@(p => p.LastName + ", " + p.FirstName)"
+                      @bind-Value="@SelectedValueART"
+                      @bind-SelectedOption="@SelectedPersonART" />
+
+    </FluentCard>
+    <FluentCard Style="width: 300px;" AreaRestricted="false">
+        <p>This card's content is not restricted to it's area. Open the select list below to see the result</p>
+        <label for="people-listbox">Select a person</label>
+        <FluentSelect TOption="Person"
+                      Items="@Data.People.WithVeryLongName()"
+                      Id="people-listbox"
+                      Width="200px"
+                      OptionValue="@(p => p.PersonId.ToString())"
+                      OptionText="@(p => p.LastName + ", " + p.FirstName)"
+                      @bind-Value="@SelectedValueARF"
+                      @bind-SelectedOption="@SelectedPersonARF" />
+
+    </FluentCard>
+</FluentStack>
+@code
+{
+    Person? SelectedPersonART, SelectedPersonARF;
+    string? SelectedValueART, SelectedValueARF;
+}
diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor
@@ -1,88 +1 @@
-<div>
-    <FluentCard class="state-override">Custom size using CSS</FluentCard>
-
-    <BaseLayerLuminance Value="(float?)0.15">
-        <FluentCard ParentReference="@context">
-            <div class="contents">
-                <p>Dark</p>
-                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
-                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
-                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
-                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
-            </div>
-        </FluentCard>
-    </BaseLayerLuminance>
-
-    <FluentDesignSystemProvider FillColor="#D6D6D6">
-        <FluentCard neutral-palette-source="#CABA8C">
-            <div class="contents">
-                <p>Tinted neutral-palette-source, dark container</p>
-                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
-                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
-                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
-                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
-            </div>
-        </FluentCard>
-    </FluentDesignSystemProvider>
-
-    <BaseLayerLuminance Value="(float?)0.15">
-        <FluentCard neutral-palette-source="#CABA8C" ParentReference="@context">
-            <div class="contents">
-                <p>Tinted neutral-palette-source, dark</p>
-                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
-                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
-                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
-                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
-            </div>
-        </FluentCard>
-    </BaseLayerLuminance>
-
-    <FluentDesignSystemProvider BaseLayerLuminance="(float?)0.15">
-        <FluentCard neutral-palette-source="#CABA8C">
-            <div class="contents">
-                <p>Tinted neutral-palette-source, dark</p>
-                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
-                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
-                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
-                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
-            </div>
-            <FluentCard neutral-palette-source="#718E71" style="margin: 0; --card-height: 200px; --card-width: 460px;" >
-                <div class="contents">
-                    <p>Tinted neutral-palette-source, nested, dark</p>
-                    <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
-                    <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
-                    <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
-                    <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
-                </div>
-            </FluentCard>
-        </FluentCard>
-    </FluentDesignSystemProvider>
-
-    <FluentCard card-fill-color="#449544">
-        <div class="contents">
-            <p>Custom card-fill-color</p>
-            <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
-            <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
-            <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
-            <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
-            <p>
-                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.
-            </p>
-        </div>
-    </FluentCard>
-
-    <FluentDesignSystemProvider FillColor="#D6D6D6" AccentBaseColor="#718E71" NeutralBaseColor="#A90000">
-        <FluentCard>
-            <div class="contents">
-                <p>Accent and neutral color by DSP</p>
-                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
-                <FluentButton Appearance="Appearance.Neutral">Neutral</FluentButton>
-                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
-                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
-                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
-            </div>
-        </FluentCard>
-    </FluentDesignSystemProvider>
-</div>
+<FluentCard Class="my-custom-styling">Custom size (400x400) using CSS</FluentCard>
diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css
@@ -0,0 +1,4 @@
+my-custom-styling {
+    width: 400px;
+    height: 400px;
+}
diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor b/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor
@@ -0,0 +1,84 @@
+<BaseLayerLuminance Value="(float?)0.15">
+    <FluentCard ParentReference="@context">
+        <div class="contents">
+            <p>Dark</p>
+            <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+            <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+            <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+            <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
+        </div>
+    </FluentCard>
+</BaseLayerLuminance>
+
+<FluentDesignSystemProvider FillColor="#D6D6D6">
+    <FluentCard neutral-palette-source="#CABA8C">
+        <div class="contents">
+            <p>Tinted neutral-palette-source, dark container</p>
+            <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+            <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+            <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+            <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
+        </div>
+    </FluentCard>
+</FluentDesignSystemProvider>
+
+<BaseLayerLuminance Value="(float?)0.15">
+    <FluentCard neutral-palette-source="#CABA8C" ParentReference="@context">
+        <div class="contents">
+            <p>Tinted neutral-palette-source, dark</p>
+            <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+            <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+            <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+            <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
+        </div>
+    </FluentCard>
+</BaseLayerLuminance>
+
+<FluentDesignSystemProvider BaseLayerLuminance="(float?)0.15">
+    <FluentCard neutral-palette-source="#CABA8C">
+        <div class="contents">
+            <p>Tinted neutral-palette-source, dark</p>
+            <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+            <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+            <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+            <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
+        </div>
+        <FluentCard neutral-palette-source="#718E71" style="margin: 0; --card-height: 200px; --card-width: 460px;">
+            <div class="contents">
+                <p>Tinted neutral-palette-source, nested, dark</p>
+                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
+            </div>
+        </FluentCard>
+    </FluentCard>
+</FluentDesignSystemProvider>
+
+<FluentCard card-fill-color="#449544">
+    <div class="contents">
+        <p>Custom card-fill-color</p>
+        <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+        <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+        <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+        <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
+        <p>
+            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.
+        </p>
+    </div>
+</FluentCard>
+
+<FluentDesignSystemProvider FillColor="#D6D6D6" AccentBaseColor="#718E71" NeutralBaseColor="#A90000">
+    <FluentCard>
+        <div class="contents">
+            <p>Accent and neutral color by FluentDesignSystemProvider</p>
+            <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+            <FluentButton Appearance="Appearance.Neutral">Neutral</FluentButton>
+            <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+            <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+            <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
+        </div>
+    </FluentCard>
+</FluentDesignSystemProvider>
diff --git a/src/Core/Components/Card/FluentCard.razor b/src/Core/Components/Card/FluentCard.razor
@@ -2,7 +2,7 @@
 @inherits FluentComponentBase
 <fluent-card @ref=Element 
              class=@Class
-             style="@Style"
+             style="@StyleValue"
              @attributes="AdditionalAttributes">
     @ChildContent
 </fluent-card>
diff --git a/src/Core/Components/Card/FluentCard.razor.cs b/src/Core/Components/Card/FluentCard.razor.cs
@@ -1,12 +1,25 @@
 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();
+
+    /// <summary>
+    /// 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.
+    /// </summary>
+    [Parameter]
+    public bool AreaRestricted { get; set; } = true;
+
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.
     /// </summary>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
-}
+}
diff --git a/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html
@@ -0,0 +1,2 @@
+
+<fluent-card style="content-visibility: visible; contain: style;" blazor:elementreference="xxx">childcontent</fluent-card>
diff --git a/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html
@@ -0,0 +1,2 @@
+
+<fluent-card style="content-visibility: visible; contain: style; background-color: red;" blazor:elementreference="xxx">childcontent</fluent-card>
diff --git 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<FluentCard>(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<FluentCard>(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()
     {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		<fluent-card style="content-visibility: visible; contain: style;" blazor:elementreference="xxx">childcontent</fluent-card>