🧪 [Experiment] SettingsCard & SettingsExpander

[niels9001]

Approved from Toolkit

• SettingsControls: SettingsCard + SettingsExpander #129

Problem Statement:

THere are currently no controls in WinUI or the Toolkit that allows for creating consistent settings experiences that can be found across Windows 11. This experiment introduces a SettingsCard component that allows to display simple cards.
SettingsExpander will be an follow-up experiment to introduce collapsible cards.

Overview

This experiment adds the following components:

• SettingsCard a simple card component that allows for displaying a setting. The IsClickEnabled property can be used to turn it into a Button-like control.
• SettingsExpander a control that uses the same properties as SettingsCard, and SettingsCard can be used to set the SettingsExpander.Items. Binding is also supported.
  

Media1.mp4

Using

You can try it out via the NuGet Packages here:

• UWP: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.Uwp.SettingsControls
• WinUI 3: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.WinUI.SettingsControls

SettingsCard (doc + samples)
SettingsExpander (doc + samples)

Read more about Preview Packages here.

CommunityToolkit members can also try it out with Codespaces.

TO DO

• Tests

Implementation Requirements

Not all these items are required to submit a PR. This list is here to help track what is remaining to implement before a technical review and discussion of moving into the main repository can occur.

• Working Prototype
• Feature Complete
• Documentation
• Samples
• Tests
• Community Feedback / Usage Testimonies

Tested Platforms

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Technical Review

These items can sometimes be done ahead of time, but are usually started and completed after all implementation details are finished.

• Accessibility Audit
• API/Naming Review
• Code Quality/Style
• Dependency Review
• Design/Style Review
• Final Approval

[michael-hawker]

Had a discussion with @niels9001 about some implementation details and how we can share common elements between the layout of both SettingsCard and SettingsExpander. Mostly centered around the Icon/Header/Description text and Content.

We realized our existing HeaderedContentControl in the Toolkit could be updated to better support this scenario by adding Icon support. This would let us use it in both of these scenarios as well as an IconButton in the future as well:

Updated Plans:

• Bring over HeaderedContentControl from Toolkit to this Experiment (HCC)
  • Update to add Icon and IconPosition? Determines if Icon is Left/Top/Right/Bottom of Header/Content (don't think there's an existing enum we can use, so we'll need an IconPosition enum (or Alignment?). Position I think sounds better here thinking of the enum name itself.)
    • Do we use the IconElement type? I think yes?
  • Update Grid in HCC template to have extra row/column for Icon and Presenter for Icon
  • Update VSM to support changes to IconPosition as well as orientation (as a separate state group). Icon in it's own row/column and moves around the double header/content area. Header/content area is either horizontal or vertically split based on the existing Orientation property independent of the Icon.
  • Defaults for HCC is left as-is, IconPosition defaults to Left
• Update SettingsCard and SettingsExpander to use HeaderedContentControl (and pass-thru Icon property - IconPosition/Orientation should not be needed for Settings control scenarios)
• Update SettingsExpander ItemsControl to use SettingsCard as item type. This will be a bit unconventional not having a SettingsExpanderItem type, but should work, and makes sense from a construction standpoint that SettingsExpander can be a collection of SettingsCards... (Bonus, this makes it super simple to move things in/out of expandable groups!)
  • Update default style for SettingsExpander to have custom ItemContainerStyle for SettingsCard style specified - this should hopefully give us all we need and still provide a way for dev to override (just use XAML as intended!)
  • Update GetContainerForItemOverride and IsItemItsOwnContainerOverride to use SettingsCard
  • Only if we need more control, we can do extra in PrepareContainerForItemOverride method (check if unset style) and/or have a SettingsExpanderItem that inherits from SettingsCard.
• P2: Create a light-weight IconButton as well which has template modified to contain a HCC and pass-thru for Icon/IconPosition/Orientation properties for the HCC.

[michael-hawker]

Seems like we may want the IconPosition to have 8 values for being on top but left-aligned as well.

[niels9001]

Seems like we may want the IconPosition to have 8 values for being on top but left-aligned as well.

Actually.. aren't there 12 potential, and useful, positions?

And if so - would it make sense to have IconPosition (Left, Top, Right, Bottom), HorizontalIconAlignment and VerticalIconAlignment properties?

[michael-hawker]

Good catch @niels9001, your image is what I had in my mind, I just over-simplified it.

I'm wondering if Orientation helps at all in narrowing these down, but there's probably scenarios which would need one position or another even if not as common, at some point. In fact, I think the SettingsCard contradicts what I was starting to think in my head already. 🤣

I'd really like to avoid having to have a Horizontal/Vertical property as then you need to pair them and as a Dev know when to use which based on the other position, so I feel like it makes it more complex to use, comprehend, and change easily.

However, a single property would be hard to describe all 12 positions uniquely... As I don't think LeftTop and TopLeft would be great for folks comprehending what that means and the differences (Left side then top vs. Top on the left), eh?

Just expanding thoughts for completeness here... Starting from the left side on the bottom and going clock-wise:

• LeftBottom, Left, LeftTop
• TopLeft, Top, TopRight
• RightTop, Right, RightBottom
• BottomRight, Bottom, BottomLeft

It's weird, but not horrible, maybe??? Would we want in this case to use LeftCenter, TopCenter, RightCenter, and BottomCenter? So then it's always <Position><Alignment> as a pair?

[niels9001]

Hah! That was what I have implemented and feels comprehensible :). I like adding the Center to Left/Top/Right/Bottom to it - will update!

