Proposal: InfoBar V2 - InfoCard control

[mdtauk]

Proposal: InfoBar V2 - InfoCard control

InfoCard.Animate.In.mp4

Summary

Ideally this could be merged into the InfoBar control, with an API to switch to a Card or Overlay mode. But if not, this could be an additional control called InfoCard

Rationale

• InfoBar will push content as it appears on screen, it does not overlay content;
• InfoBar controls are not designed to stack on top of each other;
• A few Inbox apps already display a similar control, but the design is not consistent;

InfoCard.Stack.Example.mp4

Scope

Capability	Priority
This control must overlay other content, using shadow and elevation	Must
This control should be as close to InfoBar in features and usage	Should
This control should support stacking as more InfoCards are Opened	Should
This control could be made part of InfoBar with a behaviour property or an Overlay mode.	Could

Visual Design

Light and Dark InfoCard examples

InfoCard design spec

Basic API properties

Many of these are shared/similar to the InfoBar control

Property/Resource	Value	Description
Colours
InfoCardErrorSeverityColorBrush	SystemFillColorCritical	Error Severity color
InfoCardWarningSeverityColorBrush	SystemFillColorCaution	Warning Severity color
InfoCardSuccessSeverityColorBrush	SystemFillColorSuccess	Success Severity color
InfoCardInformationalSeverityColorBrush	SystemFillColorAttention	Informational Severity color
InfoCardNeutralSeverityColorBrush	SystemFillColorNeutral	Neutral Severity color
InfoCardTitleForeground	TextFillColorPrimary	Title text color
InfoCardMessageForeground	TextFillColorSecondary	Message text color
InfoCardBackground	SolidBackgroundFillColorTertiary	Background color
InfoCardBorder	LayerFillColorTertiary	Border color
InfoCardIconForeground	TextFillColorPrimary	Icon color
InfoCardErrorIconForeground	TextFillColorPrimary	Error Severity Icon color
InfoCardWarningIconForeground	TextFillColorPrimary	Warning Severity Icon color
InfoCardSuccessIconForeground	TextFillColorPrimary	Success Severity Icon color
InfoCardInformationalIconForeground	TextFillColorPrimary	Informational Severity Icon color
InfoCardNeutralIconForeground	TextFillColorPrimary	Neutral Severity Icon color
Sizing
InfoCardIconSize	Fluent UI System Icons 24	Icon Size
InfoCardIconAreaSize	56 × 56	Icon Area Size
InfoCardCloseButtonIconSize	Fluent UI System Icons 12	Close Button Icon Size
InfoCardCloseButtonSize	32 × 32	Close Button Size
InfoCardCloseButtonBackplateSize	24 × 24	Close Button Backplate Size
InfoCardTitleFontSize	14	Title text font size
InfoCardMessageFontSize	12	Message text font size
InfoCardTitleFontLineHeight	24	Title text font line height
InfoCardMessageFontLineHeight	24	Message text font line height
Close Button Visual States
Default	GhostFillColorTransparent	Close Button Default backplate color
PointerOver	GhostFillColorSecondary	Close Button PointerOver backplate color
Pressed	GhostFillColorTertiary	Close Button Pressed backplate color
Disabled	GhostFillColorDisabled	Close Button Disabled backplate color
Position		Where InfoCards will be positioned overlaying the content of the parent panel
InfoCard.PositionTop		InfoCard Positioned at the top
InfoCard.PositionBottom		InfoCard Positioned at the bottom
InfoCard.PositionLeft		InfoCard Positioned at the left
InfoCard.PositionRight		InfoCard Positioned at the right

Important Notes

I am fairly open to how this proposal is implemented, and so any and all comments are welcome. The Examples posted here match the earlier ones I submitted to the conversation which became the InfoBar control - but updated to use Fluent UI System Icons, and the Latest colours and styles with the visual refresh.

Not sure if these InfoCards should include custom content and action buttons, but for matching the InfoBar spec, and featureset there is nothing stopping us including these features.

Custom Content and Action Button support

