KDropdown and KIconButton tweaks

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]

docs/pages/kdropdownmenu.vue

@@ -7,7 +7,10 @@
         Implements a dropdown set of options, based on <DocsExternalLink text="Keen's UI Menu" href="https://josephuspaye.github.io/Keen-UI/#/ui-menu" />. See these docs to understand the current implementation of the options object array.
       </p>
       <p>
-        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.
+      </p>
+      <p>
+        The dropdown will typically contain the user's focus while they use the arrow keys to navigate the options. The <code>Tab</code> and <code>Esc</code> keys will close the menu and emit a <code>@close</code> event. The <code>Tab</code> key will pass along the browser event that triggered the close will be emitted by way of a <code>@tab</code> event on the <code>KDropdownMenu</code> which can be useful for managing focus after the menu is closed.
       </p>
       <p>
         Please see the <DocsInternalLink href="/buttons#dropdowns" text="Dropdown section of the Buttons and links page" /> on the buttons page for more details about how to use with a button, and a code example.

lib/KDropdownMenu.vue

@@ -3,17 +3,21 @@
   <UiPopover
     ref="popover"
     :z-index="12"
-    :containFocus="true"
+    :containFocus="containFocus"
     :dropdownPosition="position"
     @close="handleClose"
     @open="handleOpen"
   >
-    <UiMenu 
-      ref="menu" 
-      :options="options" 
-      :hasIcons="hasIcons" 
-      @select="handleSelection" 
-    />
+    <UiMenu
+      ref="menu"
+      :options="options"
+      :hasIcons="hasIcons"
+      @select="handleSelection"
+    >
+      <template #option="{ option }">
+        <slot name="option" :option="option"></slot>
+      </template>
+    </UiMenu>
   </UiPopover>
 
 </template>
@@ -48,6 +52,13 @@
         type: Boolean,
         default: false,
       },
+      /**
+       *
+       */
+      containFocus: {
+        type: Boolean,
+        default: true,
+      },
       /**
        * The position of the dropdown relative to the button
        */

lib/buttons-and-links/KIconButton.vue

@@ -8,6 +8,7 @@
     :type="buttonType"
     :aria-label="ariaLabel"
     text=""
+    v-bind="$attrs"
     v-on="$listeners"
   >
     <!-- if no "position" is passed as a prop, defaults to bottom, as previously -->