[Arlodotexe]

And if so - would it make sense to have IconPosition (Left, Top, Right, Bottom), HorizontalIconAlignment and VerticalIconAlignment properties?

To help digest what we need for this.

I'm getting RelativePanel vibes from this, which we could borrow ideas from.

2 enums is doable as well, but we can't use Horizontal/Vertical alignment. Thinking IconPosition.RightSide and IconAlignment.ContainerStart instead. If we need to improve the names of those enums, we can take hints from the CSS Flexbox

If we want a single enum, we're going to need to make order matter - and we'll want to clearly define it. Which one is TopRight, and which is RightTop?

Since the naming is so clear on the 2 enums, that gets my vote.

[dongle-the-gadget]

Is "adaptive layout" currently on the implementation requirements? The current prototype doesn't seem to respond properly when the window is shrunk, leading to the content being cut out like this.

[niels9001]

Is "adaptive layout" currently on the implementation requirements? The current prototype doesn't seem to respond properly when the window is shrunk, leading to the content being cut out like this.

Great point! I believe we should define a MinWidth property, and add adaptivity - seems that the W11 Settings is doing this as well!

I'll add this to the requirements in the discussion (#129) :)!

[niels9001]

We're about to merge a first version of the SettingsExpander and a bunch of improvements to SettingsCard. @dongle-the-gadget this should resolve your layout issue as well!

Known issues:

