fix(dropdown): Use custom CSS for no-caret option #1473 (#2136)

jacobmllr95 · tmorehouse · commit 2eb706f65c1d · 2018-11-04T18:54:38.000-04:00
* fix(dropdown): Use custom CSS for `no-caret` option

* Make dropdown tests pass
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
@@ -0,0 +1,5 @@
+/* See: https://github.com/bootstrap-vue/bootstrap-vue/issues/1473 */
+/* See: https://github.com/twbs/bootstrap/issues/23724 */
+.dropdown-toggle.dropdown-toggle-no-caret:after {
+  display: none !important;
+}
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -3,6 +3,7 @@ import dropdownMixin from '../../mixins/dropdown'
 import stripScripts from '../../utils/strip-scripts'
 import bButton from '../button/button'
 
+import './dropdown.css'
 // Needed when dropdowns are inside an input group
 import '../input-group/input-group.css'
 
@@ -163,9 +164,10 @@ export default {
     },
     toggleClasses () {
       return [
+        'dropdown-toggle',
         {
-          'dropdown-toggle': !this.noCaret || this.split,
-          'dropdown-toggle-split': this.split
+          'dropdown-toggle-split': this.split,
+          'dropdown-toggle-no-caret': this.noCaret && !this.split
         },
         this.toggleClass
       ]
diff --git a/src/components/dropdown/dropdown.spec.js b/src/components/dropdown/dropdown.spec.js
@@ -41,22 +41,22 @@ describe('dropdown', async () => {
     });
 */
 
-  it('should not have a toggle caret when no-caret is true', async () => {
+  it('should have "dropdown-toggle-no-caret" class when no-caret is true', async () => {
     const { app: { $refs } } = window
     const { dd_7 } = $refs // eslint-disable-line camelcase
 
     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')
+    expect(toggle).toHaveClass('dropdown-toggle-no-caret')
   })
 
-  it('should have a toggle caret when no-caret and split are true', async () => {
+  it('should not have "dropdown-toggle-no-caret" class when no-caret and split are true', async () => {
     const { app: { $refs } } = window
     const { dd_8 } = $refs // eslint-disable-line camelcase
 
     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')
+    expect(toggle).not.toHaveClass('dropdown-toggle-no-caret')
   })
   /*
   it('boundary set to viewport should have class position-static', async () => {
