Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

KDropdown and KIconButton tweaks #465

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

KDropdown and KIconButton tweaks #465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f44d921
v-bind attrs on KIconButton
nucleogenesis Oct 11, 2023
5c05d55
KDropdownMenu expose a slot that provides the option as a slot-prop
nucleogenesis Oct 11, 2023
abb8af1
KDropdownMenu drill `containFocus` prop into UiPopover
nucleogenesis Oct 11, 2023
378ab40
add note in KDropdownMenu about options slot for more complicated men…
nucleogenesis Nov 16, 2023
f3c7e42
additional documentation updates kdropdownmenu
nucleogenesis Nov 16, 2023
c016d7d
CHANGELOG - kdropdownmenu #option slot; drill props in kiconbutton
nucleogenesis Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 13 additions & 2 deletions CHANGELOG.md
View file
Open in desktop
MisRob marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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:** -
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this change would fall into "updated API" products impact category since there are some updates to public facing API for components like a new slot and attributes binding

- **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:** -
Expand All @@ -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]
Expand All @@ -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]
Expand Down
5 changes: 4 additions & 1 deletion docs/pages/kdropdownmenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
25 changes: 18 additions & 7 deletions lib/KDropdownMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -48,6 +52,13 @@
type: Boolean,
default: false,
},
/**
*
*/
containFocus: {
type: Boolean,
default: true,
},
/**
* The position of the dropdown relative to the button
*/
Expand Down
1 change: 1 addition & 0 deletions lib/buttons-and-links/KIconButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down