fix(card): change prop no-block to no-body (#826)

* fix(card): change no-block to no-body * [card] docs update * [tabs] update documentation * [card] Add slots body and no-body Alternative means to place body and no-body sections * Update meta.json Document body and no-body slots * ESLint * remove body/no-body slots * ESLint * Update meta.json * Update meta.json
bootstrap-vue · Aug 12, 2017 · 664bc98 · 664bc98
1 parent 2e863d9
commit 664bc98
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/docs/components/card/README.md b/docs/components/card/README.md
@@ -18,7 +18,7 @@ Change the default `div` root tag to any other HTML element by specifying via th
           img="https://lorempixel.com/600/300/food/5/"
           img-alt="Image"
           tag="article"
-          style="width: 20rem;"
+          style="max-width: 20rem;"
           class="mb-2">
     <p class="card-text">
       Some quick example text to build on the card title and make up the bulk of the card's content.
@@ -34,29 +34,30 @@ Change the default `div` root tag to any other HTML element by specifying via th
 Cards support a wide variety of content, including images, text, list groups, 
 links and more. Below are examples of what’s supported.
 
-#### Blocks:
-The building block of a card is the `.card-body` section. Use it whenever you need a padded
-section within a card. By default the `<b-card>` content is placed in the block section:
+#### Card Body:
+The building block of a card is the `.card-body` section which provides a padded
+section within a card. By default the `<b-card>` content is placed in the
+`.card-body` section:
 
 ```html
 <b-card class="text-center">
   This is some text within the default card block.
 </b-card>
 
-<!-- card-block-1.vue -->
+<!-- card-body-1.vue -->
 ```
 
-Disable the `.card-body` class (and associated padding) by setting the prop `no-block`.
+Disable the `.card-body` section (and associated padding) by setting the prop `no-body`.
 
 ```html
-<b-card no-block class="text-center">
-  This is some text without the default card block. Notice the lack of padding.
+<b-card no-body class="text-center">
+  This is some text without the default card body section. Notice the lack of padding.
 </b-card>
 
-<!-- card-block-2.vue -->
+<!-- card-body-2.vue -->
 ```
 
-Note that with `no-block` enabled, `title` and `sub-title` will not be rendered.
+Note that with `no-body` enabled, `title` and `sub-title` will not be rendered.
 
 #### Titles, text, and links:
 *Card titles* are adding via the `title` prop, and *sub titles* are added via the
@@ -175,7 +176,7 @@ a fixed-width card.
 
 ```html
 <div>
-  <b-card no-block style="width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image">
+  <b-card no-body style="max-width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image">
     <h4 slot="header">Hello World</h4>
     <div class="card-body">
       <p class="card-text">
@@ -208,7 +209,7 @@ toggling the color of text within, as well as that of the card’s subcomponents
 via the prop `inverse`. Then, specify a dark background variant.
 
 ```html
-<b-card inverse title="Card Title" variant="dark"">
+<b-card  variant="dark" inverse title="Card Title">
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <b-button href="#" variant="primary">Go somewhere</b-button>
 </b-card>

diff --git a/docs/components/card/meta.json b/docs/components/card/meta.json
@@ -14,6 +14,14 @@
     {
       "name": "footer",
       "description": "For custom rendering of footer content"
-    }
+     },
+     {
+       "name": "body",
+       "description": "Optional body section"
+     },
+     {
+       "name": "no-body",
+       "description": "Optional section with-out card-body wrapper"
+     }
   ]
 }
diff --git a/docs/components/tabs/README.md b/docs/components/tabs/README.md
@@ -6,7 +6,7 @@
 <template>
 <div>
   <!-- Tabs with card integration -->
-  <b-card no-block>
+  <b-card no-body>
     <b-tabs small card ref="tabs" v-model="tabIndex">
       <b-tab title="General">
         I'm the first fading tab
@@ -35,7 +35,7 @@
   <br>
   <br>
 
-  <b-card no-block>
+  <b-card no-body>
     <b-tabs card>
       <!-- Render Tabs -->
       <b-tab :title="`Tab ${i}`" v-for="i in tabs" :key="i">
@@ -103,10 +103,12 @@ export default {
 
 ### Cards Integration
 
-Tabs support integrating with bootstrap cards. Just add `card` property. Note that you should add `no-block` prop on `<b-card>` element in order to decorate header.
+Tabs support integrating with bootstrap cards. Just add `card` property. Note
+that you should add `no-body` prop on `<b-card>` element in order to decorate header
+and remove the extra badding
 
 ```html
-<b-card no-block>
+<b-card no-body>
     <b-tabs ref="tabs" v-model="tabIndex" card>
         <b-tab title="Tab 1" active>
             Tab Contents
@@ -130,7 +132,7 @@ If you want to add extra tabs that do not have any content, you can put them in
 ```html
     <b-tabs>
 
-        <!-- Add your tabs here-->
+        <!-- Add your b-tab components here-->
 
         <template slot="tabs">
             <b-nav-item to="#" @click="onClick">Another tab</b-nav-item>

diff --git a/lib/components/card.vue b/lib/components/card.vue
@@ -5,7 +5,7 @@
             <img v-if="img" :src="img" :alt="imgAlt" :class="['card-img', 'img-fluid']">
         </slot>
 
-        <!-- Card Header-->
+        <!-- Card Header -->
         <component v-if="header || $slots['header']"
                    :is="headerTag"
                    :class="['card-header', headerVariant?('bg-'+headerVariant):'', headerClass]"
@@ -15,19 +15,29 @@
             </slot>
         </component>
 
-        <!--Show custom block when no-block prop is set-->
-        <template v-if="noBlock">
+        <!--Show custom block when no-body prop is set -->
+        <template v-if="noBody">
             <slot></slot>
         </template>
 
-        <!-- Card Standard Blocks-->
+        <!-- Card Standard Body-->
         <div :class="blockClass" v-else>
             <h4 v-if="title" :is="titleTag" class="card-title" v-html="title"></h4>
             <h6 v-if="subTitle" :is="subTitleTag" class="card-subtitle mb-2 text-muted" v-html="subTitle"></h6>
             <slot></slot>
         </div>
 
-        <!-- Card Footer-->
+        <!--Alternative method to get a no-body section -->
+        <slot name="no-body"></slot>
+
+        <!--Alternative method to get a body section -->
+        <template v-if="$slots['body']">
+            <div class="card-body">
+                <slot name="body"></slot>
+            </div>
+        </template>
+
+        <!-- Card Footer -->
         <component v-if="footer || $slots['footer']"
                    :is="footerTag"
                    :class="['card-footer', footerVariant?('bg-'+footerVariant):'', footerClass]"
@@ -120,7 +130,7 @@
                 default: 'div'
             },
 
-            // Main block
+            // Main body
             title: {
                 type: String,
                 default: null
@@ -137,7 +147,7 @@
                 type: String,
                 default: 'h6'
             },
-            noBlock: {
+            noBody: {
                 type: Boolean,
                 default: false
             },