Permalink
Browse files

feat(dropdown): Optionally hide the dropdown toggle caret (#1197)

* feat(dropdown):optionally hide the dropdown toggle

allow the dropdown toggle to be hidden when the dropdown is not set to
split. Useful for when the dropdown is just an icon

* rename hide-toggle to no-caret

* switch docs <icon> to unicode emoji

* Add sr-only text for aria accessibility in hidden caret example
  • Loading branch information...
jon-walton authored and tmorehouse committed Oct 14, 2017
1 parent 485adbf commit 960877c3bbf264631a607677dabeef1fec6cc6cd
@@ -188,6 +188,27 @@ Create a split dropdown button, where the left button provides standard
<!-- dropdown-split.vue -->
```
## Hidden Caret
The dropdown can be created with the caret hidden by setting the `no-caret` prop to `true`.
This is useful when the dropdown is to be displayed as an icon.
**Note:** The caret will always be shown when using `split`
```html
<div>
<b-dropdown variant="link" size="lg" no-caret>
<template slot="button-content">
&#x1f50d;<span class="sr-only">Search</span>
</template>
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
</div>
<!-- dropdown-hidden-toggle.vue -->
```
## Sizing
Dropdowns work with trigger buttons of all sizes, including default and split
@@ -14,8 +14,7 @@
<slot name="button-content"><slot name="text">{{text}}</slot></slot>
</b-button>
<b-button :id="safeId('_BV_toggle_')"
:class="['dropdown-toggle',{'dropdown-toggle-split': split}]"
:class="[{'dropdown-toggle': !noCaret || split},{'dropdown-toggle-split': split}]"
ref="toggle"
:aria-haspopup="split ? null : 'true'"
:aria-expanded="split ? null : (visible ? 'true' : 'false')"
@@ -70,6 +69,10 @@
type: String,
default: null
},
noCaret: {
type: Boolean,
default: false,
},
role: {
type: String,
default: 'menu'
@@ -23,20 +23,36 @@ describe("dropdown", async () => {
it("should open only one dropdown at a time", async () => {
const { app: { $refs } } = window;
const dds = Object.keys($refs).map(ref => $refs[ref].$el);
const dds = Object.keys($refs).map(ref => $refs[ref]);
// Without async iterators, just use a for loop.
for (let i = 0; i < dds.length; i++) {
Array.from(dds[i].children)
.find(node => node.tagName === "BUTTON" && node.classList.contains("dropdown-toggle"))
Array.from(dds[i].$el.children)
.find(node => node.tagName === "BUTTON" && node.id === `${dds[i].safeId()}__BV_toggle_`)
.click();
// Await the next render after click triggers dropdown.
await nextTick();
const openDds = dds.filter(dd => dd.classList.contains("show"));
const openDds = dds.filter(dd => dd.$el.classList.contains("show"));
expect(openDds.length).toBe(1);
}
});
it("should not have a toggle caret when no-caret is true", async () => {
const { app: { $refs } } = window;
const { dd_7 } = $refs;
const toggle = Array.from(dd_7.$el.children).find(node => node.tagName === "BUTTON" && node.id === `${dd_7.safeId()}__BV_toggle_`);
expect(toggle).not.toHaveClass("dropdown-toggle");
});
it("should have a toggle caret when no-caret and split are true", async () => {
const { app: { $refs } } = window;
const { dd_8 } = $refs;
const toggle = Array.from(dd_8.$el.children).find(node => node.tagName === "BUTTON" && node.id === `${dd_8.safeId()}__BV_toggle_`);
expect(toggle).toHaveClass("dropdown-toggle");
});
it('dd-item should render as link by default', async () => {
const {app: {$refs}} = window;
const {dd_6} = $refs;
@@ -67,4 +67,20 @@
<b-dropdown-item-button>button</b-dropdown-item-button>
<b-dropdown-divider></b-dropdown-divider>
</b-dropdown>
<b-dropdown ref="dd_7" text="Dropdown" variant="link" no-caret>
<template slot="button-content">
<span>icon</span>
</template>
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
<b-dropdown ref="dd_8" no-caret split>
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
</div>

0 comments on commit 960877c

Please sign in to comment.