• In specific situations where the SettingsCard/SettingsExpander is hosted in a ContentControl (with it's alignment set the Left) a Layoutcycle exception can occur. This happens on the WrapThreshold breakpoint itself.
• Samples could need some further improvements.

[eloisepeng]

Hi, @michael-hawker @niels9001
For Windows Photo app, we recently integrated SettingsCard and SettingsExpander in our app, we found the current A11y issues with Narrator even with the use of AutomationProperties.Name.

1. "DropDownButton" is missing selected item (in SettingsCard)
2. "HyperlinkButton" is missing link text (in SettingsCard)
3. SettingsExpander is missing to announce the Header

Thanks for looking into this matter as it's required A11y fix for our app.

[niels9001]

@eloisepeng Great feedback! Can you provide some sample XAML for me to test with?

[Jay-o-Way]

Hey Niels, I have an idea to improve the SettingsCard!
Currently, it is constructed with 4 columns:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"
                      MinWidth="{ThemeResource SettingsCardLeftIndention}" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />

And

<x:Double x:Key="SettingsCardLeftIndention">0</x:Double>
(...)
<Thickness x:Key="SettingsCardIconMargin">2,0,20,0</Thickness>
<Thickness x:Key="SettingsCardHeaderIconMargin">2,0,20,0</Thickness>

So, when we add content in the second column, without an icon, we need to manually set

<controls:CheckBoxWithDescriptionControl
    Margin="56,0,0,0"

which is too much work and not logical or pretty code style.

I would advice to use a MinWidth that equals the width of an icon, so that the space will always be reserved. After that, there is no more need for the manual and redundant left and right margin inside controls.

including ActionIconPresenter

<ContentControl x:Name="PART_ActionIconPresenter"
    Margin="4,0,-8,0"
    (...)

Also, I strongly recommend to use Grid.Spacing and StackPanel.Spacing for the margins as shown on https://learn.microsoft.com/windows/apps/design/basics/content-basics. Note that it would be most pretty to make all these spacings symmetrical.

P.S. is the best word indention or indentation?

[niels9001]

Thanks for the feedback @Jay-o-Way !

The reason why we introduced the different styles and resources (like the Margins and SettingsCardLeftIndention) is that it provides most flexibility for developers to tweak their cards to their liking (see https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-styles#lightweight-styling) and is inline with how WinUI creates their control styles. Although we want to provide a control that "just works" out of the box, we should also support this level of customization. For instance, moving to Grid.Spacing/StackPanel.Spacing might have unintended behavior as it would override everything within the Grid/StackPanel - and would not allow you to just tweak e.g. the HeaderIconMargin?
We also use the overriding in the SettingsCard/SettingsExpander controls itself: e.g. the SettingsExpanderItem style overrides the different margins to make sure we meet the design spec. To show the various scenarios we currently support:

XAML:

             <labs:SettingsCard Header="SettingsCard" Description="Without an icon">
                <Button Content="Content"/>
            </labs:SettingsCard>

            <labs:SettingsCard Header="SettingsCard" Description="With an icon" HeaderIcon="{ui:FontIcon Glyph=&#xE790;}">
                <Button Content="Content"/>
            </labs:SettingsCard>

            <labs:SettingsCard Header="SettingsCard" Description="Without an icon but with left indention">
                <Button Content="Content"/>
                <labs:SettingsCard.Resources>
                    <x:Double x:Key="SettingsCardLeftIndention">120</x:Double>
                </labs:SettingsCard.Resources>
            </labs:SettingsCard>

            <labs:SettingsExpander Header="SettingsExpander" Description="With an icon" HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xE790;}">
                <Button Content="Content"/>
                <labs:SettingsExpander.Items>
                    <labs:SettingsCard Header="SettingsCard" Description="With an icon" HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xE790;}">
                        <Button Content="Content"/>
                    </labs:SettingsCard>
                    <labs:SettingsCard Header="SettingsCard" Description="Without an icon + IsClickEnabled" IsClickEnabled="True" >
                        <Button Content="Content"/>
                    </labs:SettingsCard>
                    <labs:SettingsCard Header="SettingsCard" Description="Left aligned" HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xE790;}">
                        <Button Content="Content"/>
                        <labs:SettingsCard.Resources>
                            <Thickness x:Key="SettingsExpanderItemPadding">16,8,44,8</Thickness>
                        </labs:SettingsCard.Resources>
                    </labs:SettingsCard>
                </labs:SettingsExpander.Items>
            </labs:SettingsExpander>

As you can see, we have different left-spacing variations (red) while also having (slightly) different right-spacing variations to e.g. show the ActionButton in a consistent way when the SettingsCard is part of a SettingsExpander (yellow).

Now, for normal usage - a developer wouldn't need to worry about all of this - as the controls handle these variations out of the box. But the lightweight overriding of styles does provide additional flexibility!

So, when we add content in the second column, without an icon, we need to manually set

<controls:CheckBoxWithDescriptionControl
    Margin="56,0,0,0"

Well, by default the Header/Description will be left-aligned - leaving no whitespace (but it will when the SettingsCard is part of the SettingsExpander.Items). In case a developer would like to override this there's no need to set the margin of the control - but by overriding the SettingsCardLeftIndention:

