KCardGrid: Part 1 - Prepare KCard + few bugfixes and a visual spacing update

[MisRob]

Note that I worked from @AllanOXDi's #752 branch which hasn't been merged yet so the diff is visible in this PR. Please ignore @AllanOXDi's commits here. I will rebase as soon as #752 is merged.

Description

This is a first part of work that was proposed and discussed in #748.

• Merges KCard and BaseCard to unblock several issues for the upcoming features regarding the addition of checkboxes and KCardGrid
• Prepares KCard structure and style for the aforementioned features
• Contains few bug fixes and docstrings improvements

See commit messages for details.

References

Closes #773

Changelog

• Description: Merges KCard and BaseCard

• Products impact: none

• Addresses: Unblocks several issues for the upcoming features regarding the addition of checkboxes and KCardGrid

• Components: KCard

• Breaking: no

• Impacts a11y: -

• Guidance: -

• Description: Updates KCard internal structure and style

• Products impact: This introduces temporary regressions in KCard related to removing its control of its height that will instead be controlled by KCardGrid. However, KCard is required to be always used within KCardGrid anyways so ultimately this will be of no real impact. Will be completed by KCardGrid soon.

• Addresses: Prepares KCard for the upcoming features regarding the addition of checkboxes and KCardGrid

• Components: KCard

• Breaking: no

• Impacts a11y: -

• Guidance: -

• Description: Fixes the thumbnail overflowing in the horizontal layout with small thumbnail and aligns this layout more closely to the designs.

• Products impact: bugfix

• Addresses: Make the KCard thumbnail handle large Card width #773

• Components: KCard

• Breaking: no

• Impacts a11y: -

• Guidance: -

• Description: Fix click.stop not working on interactive elements rendered within the card via its slots.

• Products impact: bugfix

• Addresses: -

• Components: KCard

• Breaking: no

• Impacts a11y: -

• Guidance: -

• Description: Aligns padding to the designs

• Products impact: Visual update

• Addresses: -

• Components: KCard

• Breaking: no

• Impacts a11y: -

• Guidance: -

Steps to test

• As this move was already discussed and agreed on, in this PR we would want to focus on catching any unexpected major regressions, particularly in the markup structure or layout. See the playground page.

• Note that this introduces temporary regressions in KCard related to removing its control of its height (elements overflowing the card area, cards not having consistent height) that will instead be controlled by KCardGrid. This is deliberate step that will be completed by KCardGrid soon. It shouldn't cause any issues since KCard shouldn't be used without KCardGrid and consumers are instructed to link to [BETA] Card grid and checkboxes #748 before all that work is transitioned to develop.

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

[AllanOXDi]

Hi @MisRob thanks for the wonderful work here. I am leaving few questions or comments here.

[AllanOXDi]

I am not sure if we could keep cards to uniform sizes of the card in this PR regardless whether the slots/ thumbnail is provided. I feel like something changed along the way

[MisRob]

Hi @AllanOXDi, ah yes that's right. Thank you. All these issues are addressed in the PR that comes after this one. All of them are the temporary regressions I meant in the "Steps to test" - I will be more specific next time. This is caused by removing the height control from KCard and transitioning it to KCardGrid that will control the row height :) You can preview how it will eventually look like in #748 playground - I'm just breaking it down to smaller PRs.

[MisRob]

I am adding

• A fix for @click.stop on interactive elements not working (Resource discovery: Implement folder and resource card kolibri#12418 (comment))
• Update of spaces to 16px as agreed with designers (Slack thread)

[AlexVelezLl]

This looks good to me! I think the merge of BaseCard and KCard has had a good and cleaner result. Just left 2 super minor things in docs wording now that you already did some changes there 😅. Thank you!

[MisRob]

. Just left 2 super minor things in docs wording now that you already did some changes there 😅.

No worries @AlexVelezLl, I welcome that. Will look into it :) Thank you.