For version 2.1, we are adding a new <FluentEmoji> component to the family of Fluent UI Blazor components (see the demo site for examples)! Good news, we think, but...it also introduces a new problem challenge. More on that later. Some examples from the demo site on using the component:

emoji example

Some other noteworthy changes for release 2.1 are:

  • All <FluentInputBase> derived components now need to use @bind-Value or ValueExpression. This means an input derived component needs to be bound now. This follows the way of working that is in place with the built-in Blazor <Input...>components). All examples have been changed to reflect this. The affected components are:
    • <FluentCheckbox>
    • <FluentNumberField>
    • <FluentRadioGroup>
    • <FluentSearch>
    • <FluentSlider>
    • <FluentSwitch>
    • <FluentTextArea>
    • <FluentTextField>
  • Because of the above change, the <FluentCheckbox> and <FluentSwitch> no longer have the 'Checked' parameter. Initial state can be set with the @bind-Value construct
  • <FluentSwitch> has two new parameters to get/set the checked and unchecked message text, called CheckedMessage and UncheckedMessage respectively. 
  • <FluentRadioGroup> component is now generic, so can be bound to other values than just string
  • Various bug fixes
  • Update Fluent UI System Icons to release 1.1.194

And some demo site enhancements:

  • New Emoji page to show usage of the <FluentEmoji> component
  • New implementation of the Icon page and search engine
  • New <Highlighter> component added to the Incubation lab. Thanks @dvoituron!
  • New <MonacoEditor> component added to the Incubation lab. Thanks @dvoituron!
  • New <MarkdownSection> component (uses MarkDig package)
  • Demo site now uses (collapsible) NavMenu from Incubation lab
  • DemoSection component in demo site can show/download additional files

And last, but certainly not least, @Andras-Csanyi has been hard at work to add bUnit tests to the library. We've added a new test project for this. At the moment there are tests added for Accordion, Anchir, AnchoredRegion, Badge, Breadcrumb, Button, Calendar, Card and Checkbox. Many thanks András!

What are the Fluent Emoji? And why is adding them a challenge?

The Fluent Emoji are a (still growing) collection of familiar, friendly, and modern emoji from Microsoft which you might know from the reactions in chats in Teams or the ?? key + period (.) command in Windows.

At the moment there are over 1500 distinct emoji available divided in 9 groups and with color, flat and high contrast styles. Where applicable, 6 different skin tone versions of emoji are available as well. The collections consist of just over 9000 files in SVG format in total.

Combined with the ~14k Fluent System Icons that are already available through the <FluentIcon> component, this means a significant number of static assets get pushed to a server when publishing an application that uses the library. In fact, with Azure Static Web Apps (which we are using for hosting the demo site) we are not able to publish all of this as there currently exists a maximum of 15000 files per application.

