From f44d921b9706e0911a41fcf7edebbd5e2af17e39 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Tue, 10 Oct 2023 21:22:29 -0700 Subject: [PATCH 1/6] v-bind attrs on KIconButton --- lib/buttons-and-links/KIconButton.vue | 1 + 1 file changed, 1 insertion(+) 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" > From 5c05d55646abb1ae1a74459e7f63db9955204f36 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Tue, 10 Oct 2023 21:25:32 -0700 Subject: [PATCH 2/6] KDropdownMenu expose a slot that provides the option as a slot-prop This allows us to pass whatever we want in as the children of the KDropdownMenu --- lib/KDropdownMenu.vue | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue index fc8d51c62..66f9d40bd 100644 --- a/lib/KDropdownMenu.vue +++ b/lib/KDropdownMenu.vue @@ -8,12 +8,16 @@ @close="handleClose" @open="handleOpen" > - + + + From abb8af1f48d74fe7a070a9733167281b00fb6e7d Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Tue, 10 Oct 2023 21:26:07 -0700 Subject: [PATCH 3/6] KDropdownMenu drill `containFocus` prop into UiPopover Rather than defaulting to true, give the user the option here --- lib/KDropdownMenu.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue index 66f9d40bd..a563121eb 100644 --- a/lib/KDropdownMenu.vue +++ b/lib/KDropdownMenu.vue @@ -3,7 +3,7 @@ Date: Thu, 16 Nov 2023 14:40:06 -0800 Subject: [PATCH 4/6] add note in KDropdownMenu about options slot for more complicated menu items --- docs/pages/kdropdownmenu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/kdropdownmenu.vue b/docs/pages/kdropdownmenu.vue index 68c97ebcf..def77fda3 100644 --- a/docs/pages/kdropdownmenu.vue +++ b/docs/pages/kdropdownmenu.vue @@ -7,7 +7,7 @@ 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.

Please see the on the buttons page for more details about how to use with a button, and a code example. From f3c7e42687774a4185873703257c308597ea7dcb Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Thu, 16 Nov 2023 15:05:26 -0800 Subject: [PATCH 5/6] additional documentation updates kdropdownmenu --- docs/pages/kdropdownmenu.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/pages/kdropdownmenu.vue b/docs/pages/kdropdownmenu.vue index def77fda3..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. Additionally, you can customize the appearance and render complex options using the "options" slot. + 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. From c016d7d443e466cd7eec65040dbadac23ad1aae2 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Tue, 28 Nov 2023 14:21:21 -0800 Subject: [PATCH 6/6] CHANGELOG - kdropdownmenu #option slot; drill props in kiconbutton --- CHANGELOG.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) 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]