Open Questions

I have one question, but am happy to add others that are brought up... Should this design and functionality be part of the InfoBar control, or is it more suited to a separate or derived control.

More questions that have come to mind:

• Do you extend position to support TopLeft, Middle Left, or BottomRight etc
• Do you support horizontal stacking? (I'd say no)
• Does the control itself handle stacking, or do you create an InfoCardPanel where you can call to show/open an InfoCard, and it will handle placing it for you?

[huoyaoyuan]

This design is flyout like.
I also want a static control that takes place in layout and not closable, to be a status indicator.

[mdtauk]

This design is flyout like.
I also want a static control that takes place in layout and not closable, to be a status indicator.

The InfoBar currently sits in the UI and moves other elements or of it's way.

But I don't see why InfoCard couldn't have an Overlay and an Inline option.

[mdtauk]

This is a nice to have, not a must have - but the same InfoCard could possibly update as a status changes, when a prior piece of information is no longer true or relevant. This would be preferable to the InfoCard transitioning out, and a new one transitioning in.

InfoCard.Change.mp4

[mdtauk]

Whilst I have a preference for the designs in the main proposals - there may be some in the WinUI Design Team which may wish the InfoCard to closer match the InfoBar design.

Outer border and a 16px Elevation Shadow

Content examples

[gabbybilka]

@mdtauk Thank you for opening up and creating this comprehensive proposal and designs!

This is definitely a feature on our radar to include in an InfoBar v2. We aimed to add an Overlay mode as part of the initial InfoBar but decided to focus on the inline usecases for the first iteration and make sure we designed the right architecture to support stacking the cards. In general, I agree with the notion that the Overlay mode would keep/take advantage of the same functionality and API as the inline InfoBar which leads towards adding an Overlay mode to the existing InfoBar versus a separate control for this. Would love to hear thoughts on this!

@community: To help prioritize and aim our development on this, I encourage you to share where you would use an InfoCard in your application and what functionality you need — especially around the open questions included in the proposal:

• What positioning do you require (i.e. TopLeft, Middle Left, BottomRight, etc.)?
• Do you require horizontal stacking of InfoCards (and why 😊)?
• If you are vertically stacking multiple InfoCards with the same positioning (e.g. BottomRight), how would you expect to implement stacking? Should the control itself handle stacking, or does there also need to be a separate layout control that handles positioning?
  • I'd like to note the WCT InAppNotification has a built-in StackMode property to enable stacking in the control. However, the stacking is restricted to overlaying, replacing or queueing behind any existing notifications in that position. Would this functionality be useful here?

@mdtauk Could you elaborate on why you have a preference for your designs with the strip of color versus the background? I also see the addition of an 'Attention' Severity level outside of the 'Informational/Neutral'. When would Attention be used instead of Neutral?

Thanks again for opening up this proposal and discussion!

[mdtauk]

mdtauk Could you elaborate on why you have a preference for your designs with the strip of color versus the background? I also see the addition of an 'Attention' Severity level outside of the 'Informational/Neutral'. When would Attention be used instead of Neutral?

I think the strip of colour is bolder and stands out, almost like it's calling for your attention. The text being on the neutral theme colours also solves any issues with legibility.

The strip of colour leads the direction of the animation, which helps draw the eye.

The Attention colour was present in the recently Added theme resources, so I included it for the sake of completeness

[mdtauk]

The shadow and subtle border may be enough to help the more subtle backgrounded InfoCards stand out from the surface and content beneath it.

[michael-hawker]

@gabbybilka the InAppNotification in the Toolkit doesn't stack messages like shown in the animation. The Toolkit control handles a queue of messages and replaces each message within the same content presenter. The StackMode property determines how the internal stack in memory is handled either with newer messages being displayed next or them being displayed in order.

So, it's really an option if developers only want one updating notice, or if they want to have multiple instances displayed on the screen at the same time.

If this gets implemented in WinUI and it can handle a queue of messages or displaying multiple messages, we'd remove our InAppNotification control in the Toolkit.