fix(callout): default callout size

[shajz]

Description

Callout says it defaults to 'M' but it doesn't.

---

[LuccaIntegration]

:woman_cook: https://lucca-front.lucca.tech/PR-2779/storybook

[CCNET-iLucca]

Tests d'interfaces

[Supamiu]

While the size doesn't explicitly default to 'M', it technically does, and shouldn't be enforced explicitly.

Imagine something like a larger LF component which also has sizing, using lu-callout internally, a quick structure could be:

<div class="something-component">
...content
<lu-callout></lu-callout>
</div>

And in SCSS:

.something-component {
 .callout {
    @include S;
 }
}

Having an explicit default size would render this impossible because having a size = 'M' means we'd have the mod-M class on the callout which would force the size dans make SCSS size manipulation impossible.

Ping @vvalentin-lucca for more details if needed.

[shajz]

I don't understand how this is supposed to work. There's a mod-{{size}} class on the component, so if size is undefined, the resulting class is mod-? Shouldn't we use [ngClass] then?

[vvalentin-lucca]

By default, the size of components is set to M, but this is not explicit, allowing you to inherit a size set higher by an enclosing component.

• So if a button (default size M) is in a callout of size S, it will automatically change to size S.
• Inversely, a button explicitly set to size M, even in a callout of size S, will remain in size M.

[Supamiu]

We should indeed use [ngClass] to avoid having mod-undefined

[jeremie-lucca]

The way mod classes are managed in Angular components has been improved lately here: https://github.com/LuccaSA/lucca-front/pull/2984

And indeed, mod-M shouldn't be applied by default on components, as it would increase the specificity, leading to break nested components, as described here: https://github.com/LuccaSA/lucca-front/pull/2779#issuecomment-2107011964

I'm closing the issue ✌️