[dev-v5] Add FluentSwitch component

[agriffard]

[dev-v5] Add FluentSwitch component

A FluentSwitch component represents a physical switch that allows someone to choose between two mutually exclusive options.
For example, "On/Off" and "Show/Hide". Choosing an option should produce an immediate result.

Best practices

Layout

When people need to perform extra steps for changes to take effect, use a check box instead. For example, if they must click a "Submit", "Next", or "OK" button to apply changes, use a check box.

Content

Only replace the On/Off labels if there are more specific labels for the setting. For example, you might use Show/Hide if the setting is "Show images".
Keep descriptive text short and concise—two to four words; preferably nouns. For example, "Focused inbox" or "WiFi".

[agriffard]

Note: The LabelPosition example has a strange behaviour : The switches bound to the same value lose their synchronization, depending on which one is clicked.

Enregistrement.2025-02-23.154548.mp4

[dvoituron]

Indeed. You need to find why. 😀

[dvoituron]

1. Should we keep those parameters? : ChildContent, CheckedMessage, UncheckedMessage
2. If not, should we add a corresponding Removed properties section in the Migration page ?
3. Creatin Unit tests with [Fact] attribute, only the .received.razor.html files were generated (not the .verified.razor.html). Is that the expected behaviour?

1. I think these attributes could be removed from the new component.
2. But to keep a compatibility, you could create another partial class in the Migration folder with these 3 parameters flagged as Obsolete and include it in the component: updat the Label property with CheckedMessage or UncheckedMessage if the Label is initially null and if the LabelPosition is only After. You must document all of this on the Migration page.
3. Yes, that is the expected behavior: you need to create the .verified file. And it will be compared with the .received file. See the [documentation$https://github.com/microsoft/fluentui-blazor/blob/dev-v5/docs/unit-tests.md#fluentui-blazor-unit-tests)

Last "detail", in the PR description, can you include a summary of the component documentation (e.g. this PR #3267)?

[agriffard]

Indeed. You need to find why. 😀

Same behaviour with 3 Checkboxes bound to @value1 (Only two components are enough to show this de-synchronization effect).

The html of all components is corresponding to the state of the @value1 (checked added or removed) but the components are not rendered accordingly.

[agriffard]

1. I think these attributes could be removed from the new component.
2. But to keep a compatibility, you could create another partial class in the Migration folder with these 3 parameters flagged as Obsolete and include it in the component: updat the Label property with CheckedMessage or UncheckedMessage if the Label is initially null and if the LabelPosition is only After. You must document all of this on the Migration page.

[Obsolete] properties added in partial class and FluentSwitch added to Migration.

I could use something like this in the field for the Label:
Label="@(!string.IsNullOrEmpty(CheckedMessage) && CurrentValue ? CheckedMessage : (!string.IsNullOrEmpty(UncheckedMessage) && !CurrentValue ? UncheckedMessage : Label))"
but as the Properties are Obsolete, it doesn't compile when I use them.

[dvoituron]

Have you checked that the ReadOnly parameter blocks the use of the mouse and keyboard?

I think you need to apply this CSS style (on the “field” element and not on the “switch” element):

fluent-field:has(fluent-switch[readonly]) {
  pointer-events: none;
}

And to block the keyboard, you need to set the tabindex on the fluent-switch (like done) but also on the FluentField component. If not, using Tab the user can navigate to the component and press Space

[agriffard]

Ok, css added for readonly and tabIndex on FluentField.

[dvoituron]

Can you replace with

The ChildContent property has been removed. Use Label parameter instead.

[agriffard]

Ok, documentation for migration updated.

[dvoituron]

A few days ago, we added a new GetValueIfNoAdditionalAttribute extension method to simplify this “feature”. Can you use code like this?

tabindex="@AdditionalAttributes.GetValueIfNoAdditionalAttribute("tabindex", "-1", when: () => ReadOnly)"

[agriffard]

Ok, AdditionalAttributes.GetValueIfNoAdditionalAttribute used for tabindex.

[dvoituron]

Can you uncomment these Obsolete attribute?

[agriffard]

If there is an [Obsolete], it doesn't compile anymore, with this message:

'FluentSwitch.UncheckedMessage' is obsolete: 'This property is not supported anymore and will be removed in a future release.'

[dvoituron]

You need to add a pragma condition. We already used this in the code.

[agriffard]

Ok, thank you, Obsolete uncommented.

[dvoituron]

The Obsolete attributes (ChildContent, CheckedMessage and UncheckedMessage) must be unit tested.

You can run the file _StartCodeCoverage.cmd to validate if all code lines a covered.

[agriffard]

Ok, Tests added for ChildContent, CheckedMessage and UncheckedMessage.

[agriffard]

More tests added and _StartCodeCoverage.cmd run. 100% on branch coverage and a bit like FluentCheckBox on Line coverage.

[dvoituron]

This test can be omitted: you'll already be testing this position on the next next.

[agriffard]

Ok, FluentCheckbox_LabelPosition single test removed.

[dvoituron]

You don't test the LabelTemplate but the Label parameter.
(but this test in already include in FluentField tests)

[agriffard]

Ok, FluentCheckbox_LabelTemplate Test done properly.