KCardGrid part 3: Add advanced grid configuration and loading skeletons

[MisRob]

Description

Adds new features to KCardGrid:

• Option to override base layouts partially or completely via the new prop layoutOverride
• Loading skeletons and a way to configure them via the new prop skeletonsConfig
  • New development-only debug prop to help with skeletons configuration

These APIs were previously discussed and agreed on during the beta stage.

See commit messages for details.

Changelog

• Description: Adds an option to override KCardGrid base layouts partially or completely via the new prop layoutOverride

• Products impact: new API

• Addresses: Allows advanced grids customization

• Components: KCardGrid

• Breaking: no

• Impacts a11y: no

• Guidance: -

• Description: Adds loading skeletons to KCardGrid and a way to configure them via the new prop skeletonsConfig

• Products impact: new API

• Addresses: Ensures smooth loading experience

• Components: KCardGrid

• Breaking: no

• Impacts a11y: no

• Guidance: -

Steps to test

• Read new documentation sections for the two new features and preview live examples
  • https://deploy-preview-796--kolibri-design-system.netlify.app/kcardgrid/#layout-customization
  • https://deploy-preview-796--kolibri-design-system.netlify.app/kcardgrid/#loading-state

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 - will do as follow-up
• 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

Comments

I got stuck on some issues with mocking composables in KDS that prevented me from completing unit tests. This is being discussed and I plan to follow-up later, together with some other maintenance tasks I am going to do.

[MisRob]

For code reviewers, I don't think you need to review the large diff on documentation pages - rather just preview the generated documentation. One of the maintenance tasks I am planning to do in a follow-up PR is to break doc pages and examples to sub-components internally so it's easier to updated in the future.

[MisRob]

Linking feedback from designers - Slack thread

[rtibbles]

Main question is just about the form of the layout overrides.

[MisRob]

Latest updates

• Resolves feedback from designers regarding the loading state timing, loading skeletons count, and border radius fix (Slack thread).
• Updates the "Loading state" documentation section accordingly and adds ways to preview the loading state timing optimizations
• Simplifies examples and documentation of the skeletonsConfig
• Opened follow-ups
  • Optimize KCardGrid's internal usage of watchers #801
  • Improve unit test coverage of KCardGrid and KCard #802

I think this is all I could complete here at this point. We still need to decide on #796 (comment) - I will leave to @rtibbles's consideration whether it's blocking or if it can be addressed as a follow-up if we figure out some changes are needed.

[rtibbles]

I don't think my comments here are blocking - I think by using the grid and skeletons in practice, we may discover that there are some sensible defaults we end up using, and the more advanced props format doesn't matter as much as it is rarely used - or we come up with a brainwave of a better way.

[MisRob]

All is ready from my side @rtibbles

[rtibbles]

I say we merge this, get it into an RC and take the API for a few practice laps!