Skip to content

feat(GlDisclosureDropdown): wrap custom item content in `button` or `link`

Olena Horal-Koretska requested to merge Update-list-item-slot-behaviour into main

What does this MR do?

It wraps custom item content in button or link. Previously when the list-item slot was used, it wrapped content into styled spans but users had to render button or link themselves. Thus to overwrite those elements styles and set the tabindex. It proved to be a poor DevX. With this change, the content provided to the list-item slot will automatically be wrapped in a styled button or link with a correct tabindex. Whether it is a button or a link will be decided based on the provided item prop. If it has href prop - then the link is rendered, and the button is otherwise. When totally custom content is needed, it can be provided to the default slot of the GlDisclosureDropdownItem.

BREAKING CHANGE: It will cause styling and semantic issues in the downstream project. Wherever the list-item slot is used with a button or a inside it wrapping the content, this wrapper button/a needs to be removed. Fortunately, there are only 2 such cases so far.

🗒 I've tried another approach !3261 (closed), but it requires exposing an extra component and users remembering to use it. Having a slot for this is the behavior the devs are used to.

Here is the integration MR. We have only one instance that was affected so far.

Here is another MR, which implements user menu in the super sidebar and uses current package

Closes #2135 (closed)

Fixes the #2134 (closed)

Edited by Olena Horal-Koretska

Merge request reports