FluentCard work

[vnbaaij]

• FluentCard: Add Width/Height. Update docs/samples
• FluentFooter: remove width from style
• Update WhatsNew

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-895.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-pebble-0dc79cb03-895.westeurope.3.azurestaticapps.net

[ApacheTech]

This change should probably be considered a breaking change. It adds CSS code at a very high specificity, which overrides classes added to the card.

https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Card/FluentCard.razor.css

This CSS resolves to:

fluent-card[b-6epdlk0xtt]  {
    padding: calc(var(--design-unit) * 5px);
}

Which is a much higher specificity than the classes added via the component's Class attribute, short of using !important. Using Tailwind by way of example:

@* This still has prominent padding. *@
<FluentCard Class="p-0">Hello World</FluentCard>

@* Only with the !important override does the padding get removed. *@
<FluentCard Class="!p-0">Hello World</FluentCard>

If placed within global scope, rather than in a CSS module, these styles would be overridable naturally within the cascade.

[vnbaaij]

We want/need a Card to look good without the developer doing anything to achieve that. We add this padding on purpose to adhere to the Fluent Design system.
If a developenr needs/wants that to be overridden and needs to use !important to achieve that, I don't see that as an issue.

[ApacheTech]

I would agree with you, if this style was set at a global level.

With a global style, every FluentCard would inherit that standardised baseline style, and developers can override that style, using the standard CSS cascade, the way it is intended to be used.

With CSS modules, each FluentCard is set its own very specific style, rather than inheriting a global style. This breaks the cascade, and is now only overridable once, by way of !important.

This means developers cannot create their own standard, overridable baselines for components, and it reduces their re-usability as Blazor components.

It also breaks existing sites, and is not documented as doing so. FluentCards are used ubiquitously, for many purposes. They are probably one of the most commonly used components within FluenUI. A drastic, breaking change such as this should be, at the very least, documented as such. For what it's worth, I agree that a default padding is required for the cards. I just disagree with the specificity of the style.