<labs:SettingsCard Header="SettingsCard" Description="Without an icon but with left indention">
                <labs:SettingsCard.Resources>
                    <x:Double x:Key="SettingsCardLeftIndention">120</x:Double>
                </labs:SettingsCard.Resources>
            </labs:SettingsCard>

Additionally, this can be set on the UserControl/Page/App level as well so all SettingsCards would adhere to this automagically. I might have missed your point on the MinWidth stuff - so please let me know if you see another use case that'd be relevant and that we do not support yet!

P.S. is the best word indention or indentation?

Hah good point :)! Will have a look what other controls across WinUI use :)!

Hope this helps!

[Jay-o-Way]

Hey Niels.

Maybe I could be a bit more clear in my explanation. What I meant is to try and leave the left column (that is, the width) fixed, so it will be reserved for icons - present or not present. Then, in the second column there is the content. In multiple settings above each other, all of them should be aligned, whether that setting actually has an icon or not.

Check Windows 11 settings:

In the third or fourth column we will have the ActionContent (often ToggleSwitches) and ideally that width should be fixed aswell, to prevent layouts like:

The reason I suggest Spacing is that Margins (unlike in HTML) do not overlap and therefore - if not correctly applied - can give too much margin. Also, setting a Spacing in one place just seems simpler then checking margins throughout a document. Note that, as you must be aware, the example with Margin=56,0,0,0 is still used in the PowerToys pages.

[michael-hawker]

FYI @niels9001

[YourOrdinaryCat]

The ItemsRepeater.ItemTemplate property allows using a DataTemplate, DataTemplateSelector or IElementFactory. Could the SettingsExpander.ItemTemplate allow for this as well? It'd be pretty useful IMO, and ItemsRepeater already provides the needed support, would just need to change the ItemTemplate to be of type Object.

[michael-hawker]

@YourOrdinaryCat great suggestion. Would you like to submit a PR for that? Thanks!

[YourOrdinaryCat]

@YourOrdinaryCat great suggestion. Would you like to submit a PR for that? Thanks!

Done - see #417, would a new sample be needed for this? If not I can mark it as ready for review already.

[michael-hawker]

@YourOrdinaryCat Thanks! We've been wanting to add some more sample anyway, so if you wanted to show how to use a DataTemplateSelector for instance in order to swap templates of the cards out, that could be cool!

[leoshusar]

I see some issues with XAML live editing.

For SettingsCard I'm getting a FormatException when changing ContentAlignment at runtime. When I start my app with it, the alignment works

This seems to be something with visual states - when I commented the whole VisualStateGroup out, the states obviously didn't work, but the exception went away.

And SettingsExpander.Items looks like doesn't support changing at runtime too, I have to restart to see added / removed items.

[michael-hawker]

@leoshusar is this with UWP or WindowsAppSDK? In either case can you report this with the Visual Studio tools? There isn't anything special we should have to be doing for this; these are standard setups for these components, so this would have to be something within the VS tooling or the platform itself.

[leoshusar]

It's WindowsAppSDK 1.3.

I tried to dig into it and found the ContentAlignment fails here:

Should I open an issue in the WindowsCommunityToolkit repo or can you confirm just by looking that this is indeed a WinAppSDK bug?

I also tried to look at that SettingsExpander but I couldn't make it working locally from source.
But just by looking at it, and I'm not an expert in this custom controls area, shouldn't the Items property be something that will raise events when changed? I see now it's just plain List - Items = new List<object>();.

In the OP video Media1 I see it was working - but I also found it was originally built on ItemsControl.

[YourOrdinaryCat]

But just by looking at it, and I'm not an expert in this custom controls area, shouldn't the Items property be something that will raise events when changed? I see now it's just plain List - Items = new List<object>();

My guess is that this is done to align with the behavior in WinUI - here's an example from the NavigationView source, and the docs. The Items property in ItemsControl uses a custom collection type that also inherits from IObservableVector<IInspectable>. That does leave you between a rock and a hard place if you want to use plain Items with hot reload though.

As a workaround, you could create a specialized collection (e.g SettingCardCollection) that inherits from ObservableCollection<SettingsCard>, and use it from XAML, like this (untested, but should be easy enough to fix if anything):

