diff --git a/CHANGELOG.md b/CHANGELOG.md index a12a944e4..cf45bbb92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 2.0.0 +- [#465] + - **Description:** KDropdownMenu improvements & bind $attrs in KIconButton + - **Products impact:** - + - **Addresses:** - + - **Components:** KDropdownMenu, KIconButton + - **Breaking:** no + - **Impacts a11y:** yes + - **Guidance:** The KIconButton simply allows you to ensure that attrs you bind to it will be applied to the resulting button itself (ie, tabindex). KDropdownMenu now exposes a #option slot. This slot exposes the current option so a template snippet can be passed here to customize the display of items in the menu. This could also be used to show a list of checkboxed items or perhaps a KCircularLoader next to an item. + + [#465]: https://github.com/learningequality/kolibri-design-system/pull/465 + - [#478] - **Description:** Changed _dev-only to dev-only - **Products impact:** - @@ -15,7 +26,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** no - **Impacts a11y:** no - **Guidance:** - - + [#478]: https://github.com/learningequality/kolibri-design-system/pull/478 - [#482] @@ -26,7 +37,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** no - **Impacts a11y:** no - **Guidance:** - - + [#482]: https://github.com/learningequality/kolibri-design-system/pull/482 - [#464] diff --git a/docs/pages/kdropdownmenu.vue b/docs/pages/kdropdownmenu.vue index 68c97ebcf..e4fb30e24 100644 --- a/docs/pages/kdropdownmenu.vue +++ b/docs/pages/kdropdownmenu.vue @@ -7,7 +7,10 @@ Implements a dropdown set of options, based on . See these docs to understand the current implementation of the options object array.

- Notable possible for configuring the menu include: icons, text, secondary text, and dividers. + Notable possible for configuring the menu include: icons, text, secondary text, and dividers. Additionally, you can customize the appearance and render complex options using the "options" slot and its associated slot-props. +

+

+ The dropdown will typically contain the user's focus while they use the arrow keys to navigate the options. The Tab and Esc keys will close the menu and emit a @close event. The Tab key will pass along the browser event that triggered the close will be emitted by way of a @tab event on the KDropdownMenu which can be useful for managing focus after the menu is closed.

Please see the on the buttons page for more details about how to use with a button, and a code example. diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue index fc8d51c62..a563121eb 100644 --- a/lib/KDropdownMenu.vue +++ b/lib/KDropdownMenu.vue @@ -3,17 +3,21 @@ - + + + @@ -48,6 +52,13 @@ type: Boolean, default: false, }, + /** + * + */ + containFocus: { + type: Boolean, + default: true, + }, /** * The position of the dropdown relative to the button */ diff --git a/lib/buttons-and-links/KIconButton.vue b/lib/buttons-and-links/KIconButton.vue index 5e7e98634..afc407eda 100644 --- a/lib/buttons-and-links/KIconButton.vue +++ b/lib/buttons-and-links/KIconButton.vue @@ -8,6 +8,7 @@ :type="buttonType" :aria-label="ariaLabel" text="" + v-bind="$attrs" v-on="$listeners" >