feat(dropdown): optionally hide the dropdown toggle caret

docs/components/dropdown/README.md

@@ -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

lib/components/dropdown.vue

@@ -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'

tests/components/dropdown.spec.js

@@ -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;

tests/fixtures/dropdown/demo.html

@@ -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>