Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Cannot instantiate a design token just using an example in documentation #3211

Closed
ABIOLI-COM opened this issue Jan 19, 2025 · 5 comments
Labels
status:needs-investigation Needs additional investigation

Comments

@ABIOLI-COM
Copy link

I'm just using the code copied from the Design Tokens page, trying to use one of them directly as a component in the page, like in:

    <BaseLayerLuminance Value="(float?)0.15">
        <FluentCard ParentReference="@context">
            <div class="contents">
                Dark
                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
            </div>
        </FluentCard>
    </BaseLayerLuminance>

The page already contains other fluent ui components, so everything should be set up correctly, but adding this code I receive this error:

[2025-01-19T11:35:10.983Z] Error: System.InvalidOperationException: Multiple constructors accepting all given argument types have been found in type 'Microsoft.FluentUI.AspNetCore.Components.DesignTokens.BaseLayerLuminance'. There should only be one applicable constructor.
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.TryFindMatchingConstructor(Type instanceType, Type[] argumentTypes, ConstructorInfo& matchingConstructor, Nullable`1[]& parameterMap)
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.FindApplicableConstructor(Type instanceType, Type[] argumentTypes, ConstructorInfoEx[] constructors, ConstructorInfo& matchingConstructor, Nullable`1[]& matchingParameterMap)
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.CreateFactoryInternal(Type instanceType, Type[] argumentTypes, ParameterExpression& provider, ParameterExpression& argumentArray, Expression& factoryExpressionBody)
   at Microsoft.Extensions.DependencyInjection.ActivatorUtilities.CreateFactory(Type instanceType, Type[] argumentTypes)
   at Microsoft.AspNetCore.Components.DefaultComponentActivator.GetObjectFactory(Type componentType)
   at Microsoft.AspNetCore.Components.DefaultComponentActivator.CreateInstance(Type componentType)
   at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType, IComponentRenderMode callerSpecifiedRenderMode, Nullable`1 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame[] frames, Int32 frameIndex, Int32 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

I cannot understand if there is something to be initialized, or what...
Thank you in advance.
AB

@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Jan 19, 2025
@vnbaaij vnbaaij added status:needs-investigation Needs additional investigation and removed triage New issue. Needs to be looked at labels Jan 19, 2025
@rpodevns
Copy link
Contributor

@ABIOLI-COM I don't encounter that error when I copy and paste the provided code. Can you share a repository or provide sample code that I can copy and paste to replicate the issue?

@vnbaaij
Copy link
Collaborator

vnbaaij commented Jan 21, 2025

I can repro it locally. But @ABIOLI-COM and I had a discussion this weekend. He concluded the library is not for him (yet). Still want to try to solve this though

@ABIOLI-COM
Copy link
Author

:-) ...but I still keep an eye here... I like most of the functionalities... ;-)

@vnbaaij
Copy link
Collaborator

vnbaaij commented Jan 21, 2025

I think the issue is caused by the source generator that creates the Design Token classes. Need to investigate a bit more (when I can find the time). This is one of the lesser used functionalities so it has a bit lower priority for me.

@vnbaaij
Copy link
Collaborator

vnbaaij commented Jan 22, 2025

I was able to fix the generator code so the reported error does not occur anymore.

Unfortunately, there is still something wrong with the BaseLayerLuminance token. Using it with the reproduction code does not make the card appear in dark theme.
Changing it to say the BodyFont token. shows that the token code is working now. Using:

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens

<BodyFont Value="Comic Sans MS">
    <FluentCard ParentReference="@context">
        Dark
        <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
        <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
        <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
        <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
    </FluentCard>
</BodyFont>

gives you:

Image

Fixed code will be in next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status:needs-investigation Needs additional investigation
Projects
None yet
Development

No branches or pull requests

3 participants