namespace MyCollections;

using CommunityToolkit.Labs;
using System.Collections.ObjectModel;

public sealed class SettingsCardCollection : ObservableCollection<SettingsCard> { }

<Page ...
    xmlns:labs="using:CommunityToolkit.Labs"
    xmlns:col="using:MyCollections">
    <labs:SettingsExpander>
        <labs:SettingsExpander.ItemsSource>
            <col:SettingsCardCollection>
                <labs:SettingsCard />
                <labs:SettingsCard />
                <labs:SettingsCard />
            </col:SettingsCardCollection>
        </labs:SettingsExpander.ItemsSource>
    </labs:SettingsExpander>
</Page>

[leoshusar]

Thanks for the workaround!

So since it's currently impossible (?) to instantiate the ItemCollection manually, shouldn't the ObservableCollection be used here too? I see some other CommunityToolkit controls are using it. I mean just for the consistent behavior.

Also I'd like to propose small feature request. I'm currently trying to recreate something like this:

and since I'm binding ItemsSource to my VM, I wanted to use footer for the last card, but the footer and header don't apply SettingsCard style:

Any thoughts on this?

[niels9001]

It's WindowsAppSDK 1.3.

Should I open an issue in the WindowsCommunityToolkit repo or can you confirm just by looking that this is indeed a WinAppSDK bug?

We are porting over these triggers to our new CommunityToolkit repo, so feel free to open an issue here: https://github.com/CommunityToolkit/Windows/issues

So since it's currently impossible (?) to instantiate the ItemCollection manually, shouldn't the ObservableCollection be used here too? I see some other CommunityToolkit controls are using it. I mean just for the consistent behavior.

@michael-hawker Since there were quite some changes related to this along the way, I can't recall exactly why we went for IList specifically.. thoughts?

Also I'd like to propose small feature request. I'm currently trying to recreate something like this: and since I'm binding ItemsSource to my VM, I wanted to use footer for the last card, but the footer and header don't apply SettingsCard style:

Any thoughts on this?

We wanted to make the ItemsHeader and ItemsFooter as flexible as possible so developers can customize this easily (you can see the many use cases for this in W11 Settings).

For your particular use case, this works:

<labs:SettingsExpander.ItemsFooter>
    <labs:SettingsCard Header="Choose a device" Style="{StaticResource DefaultSettingsExpanderItemStyle}">
        <Button Content="Add a device" />
   </labs:SettingsCard>
</labs:SettingsExpander.ItemsFooter>

Make sure you reference the file that contains the DefaultSettingsExpanderItemStyle in your App.xaml or page resources, like this:

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///CommunityToolkit.Labs.WinUI.SettingsControls/SettingsExpander/SettingsExpander.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>

Result:

I've created a PR to tweak the ItemsSource sample as I can imagine this is a frequent ask: #433

[michael-hawker]

@niels9001 IList shouldn't change, that's required by ItemsControls to work properly with other XAML things, there's an issue on WinUI open about that. It'd just be about the internal initialization of the collection to start with from List to ObservableCollection. Not sure what the best guidance is, but probably doesn't hurt I guess to change it. Probably something we should still discuss with the platform team to document?

[YourOrdinaryCat]

there's an issue on WinUI open about that

Is this the issue you're referring to? microsoft/microsoft-ui-xaml#1809

I do wish this was updated on WinAppSDK, specially because I think ItemsRepeater works on this scenario (do correct me if I'm wrong 😅). The IList thing seems to be documented... at the bottom of a page that's already somewhat confusing IMO, and a bit annoying to find because you have to dig through a few base classes and a lot of properties :)

Either way, switching to ObservableCollection should work on this scenario. Some official guidance on this would be great to have though, specially with the discrepancies between ItemsRepeater and ItemsControl.

[leoshusar]

There is another thing I found.

I wanted to make left aligned RadioButton card which is also clickable, but there is some unwanted top margin when both properties and content are used together.

This XAML:

