### Problem While working on https://gitlab.com/gitlab-org/customers-gitlab-com/-/issues/10402+ I discovered that the `GlDisclosureDropdown` component and its instructions weren't easily usable. A few issues came up: 1. The [documentation](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-dropdown-disclosure-dropdown--docs) is created in a dynamic manner, making it difficult to decipher what exactly is necessary to get the desired behavior. Most examples are based on a dynamic [`makeBindings`-function](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js#L28-52). Example: https://gitlab.com/gitlab-org/customers-gitlab-com/-/issues/10402#note_2078979772. 1. There is no example for the declarative approach, which is a supported feature 1. You can't set attributes directly in the [`disclosure_dropdown_item.vue`](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/40e75bcf974d81ffb3595ee2035025a79b40e03e/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue#L15-20), but have to create an `object` with attributes to pass. Example: https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/10762/diffs#c7500932b6a3a045a1fc967631c0f40fc46f0207_120_120 1. Text needs to be passed as an attribute instead of it being possible to pass in the default slot. Example: https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/10762/diffs#c7500932b6a3a045a1fc967631c0f40fc46f0207_120_122 1. `variant=small` doesn't work for `GlLink`. This is class is necessary to override the settings: https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/10762/diffs#c7500932b6a3a045a1fc967631c0f40fc46f0207_53_51 1. Test with this component will fail unless a "mock intersection observer" is set up. More context here: https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/10960#note_2135378960 Context: https://gitlab.com/gitlab-org/customers-gitlab-com/-/issues/10402#note_2078979772. ### Proposed solution To improve the situation on the items above, I believe we should do a few updates: 1. Make the [documentation](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-dropdown-disclosure-dropdown--docs) less dynamic, so examples can be copied and used directly. If we want to remove repetitive code, we should make sure it is displayed in full for the example. 1. Add examples of declarative use. This will ensure that it is intuitive to use and thought of, when iterating the component. 1. Following the above, we should update the [`disclosure_dropdown_item.vue`](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/40e75bcf974d81ffb3595ee2035025a79b40e03e/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue#L15-20) to take separate attributes instead of a single prop, `item`, and add a default slot where text (content) is added. 1. Update [`disclosure_dropdown_item.vue`](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/40e75bcf974d81ffb3595ee2035025a79b40e03e/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue), so it works with `variant=small` for `GlLink`. 1. Describe how to test with this component using a "mock intersection observer".