feat(tabs): new named slot tabs-start for prepending tab buttons, d…

…eprecates `tabs` slot in favour of `tabs-end` (closes #3678) (#3679)
bootstrap-vue · Jul 12, 2019 · 0b5f552 · 0b5f552
1 parent fc3860f
commit 0b5f552
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
@@ -287,13 +287,16 @@ Fade is enabled by default when changing tabs. It can disabled with `no-fade` pr
 
 ## Add tabs without content
 
-If you want to add extra tabs that do not have any content, you can put them in `tabs` slot:
+<span class="badge badge-wanting small">CHANGED in v2.0.0-rc.27</span>
+
+If you want to add extra tabs that do not have any content, you can put them in `tabs-start` or
+`tabs-end` slot(s):
 
 ```html
 <div>
   <b-tabs>
     <!-- Add your b-tab components here -->
-    <template slot="tabs">
+    <template slot="tabs-end">
       <b-nav-item href="#" @click="() => {}">Another tab</b-nav-item>
       <li class="nav-item align-self-center">Plain Text</li>
     </template>
@@ -303,9 +306,14 @@ If you want to add extra tabs that do not have any content, you can put them in
 <!-- b-tabs-item-slot.vue -->
 ```
 
+Use the `tabs-start` slot to place extra tab buttons before the content tab buttons, and use the
+`tabs-end` slot to place extra tab buttons after the content tab buttons.
+
 **Note:** extra (contentless) tab buttons should be a `<b-nav-item>` or have a root element of
 `<li>` and class `nav-item` for proper rendering and semantic markup.
 
+**DEPRECATION:** The `tabs` slot has been deprecated. please use the `tabs-end` slot instead.
+
 ## Add custom content to tab title
 
 If you want to add custom content to tab title, like HTML code, icons, or another non-interactive
@@ -466,7 +474,7 @@ order to use these methods.
 <!-- b-tabs-controls.vue -->
 ```
 
-### Dynamic tabs + tabs slot
+### Dynamic tabs + tabs-end slot
 
 ```html
 <template>
@@ -482,7 +490,7 @@ order to use these methods.
         </b-tab>
 
         <!-- New Tab Button (Using tabs slot) -->
-        <template slot="tabs">
+        <template slot="tabs-end">
           <b-nav-item @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
         </template>
 

diff --git a/src/components/tabs/package.json b/src/components/tabs/package.json
@@ -35,9 +35,17 @@
           }
         ],
         "slots": [
+          {
+            "name": "tabs-start",
+            "description": "Additional tab buttons without tab content placed before content tab buttons"
+          },
+          {
+            "name": "tabs-end",
+            "description": "Additional tab buttons without tab content placed after content tab buttons"
+          },
           {
             "name": "tabs",
-            "description": "Additional tab buttons without tab content"
+            "description": "Deprecated. Use 'tabs-end' instead. Additional tab buttons without tab content."
           },
           {
             "name": "empty",

diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -651,7 +651,11 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
           small: this.small
         }
       },
-      [buttons, this.normalizeSlot('tabs')]
+      [
+        this.normalizeSlot('tabs-start') || h(false),
+        buttons,
+        this.normalizeSlot('tabs-end') || this.normalizeSlot('tabs') || h(false)
+      ]
     )
     nav = h(
       'div',