From f61a6375357496d828fa9ddf2ef297974216e750 Mon Sep 17 00:00:00 2001
From: Ze Yu <angzeyu@gmail.com>
Date: Wed, 5 Feb 2020 01:47:47 +0800
Subject: [PATCH] Enhance box component heading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Box headings are anchored to the top right corner of the box.
Such a heading style causes the box content to overflow at times.

Using the new seamless option with the light option causes unintended
output as well.

Let’s enhance the box component heading style, using a separate top
horizontal section instead, fixing the content overflow.

In addition, let’s support markdown parsing for the header, which pairs
Nicely with the new support for various icon sizes.

Lastly, let’s give the light option priority over the seamless option if
both options are mistakenly used.
---
 src/TipBox.vue | 138 ++++++++++++++++++++++++++++++++++---------------
 1 file changed, 96 insertions(+), 42 deletions(-)

diff --git a/src/TipBox.vue b/src/TipBox.vue
index e64c1917..3021ff91 100644
--- a/src/TipBox.vue
+++ b/src/TipBox.vue
@@ -1,25 +1,38 @@
 <template>
-    <div class="alert container" :class="[boxStyle, addClass, lightStyle, seamlessStyle]" :style="customStyle">
-        <div v-if="!isDefault" class="icon-wrapper" :class="[iconStyle]">
-            <slot name="_icon">
-                <span v-html="iconType"></span>
-            </slot>
+    <div class="alert box-container" :class="[boxStyle, addClass, lightStyle, seamlessStyle]" :style="customStyle">
+        <div v-if="headerBool" :class="['box-header-wrapper', { 'alert-dismissible': dismissible }]">
+            <div v-show="!isDefault" class="icon-wrapper" :class="[iconStyle]">
+                <slot name="_icon">
+                    <span v-html="iconType"></span>
+                </slot>
+            </div>
+            <div class="box-header">
+                <slot name="_header"></slot>
+            </div>
+            <button v-show="dismissible" type="button" class="close close-with-heading" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
         </div>
-        <div v-if="isSeamless" class="vertical-divider" :class="[boxStyle]"></div>
-        <div class="contents" :class="[fontBlack, seamlessStyle]">
-            <h6 v-if="headerContent" class="heading">{{ headerContent }}</h6>
-            <button v-if="dismissible" type="button" class="close dismiss-button" data-dismiss="alert" aria-label="Close">
+        <div v-if="horizontalDividerBool" class="horizontal-divider" :class="boxStyle" aria-hidden="true"></div>
+        <div :class="['box-body-wrapper', { 'alert-dismissible': dismissible && !headerBool, 'box-body-wrapper-with-heading': headerBool }]">
+            <div v-show="!isDefault && !headerBool" class="icon-wrapper" :class="[iconStyle]">
+                <slot name="_icon">
+                    <span v-html="iconType"></span>
+                </slot>
+            </div>
+            <div v-if="verticalDividerBool" class="vertical-divider" :class="boxStyle" aria-hidden="true"></div>
+            <div class="contents" :class="[fontBlack, seamlessStyle]">
+                <slot></slot>
+            </div>
+            <button v-show="dismissible && !headerBool" type="button" class="close" data-dismiss="alert" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
             </button>
-            <slot></slot>
         </div>
     </div>
 </template>
 
 <script>
 
-  import { toBoolean } from './utils/utils';
-
   export default {
     props: {
       dismissible: {
@@ -58,18 +71,10 @@
         type: String,
         default: ''
       },
-      heading: {
-        type: String,
-        default: null,
-      },
       light: {
         type: Boolean,
         default: false,
       },
-      header: {
-        type: String,
-        default: null,
-      },
       seamless: {
         type: Boolean,
         default: false,
@@ -80,10 +85,16 @@
         return this.type === 'none'
       },
       isSeamless() {
-        return toBoolean(this.seamless);
+        return !this.light && this.seamless;
+      },
+      verticalDividerBool() {
+        return this.isSeamless && !this.headerBool;
+      },
+      horizontalDividerBool() {
+          return this.isSeamless && this.headerBool;
       },
-      headerContent() {
-        return this.header || this.heading;
+      headerBool() {
+        return this.$slots._header;
       },
       boxStyle() {
         switch (this.type) {
@@ -104,21 +115,21 @@
       },
       lightStyle() {
         if (this.light) {
-            switch (this.type) {
+          switch (this.type) {
             case 'warning':
-                return 'border-warning text-warning alert-border-left';
+              return 'border-warning text-warning alert-border-left';
             case 'info':
             case 'definition':
-                return 'border-info text-info alert-border-left';
+              return 'border-info text-info alert-border-left';
             case 'success':
             case 'tip':
-                return 'border-sucess text-success alert-border-left';
+              return 'border-success text-success alert-border-left';
             case 'important':
             case 'wrong':
-                return 'border-danger text-danger alert-border-left';
+              return 'border-danger text-danger alert-border-left';
             default:
-                return '';
-            }
+              return 'alert-border-left';
+          }
         }
         return '';
       },
@@ -140,7 +151,7 @@
         return style;
       },
       seamlessStyle() {
-        if (this.seamless) {
+        if (this.isSeamless) {
           return 'seamless';
         }
         return '';
@@ -182,14 +193,33 @@
 </script>
 
 <style scoped>
-    .container {
+    .box-container {
+        width: 100%;
+        padding: 0;
+        border-radius: 6px;
+    }
+
+    .box-header-wrapper {
         display: flex;
         flex-direction: row;
+        align-items: center;
         width: 100%;
-        border-radius: 6px;
+        padding: 0.28em 1.25rem;
+        border-radius: 6px 6px 0 0;
     }
 
-    .container.seamless {
+    .box-body-wrapper {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        padding: 0.75rem 1.25rem;
+    }
+
+    .box-container.seamless > .box-body-wrapper {
+        padding: 0.75rem 0.5rem;
+    }
+
+    .box-container.seamless {
         background-color: transparent;
         border-color: transparent;
     }
@@ -207,14 +237,16 @@
         margin: -13px -27px 0 15px;
     }
 
-    .dismiss-button {
-        position: relative;
-        top: -2px;
-        clear: right;
-        color: inherit;
-        height: 100%;
-        margin-right: -6px;
-        margin-left: 21px;
+    .box-body-wrapper-with-heading {
+        padding-top: 0.5rem;
+    }
+
+    .alert-dismissible {
+        padding-right: 4rem;
+    }
+
+    .box-header {
+        font-weight: 500;
     }
 
     .icon-wrapper {
@@ -222,6 +254,15 @@
         margin-right: .5em;
     }
 
+    .close-with-heading {
+        top: auto;
+        padding: 0 1.25rem;
+    }
+
+    .close-with-heading > span {
+        vertical-align: text-top;
+    }
+
     .contents {
         padding: 0 6px;
         width: 100%;
@@ -250,4 +291,17 @@
     .vertical-divider {
         width: 4px;
     }
+
+    .horizontal-divider {
+        margin: 0 auto;
+        width: calc(100% - 2.5rem);
+        height: 3px;
+    }
+</style>
+
+<!-- TODO move this once we upgrade vue-loader version for scoped deep selectors -->
+<style>
+    div.box-header > * {
+        margin-bottom: 0;
+    }
 </style>