<StackPanel Spacing="4">
    <labs:SettingsCard ContentAlignment="Left">
        <Button Content="Action" Style="{ThemeResource AccentButtonStyle}" />
    </labs:SettingsCard>
    <labs:SettingsCard ContentAlignment="Left" IsClickEnabled="True">
        <Button Content="Action" Style="{ThemeResource AccentButtonStyle}" />
    </labs:SettingsCard>
    <labs:SettingsCard ContentAlignment="Left">
        
    </labs:SettingsCard>
    <labs:SettingsCard ContentAlignment="Left" IsClickEnabled="True">
        
    </labs:SettingsCard>
</StackPanel>

produces this result:

Interestingly when I set Height, no matter to what value (I can set 0 or 200), the card looks fine (this is height 240):

With 0 height the card still looks the same, but without those margins.

[michael-hawker]

FYI @niels9001 for the height thing. Also, did we swap the base collection initialization to be an ObservableCollection over a List?

[Jay-o-Way]

Hey @niels9001 - just asking - it's noted that this is labeled "experimental", which can deter people from actually using it now. Any estimate to when this (and related elements) will be stable?

[niels9001]

Hey @niels9001 - just asking - it's noted that this is labeled "experimental", which can deter people from actually using it now. Any estimate to when this (and related elements) will be stable?

The SettingsControls were actually moved to the main toolkit and should be included in 8.0. Since so many 1P and 3P apps were using it we feel that these controls are pretty stable.

In the future we'd like to have (and follow :)) a more structured approach to 'graduate' Labs experiments into the main Toolkit.

[krschau]

Hi, I'm seeing an issue where SettingsExpander doesn't respect a specified CornerRadius. Here's some exaggerated, modified Dev Home code. As you can see, the SettingsCard gets a radius, but the SettingsExpander doens't change. Is this a bug, or should the radius be modified a different way?

            <labs:SettingsExpander x:Uid="Settings_About_Card" IsExpanded="True" CornerRadius="100,100,100,100">
                <labs:SettingsExpander.HeaderIcon>
                    <BitmapIcon ShowAsMonochrome="False" UriSource="/Assets/DevHome.ico" />
                </labs:SettingsExpander.HeaderIcon>
                <TextBlock Text="{x:Bind ViewModel.VersionDescription, Mode=OneWay}" />
                <labs:SettingsExpander.Items>
                    <labs:SettingsCard HorizontalContentAlignment="Left" ContentAlignment="Left" CornerRadius="100,100,100,100">
                        <StackPanel Orientation="Vertical">
                            <TextBlock />
                        </StackPanel>
                    </labs:SettingsCard>
                </labs:SettingsExpander.Items>
            </labs:SettingsExpander>

[michael-hawker]

@krschau is this using the latest build out of the main repo https://github.com/CommunityToolkit/Windows?

FYI @niels9001

[niels9001]

Hi, I'm seeing an issue where SettingsExpander doesn't respect a specified CornerRadius. Here's some exaggerated, modified Dev Home code. As you can see, the SettingsCard gets a radius, but the SettingsExpander doens't change. Is this a bug, or should the radius be modified a different way?

            <labs:SettingsExpander x:Uid="Settings_About_Card" IsExpanded="True" CornerRadius="100,100,100,100">
                <labs:SettingsExpander.HeaderIcon>
                    <BitmapIcon ShowAsMonochrome="False" UriSource="/Assets/DevHome.ico" />
                </labs:SettingsExpander.HeaderIcon>
                <TextBlock Text="{x:Bind ViewModel.VersionDescription, Mode=OneWay}" />
                <labs:SettingsExpander.Items>
                    <labs:SettingsCard HorizontalContentAlignment="Left" ContentAlignment="Left" CornerRadius="100,100,100,100">
                        <StackPanel Orientation="Vertical">
                            <TextBlock />
                        </StackPanel>
                    </labs:SettingsCard>
                </labs:SettingsExpander.Items>
            </labs:SettingsExpander>

@krschau The SettingsControls have moved out of Labs to the main Toolkit.. Opened a PR there to (hopefully) fir the issue: CommunityToolkit/Windows#218

[michael-hawker]

This was shipped in the 8.0 Release, please update to use that version of the component. Any further issues/requests should start in the main repository.