Update kdropdown menu api

[marcellamaki]

Description

This PR changes the KDropdownMenu API by addressing the issue that KDropdownMenu also contained a button. Now, KDropdownMenu is only the popover elements

Issue addressed

Addresses #164
Does a better job fixing #136 (which caused a regression with my last fix).
Fix the regression where the additional options for the button (previously in a <slot/> in KDropdownMenu is no longer working, as you can see in the documentation

Before/after screenshots

There are no visual changes to the UI (I hope!)

Steps to test

I will open a corresponding kolibri PR that points to this commit next week with instructions for testing.

(optional) Implementation notes

At a high level, how did you implement this?

The makes KDropdownMenu a slot for KButton (or KIconButton) rather than responsible for also creating the button.

Does this introduce any tech-debt items?

Doing this would require some (fairly straightforward) remediation following a KDS version bump in Kolibri (11 instances of component are used) and KDP (5 instances of component). None in Studio.

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 has been added to the changelog

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

Post-merge updates and tracking

• Learning Platform update PR is submitted
• Learning Platform update PR is merged
• Studio update PR is submitted
• Studio update PR is merged
• Data Portal update PR is submitted
• Data Portal update PR is merged

Comments

[MisRob]

@marcellamaki Thank you. Marcella, could you please make sure to fix the linter check? There are some prettier issues with spacing that make previewing changes difficult so it'd be helpful for review.

[marcellamaki]

Yes - I will do this today. Thanks for pointing this out @MisRob, I'd missed it, and it definitely makes the diff seem much larger than it is!

[marcellamaki]

The corresponding PR in Kolibri

[MisRob]

Thank you, @marcellamaki, we reviewed the code together with @akolson, and overall it's looking good. There were a couple of places where we asked some questions, and it's possible that no updates will be required there, only clarification.

Also, one more general question regarding the PR description, what did you mean by "Fix the regression where the additional options for the button (previously in a in KDropdownMenu is no longer working, as you can see in the documentation"?

Before merging though, we'll need to make sure that the changelog and documentation are updated to reflect API updates for all KButton, KIconButton, and KDropdownMenu. This may not be a full list, just a pointer to a couple of places I noticed:

1. Nothing shows up in the Dropdowns section of the Buttons and links page and the section text is obsolete (https://deploy-preview-346--kolibri-design-system.netlify.app/buttons#dropdowns)

2. The Overview section on the KDropdownMenu page is obsolete (https://deploy-preview-346--kolibri-design-system.netlify.app/kdropdownmenu)

3. menu slot needs to be documented on KButton and KIconButton pages (https://deploy-preview-346--kolibri-design-system.netlify.app/kiconbutton/#slots)

4. I'd suggest mentioning how KButton, KIconButton, and KDropdownMenu can be used together including a code example, ideally. This could be, for example, done on the KDropdownMenu page and linked to from KButton and KIconButton pages. Or in any other way. The goal of this feedback is to make sure that everyone can understand easily how to use these components together.

[MisRob]

This also fixes #67

[marcellamaki]

"Fix the regression where the additional options for the button (previously in a in KDropdownMenu is no longer working, as you can see in the documentation"

@MisRob and @akolson - what I am referencing (not very clearly) is this part of the documentation on "Buttons" where you can see:

This button "ICON DROPDOWN" should actually be looking like an options menu icon ( ··· ), but due to the regression I introduced last year, it broke entirely and I failed to notice (it seems only in the documentation? I don't know of any places in kolibri where there were regressions, or at least don't recall any reports of regressions... but it is possible we missed it).

[MisRob]

@marcellamaki I see, okay, thank you

[MisRob]

As @marcellamaki is on vacation, instead of posting feedback on the newest changes, I rebased on top of the latest develop and pushed two small fixes of changelog and documentation before merging.