(feature) Design tokens

[vnbaaij]

Pull Request

📖 Description

This PR enables working with DesignTokens from the c# side

🎫 Issues

114

👩‍💻 Reviewer Notes

A DesignTokens class which exposes all the predefined tokens as properties has been added. All the token names have been defined as public c# const in the DesignTokenNames class.

In Progam.cs you add builder.Services.AddFluentUIComponents(). This is an extension method that adds the new DesignTokens 'service' to the DI container. This is also being leveraged for adding the IconService for the FluentIcon implementation.

When needed you can inject the DesignTokens instance and call the DesignToken methods (SetValueFor, GetValueFor, DeleteValueFor and WithDefaults) on an ElementReference , i.e

public partial class Index
{
    [Inject]
    private DesignTokens DesignTokens { get; set; } = default!;

    private FluentAnchor ref1 = default!;
    private FluentAnchor ref2 = default!;
    private FluentAnchor ref3 = default!;
    private FluentButton ref4 = default!;

    private int? theValueBeforeDelete;
    private int? theValueAfterDelete;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Use Dark mode for this button
            await DesignTokens.BaseLayerLuminance.SetValueFor(ref1.Element, 0);

            //Enabling this line below will generate an error because no default is set
            //await DesignTokens.BaseHeightMultiplier.SetValueFor(ref2.Element);

            //Make this button bigger
            await DesignTokens.BaseHeightMultiplier.WithDefault(25).SetValueFor(ref3.Element);

            theValueBeforeDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element);

            //Make this button huge 
            await DesignTokens.BaseHeightMultiplier.SetValueFor(ref4.Element, 52);

            //ToDo: Create your own DesingToken 
            //DesignToken<string> specialColor = new(jsRuntime!, "specialColor");
            //await specialColor.SetValueFor(ref3.Element, "#FF0000");
            StateHasChanged();
        }
    }

    public async Task OnClick()
    {
        await DesignTokens.BaseHeightMultiplier.DeleteValueFor(ref4.Element);

        theValueAfterDelete = await DesignTokens.BaseHeightMultiplier.GetValueFor(ref4.Element);
    }
}

for this index.razor file

@page "/"

<PageTitle>FluentUI WC home page</PageTitle>

<h1>Blazor Fluent UI Web Components home page!</h1>

<FluentAnchor @ref="ref1" Appearance="Appearance.Filled" Href="handlers" >Web components handlers</FluentAnchor>
<FluentAnchor @ref="ref2" Appearance="Appearance.Filled" Href="bindings" >Web components bindings</FluentAnchor>
<FluentAnchor @ref="ref3" Appearance="Appearance.Filled" Href="componentbindings" >Blazor component bindings</FluentAnchor>
<FluentButton @ref="ref4" Appearance="Appearance.Filled" @onclick=OnClick>FluentButton</FluentButton>

<p>
The value before calling Delete: @theValueBeforeDelete
The value after calling Delete: @theValueAfterDelete
</p>

✅ Checklist

General

• [X] I have added tests for my changes.
• [X] I have tested my changes.
• [ ] I have updated the project documentation to reflect my changes.
• [X] I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

TBD

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[EisenbergEffect]

Unfortunately, we aren't able to prioritize the JavaScript side of this work right now. Not sure if @javiercn has time to review the questions/concerns above.

[javiercn]

@EisenbergEffect I'm a bit overloaded with other work, but I'll try to get some time next week to look at it in more detail.

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[EisenbergEffect]

@vnbaaij Let's use this PR as an opportunity to start the collaboration with @williamw2. After you both have reviewed it, I think it's fine to merge and make a new release.

[vnbaaij]

@EisenbergEffect Totally agree!

This is much nicer with the new script integration! For the future, let's try to keep PRs a bit more focused though. This PR has a bunch of refactoring that doesn't appear to be related to the DesignToken work. Next time, let's split that into its own PR.

Totally agree. I got a bit caried away with reorganizing things that should not have been done here.

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net

[vnbaaij]

Fix #114