What is needed is a way to limit the number of static assets that get included when publishing a project. We are happy to report we've found a way to do just that! As an added bonus you, as the developer using the library in an application, can now control what icons and emojis (yes, emojis is valid for indicating plural) will be available in the application. We'll do a blog post on how we made it work on the project and package side later. For now, let's focus on how you can configure things. First, we will describe what configuration options are available. Then we'll show you where you need to apply those option (spoiler alert, it's in the .csproj file for the project you are using the library in)

But what if I don't want any emoji or icons?

We've got you covered! The first configuration options we added allow you to specify whether any icons and/or emoji get published at all. By default, NO ICONS and NO EMOJI will get published (except the icons that are used internally by the library). So, if you don't want to use them and you don't change anything in your configuration, that is exactly what you'll get.

This can be considered as a sort of 'breaking change'. With previous versions all icon assets would always get published. There have been no changes to the API and/or components, so we have not changed the major version number.

If you do want to use icons/emoji, you add the required settings and you can filter which parts of the collections get published with your application.

How to configure which icons get published

The Fluent UI System Icons collection is set up in such a way that each icon is made available in a number of different sizes where each size usually comes in 2 variants ('Filled', 'Regular'). The sizes available are '10', '12', '16', '20', '24', '28', '32', and '48'. Not every icon is available in all sizes and/or all variants.

You can limit what icon assets get published by specifying a set of icon sizes and a set of icon variants in the project file of the application you are using the library in. To determine what icons are published, these sets for sizes and variants are combined. This means specifying icon sizes '10' and '16' and icon variants 'Filled' and 'Regular', all '10/Filled', all '10/Regular', all '16/Filled' and all '16/Regular' icons assets will be published.

It is not possible to specify multiple individual combinations like '10/Filled' and '16/Regular' in the same set.

When you have configured to publish icons but you have not specified a set of icon sizes, ALL sizes will be included. Equally so, when no set of icon variants is specified, ALL variants will be included.

How to configure which emoji get published

The Fluent Emoji collection is divided into the following 9 groups: 'Activities', 'Animals & Nature', 'Flags', "Food & Drink', 'Objects', 'People & Body', 'Smileys & Emotion', 'Symbols' and 'Travel & Places'. Each emoji is made available in 3 styles ('Color', 'Flat', 'High Contrast'). For a lot of emoji depicting a person (mostly in the 'People & Body' category) there are also 6 different skin tone variants available per style. Not every emoji is made available in every style/skintone.

You can limit what emoji assets get published by specifying a set of emoji groups and a set of emoji styles in the project file of the application you are using the library in. To determine what emojis will be published, these sets for groups and styles are combined. This means specifying emoji groups 'Activities' and 'Flags' and emoji styles 'Color' and 'Flat' means all 'Activities/Color', all 'Activities/Flat', all 'Flags/Color' and all 'Flags/Flat' emoji assets will be published.

It is not possible to filter on specific skin tones. It is also not possible to specify multiple individual combinations like 'Activities/Color' and 'Flags/Flat' in the same published set.

When you have configured to publish emoji but you have not specified a set of emoji groups, ALL groups will be included. Equally so, When no set of emoji variants is specified, ALL styles will be included.

Configuring the project

As mentioned earlier, you to need to add settings to the .csproj file of the project you are using the library in. The easiest way to do this is by creating a new <PropertyGroup> and gather all the relevant and needed properties in there.

The first two properties (with a value of 'true' or 'false') that need to be added are:

  • <PublishFluentEmojiAssets>
  • <PublishFLuentIconAssets>

As you can probably guess from their names, these enable completely turning off or on publishing icons and/or emoji assets.

The default value for BOTH properties is false. This means that if you do not add the property (with a value of 'true') in your project file, NO ICON/EMOJI ASSETS WILL GET PUBLISHED (except for the icons the library is using itself)

The properties that you use to specify the sets of icons to be published are:

  • <FluentIconSizes>
  • <FluentIconVariants>

For emoji you use the properties:

  • <FluentEmojiGroups>
  • <FluentEmojiStyles>

In each property you specify (at least) one or more values separated by commas (','). Any additional leading/trailing spaces will be trimmed when processing the values.

The possible values per property are:

PropertyOptions
<FluentIconSizes>10,12,16,20,24,28,32,48
<FluentIconVariants>Filled, Regular
<FluentEmojiGroups>Activities, Animals_Nature, Flags, Food_Drink, Objects, People_Body, Smileys_Emotion, Symbols, Travel_Places
<FluentEmojiStyles>Color, Flat, HighContrast

If you don't specify a property for a set in the project file, by default all possible options for that set will be included in the publish action

For the demo site the (annotated) property group look like below. You can copy this to your project file as a starting point.

<PropertyGroup>
<!-- 
The icon component is part of the library. By default, NO icons (static assets) will be included when publishing the project. 
 
Setting the property 'PublishFluentIconAssets' to false (default), or leaving the property out completely, will disable publishing of the 
icon static assets (with exception of the icons that are being used by the library itself). 

Setting the property 'PublishFluentIconAssets' to 'true' will enable publishing of the icon static assets. You can limit what icon assets get published by specifying a set of icon sizes and a set of variants in the '<FluentIconSizes>' and '<FluentIconVariants>' properties respectively.

To determine what icons will be published, the specified options for sizes and variants are combined. Specifying sizes '10' and '16' and variants 'Filled' and 'Regular' means all '10/Filled', all '10/Regular', all '16/Filled' and all '16/Regular' icons assets will be published. 
It is not possible to specify multiple individual combinations like '10/Filled' and '16/Regular' in the same set. 

When no icon size set is specified in the '<FluentIconSizes>' property, ALL sizes will be included*  
When no icon variant set is specified in the '<FluentIconVariants>' property, ALL variants will be included*  
* when publishing of icon assets is enabled 
-->
<PublishFluentIconAssets>true</PublishFluentIconAssets>

<!-- 
Specify (at least) one or more sizes from the following options (separated by ','):
10,12,16,20,24,28,32,48 
Leave out the property to have all sizes included.
-->
<FluentIconSizes>10,12,16,20,24,48</FluentIconSizes>

<!-- 
Specify (at least) one or more variants from the following options (separated by ','):
Filled,Regular 
Leave out the property to have all variants included.
-->
<FluentIconVariants>Filled,Regular</FluentIconVariants>

<!-- 
The emoji component is part of the library. By default, NO emojis (static assets) will be included when publishing the project. 
 
Setting the property 'PublishFluentEmoji' to false (default), or leaving the property out completely, will disable publishing of the emoji static assets. 

Setting the property 'PublishFluentEmojiAssets' to 'true' will enable publishing of the emoji static assets. You can limit what emoji assets get published by specifying a set of emoji groups and a set of emoji styles in the '<FluentEmojiGroups>' and '<FluentEmojiStyles>' properties respectively.

To determine what emojis will be published, the specified options for sizes and variants are combined. Specifying emoji groups 'Activities' and 'Flags' and emoji styles 'Color' and 'Flat' means all 'Activities/Color', all 'Activities/Flat', all 'Flags/Color' and all 'Flags/Flat' emoji assets will be published.

It is not possible to specify multiple individual combinations like 'Activities/Color' and 'Flags/Flat' in the same published set

When no emoji group set is specified in the '<FluentEmojiGroups>' property, ALL groups will be included*  
When no emoji variant set is specified in the '<FluentEmojiStyles>' property, ALL styles will be included*  
* when publishing of emoji assets is enabled 
-->
<PublishFluentEmojiAssets>true</PublishFluentEmojiAssets>

<!-- 
Specify (at least) one or more groups from the following options (separated by ','):
Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places 
Leave out the property to have all groups included.
-->
<FluentEmojiGroups>Activities,Animals_Nature,Flags,Food_Drink,Objects,Smileys_Emotion,Symbols,Travel_Places</FluentEmojiGroups>

<!-- 
Specify (at least) one or more styles from the following options (separated by ','): 
Color,Flat,HighContrast
Leave out the property to have all styles included.
-->
<FluentEmojiStyles>Color,</FluentEmojiStyles>
</PropertyGroup>

The above configuration results in publishing 'all icons **EXCEPT** size 32' and 'all color emoji **EXCEPT** People & Body group' as static assets.

Configuring the AddFluentUIComponents() service collection extension

You get run-time checks when using the <FluentIcon> and <FluentEmoji> components on the referenced assets actually being available. To enable this, the AddFluentUIComponents() service collection extension needs some configuration.

Services and configuration classed have been added to the library for this. You do not need to specify the configuration in code yourself. A source generator has been added that reads the settings from the project file and adds the necessary code at compile time. That way the settings made in the project file and the source code are always kept in sync.

The two lines that need to be added to the Program.cs file are:

LibraryConfiguration config = new(ConfigurationGenerator.GetIconConfiguration(), ConfigurationGenerator.GetEmojiConfiguration());
builder.Services.AddFluentUIComponents(config);

We are using this this configuration in the demo site in the Search part of the Emoji page to only show the groups (no 'People & Body') and style (just 'Color') for which the assets are actually published:

16s0nb2f.png

3lsjvjqq.png

See https://github.com/microsoft/fast-blazor/blob/emojis/examples/FluentUI.Demo.Shared/Pages/Emoji/EmojiPage.razor#L48-L56 (and line 72-79) in the demo site for how this is done.

Try it out!

To test this functionality, you need at least version 2.1.0 of the package. The latest version is  available on NuGet.

If you try this out, do please let us know if it works as expected (or not).

Comments


Comments are closed