(feature) Design tokens #142

vnbaaij · 2021-12-10T15:24:55Z

Pull Request

📖 Description

This PR enables working with DesignTokens from the c# side

🎫 Issues

👩‍💻 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

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

⏭ Next Steps

TBD

Clean up DesignToken

-Move ChildContent and AdditionalAttributes to FluentComponentBase -Remove empty code behind files

-Housekeeping (fix compiler warnings)

…tion at start up (with added extension method).

github-actions · 2021-12-10T15:27:58Z

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

github-actions · 2021-12-10T16:58:21Z

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

github-actions · 2021-12-10T17:22:42Z

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

examples/FluentUI.Demo.Client/Program.cs

src/Microsoft.Fast.Components.FluentUI/DesignToken.cs

src/Microsoft.Fast.Components.FluentUI/DesignTokens.cs

src/Microsoft.Fast.Components.FluentUI/wwwroot/DesignTokenInterop.js

… design-tokens

github-actions · 2022-01-03T14:30:02Z

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

github-actions · 2022-02-15T10:28:36Z

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

EisenbergEffect · 2022-04-19T14:42:51Z

@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 · 2022-04-19T14:45:49Z

@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.

Add ControlCornerRadius example

Replase fdsp in ToolbarPage Add missing FillColor design token

Add parameterless constructor to all design tokens

github-actions · 2022-04-21T22:17:54Z

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

github-actions · 2022-04-22T15:15:52Z

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

github-actions · 2022-04-22T16:35:12Z

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

github-actions · 2022-04-25T11:26:08Z

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

README.md

bheston · 2022-04-25T17:01:51Z

examples/FluentUI.Demo.Shared/Pages/CardPage.razor

+    .state-override {
+        --card-width: 350px;
+        --card-height: 300px;
+        --elevation: 6;


Setting --elevation used to be the way the card got its shadow, but this has been replaced with direct tokens like elevationShadowCardRest.

Where is elevationShadowCardRest defined? I've only looked at DesignTokens.ts for which tokens to generate.

examples/FluentUI.Demo.Shared/Pages/ToolbarPage.razor

src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenConstants.cs

src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs

src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs

github-actions · 2022-04-25T19:34:51Z

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

Update README

… design-tokens

github-actions · 2022-04-26T14:42:30Z

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

vnbaaij · 2022-04-26T18:46:49Z

Fix #114

vnbaaij added 15 commits December 1, 2021 13:04

Initial design token work

11bd47c

housekeeping

2964474

wip

1a5f226

merge refactor branch in

1b58978

wip

c1746cc

Sort of working...

a912ebe

Merge branch 'main' into design-tokens

f27e12b

Works with ElementReference now as well

6117051

Add FluentComponentBase

fec43e6

Clean up DesignToken

-Let all components inhert from FluentComponentBase

8b0b988

-Move ChildContent and AdditionalAttributes to FluentComponentBase -Remove empty code behind files

-Add @ref to all components

b979c9e

-Housekeeping (fix compiler warnings)

Implement GetValueFor, DeleteValueFor and WithDefault

16c4e1d

Add StandardDesignTokens

f25326b

Remove BaseWidthModifier

f7f4010

Add predifined tokens wrapper. Needs to be added to the ServiceCollec…

43e672c

…tion at start up (with added extension method).

EisenbergEffect requested review from EisenbergEffect, awentzel and nicholasrice December 10, 2021 15:39

Some refinements

ac8669b

Merge branch 'main' into design-tokens

1803698

EisenbergEffect suggested changes Dec 10, 2021

View reviewed changes

vnbaaij added 2 commits January 3, 2022 15:26

Split out design token names to separate class

034e7fb

Merge branch 'design-tokens' of github.com:microsoft/fast-blazor into…

2f4c6df

… design-tokens

vnbaaij mentioned this pull request Jan 4, 2022

(feature) Project templates #145

Merged

4 tasks

Merge branch 'main' into design-tokens

3adfc79

vnbaaij added 7 commits April 19, 2022 21:19

Move to class per design token

1d872ed

Add ControlCornerRadius example

Replace fdsp with plain div in NavMenu

b50b71d

Replase fdsp in ToolbarPage Add missing FillColor design token

Make DesignToken a component so it can be used from .razor as well

e1ac1a3

Add parameterless constructor to all design tokens

Fix creating wrong design token classes and constants

9f2553f

Moved all the design token creation to a Source Generator

f7786a9

Add missing fdsp attribute

f9a4763

Include all design tokens in generation process

ad197b7

Merge branch 'main' into design-tokens

f517c50

vnbaaij removed the request for review from nicholasrice April 22, 2022 15:12

Update README

cbc6242

README changes

289ded0

bheston approved these changes Apr 25, 2022

View reviewed changes

williamw2 approved these changes Apr 25, 2022

View reviewed changes

src/Microsoft.Fast.Components.FluentUI/DesignTokens/DesignToken.razor.cs Show resolved Hide resolved

src/Microsoft.Fast.Components.FluentUI.Generators/DesignTokenGenerator.cs Show resolved Hide resolved

vnbaaij added 3 commits April 25, 2022 21:16

Changes based on PR comments

ede9de8

More PR comments changes

4c67832

Merge branch 'main' into design-tokens

82b8602

vnbaaij added 2 commits April 26, 2022 16:38

Make color-handling Design Tokens work.

05d190b

Update README

Merge branch 'design-tokens' of github.com:microsoft/fast-blazor into…

a290630

… design-tokens

vnbaaij merged commit a969e3c into main Apr 26, 2022

vnbaaij deleted the design-tokens branch April 26, 2022 18:45

JeepNL mentioned this pull request May 7, 2022

v1.4.0 - Demo site / Build Errors #183

Closed

(feature) Design tokens #142

(feature) Design tokens #142

Uh oh!

Conversation

vnbaaij commented Dec 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request

📖 Description

🎫 Issues

👩‍💻 Reviewer Notes

✅ Checklist

General

⏭ Next Steps

Uh oh!

github-actions bot commented Dec 10, 2021

Uh oh!

github-actions bot commented Dec 10, 2021

Uh oh!

github-actions bot commented Dec 10, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 3, 2022

Uh oh!

github-actions bot commented Feb 15, 2022

Uh oh!

EisenbergEffect commented Apr 19, 2022

Uh oh!

vnbaaij commented Apr 19, 2022

Uh oh!

github-actions bot commented Apr 21, 2022

Uh oh!

github-actions bot commented Apr 22, 2022

Uh oh!

github-actions bot commented Apr 22, 2022

Uh oh!

github-actions bot commented Apr 25, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bheston Apr 25, 2022

Choose a reason for hiding this comment

Uh oh!

vnbaaij Apr 25, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 25, 2022

Uh oh!

github-actions bot commented Apr 26, 2022

Uh oh!

vnbaaij commented Apr 26, 2022

Uh oh!

Uh oh!

vnbaaij commented Dec 10, 2021 •

edited

Loading