update below title slot styling

[AllanOXDi]

Description

Issue addressed

Addresses #PR# HERE

Before/after screenshots

Changelog

[#688]

• Description: UpdateKCard styling
• Products impact: Card updates
• Addresses:
• Components: KCard
• Breaking: N0
• Impacts a11y: No
• Guidance:
  [update below title slot styling #688] update below title slot styling #688

Steps to test

1. Step 1
2. Step 2
3. ...

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

After review

• The changelog item has been pasted to the CHANGELOG.md

Comments

[MisRob]

Even though the major function of the placeholder background and this slot's content is to serve as placeholder when the thumbnail is not available at all, it also has the additional function to show at least something while the image is loading over it. I've tried to explain with the comment above on line 33.

Adding this condition would break this additional feature. I assume there was a situation where not having the condition caused some unexpected problems - could you elaborate what was the motivation for this change? Perhaps we can think of a solution that would still allow us to keep the progressive loading experience.

[AllanOXDi]

The motivation around this was to prevent the placeholder from showing when the thumbnailSrc is provided.

[AllanOXDi]

Actually - on a second thought . we actually don't need both. This will do v-if="$slots.thumbnailPlaceholder"

[MisRob]

was to prevent the placeholder from showing when the thumbnailSrc is provided

Ah okay, well we'd want to show it even in this case, if the slot is provided, for the reasons I mentioned above - to achieve something being displayed below the image when it's still loading, for example on slower networks

So if

This will do v-if="$slots.thumbnailPlaceholder"

is sufficient, let's just keep it that way.

[MisRob]

Good to go