v1.4.0 - Demo site / Build Errors #184

JeepNL · 2022-05-07T09:06:41Z

JeepNL
May 7, 2022

There isn't a demo site running anymore? See New demo sites setup #97 and (PR) (feature) Design tokens #142
.
I'm trying to build the Fast-Blazor WASM examples but I'm getting build errors (ASP.NET Core 6.0.4 and 7 prev. 3) on the fast-blazor-main\examples\FluentUI.Demo.Shared project

Microsoft (R) Build Engine version 17.2.0-preview-22175-02+058a0262c for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  Restored C:\Users\jdkra\Downloads\fast-blazor-main\examples\FluentUI.Demo.Shared\FluentUI.Demo.Shared.csproj (in 280 ms).
  You are using a preview version of .NET. See: https://aka.ms/dotnet-support-policy
  The given key 'Common.GloballyQualifiedTypeName' was not present in the dictionary.
     at System.Collections.Generic.Dictionary`2.get_Item(TKey key)
     at Microsoft.AspNetCore.Razor.Language.Components.ComponentGenericTypePass.Visitor.RewriteTypeNames(TypeNameRewriter rewriter, ComponentIntermediateNode node, Nullable`1 hasT
  ypeArgumentSpecified, IDictionary`2 bindings)
     at Microsoft.AspNetCore.Razor.Language.Components.ComponentGenericTypePass.Visitor.Process(ComponentIntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Components.ComponentGenericTypePass.Visitor.VisitComponent(ComponentIntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.Intermediate.IntermediateNodeWalker.VisitDefault(IntermediateNode node)
     at Microsoft.AspNetCore.Razor.Language.DefaultRazorOptimizationPhase.ExecuteCore(RazorCodeDocument codeDocument)
     at Microsoft.AspNetCore.Razor.Language.DefaultRazorEngine.Process(RazorCodeDocument document)
     at Microsoft.AspNetCore.Razor.Language.RazorProjectEngine.Process(RazorProjectItem projectItem)
     at Microsoft.NET.Sdk.Razor.Tool.GenerateCommand.<>c__DisplayClass55_0.<GenerateCode>b__0(Int32 i)
     at System.Threading.Tasks.Parallel.<>c__DisplayClass19_0`1.<ForWorker>b__1(RangeWorker& currentWorker, Int32 timeout, Boolean& replicationDelegateYieldedBeforeCompletion)
  --- End of stack trace from previous location ---
     at System.Threading.Tasks.Parallel.<>c__DisplayClass19_0`1.<ForWorker>b__1(RangeWorker& currentWorker, Int32 timeout, Boolean& replicationDelegateYieldedBeforeCompletion)
     at System.Threading.Tasks.TaskReplicator.Replica.Execute()
C:\Program Files\dotnet\sdk\7.0.100-preview.3.22179.4\Sdks\Microsoft.NET.Sdk.Razor\targets\Microsoft.NET.Sdk.Razor.CodeGeneration.targets(150,5): error : rzc generate exited with
code 1. [C:\Users\jdkra\Downloads\fast-blazor-main\examples\FluentUI.Demo.Shared\FluentUI.Demo.Shared.csproj]

vnbaaij · 2022-05-07T10:30:43Z

vnbaaij
May 7, 2022
Maintainer

The demo is still there. You can find it at https://brave-cliff-0c0c93310.azurestaticapps.net/. The one you were referring to is part of the GitHub workflow where an Azure Static Web app is setup automatically to test a PR (hence the 142 in the URL, the number of the PR). It gets deleted once the PR is closed/merged.
We have not done any testing yet with .NET 7. I'll try and have a look next week.

0 replies

JeepNL · 2022-05-09T09:25:59Z

JeepNL
May 9, 2022
Author

@vnbaaij Thank you for quick reply, even if it was on the weekend! (EDIT: especially because it was on the weekend! 😉)

About the online demo: I couldn't find a link anywhere here, it's not in the README.md, the only reference to it is in your answer here, see: https://github.com/microsoft/fast-blazor/search?q=https%3A%2F%2Fbrave-cliff-0c0c93310.azurestaticapps.net%2F&type=issues.

The PR link (142) I referred to was the second link I mentioned because I know when the PR was still active it worked and I could see the Icon Page which you mentioned in this tweet

I spent my weekend trying out Fast-Blazor (trying new things out is what I love to do, so it was a weekend well spent, I learned a couple of new things) and I ran into several problems with Fast-Blazor Components.

TL;DR; I don't think I can use it at the moment, there are too many things I don't understand, can't figure out.

FYI (1): At Using Design Tokens from C# code (preferable option) ref1 & ref3 are FluentAnchor and ref2 and ref4 are FluentButton but in the code above that there's only <FluentButton ...,

FYI (2) In the Demo Website at menu option 'Card' when you first load it, look at the fill color of the second card (Dark, second from top). Now switch the 'Light Dark Switch' twice, and see what happens. This is something I ran into quite a lot in my code trying to use different colors. This happens also at Card 4 (Tinted neutral, dark). If you look at Card 5 (Custom card background color) and 6 (Accent and neutral color by DSP) the text color in the fist/top button is almost unreadable. I tried to change to text color in dark mode, but I couldn't figure out how to.

FYI (3) Clicking on the Demo Website Number Field menu option gives an error.

When I start a new Blazor WASM project there are two things (actually 3), important to me: Mobile First, and a Light/Dark theme (the 3rd is privacy friendly). So that's where I start when using a new component library.

I'd like to adjust some colors and searching the Fast documentation I found the Fast Color Explorer, it's a great interactive page, and I think it looks really nice, so I tried to use different base colors than the default white/dark grey colors. But I didn't succeed, I think I need more info on how to use not only AccentBaseColor but also on (injecting, preferred code option 1) NeutralBaseColor & FillColor and maybe more.

I also ran into this issue about CSS Isolation and although I could made it to work, some things aren't clear to me.

I know I mention 'things that do not work as expected' and 'are not clear' to me a lot, and I could share my code I used in my project, but to make it all clear I think I need to spend a couple of hours extra on this issue. I'm Dutch, so I need more time to express myself in English.

I really would like to use Fast-Blazor but for me to be able to use it I need more sample code. I don't need it now, or tomorrow (or next month), I know you all are very busy and working hard on Fast-Blazor Components and I think the promise is great and it has a lot of potential. I also really like that is pretty small in size compared to other Blazor component libraries. I'm developing Blazor WASM apps only, so size does matter to me: as small as possible :).

0 replies

JeepNL · 2022-05-09T09:53:31Z

JeepNL
May 9, 2022
Author

Maybe this 'issue' should be moved to Discussions?

0 replies

vnbaaij · 2022-05-09T10:29:11Z

vnbaaij
May 9, 2022
Maintainer

Good plan. I will do that

0 replies

vnbaaij · 2022-05-11T09:16:51Z

vnbaaij
May 11, 2022
Maintainer

The reason we are not publishing/promoting the demo site is we don't feel it is ready yet. Yes, it will show you basic usage, but it does not have code samples etc. Once we are done, it will be made available with a more friendly URL.

On FYI (1): The FluentAnchor references were a leftover for earlier. There should only be FluentButton references. I've corrected this in the README

1 reply

JeepNL May 11, 2022
Author

Ah, okay, I see. That makes sense (demo site)

JeepNL · 2022-05-11T11:15:21Z

JeepNL
May 11, 2022
Author

About Blazor CSS Isolation.

This is just FYI and it's possible that 'm doing something completely wrong. I just stumbled on this and I couldn't figure out why

With FluentCard I needed to put some properties in the style= argument and use an extra <div> inside the component to display it as I wanted. I expected I could just put them all in the reference class=footercontent, but that doesn't work.

Blazor Component. Access it from any .razor page with <Footer />

Footer.razor

<p>Paragraph just for testing 'margin-top' below</p>

<FluentCard class="footercontent" style="margin-top:2rem;margin-bottom:1rem;max-width:720px;">
    <div>
        Footer Component Content with <a href="">href</a>
    </div>
</FluentCard>

<p>Paragraph just for testing 'margin-bottom' above</p>

Footer.razor.css

.footercontent {
}

.footercontent div {
    padding: .5rem;
    font-family: monospace;
    font-size: 75%;
    line-height: 150%;
	color: dimgray;
}

.footercontent a {
    color: orangered;
}

    .footercontent a:hover {
        color: orange;
    }

I expected it to work as below:

(without the div element)

Footer.razor

<p>Paragraph just for testing 'margin-top' below</p>

<FluentCard class="footercontent">
        Footer Component Content with <a href="">href</a>
</FluentCard>

<p>Paragraph just for testing 'margin-bottom' above</p>

Footer.razor.css

.footercontent {
    margin-top: 2rem;
    margin-bottom: 1rem
    ;max-width: 720px;
    padding: .5rem;
    font-family: monospace;
    font-size: 75%;
    line-height: 150%;
    color: dimgray;
}

.footercontent a {
    color: orangered;
}

    .footercontent a:hover {
        color: orange;
    }

4 replies

vnbaaij May 11, 2022
Maintainer

Did you try to use the ::deep pseudo-element? (see https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation)

JeepNL May 11, 2022
Author

Yes, I did try ::deep as well at several places (beginning / EOL), but If I understand correctly the pseudo-element is for child components, in this case child components of Footer.razor, and it has none.

JeepNL May 11, 2022
Author

fyi: I've read this issue too (css isolation): #125

JeepNL May 11, 2022
Author

The strange thing with the example above: look at the top: .footercontent { } is empty, anything I put there has no effect. But at the bottom:

.footercontent a {
    color: orangered;
}

    .footercontent a:hover {
        color: orange;
    }

does work on the <FluentCard class="footercontent" ...> element itself (without the <div> inside it).

vnbaaij · 2022-05-11T13:41:07Z

vnbaaij
May 11, 2022
Maintainer

FYI (3) is fixed now!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v1.4.0 - Demo site / Build Errors #184

{{title}}

Replies: 7 comments 5 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

v1.4.0 - Demo site / Build Errors #184

JeepNL May 7, 2022

Replies: 7 comments · 5 replies

vnbaaij May 7, 2022 Maintainer

JeepNL May 9, 2022 Author

JeepNL May 9, 2022 Author

vnbaaij May 9, 2022 Maintainer

vnbaaij May 11, 2022 Maintainer

JeepNL May 11, 2022 Author

JeepNL May 11, 2022 Author

About Blazor CSS Isolation.

I expected it to work as below:

vnbaaij May 11, 2022 Maintainer

JeepNL May 11, 2022 Author

JeepNL May 11, 2022 Author

JeepNL May 11, 2022 Author

vnbaaij May 11, 2022 Maintainer

JeepNL
May 7, 2022

Replies: 7 comments 5 replies

vnbaaij
May 7, 2022
Maintainer

JeepNL
May 9, 2022
Author

JeepNL
May 9, 2022
Author

vnbaaij
May 9, 2022
Maintainer

vnbaaij
May 11, 2022
Maintainer

JeepNL May 11, 2022
Author

JeepNL
May 11, 2022
Author

vnbaaij May 11, 2022
Maintainer

JeepNL May 11, 2022
Author

JeepNL May 11, 2022
Author

JeepNL May 11, 2022
Author

vnbaaij
May 11, 2022
Maintainer